17/11/2014

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

Continuando con nuestra iniciativa de ayudar a nuestros diseñadores a aprender más sobre Twig y cómo usarlo en Tienda Nube, 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 Tienda Nube hoy mismo.

Fecha de la última actualización: 12/03/2015


¿Te gustó el contenido?


Damian Horn

Damián Horn es Diseñador Gráfico de la UBA. Es un apasionado del front-end y también del deporte. Juega al básquet desde los 5 años y no puede pasar una semana sin ver un partido. Forma parte del equipo de Producto de Tienda Nube como UX Designer. @Damian_Horn


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!

    cmo-personalizar-una-categora-a-partir-de-twig