metafields on pages with different areas so they will have different collection recommendations

Solved

metafields on pages with different areas so they will have different collection recommendations

ihs1
Tourist
13 0 3

i have a heating website and i have created pages which talk about different areas where you can use these heaters. therfore each area will have a different collection recommended or sometimes a few collections. i have been told to do this by adding a metafield, which i have created for the pages. however when i go the theme customiser, and select collections list and try to add the dynamic source the metafield does not appear. i am on empire theme. please help

Accepted Solution (1)
WalkYourStyle
Excursionist
213 24 21

This is an accepted solution.

Try this

{% for block in section.blocks %}
  {% assign collection = collections[block.settings.collection] %}
  {% if collection != blank %}
   {% assign collection_title = collection.title %}
   {% assign collection_url = collection.url %}

   {% assign featured_image = false %}
   {% assign featured_image_alt = '' %}

   {% if block.settings.image %}
     {% assign featured_image = block.settings.image %}
     {% assign featured_image_alt = block.settings.image.alt | escape %}
   {% endif %}

   {%
   render 'collection-list-item',
   block: block,
   collection: collection,
   collection_image: featured_image,
   collection_image_alt: featured_image_alt
   %}
  {% endif %}
{% endfor %}

View solution in original post

Replies 14 (14)

WalkYourStyle
Excursionist
213 24 21

Can you please show us an image of the customizer and where you want to dynamically apply the recommended collections ?

ihs1
Tourist
13 0 3
 

ihs1_1-1719804863694.png

 

WalkYourStyle
Excursionist
213 24 21

The reason the metafield you created is not displayed is that the collection list section cannot dynamically connect to the metafield. Only the collection block can dynamically connect to the metafield, and each metafield can only contain one collection.

WalkYourStyle
Excursionist
213 24 21

A solution could be to add a recommended collection list to each page by creating a new page template for each page. Set the number of recommended collections according to the collections metafield associated with that page. Then, connect the template to the page so that the recommended collections can be added dynamically.

 

Check this as well maybe you'll find something:
 https://community.shopify.com/c/technical-q-a/dynamic-number-of-blocks-based-on-metafield-data/m-p/...

WalkYourStyle
Excursionist
213 24 21

Another idea is to set a maximum number of recommended collections for a page, such as 10 in the worst-case scenario. Create 10 metafields, each representing a recommended collection. Connect each collection block to a corresponding recommended collection metafield. For pages that need only 2 recommended collections, fill in 2 metafields and leave the remaining 8 blank. Finally, use Liquid to check if a metafield is blank and, if so, do not display that collection.

ihs1
Tourist
13 0 3

Thank you - i have used the last idea which has worked. however please can you advise how to use custom liquid if a metafield is blank, then it does not display anything

WalkYourStyle
Excursionist
213 24 21

Can you please share you website's URL?

WalkYourStyle
Excursionist
213 24 21

In order to be able to help you with the liquid, I would need you to go to your theme's code, find the 'collection-list.liquid' section in the Sections folder and provide me with an image that contains the liquid code of the 'collection-list.liquid'

ihs1
Tourist
13 0 3

<script
type="application/json"
data-section-id="{{ section.id }}"
data-section-type="dynamic-collection-list">
</script>

<script type="application/pxs-animation-mapping+json">
{
"blocks": [".collection__item"],
"elements": [
".collection__item-info"
]
}
</script>

{% style %}
#shopify-section-{{ section.id }} .collection-list__content {
grid-template-columns: repeat({{ section.settings.thumbnail_columns_desktop }}, minmax(auto, 1fr));
}

@media only screen and (max-width: 860px) {
#shopify-section-{{ section.id }} .collection-list__content {
grid-template-columns: repeat({{ section.settings.thumbnail_columns_mobile }}, minmax(auto, 1fr));
}
}
{% endstyle %}

<section class="collection-list__container">
{% if section.settings.title != blank %}
<h2 class="home-section--title">
{{ section.settings.title | escape }}
</h2>
{% endif %}

{% if section.blocks.size > 0 %}
<ul
class="
home-section--content
collection-list__content
collection--image-crop-{{ section.settings.image-crop }}
{% if section.settings.cta_label == blank %}no-cta{% endif %}
"
data-layout="grid"
>
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
{% assign collection_title = collection.title %}
{% assign collection_url = collection.url %}

{% assign featured_image = false %}
{% assign featured_image_alt = '' %}

{% if block.settings.image %}
{% assign featured_image = block.settings.image %}
{% assign featured_image_alt = block.settings.image.alt | escape %}
{% endif %}

{%
render 'collection-list-item',
block: block,
collection: collection,
collection_image: featured_image,
collection_image_alt: featured_image_alt
%}
{% endfor %}
</ul>

{% if section.settings.cta_label != blank %}
<a
class="
button-{{ section.settings.cta_button_style }}
collection-list__button
"
{% if section.settings.cta_link != blank %}href="{{ section.settings.cta_link }}"{% endif %}
>
{{ section.settings.cta_label | escape }}
</a>
{% endif %}
{% endif %}
</section>

{% schema %}
{
"name": "t:sections.collection_list.name",
"class": "collection-list--section",
"max_blocks": 20,
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.collection_list.title.label",
"default": "Collection list"
},
{
"type": "range",
"id": "thumbnail_columns_desktop",
"label": "t:sections.collection_list.thumbnail_columns_desktop.label",
"min": 3,
"max": 6,
"step": 1,
"default": 5
},
{
"type": "range",
"id": "thumbnail_columns_mobile",
"label": "t:sections.collection_list.thumbnail_columns_mobile.label",
"min": 1,
"max": 3,
"step": 1,
"default": 2
},
{
"type": "select",
"id": "image-crop",
"label": "t:sections.collection_list.image-crop.label",
"info": "t:sections.collection_list.image-crop.info",
"options": [
{
"value": "original",
"label": "t:sections.collection_list.image-crop.option_1"
},
{
"value": "circle",
"label": "t:sections.collection_list.image-crop.option_2"
},
{
"value": "round",
"label": "t:sections.collection_list.image-crop.option_3"
}
]
},
{
"type": "header",
"content": "t:sections.collection_list.header_1.content"
},
{
"type": "text",
"id": "cta_label",
"label": "t:sections.collection_list.cta_label.label",
"default": "View All"
},
{
"type": "url",
"id": "cta_link",
"label": "t:sections.collection_list.cta_link.label"
},
{
"id": "cta_button_style",
"type": "select",
"label": "t:sections.collection_list.cta_button_style.label",
"options": [
{
"value": "primary",
"label": "t:sections.collection_list.cta_button_style.option_1"
},
{
"value": "secondary",
"label": "t:sections.collection_list.cta_button_style.option_2"
}
],
"default": "primary"
}
],
"blocks": [
{
"type": "collection",
"name": "t:sections.collection_list.blocks.collection.name",
"settings": [
{
"id": "collection",
"type": "collection",
"label": "t:sections.collection_list.blocks.collection.collection.label"
},
{
"id": "image",
"type": "image_picker",
"label": "t:sections.collection_list.blocks.collection.image.label"
},
{
"id": "title",
"type": "text",
"label": "t:sections.collection_list.blocks.collection.title.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collection_list.presets.collection_list.name",
"category": "t:sections.collection_list.presets.collection_list.category",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}
],
"disabled_on": {
"groups": ["*"]
}
}

{% endschema %}

WalkYourStyle
Excursionist
213 24 21

Modify the for loop and and surround it's content with an if statement like this

{% for block in section.blocks %}
  {% assign collection = collections[block.settings.collection] %}
  {% if collection %}
   {% assign collection_title = collection.title %}
   {% assign collection_url = collection.url %}

   {% assign featured_image = false %}
   {% assign featured_image_alt = '' %}

   {% if block.settings.image %}
     {% assign featured_image = block.settings.image %}
     {% assign featured_image_alt = block.settings.image.alt | escape %}
   {% endif %}

   {%
   render 'collection-list-item',
   block: block,
   collection: collection,
   collection_image: featured_image,
   collection_image_alt: featured_image_alt
   %}
  {% endif %}
{% endfor %}

 

ihs1
Tourist
13 0 3

HI - unfortunately this isnt working. it still shows empty collections 

WalkYourStyle
Excursionist
213 24 21

This is an accepted solution.

Try this

{% for block in section.blocks %}
  {% assign collection = collections[block.settings.collection] %}
  {% if collection != blank %}
   {% assign collection_title = collection.title %}
   {% assign collection_url = collection.url %}

   {% assign featured_image = false %}
   {% assign featured_image_alt = '' %}

   {% if block.settings.image %}
     {% assign featured_image = block.settings.image %}
     {% assign featured_image_alt = block.settings.image.alt | escape %}
   {% endif %}

   {%
   render 'collection-list-item',
   block: block,
   collection: collection,
   collection_image: featured_image,
   collection_image_alt: featured_image_alt
   %}
  {% endif %}
{% endfor %}
ihs1
Tourist
13 0 3

Wow thank you so much for your help on this one