Display START and END range of objects with Liquid in jekyll static site

user_3857721 0
Viewed 54

I have a list of 'products' they are structured like this:
They have a product that act as a parent: "product 1"
and then they have multiple variations of that parent "product 1-small", "product 1-medium", "product 1-large" etc.
but the number of their variations vary, one product may have 2 variations, the other may have 5.

I want to display them like this:

Product 1
small - large

product 2
small - xlarge

how should I do this in liquid on a jekyll static site?

you can view my website and the page I'm referring here:
https://kostasgogas.com/shop/art/prints/new-media-vector/abstract/

where the problem is apparent on the price, and size of each product.

this is an example of my data.yml:

- id: 'first-art'
  type: variable

- id: 'first-art-small'
  type: variation
  position: 1
  price: '10'
  parent: 'first-art'
- id: 'first-art-medium'
  type: variation
  position: 2
  price: '20'
  parent: 'first-art'
- id: 'first-art-large'
  type: variation
  position: 3
  price: '30'
  parent: 'first-art'


- id: 'second-art'
  type: variable

- id: 'second-art-small'
  type: variation
  position: 1
  price: '10'
  parent: 'second-art'
- id: 'second-art-medium'
  type: variation
  position: 2
  price: '20'
  parent: 'second-art'
- id: 'second-art-large'
  type: variation
  position: 3
  price: '30'
  parent: 'second-art'
- id: 'second-art-x-large'
  type: variation
  position: 4
  price: '40'
  parent: 'second-art'

The liquid is as follows (currently counting up to 3 variations because I don't know how to do it):


{%- 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 -%}
static-site jekyll liquid if-statement loops
2 Answers

your problem is the variants and the parent are at the same level, you should fix that setting a variants array inside the parent, after that you can use the filters first and last.

the yaml should looks something like that

products-prints:
  - id: 'first-art'
    type: variable
    name: 'add name and other data of the product'
    variants:
      - id: 'first-art-small'
        name: 'small'
        position: 1
        price: '10'
      - id: 'first-art-medium'
        name: 'medium'
        position: 2
        price: '20'
      - id: 'first-art-large'
        name: 'large'
        position: 3
        price: '30'
  - id: 'second-art'
    type: variable
    name: 'add name and other data of the product'
    variants:
      - id: 'second-art-small'
        name: 'small'
        position: 1
        price: '10'
      - id: 'second-art-medium'
        name: 'medium'
        position: 2
        price: '20'
      - id: 'second-art-large'
        name: 'large'
        position: 3
        price: '30'
      - id: 'second-art-x-large'
        name: 'x-large'
        position: 4
        price: '40'

Now the liquid will be:

{%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
  <h3>
    {{ printart.id }}
  </h3>
  <div>
    <p>
      {{ printart.variants.first.name }} - {{ printart.variants.first.price }}
    </p>
    <p>
      {{ printart.variants.last.name }} - {{ printart.variants.last.price }}
    </p>
  </div>
{%- endfor -%}

now the code will read the first and the last element on your array, if the yaml is on order that should do the trick, is up to you write the file on order. To be extra careful, you can sort the variants array before read it.

user_36002380

Disclaimer: THIS IS A BAD IDEA. The best solution is to refactor your data, but if you can't edit the data this will work.

Without refactoring the YAML data, your app should make more processing each time the page is visited.

{%- assign printartworks = site.data.products-prints -%}
{%- for printart in printartworks -%}
  {%- if printart.type == "variable" -%}
    {% assign variants = '' | split: '' %}
    {%- for variation in site.data.products-prints -%}
      {%- if variation.parent == printart.id -%}
        {% assign variants = variants | concat: variation %}
      {%- endif -%}
    {%- endfor -%}
    {% assign variants = variants | sort: "position" %}
  
    <h3>
      {{ printart.id }}
    </h3>
    <ul>
      <li>
        € {{ variants.first.price }}
      </li>
      <li>
        € {{ variants.last.price }}
      </li>
    </ul>
  {%- endif -%}
{%- endfor -%}
user_36002380
Related