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.