Shopify themes, liquid, logos, and UX
Hi, guys, Can anyone help me complete this setting for my multicolumn section? When I attempt to do it myself, in theme editor, I encounter the following error: "Setting "animation-items" can't include Liquid Syntax ('', '', '%', '%', or '%') without valid dynamic sources".Please help me add the green line (below) to the orange line. This setting will allow me to choose between playing the AOS animation for each column individually or for all columns at once.
my store: youbohovibe
password: hamza
{%- for block in section.blocks -%}
{% assign indexx = forloop.index | minus: 1 %}
{% assign coltet = section.settings.columns_desktop | minus: 1 %}
{% if indexx > coltet -%}
{%- assign indexx = indexx | minus: coltet %}
{% endif %}
<li
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="1500"
data-aos-once="{{ section.settings.animation-once }}"
data-aos-delay="{{ indexx | times: 3 }}00"
id="Slide-{{ section.id }}-{{ forloop.index }}"
{
"type": "select",
"id": "animation-items",
"options": [
{ "value": "{{ indexx | times: 3 }}00", "label": "separate"},
{ "value": "false", "label": "all at once"}
],
"label": "Column Animation",
"default": "false"
},
@GemPages @EBOOST @oscprofessional @niraj_patel @BSS-Commerce @ExpertRookie @diego_ezfy @LitExtension
Hi @hamza-elkaissi1,
You can't add value like this, schema doesn't support declaration.
Please change code:
{
"type": "select",
"id": "animation-items",
"options": [
{ "value": "true", "label": "separate"},
{ "value": "false", "label": "all at once"}
],
"label": "Column Animation",
"default": "false"
},
Then change the code liquid:
{%- for block in section.blocks -%}
{% assign indexx = forloop.index | minus: 1 %}
{% assign coltet = section.settings.columns_desktop | minus: 1 %}
{% if indexx > coltet -%}
{%- assign indexx = indexx | minus: coltet %}
{% endif %}
{%- assign animation = 'false' -%}
{%- if block.settings.animation-items == 'true' -%}
{%- assign animation = indexx | minus: coltet | append: '00' -%}
{%- endif -%}
<li
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="1500"
data-aos-once="{{ section.settings.animation-once }}"
data-aos-delay="{{ animation }}"
id="Slide-{{ section.id }}-{{ forloop.index }}"
Hope it helps!
Hello @LitExtension and thank you for responding, I follow your instructions and the error message has gone, but the animation still work all at once even if I choose separate, here is the code if you want to take a look, thank again
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
<div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
<div class="page-width section-{{ section.id }}-padding isolate">
{%- unless section.settings.title == blank -%}
<div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
<h2 class="title {{ section.settings.heading_size }}">
{{ section.settings.title | escape }}
</h2>
{%- if section.settings.button_label != blank and show_mobile_slider -%}
<a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
{{- section.settings.button_label | escape -}}
</a>
{%- endif -%}
</div>
{%- endunless -%}
<slider-component class="slider-mobile-gutter">
<ul
class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign highest_ratio = 0
for block in section.blocks
if block.settings.image.aspect_ratio > highest_ratio
assign highest_ratio = block.settings.image.aspect_ratio
endif
endfor
-%}
{%- for block in section.blocks -%}
{% assign indexx = forloop.index | minus: 1 %}
{% assign coltet = section.settings.columns_desktop | minus: 1 %}
{% if indexx > coltet -%}
{%- assign indexx = indexx | minus: coltet %}
{% endif %}
{%- assign animation = 'false' -%}
{%- if block.settings['animation-items'] == 'true' -%}
{%- assign animation = indexx | minus: coltet | append: '00' -%}
{%- endif -%}
<li
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="1500"
data-aos-once="{{ section.settings.animation-once }}"
data-aos-delay="{{ animation }}"
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}"
{{ block.shopify_attributes }}
>
<div class="multicolumn-card content-container">
{%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
{% assign spaced_image = true %}
{% endif %}
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
<div
class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
{% endif %}
>
{%- capture sizes -%}(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %}, (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{
block.settings.image
| image_url: width: 1420
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '275, 550, 710, 1420',
class: 'multicolumn-card__image'
}}
</div>
</div>
{%- endif -%}
<div class="multicolumn-card__info">
{%- if block.settings.title != blank -%}
<h3>{{ block.settings.title | escape }}</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte">{{ block.settings.text }}</div>
{%- endif -%}
{%- if block.settings.link_label != blank -%}
<a
class="link animate-arrow"
{% if block.settings.link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.link }}"
{% endif %}
>
{{- block.settings.link_label | escape -}}
<span class="icon-wrap"> {% render 'icon-arrow' %}</span></a
>
{%- endif -%}
</div>
</div>
</li>
{%- endfor -%}
</ul>
{%- if show_mobile_slider -%}
<div class="slider-buttons no-js-hidden medium-hide">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
>
{% render 'icon-caret' %}
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
>
{% render 'icon-caret' %}
</button>
</div>
{%- endif -%}
</slider-component>
<div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
{%- if section.settings.button_label != blank -%}
<a
class="button button--primary"
{% if section.settings.button_link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ section.settings.button_link }}"
{% endif %}
>
{{ section.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.multicolumn.name",
"class": "section",
"tag": "section",
"settings": [
{
"type": "select",
"id": "animation-items",
"options": [
{ "value": "true", "label": "separate"},
{ "value": "false", "label": "all at once"}
],
"label": "Column Animation",
"default": "false"
},
{
"type": "select",
"id": "animation-once",
"options": [
{ "value": "true", "label": "once"},
{ "value": "false", "label": "unlimited"}
],
"label": "Play animation",
"default": "true"
},
{
"type": "select",
"id": "aos-title",
"options": [
{ "value": "none", "label": "Aucune"},
{ "value": "fade-in", "label": "Fade In"},
{ "value": "fade-up", "label": "Fade Up"},
{ "value": "fade-down", "label": "Fade Down"},
{ "value": "fade-right", "label": "Fade Right"},
{ "value": "fade-left", "label": "Fade Left"},
{ "value": "fade-up-right", "label": "Fade Up Right"},
{ "value": "fade-up-left", "label": "Fade Up Left"},
{ "value": "fade-down-right", "label": "Fade Down Right"},
{ "value": "fade-down-left", "label": "Fade Down Left"},
{ "value": "flip-left", "label": "Flip Left"},
{ "value": "flip-right", "label": "Flip Right"},
{ "value": "flip-up", "label": "Flip Up"},
{ "value": "flip-down", "label": "Flip Down"},
{ "value": "zoom-in", "label": "Zoom in"},
{ "value": "zoom-in-up", "label": "Zoom in Up"},
{ "value": "zoom-in-down", "label": "Zoom in Down"},
{ "value": "zoom-in-left", "label": "Zoom in Left"},
{ "value": "zoom-in-right", "label": "Zoom in Right"},
{ "value": "zoom-out", "label": "Zoom out"},
{ "value": "zoom-out-up", "label": "Zoom out Up"},
{ "value": "zoom-out-down", "label": "Zoom out Down"},
{ "value": "zoom-out-right", "label": "Zoom out Right"},
{ "value": "zoom-out-left", "label": "Zoom out Left"}
],
"label": "The animation",
"default": "none"
},
{
"type": "select",
"id": "aos-duration",
"options": [
{ "value": "500", "label": "0.5s"},
{ "value": "1000", "label": "1s"},
{ "value": "1500", "label": "1.5s"},
{ "value": "2000", "label": "2s"},
{ "value": "2500", "label": "2.5s"}
],
"label": "The animation duration",
"default": "1500"
},
{
"type": "text",
"id": "title",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "image_width",
"options": [
{
"value": "third",
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
},
{
"value": "half",
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
},
{
"value": "full",
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
}
],
"default": "full",
"label": "t:sections.multicolumn.settings.image_width.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
},
{
"value": "circle",
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.multicolumn.settings.columns_desktop.label"
},
{
"type": "select",
"id": "column_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "t:sections.multicolumn.settings.column_alignment.label"
},
{
"type": "select",
"id": "background_style",
"options": [
{
"value": "none",
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
},
{
"value": "primary",
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
}
],
"default": "primary",
"label": "t:sections.multicolumn.settings.background_style.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.multicolumn.settings.button_label.label"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.multicolumn.settings.button_link.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.multicolumn.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.multicolumn.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "column",
"name": "t:sections.multicolumn.blocks.column.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
},
{
"type": "text",
"id": "title",
"default": "Column",
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
},
{
"type": "richtext",
"id": "text",
"default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "t:sections.multicolumn.blocks.column.settings.text.label"
},
{
"type": "text",
"id": "link_label",
"label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.multicolumn.blocks.column.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
Hi @hamza-elkaissi1,
Please change code here:
Code:
{%- if section.settings.animation-items == 'true' -%}
{%- assign animation = indexx | minus: coltet | append: '00' -%}
{%- endif -%}
Hope it helps!
Hi @LitExtension I try your codo and unfortunately It didn't work but I find a solution that almost gives me the result that want, but the only problem withe it is when I choose to play all at once it animated the full section not just the culmns if you please can help me to target just the columns , thank you
this is the full new cod I have
the liquid
{% if section.settings.animation-separatly == "false" %}
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="{{ section.settings.aos-duration }}"
data-aos-once="{{ section.settings.animation-once }}"
{% endif %}
>
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
{% assign indexx = forloop.index | minus: 1 %}
{% assign coltet = section.settings.columns_desktop | minus: 1 %}
{% if indexx > coltet -%}
{%- assign indexx = indexx | minus: coltet %}
{% endif %}
{% if section.settings.animation-separatly == "false" %}
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="{{ section.settings.aos-duration }}"
data-aos-once="{{ section.settings.animation-once }}"
{% endif %}
<li
{% if section.settings.animation-separatly == "true" %}
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="{{ section.settings.aos-duration }}"
data-aos-once="{{ section.settings.animation-once }}"
data-aos-delay="{{ indexx | times: 3 }}00"
{% endif %}
the schema
{
"type": "select",
"id": "animation-separatly",
"options": [
{ "value": "true", "label": "separatly"},
{ "value": "false", "label": "once"}
],
"label":"play separatly",
"default": "true"
},
@LitExtension To make it easier and not consume your time so much, sir, I will highlight the codes I add.
{% if section.settings.animation-separatly == "false" %}
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="{{ section.settings.aos-duration }}"
data-aos-once="{{ section.settings.animation-once }}"
{% endif %}
>
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
{% assign indexx = forloop.index | minus: 1 %}
{% assign coltet = section.settings.columns_desktop | minus: 1 %}
{% if indexx > coltet -%}
{%- assign indexx = indexx | minus: coltet %}
{% endif %}
<li
{% if section.settings.animation-separatly == "true" %}
data-aos="{{ section.settings.aos-title }}"
data-aos-duration="{{ section.settings.aos-duration }}"
data-aos-once="{{ section.settings.animation-once }}"
data-aos-delay="{{ indexx | times: 3 }}00"
{% endif %}
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024