Shopify - extract collection information

Question

I am trying to write a shopify section that allows the selection of Collections in the Customise page. I am struggling to understand how to extract the collection information for use in the section's liquid file.

I have read the docs, and tried lot's of different snippets that I have found peppered over the internet, but nothing actually seems to pull the info.

Below is what I currently have

The p tags are me just seeing if there was any output at all, and there is not. The for loop seems to be working as, for the number of collections selected, I get a list item (yay I guess?) - but that's as much magic as I could muster.

<div data-section-id="{{ section.id }}" >
  
  
  <div class="flex-wrapper ignite-collection">
    <ul>
        
      {%- for block in section.blocks -%}
       
      <li>
        
      <a href="{{ collection.url }}">
        <img src="{{ collection.image | img_url: '350x' }}" alt="{{collection.title}}">
        <h4 class="flex-collection-heading">{{ collection.title }}TEXT HEADING</h4>
      </a>

// all of these p tags are left overs from me trying variations of getting info

      <p>collection.image {{collections['flex-collection'].image}}</p>
      <p>collection.image.url {{ collections['flex-collections'].image.url }}</p>
        <p>{{ collections.flex-collection.image.url }}</p>
        <p>{{ collections[settings.flex-collection].url }}</p>
      <p>collection.url {{settings.flex-collection.url}}</p>
      </li>
      
      {%- endfor -%}
   
   </ul>
  </div>
</div>



{% schema %}
{
  "name": "Ignite Collection list",
  "class": "ignite-collection-list-section",
  "max_blocks": 6,
  "settings": [
    {
         "type": "select",
         "id": "justify-content",
         "label": "Justify Content",
         "options": [
           {"value": "flex-start", "label":"Flex Start"},
           {"value": "flex-end", "label":"Flex End"},
           {"value": "center", "label":"Center"},
           {"value": "space-between","label":"Space Between"},
           {"value": "space-around","label":"Space Around"},
           {"value": "space-evenly","label":"Space Evenly"}
          ]
     }
  ],
  "presets": [
    {
      "name": "Ignite Collection list",
      "category": "Collections",
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "id": "flex-collection",
          "type": "collection",
          "label": "Collection"
        }
      
      ]
    }
  ]
}
{% endschema %}

Umberto Fontanazza Umberto Fontanazza · Accepted Answer · 2021-09-29T10:19:21

Inside the for loop, you are using a liquid variable collection which has not been assigned. You need to add as the first line of the for loop something like {% assign collection = collections[block.settings.flex-collection] %}

Tip: you can output the collection as a JSON object to check that the correct assignment was made with something like:

<script>
console.log({{ collection | json }});
</script>

The liquid variable collection after the assignment will reference the corresponding collection object so you need to modify the way you access the fields, say for example you want to output the collection title, you can do: <span>{{ collection.title }}</span>.

You will have to change the following in your code:

{%- for block in section.blocks -%}
  {% unless block.settings.flex-collection %}
    {% continue %}
  {% endunless %}
  {% assign collection = collections[block.settings.flex-collection] %}
  <li>
    <a href="{{ collection.url }}">
      <img src="{{ collection.image | img_url: '350x' }}" 
           alt="{{collection.title}}">
      <h4 class="flex-collection-heading">{{ collection.title }}TEXT HEADING</h4>
    </a>

// all of these p tags are left overs from me trying variations of getting info

      <p>collection.image {{ collection.image }}</p>
      <p>collection.image.url {{ collection.image.url }}</p>
      <p>collection.url {{ collection.url }}</p>
      
  </li>    
{%- endfor -%}

Using a variable is more efficient than looking for the collection object of interest every time you need to access a field of the collection.

Also, you want to skip the current iteration of the for loop if the collection was not set in the block (from the customizer), to do so you can add as the first line of the for loop the following:

{% unless block.settings.flex-collection %}
  {% continue %}
{% endunless %}

Shopify - extract collection information

1 Answers