Looping through collection doesnt load data

Store Design
,
1

Hi Everyone,

I’m trying to loop through a collection list but it doesn’t show the image because it thinks the source is empty.
Does anybody see the bug in the code?

{% style %}
    /* Style for the image grid */
  .collection-grid-{{ section.id }} {

  }
  /* Container styles */
  .collection-grid-{{ section.id }} .page-width {
    padding: 0;
    padding-top: {{section.settings.padding_top}}px;
    padding-bottom: {{section.settings.padding_bottom}}px;

    margin-top: {{section.settings.margin_top}}px;
    margin-bottom: {{section.settings.margin_bottom}}px;

    border-top: {{section.settings.border_width_top}}px solid {{section.settings.border_color_top}};
    border-bottom: {{section.settings.border_width_bottom}}px solid {{section.settings.border_color_bottom}};
  }

    @media screen and (max-width: 1180px) and (orientation: portrait), screen and (max-width: 1024px) {}
    @media screen and (max-width: 1180px) and (orientation: portrait) {}
    @media screen and (max-width: 1180px) and (orientation: landscape) {}

    @media screen and (max-width: 767px) {}
{% endstyle %}

<div class="container collection-grid-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="page-width">
    {% for block in section.blocks %}
      {%- case block.type -%}
        {%- when 'heading' -%}
          {% style %}
            /* Style for the image grid */
            .collection-grid-{{ section.id }} .title-{{ block.id }} {
              font-size: {{ block.settings.font-size-desktop }}px;
              line-height: {{ block.settings.line-height-desktop }}px;
              color: {{ block.settings.text-color }};
              text-align: {{ block.settings.text-align }};
              margin-block-start: 0;
              margin-block-end: 0;
            }

            @media screen and (max-width: 1180px) and (orientation: portrait), screen and (max-width: 1024px) {
              .collection-grid-{{ section.id }} .title-{{ block.id }} {
                font-size: {{ block.settings.font-size-tablet }}px;
                line-height: {{ block.settings.line-height-tablet }}px;
              }
            }

            @media screen and (max-width: 767px) {
              .collection-grid-{{ section.id }} .title-{{ block.id }} {
                font-size: {{ block.settings.font-size-mobile }}px;
                line-height: {{ block.settings.line-height-mobile }}px;
              }
            }
          {% endstyle %}

          <h2 class="title-{{ block.id }}">{{ block.settings.text }}</h2>
        {%- when 'collection-list' -%}
          {% for collection in collections %}
            <div class="collection">
              <a href="{{ collection.url }}">
                <img src="{{ collectiion.image.src }}" alt="{{ collection.title }}">
                <h3>{{ collection.title }}</h3>
                <p>{{ collection.description }}</p>
              </a>
            </div>
          {% endfor %}
      {%- endcase -%}
    {% endfor %}
  </div>
</div>

{% schema %}
{
   "name":"Collection list",
   "tag":"section",
   "class":"section",
   "settings":[
      {
         "type":"range",
         "id":"padding_top",
         "min":0,
         "max":99,
         "step":3,
         "unit":"px",
         "label":"Padding top",
         "default":60
      },
      {
         "type":"range",
         "id":"padding_bottom",
         "min":0,
         "max":99,
         "step":3,
         "unit":"px",
         "label":"Padding bottom",
         "default":60
      },
     {
         "type":"range",
         "id":"margin_top",
         "min":0,
         "max":99,
         "step":3,
         "unit":"px",
         "label":"Margin top",
         "default":0
      },
      {
         "type":"range",
         "id":"margin_bottom",
         "min":0,
         "max":99,
         "step":3,
         "unit":"px",
         "label":"Margin bottom",
         "default":0
      }
   ],
   "blocks":[
      {
         "type":"heading",
         "name":"Heading",
         "settings":[
            {
               "type":"text",
               "id":"text",
               "label":"heading"
            },
            {
               "type":"select",
               "id":"text-align",
               "options":[
                  {
                     "value":"left",
                     "label":"Left"
                  },
                  {
                     "value":"center",
                     "label":"Center"
                  },
                  {
                     "value":"right",
                     "label":"Right"
                  }
               ],
               "default":"left",
               "label":"Text align"
            },
            {
               "type":"range",
               "id":"font-size-desktop",
               "min":0,
               "max":200,
               "step":2,
               "unit":"px",
               "label":"Font size (desktop)",
               "default":36
            },
            {
               "type":"range",
               "id":"line-height-desktop",
               "min":0,
               "max":200,
               "step":2,
               "unit":"px",
               "label":"Line height (desktop)",
               "default":48
            },
            {
               "type":"color",
               "id":"text-color",
               "label":"Text color",
               "default":"#d4b2a6"
            },
            {
               "type":"range",
               "id":"font-size-tablet",
               "min":0,
               "max":200,
               "step":2,
               "unit":"px",
               "label":"Font size (tablet)",
               "default":36
            },
            {
               "type":"range",
               "id":"line-height-tablet",
               "min":0,
               "max":200,
               "step":2,
               "unit":"px",
               "label":"line-height (tablet)",
               "default":48
            },
            {
               "type":"range",
               "id":"font-size-mobile",
               "min":0,
               "max":200,
               "step":2,
               "unit":"px",
               "label":"Font size (mobile)",
               "default":36
            },
            {
               "type":"range",
               "id":"line-height-mobile",
               "min":0,
               "max":200,
               "step":2,
               "unit":"px",
               "label":"line-height (mobile)",
               "default":48
            }
         ]
      },
      {
         "type":"collection-list",
         "name":"Collection list",
         "settings":[
            {
              "type": "collection_list",
              "id": "collection_list",
              "label": "Collections",
              "limit": 8
            }
         ]
      }
   ],
   "presets":[
      {
         "name":"Collection grid",
         "category":"column"
      }
   ]
}
{% endschema %}

It the small html code after {%- when ‘collection-list’ -%}.

Kind regards
Mathijs

2

hello @MathijsB

Replace line at
3

Typo?

collectiion.image.src
4

Hi Tim,

Thanks for the reply!
It is indeed a typo but their seems to be something else wrong with it.

5

Hi Sanju,

Thanks for the reply!
I do het a image not found display on the page right now.

MathijsB_0-1681804015544.png
MathijsB_0-1681804015544.png1263×980 20 KB

This makes me think the collection doesn’t have a photo but i’m sure i did that.

MathijsB_1-1681804048017.png
MathijsB_1-1681804048017.png974×917 138 KB

I select the collections that need to be display on the page with a collection-list.

MathijsB_2-1681804098036.png
MathijsB_2-1681804098036.png300×353 12.1 KB

MathijsB_3-1681804103136.png
MathijsB_3-1681804103136.png306×206 5.34 KB

Do you have any suggestions?

6

Ah, right.

I thought that you’re looping over all collections in the shop, this is what

{% for collection in collections %}

will do.

In your case, this should be

{% for collection in block.settings.collection_list %}

And finally, you can’t directly use collection.image.src like this


you need to use a filter

```markup
7

Hi Tim,

I was indeed looping over all the collections which is fixed with that adjustment.
the collection.src attribute seems to be empty but the collection.featured_image was the one I needed, with also the filter that you suggested!

Thank you for the help, ill mark you awnser as solution!