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

Question

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 -%}

Answer 1

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.