Mostrar el rango de inicio y final de objetos con Liquid en un sitio estático de Jekyll.
Tengo una lista de ‘productos’
Están estructurados de esta manera:
Tienen un producto que actúa como padre: “producto 1”
y luego tienen múltiples variaciones de ese padre “producto 1-pequeña”, “producto 1-media”, “producto 1-grande” etc.
pero el número de variaciones varía, un producto puede tener 2 variaciones, otro puede tener 5.
Quiero mostrarlos de esta manera:
Producto 1
pequeña – grande
producto 2
pequeña – x-grande
¿Cómo debería hacer esto en liquid en un sitio estático de Jekyll?
Puede ver mi sitio web y la página a la que me refiero aquí:
https://kostasgogas.com/shop/art/prints/new-media-vector/abstract/
Donde el problema es evidente en el precio y el tamaño de cada producto.
Este es un ejemplo de mi data.yml:
- id: 'primer-arte'
type: variable
- id: 'primer-arte-pequeña'
type: variación
posición: 1
precio: '10'
padre: 'primer-arte'
- id: 'primer-arte-mediana'
type: variación
posición: 2
precio: '20'
padre: 'primer-arte'
- id: 'primer-arte-grande'
type: variación
posición: 3
precio: '30'
padre: 'primer-arte'
- id: 'segundo-arte'
type: variable
- id: 'segundo-arte-pequeña'
type: variación
posición: 1
precio: '10'
padre: 'segundo-arte'
- id: 'segundo-arte-mediana'
type: variación
posición: 2
precio: '20'
padre: 'segundo-arte'
- id: 'segundo-arte-grande'
type: variación
posición: 3
precio: '30'
padre: 'segundo-arte'
- id: 'segundo-arte-x-grande'
type: variación
posición: 4
precio: '40'
padre: 'segundo-arte'
El líquido es el siguiente (actualmente contando hasta 3 variaciones porque no sé cómo hacerlo):
{%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
{%- if printart.type == "variable" -%}
<h3>
{{ printart.id }}
</h3>
<div>
{%- for variation in site.data.products-prints -%}
{%- if variation.parent == printart.id -%}
{%- if variation.position == "1" -%}
€{{ variation.price }}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
—
{%- for variation in site.data.products-prints -%}
{%- if variation.parent == printart.id -%}
{%- if variation.position == "3" -%}
€{{ variation.price }}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{%- endfor -%}
davy.ai
Para mostrar la lista de productos y sus variaciones en el formato deseado, puedes utilizar el siguiente código Liquid:
Este código recorrerá los productos de tu archivo
data.yml
y comprobará si el producto es un padre (type == "variable"
). Si lo es, contará el número de variaciones que tiene este padre recorriendo los productos de nuevo y comprobando si tienen el mismo ID de padre. Esto se hace mediante la función Liquidassign
para crear una variablenum_variations
que cuenta el número de variaciones.Luego, vuelve a recorrer los productos y comprueba si tienen el mismo ID de padre. Para cada variación, muestra el precio y añade un guión
-
si no es la última variación. Esto se hace utilizando una declaraciónif
que comprueba si la posición de la variación actual no es igual al número de variaciones.Este código debería mostrar los productos y sus variaciones como este ejemplo:
Ten en cuenta que es posible que debas modificar el código Liquid para que coincida con la estructura exacta de tu archivo
data.yml
y el HTML de tu sitio web.