Share
En las dos primeras partes de esta serie, le presenté la plataforma de comercio electrónico de Shopify, le expliqué sus conceptos clave, discutí cómo se construyen los temas y luego se pasa a una mirada profunda de Liquid, el lenguaje de plantillas de Shopify..
En esta parte final veremos cómo un conocimiento más profundo de Liquid le permitirá hacer sus temas aún más flexibles, lo que le permitirá entregar diseños de tiendas ricos e imaginativos..
Comencemos por ver cómo podemos usar "diseños alternativos" con gran efecto.
Una de las características más poderosas de Liquid es el archivo de diseño que vimos en la primera parte. A menudo describo un archivo de diseño como una "plantilla maestra". Por lo general, este archivo incluirá nuestras declaraciones HTML, marca, navegación y pie de página, esencialmente todos los elementos comunes de nuestro sitio que queremos que aparezcan en cada página..
Todas las páginas renderizadas en un tema de Shopify, a menos que se indique, se basarán en esta plantilla maestra. Por defecto este es el tema.líquido archivo que reside en el diseños carpeta. Nuestras micro plantillas, ubicadas en el plantillas carpeta, se renderizará en el punto en que Shopify se encuentre con el content_for_layout Marcador de posición líquido en nuestro archivo de diseño.
Para refrescar su memoria, aquí hay un ejemplo de archivo de diseño muy básico:
content_for_headershop.name - page_title "screen.css" | asset_url | stylesheet_tag content_for_layout
Como se mencionó en la primera parte, un archivo de diseño en un tema de Shopify debe incluir dos etiquetas de salida líquidas, content_for_header y content_for_layout. Shopify utiliza el primero para agregar el código de análisis y para proporcionar un acceso rápido al área de administración de su tienda. El segundo, content_for_layout, será reemplazado por la plantilla correspondiente de nuestra carpeta de plantillas, por ejemplo, la product.liquid La plantilla se inyectará cuando estemos viendo una página de detalles del producto..
Los diseños son una gran característica y nos ayudan a mantener los temas agradables y secos. Sin embargo, habrá ocasiones en que los elementos de su archivo de diseño predeterminado deban cambiar. Quizás desee crear una página de inicio que no requiera la marca y la navegación "normales". Es posible que pueda lograr los resultados deseados con CSS, pero lo más probable es que desee producir un marcado diferente. Aquí es donde entran en juego los diseños alternativos..
Crear un diseño alternativo es muy sencillo. Lo primero que debe hacer es crear un nuevo archivo y darle un nombre relevante y la .líquido extensión. El nombre del archivo depende de usted. Lo importante es que lo guardes en el diseños carpeta en su directorio de temas. En este archivo puede colocar cualquier HTML que necesite (es decir, declaraciones HTML, CSS, enlaces JS, etc.) junto con los dos marcadores de posición mencionados anteriormente.
Con el fin de utilizar este archivo de diseño, y anular efectivamente el valor predeterminado tema.líquido archivo de diseño, usamos la siguiente sintaxis líquida en cualquiera de las micro plantillas:
% layout "alternative"%
Nota: no necesitas incluir el .líquido extensión. Ahora, cuando Shopify procese la micro plantilla relevante, se procesará con alternativa.líquido como su archivo de diseño.
De la misma manera que podemos dictar diseños específicos para ser aplicados a nuestras micro plantillas, podemos usar la lógica líquida para renderizar diferentes plantillas de productos. Hay varias formas de lograr esto en Liquid: mi método preferido es hacer uso de las manijas de los productos. Si alguna vez has usado WordPress puedes pensar en un mango del producto de la misma manera que un babosa. Aquí hay una URL típica del producto del sitio web A Book Apart para demostrar:
http://www.abookapart.com/products/responsive-web-design
En este ejemplo el mango del producto es diseño web adaptable - El último elemento de la URL. Los identificadores de productos se crean automáticamente cuando usted agrega un producto en el administrador de Shopify y se basa en el nombre que ingresa; Los caracteres en mayúsculas se reemplazan con minúsculas y espacios con guiones. Por supuesto, puede anularlos si necesita.
Por defecto, cada vez que Shopify renderiza una página de detalles del producto, usará el product.liquid micro plantilla Digamos que queremos servir una página de producto diferente solo para que el libro de Ethan realmente lo destaque. Para hacer esto necesitamos hacer un par de cambios en el product.liquid modelo.
El libro Responsive Web Design de Ethan Marcotte en Shopify impulsó el sitio A Book ApartComo el product.liquid La plantilla tiene acceso a todos los datos relacionados con el producto visto actualmente. Podemos formular la siguiente pregunta utilizando un líquido. Si declaración:
% if product.handle == "responsive-web-design"% % include "responsive-web-design"% % else% [Código HTML normal para product.liquid] % endif%
Añadiendo en el Si Una declaración, que vimos en la segunda parte de esta serie, podemos controlar qué marcado se representa. En pocas palabras, si el product.handle es igual a "responsive-web-design" que incluye el archivo llamado responsive-web-design.liquid. Sin embargo, si no lo es, simplemente renderizamos el código que ya tenemos en nuestro product.liquid modelo.
Este ejemplo nos introduce a los fragmentos de líquido. Fragmentos viven en el nombre acertadamente fragmentos carpeta y se hace referencia sin el .líquido extensión cuando se utiliza la etiqueta líquida % include%.
Como su nombre lo indica, usando % include% literalmente incluirá una pieza de código en su plantilla de micro o archivo de diseño. En el ejemplo anterior, el archivo contendría el marcado alternativo requerido para mostrar el libro de Ethan que incluye todo el código Liquid necesario para reunir los datos sobre el producto en la plantilla.
Por supuesto, puede especificar que esta plantilla en particular se use para otro libro además de Ethan's. Aquí hay una forma de lograrlo:
% if product.handle == "responsive-web-design" O product.handle == "design-is-a-job"% % include "responsive-web-design"% % else% [ Código HTML normal para product.liquid] % endif%
En este caso, es posible que desee cambiar el nombre de su fragmento a algo más apropiado, es decir,. product-showcase.liquid.
Vale la pena señalar que no puede anidar carpetas dentro de su directorio de fragmentos de código. En consecuencia, tiendo a prefijar mis archivos con su función:
Accentsconagua
product-responsive-web-design.liquidproduct-showcase.liquidcolecciones-libros.liquidoEl uso de esta convención de nombres facilita mucho la búsqueda de fragmentos, especialmente a medida que aumenta su uso..
Un ejemplo de cómo usé fragmentos de código en el sitio de 8 caras para separar las preocupaciones lógicas Tiendo a usar fragmentos de dos maneras diferentes. En primer lugar, para separar el código en partes manejables, y en segundo lugar para los elementos de una página que necesito reutilizar, como un bloque de paginación.
Como regla general, aquí es cómo decido dónde agregar el código:
Otro truco que he empleado con gran efecto es tratar una micro plantilla como un controlador de vista, una idea que he tomado de muchos de los marcos MVC que he usado. Este podría ser un nuevo concepto para usted, así que echémosle un vistazo con más detalle..
En los ejemplos anteriores, estamos utilizando la lógica líquida para verificar el manejo de un producto en particular en el product.liquid micro plantilla Si la respuesta a nuestra Si La declaración es verdadera. Incluimos un fragmento. De lo contrario, Shopify renderiza el bloque HTML contenido entre % else% y % terminara si % etiquetas.
Para algunos, esto puede parecer un poco desordenado y, con el tiempo, puede ser difícil de leer, especialmente si su valor predeterminado es product.liquid El marcado crece. Para que sea más fácil de administrar, simplemente podemos quitar nuestro marcado predeterminado de la plantilla product.liquid y crear un fragmento para ella. Tiendo a llamar a esto product-default.liquid.
Siguiendo este enfoque, nuestro archivo product.liquid podría ser refaccionado a lo siguiente:
% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % else% % include "product-default"% % endif%
Por supuesto, a medida que crezcan sus necesidades, este archivo podría crecer para incorporar otras comprobaciones y los archivos relevantes incluidos en función de los resultados. Las opciones son ilimitadas..
Vale la pena recordar que no solo los productos que tienen identificadores en Shopify, también lo hacen las colecciones y las páginas. Usando el mismo enfoque para colecciones, podríamos hacer lo siguiente en nuestro colecciones.líquido modelo:
% if collection.handle == "css"% % include "collection-css"% % else% % include "collection-default"% % endif%
caso En lugar de si elsif más Este método funciona muy bien si solo queremos comprobar un identificador en particular, ya sea un producto o una colección, pero ¿qué pasa si queremos extenderlo a múltiples productos o colecciones??
Tenemos dos enfoques posibles, el primero es extender nuestra Si declaración utilizando elsif. Aquí hay un ejemplo:
% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % elsif product.handle == "design-is-a-job"% % include "product-design-is-a-job"% % else% % include "product-default"% % endif%
Este ejemplo verifica dos identificadores de productos a su vez y solo si ninguno de los dos es verdadero, representará el product-default.liquid retazo.
Es posible utilizar múltiples elsif Declaraciones en Liquid pero puede llegar a ser un poco verbosa. Una alternativa, y creo que un enfoque más ordenado es utilizar caso. Aquí está el ejemplo de arriba refactorizado:
% case product.handle% % cuando "responsive-web-design"% % include "product-responsive-web-design"% % when "design-is-a-job"% % incluya "product-design-is-a-job"% % else% % include "product-default"% % endcase%
También podemos hacer una comparación más confusa usando el operador Liquid contiene. Digamos que queremos que cualquier producto que tenga la palabra responsive en su asa use un fragmento de código diferente. Así es como podríamos abordarlo utilizando un líquido simple. Si declaración:
% si product.handle contiene "responsive"% % include "product-responsive"% % else% % include "product-default"% % endif%
Usar este método significaría que no tendríamos que editar nuestra plantilla para agregar un nuevo elsif o caso para otros libros que contengan "responsive" en su título.
Estos enfoques también se pueden utilizar dentro de las micro plantillas de su tema. Por ejemplo, podría usarlo para mostrar y ocultar elementos mediante programación. Ejemplos de esto podrían ser los distintivos de venta, ofertas especiales y productos relacionados..
Las asas también pueden ser muy útiles cuando se trabaja con CSS y JavaScript. Muchos de nosotros usamos la clase de cuerpo para los enlaces de CSS y JavaScript y, al igual que en WordPress, es bastante fácil agregar varias clases útiles a nuestro elemento de cuerpo en Shopify.
Aqui hay algunas ideas:
Agregue el nombre de la plantilla renderizada actualmente a la clase de cuerpo:
Tenga en cuenta que estamos utilizando el filtro de manejo para desinfectar nuestra salida. Algunos ejemplos de esto en acción son:
Sobre esta base, es posible que también deseamos agregar el control del producto actual a nuestra clase de cuerpo. Para mantener las cosas ordenadas y ordenadas podemos usar un Si Declaración para agregar condicionalmente el identificador del producto solo cuando estamos viendo un producto:
La configuración de los temas, una vez dominada, es una característica increíblemente poderosa de los temas de Shopify 
El editor de temas de escritorio de Shopify para Mac permite una sincronización de archivos inigualable entre su sistema de archivos local y su tienda 