FROM CACHE - en_header
Promotion image

Re: Dawn Theme: Schema error

How can I fix a schema error in Dawn theme's multicolumn section?

hamza-elkaissi1
Explorer
58 2 8
‎02-13-2023 04:01 AM

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

 

The 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 %}
<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 }}"

 

The schema

 

{
"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 

 

1,772 Views
0 Likes
Report
Replies 6 (6)

LitExtension
Shopify Partner
4860 1002 1159
‎02-13-2023 08:23 AM

Hi @hamza-elkaissi1,

You can't add value like this, schema doesn't support declaration.

Screenshot.png

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!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
1,746 Views
0 Likes
Report
In response to LitExtension

hamza-elkaissi1
Explorer
58 2 8
‎02-13-2023 09:50 AM

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">&nbsp;{% 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 %}

  

1,740 Views
0 Likes
Report
In response to LitExtension

hamza-elkaissi1
Explorer
58 2 8
‎02-13-2023 03:17 PM

@LitExtension  I Think checkbox will be better than selector, what you think?

 

 

 

1,729 Views
0 Likes
Report
In response to hamza-elkaissi1

LitExtension
Shopify Partner
4860 1002 1159
‎02-14-2023 02:07 AM

Hi @hamza-elkaissi1,

Please change code here:

Screenshot.png

Code:

{%- if section.settings.animation-items == 'true' -%}
            {%- assign animation = indexx | minus: coltet | append: '00' -%}
{%- endif -%}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
1,704 Views
0 Likes
Report
In response to LitExtension

hamza-elkaissi1
Explorer
58 2 8
‎02-14-2023 12:58 PM

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"
    },

 

1,685 Views
0 Likes
Report
In response to hamza-elkaissi1

hamza-elkaissi1
Explorer
58 2 8
‎02-14-2023 01:11 PM

@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 %}

 

1,684 Views
1 Like
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy