4

El siguiente código es para que se me cargue en la página un CSS u otro en dependencia del tema elegido. Este código funciona perfectamente en la página HTML pura, pero cuando lo intento llevar a mi aplicación Symfony no hallo la forma de pasarle al JS la ruta del CSS con Twig.

var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
            {};
            var themeName = themeSettings.themeName || '';
            if (themeName)
            {
                document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
            }
            else
            {
                document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
            }

Es decir yo quiero que en el href de la función document.write se me cargue (por ejemplo) lo que con Twig sería esto:

<link href="{{ asset('bundles/activos/css/app-red.css') }} "rel="stylesheet" >

Donde app- es fijo y lo que varía es la palabra red según el valor de la variable themeName

Para esto he intentado lo siguiente pero no me funciona de esta forma:

 <script>
        var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName)
        {
        document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} ">');
        }
        else
        {
        document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app.css') }} ">');
        }
    </script>

Esto me lanza este error:

Variable "themeName" does not exist in ::base.html.twig at line 1188

Luego intenté hacer esto:

<script>
        var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName)
        {
            var cadenacss = "asset('bundles/activos/css/app-')" ~ themeName ~ '.css">';
                {% set cadena=cadenacss %} 
                   document.write('<link rel="stylesheet" id="theme-style" href="{{ cadena }}">');
        }
        else
        {
        document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app.css') }} ">');
        }
    </script>

Y tampoco funciona, me muestra el siguiente error:

Variable "cadenacss" does not exist in ::base.html.twig at line 1189

No encuentro la forma de hacer esto pasando la variable de JS a Twig. Primero quisiera saber si existe alguna forma de pasar variables de JS a Twig, pero si no sepuede hacer, entonces quisiera saber alguna otra forma de que pueda resolver esto.

1
  • Bueno he googleado un poco y según he entendido creo que lo que debo hacer es pasar dicha variable js (themeName) por ajax para un controlador y de ahí devolverla a la vista a través de twig para poder construir el href con twig. Esa puede ser una forma. Si me pudieran ayudar con esto se los agradeceré, ya que no tengo experiencia con ajax como para hacer esto. Commented el 5 ago. 2016 a las 16:53

3 respuestas 3

2

Pudieras almacenar la variable que te da el tema en una cookie, desde el controller lo puedes hacer, y luego con JavaScript verificas que exista la cookie y obtienes el valor almacenado; en caso de no existir pues estableces un tema por defecto.


Ejemplo práctico de implementación

En el controller de entrada a la aplicación:

public function indexAction(Request $request){
   $miVariable = algo de la base de datos por ejemplo
   $vista = $this->renderView('AppBundle:Default:index.html.twig', array('varible'=$mivaraible));

   $response = new Response($vista);

    $cookieFromRequest = $request->cookies;
    if (!$cookiesFromRequest->has('myAppTheme'))
    {
        $cookieTheme = new \Symfony\Component\HttpFoundation\Cookie("myApptheme", "defaultTheme");
        $response->headers->setCookie($cookieTheme);
    }

    return $response;
}

Y en el JavaScript (adaptándolo al ejercicio actual y para agilizar) usando el pluggin jQuery.cookie, intenta obtener la cookie con nombre myApptheme:

var theme = $.cookie('myApptheme');
if(theme !== null)
{
   document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + theme + '.css">');
}
else
{
   document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
}


Considero que otra solución sería almacenar el tema seleccionado por el usuario en la base de datos (si emplearas base de datos) y, desde el JavaScript, obtener ese valor vía AJAX (puedes auxiliarte del bundle FOSJsRoutingBundle para llamar al controller desde el JavaScript).

Y una tercera solución, pues hacerlo todo desde el javascript: intentar obtener una cookie que contenga el tema, si no existe crearla con el tema por defecto y la consiguiente etiqueta de estilo para el mismo. Y digamos que cuando el usuario selecciona un tema de los propuestos, escribir su nombre en la cookie para utilizarla en otras peticiones.

0
1

Debes colocar directamente en tu template:

 <link href="{{ asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} "rel="stylesheet" >

Y en tu controller debes pasar ese parametro

return $this->render('index.html.twig', array(
    'template' => $template
));

Para este caso no necesitas AJAX, solo necesitas ajax si quieres hacer lo inverso, pasar parametros de Javascript a Symphony

1
  • 1
    Creo que no entendiste bien mi pregunta, respecto a lo que me escribiste: "solo necesitas ajax si quieres hacer lo inverso, pasar parametros de Javascript a Symphony". Eso precisamente es lo que necesito. Me puedes dar un ejemplo de como hacer esto con ajax? Commented el 8 ago. 2016 a las 13:32
1

Debido a que conozco todos los posibles valores que puede tomar la variable themeName, me di cuenta que podía resolver esto de una manera muy sencilla. Aunque con esta variante no estoy pasando ninguna variable desde Javascript a Twig, por lo que no estoy dando respuesta al título de la pregunta, pero sí le doy solución a la problemática planteada.

<script>
   var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
   {};
   var themeName = themeSettings.themeName || '';
   if (themeName)
   {
            if (themeName === "blue")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');
                }
            if (themeName === "custom")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-custom.css') }}" rel="stylesheet" >');
                }
            if (themeName === "green")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-green.css') }}" rel="stylesheet" >');
                }
            if (themeName === "orange")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');
                }
            if (themeName === "purple")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-purple.css') }}" rel="stylesheet" >');
                }
            if (themeName === "red")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-red.css') }}" rel="stylesheet" >');
                }
            if (themeName === "seagreen")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-seagreen.css') }}" rel="stylesheet" >');
                }
  }
    else{
         document.write('<link href="{{ asset('bundles/activos/css/app.css') }}" rel="stylesheet" >');
  }

  </script>

Con ésto pude solucionarlo aunque sigo sin saber como se podría hacer de la otra forma, o sea pasando la variable themeName al Controller y luego devolverla al Twig; para el caso en que no conozca los posibles valores que puede tomar esta variable.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.