es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Mostrar el rango de inicio y final de objetos con Liquid en un sitio estático de Jekyll.

Mostrar el rango de inicio y final de objetos con Liquid en un sitio estático de Jekyll.

17 Jun, 2023 Programación

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 -%}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar la lista de productos y sus variaciones en el formato deseado, puedes utilizar el siguiente código Liquid:

    {%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
  {%- if printart.type == "variable" -%}
    <h3>{{ printart.id }}</h3>
    <div>
      {%- assign num_variations = 0 -%}
      {%- for variation in site.data.products-prints -%}
        {%- if variation.parent == printart.id -%}
          {%- assign num_variations = num_variations | plus:1 -%}
        {%- endif -%}
      {%- endfor -%}
      {%- for variation in site.data.products-prints -%}
        {%- if variation.parent == printart.id -%}
          €{{ variation.price }}
          {%- if variation.position != num_variations -%}
            -
          {%- endif -%}
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}
{%- endfor -%}

    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 Liquid assign para crear una variable num_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ón if 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:

    Producto 1
€10 - €30

Producto 2
€10 - €40

    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.

Comments are closed.