Cómo personalizar una categoría a partir de Twig

Por: Damian Horn
Creado el 17/11/14.
Actualizado el 12/03/15.
3 min de lectura

Índice

    Continuando con nuestra iniciativa de ayudar a nuestros diseñadores a aprender más sobre Twig y cómo usarlo en Tiendanube, hoy les compartimos una sugerencia sobre cómo personalizar la página de categoría desde el diseño.

    Para desarrollar este consejo nos basamos en una pregunta específica de uno de nuestros Socios comerciales:

    “Hola. Soy diseñadora y estoy modificando el html y css del template que quiere mi cliente. Mi problema es que en el diseño original cada categoría tenía una imagen de header diferente. Estuve revisando el código y no encuentro un ID, un class, o algo que tenga el nombre de la categoría para que pueda llamar desde la hoja de estilos…”

    Para implementar esto, se necesita una clase que referencie el nombre de la categoría. Con Twig, eso es así de simple:

    {{ category.handle }}

    En el diseño, esto se va a ver traducido como el nombre de una categoría, por ej: “Anteojos”.

    Entonces, ¿cómo hacer para tener una clase en cada sección que contenga el nombre de esa categoría?

    En primer lugar, los cambios se tienen que realizar sobre templates/category.tpl. El próximo paso es adicionar lo siguiente donde se quiera incluir el banner:

    <div class=”{{ category.handle }}”></div>

    El resultado para la categoría “Anteojos” será :<div class=”anteojos-de-sol”>, y si existiera una categoría “Sombreros”  el resultado sería <div class=”sombreros”>

    Solo resta completar el diseño en el .css:

    .anteojos-de-sol {
    background-image:url(‘img/header_anteojos.png’);
    }
    .sombreros {
    background-image:url(‘img/header_sombreros.png’);
    }

    ¡Listo! Ya puedes diferenciar cada una de tus categorías para facilitar la navegación y personalizar tu plantilla.

    Puedes ver más ejemplos de estas y otras expresiones de Twig visitando nuestra Documentación para Diseñadores o la documentación de Twig (en inglés).

    Si quieres probar lo aprendido, te invitamos a registrarte como Socio comercial para empezar a trabajar con Tiendanube hoy mismo.

    Damian Horn

    Diseñador Gráfico de la Universidad de Buenos Aires con más de 10 años de experiencia diseñando y desarrollando productos digitales. Actualmente es Head of Design en Tiendanube donde lidera al equipo encargado de mejorar la experiencia para los usuarios de la plataforma.


      Registrate gratis

      Recibí artículos sobre marketing y emprendedurismo directamente en tu email.

      Es hora de pasar a la acción

      +15 mil alumnos de la Universidad ya potenciaron sus negocios con Tiendanube.

      Probá 15 días gratis

      Vos también podés hacer crecer tu negocio

      Creá tu tienda online con Tiendanube y como ellos, vendé de manera profesional.

      Honky Tonk - www.honkytonkshop.com
      Unibow - www.unibow.com.ar
      Zaira - www.zairabeauty.com.ar
      Probar 15 días gratis
      cmo-personalizar-una-categora-a-partir-de-twig