Double looping through shopify liquid using VueJS

Question

I am using VueJS to loop through shopify liquid objects as shown below:

items: [
          {% for product in collections['components'].products %}
            {
              title: "{{ product.title }}",
              handle: "{{ product.handle }}",
              image: "{{ product.featured_image | img_url: '400x', scale: 2 }}",
              product_id: "{{ product.id }}",
              variant_id: "{{ product.selected_or_first_available_variant.id }}",
              sku: "{{ product.selected_or_first_available_variant.sku }}",
              price: "{{ product.selected_or_first_available_variant.price | money }}",
              variants: [
                {% for variant in product.variants %}
                  {
                    title: "{{ variant.title }}"
                  },
                {% endfor %}
              ]
            },
          {% endfor %}
        ],

On the variants property I am getting an empty array though I know there are variants or at least one variant for each product. I am suspecting the syntax might be wrong. What could be the issue?

The shopify tags looks fine. Just to be safe, is there any change it's a problem with VueJS delimiters ? — LSE
I would suggest you try to first output those values outside VueJS, just in plain html. If it works, the problem is with Vue. Try changing VueJS delimiters, since it conflicts with the liquid syntax. v3.vuejs.org/api/options-misc.html#compileroptions — LSE

dadidaochieng dadidaochieng · Accepted Answer · 2021-06-26T14:35:43

So after a lot of back and forth, I found out that you don`t need to do another loop inside of the VueJS/Javascript Code. You just need to assign product.variants to the variants property with a json filter as shown below and the variants will be returned in an array as they are already in the result set.

items: [
      {% for product in collections['components'].products %}
        {
          title: '{{ product.title }}',
          handle: '{{ product.handle }}',
          image: '{{ product.featured_image | img_url: "400x", scale: 2 }}',
          product_id: '{{ product.id }}',
          variant_id: '{{ product.selected_or_first_available_variant.id }}',
          sku: '{{ product.selected_or_first_available_variant.sku }}',
          price: '{{ product.selected_or_first_available_variant.price | money }}',
          variants: {{ product.variants | json }}
        },
      {% endfor %}
    ],

This returns the expected result.

And if you wanted all the product information you can simply do

items: [
      {% for product in collections['components'].products %}
        {{ product | json }},
      {% endfor %}
    ],

and this will return the entire product information including the variants.

Double looping through shopify liquid using VueJS

1 Answers