Hello,
I am new to working with liquid with some coding knowledge. I am trying to create a section that can be added to my website where it has an animation showing a chosen products images (depending on how many images are inside the product, but max 5).
For some reason, whatever I do I can't get the images to show (it either defaults to placeholders or disappears completely). I'm obviously doing something wrong but not sure what it is, I got the section to be able to select a product but for some reason it doesn't find the products images.
Here is the code:
{%- liquid
assign collection = products[section.settings.product]
assign isEmpty = false
if section.settings.product == blank
assign isEmpty = true
endif
-%}
{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}
<div class="page-width">
<div class="feature-row feature-row--small-none">
<div class="feature-row__item feature-row__callout-image">
<div class="callout-images{% if isEmpty %} blank-state{% endif %}" data-aos="collection-callout">
{%- if isEmpty -%}
{%- for i in (1..5) -%}
{%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
{%- if forloop.index == 1 -%}
<div class="callout-image-centered">
{%- endif -%}
<div class="callout-image">
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- if forloop.last -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for product in product.media limit: 5 -%}
{%- liquid
case forloop.index
when 1
assign callout_image_size_small = '280x'
assign callout_image_size_medium = '360x'
assign callout_image_size_large = '560x'
when 2
assign callout_image_size_small = '180x'
assign callout_image_size_medium = '234x'
assign callout_image_size_large = '360x'
when 3
assign callout_image_size_small = '160x'
assign callout_image_size_medium = '208x'
assign callout_image_size_large = '320x'
when 4
assign callout_image_size_small = '200x'
assign callout_image_size_medium = '260x'
assign callout_image_size_large = '400x'
when 5
assign callout_image_size_small = '100x'
assign callout_image_size_medium = '130x'
assign callout_image_size_large = '200x'
endcase
-%}
{%- if forloop.index == 1 -%}
<div class="callout-image-centered">
{%- endif -%}
<img
class="callout-image lazyload"
data-srcset="
{{ product | img_url: callout_image_size_small }} {{ callout_image_size_small | remove: 'x' | append: 'w' }},
{{ product | img_url: callout_image_size_medium }} {{ callout_image_size_medium | remove: 'x' | append: 'w' }},
{{ product | img_url: callout_image_size_large }} {{ callout_image_size_large | remove: 'x' | append: 'w' }}"
data-sizes="auto"
alt="{{ product.title | escape }}">
{%- if forloop.last -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
</div>
<div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }} feature-row__callout-text larger-text">
<div class="feature-row__content">
{%- if section.settings.subtitle -%}
<p class="subtitle">{{ section.settings.subtitle }}</p>
{%- endif -%}
{%- if section.settings.title != blank -%}
<h2 class="h3">{{ section.settings.title }}</h2>
{%- endif -%}
<div class="rte">
{%- if section.settings.text != blank -%}
<p>{{ section.settings.text }}</p>
{%- endif -%}
</div>
{%- if section.settings.cta_text1 != blank -%}
<a href="{{ section.settings.cta_link1 }}" class="btn">
{{ section.settings.cta_text1 }}
</a>
{%- endif -%}
{%- if section.settings.cta_text2 != blank -%}
<a href="{{ section.settings.cta_link2 }}" class="btn">
{{ section.settings.cta_text2 }}
</a>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- if section.settings.divider -%}</div>{%- endif -%}
{% schema %}
{
"name": "Product callout",
"class": "index-section",
"settings": [
{
"type": "product",
"id": "product",
"label": "product"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading",
"default": "Brand new"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Product callout"
},
{
"type": "textarea",
"id": "text",
"label": "Text",
"default": "Use this section to easily call attention to one of your products. We'll show photos of the first 5 products."
},
{
"type": "text",
"id": "cta_text1",
"label": "Button #1 text",
"default": "Shop Jackets"
},
{
"type": "url",
"id": "cta_link1",
"label": "Button #1 link"
},
{
"type": "text",
"id": "cta_text2",
"label": "Button #2 text",
"default": "Shop All Mens"
},
{
"type": "url",
"id": "cta_link2",
"label": "Button #2 link"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "right",
"options": [
{
"value": "left",
"label": "Text on left"
},
{
"value": "right",
"label": "Text on right"
}
]
},
{
"type": "checkbox",
"id": "divider",
"label": "Show section divider",
"default": false
}
],
"presets": [{
"name": "Product callout",
"category": "Product"
}]
}
{% endschema %}
User | Count |
---|---|
11 | |
7 | |
7 | |
7 | |
7 |