OmbuShop Crea Tu Tienda Online

Ejemplos de Liquid

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Todas las tiendas sobre OmbuShop pueden modificar las partes más importantes de su diseño. Pueden administrar el CSS y el HTML de toda la tienda.

Las únicas páginas que no se pueden modificar son las del carrito de compras y las de checkout.

Para modificar el HTML de alguna página, es necesario administrar los templates en la sección de Diseño y seguir las instrucciones que figuran en nuestra API para diseñadores.

Aquí voy a mostrar algunos ejemplos de cosas que se pueden hacer con el lenguaje de templates que utilizamos: Liquid.

Voy a modificar los templates show.liquid (página de producto) e index.liquid (página con listado de productos) para mostrar ciertos elementos según ciertas condiciones.

Destacar que un producto está agotado

Para cada uno de los productos que vendemos, sabemos si tiene stock o no. Si queremos mostrar una etiqueta justo debajo de la imagen del producto, podemos modificar el archivo show.liquid así:

Si el producto no tiene stock, se mostrará el elemento span con clase agotado. Luego puedo darle el estilo que quiera agregando una regla más a mis archivos de CSS.

Destacar un producto sólo si se encuentra dentro de una categoría

Si quiero darle más importancia a ciertos productos, puedo incluirlos dentro de una categoría especial. Por ejemplo: La categoría “Envío Gratis”

Luego puedo chequear si el producto está dentro de esa categoría para mostrar el título con otro tamaño.

Aquí puedes ver la documentación del filtro has_category?: http://www.ombushop.com/design-api/Liquid/Product.html#has_category?-instance_method

A diferencia del ejemplo anterior, este código utiliza un “filtro” con el caracter “|”. Aquí puedes leer un poco más sobre filtros comunes en Liquidhttps://github.com/Shopify/liquid/wiki/ES-Liquid-para-dise%C3%B1adores#salida-de-texto-avanzada-filtros

Aquí puedes encontrar los filtros estándar.

Destacar la búsqueda para ciertas palabras clave

En este ejemplo nuevamente usaremos un filtro estándar llamado contains. Esta función nos dice si una cadena de caracteres contiene a otra cadena de caracteres.

Con dicho código, ¡mostraremos una sección que dice que todas las camisas dentro de mi tienda esta semana tienen descuento!

Conclusión

Liquid es un template muy potente que te permite mostrar elementos HTML; agregar o quitar clases de CSS a un elemento; u ocultar elementos HTML cuando se den las condiciones esperadas.

Puedes utilizarlo fácilmente para personalizar la vista según los atributos de un Producto, de una Categoría o de una Variante. Para ver toda la información disponible para dichas customizaciones, puedes ver nuestra API para Diseñadores Web.

 

 

Tags: , , , , ,