Ad

Dynamically Populate A Forloop Array In Shopify Liquid Framework

- 1 answer

I'm trying to create my own array in Shopify so that I can easily populate a slick slider. I've tried creating a numeric array and then using that to call the variables, but it doesn't seem to be working. I just keep getting "unexpected character" etc.

{% assign number_group = "1, 2, 3, 4, 5" | split: ','%}
{%- assign block_1_link = "/collections/col-1" %}
{%- assign block_1_title = "Title 1" %}
{%- assign block_1_img = "imglink" %}

{%- assign block_2_link = "/collections/col-2" %}
{%- assign block_2_title = "Title 2" %}
{%- assign block_2_img = "imglink" %}

 <div class="slick-slider-row">

  <div class="wrapper">
   <h2><a target="_blank" rel="nofollow noreferrer" href="x">MyCompants</a><h2>

     {% for NUMBER in number_group %}
      {%- assign this_link = "block_"{{NUMBER}}"_link" %}
      {%- assign this_image = "block_"{{NUMBER}}"_img" %}
      {%- assign this_title = "block_"{{NUMBER}}"_title" %}
      <div class="responsive carousel  slider-mobile-hide">
       <div class="slick-slide">
          <a target="_blank" rel="nofollow noreferrer" href="{{this_link}}">
            <img class="lazyload" alt="{{ this_title}}" src="{{ 
           this_image}}">
          </a>
          <p><a class="slider-collection-name-link" target="_blank" rel="nofollow noreferrer" href="  
         {{this_link}}">{{this_title}}</a></p>
        </div> 
    {% endfor %}
Ad

Answer

I assume that you are new in the liquid language, so I will describe it as clearly as possible.

For loops

There are two types of FOR loops in liquid.

1) The standard one where you list all items of an array:

{% for product in collection.products %}

Where collection.products is an array of products.

2) The manual array which you are trying to build

{% for i in (1..5) %}

Where 1 is the starting index and 5 is the ending.


Liquid syntax

There are two types of liquid synt>

{% for product in collection.products %}

Where collection.products is an array of products.

2) The manual array which you are trying to build

{% for i in (1..5) %}

Where 1 is the starting index and 5 is the ending.


Liquid syntax

There are two types of liquid syntax.

{{  }}

and

{%  %}

The {{ }} is used for output of content and {% %} is used for liquid logic (if/assign/capture/for etc...)

Mistakes in your code

{%- assign this_link = "block_"{{NUMBER}}"_link" %}

This is an invalid syntax. You can't have liquid inside of liquid. If you want to do it like that, the proper way will be:

{%- assign this_link = "block_" | append: NUMBER | append: "_link" %}

or

{% capture this_link %}block_{{NUMBER}}_link{% endcapture %}

In addition this {{this_link}} will output the string "block_1_link" and not the variable block_1_link.

In order to output the variable you will need to wrap it in square brackets like so {{[this_link]}} since you are assign a string to it.

I assume you are learning but this syntax will probably never come in a real project, because you shouldn't have static variables

How should your code look

{%- assign block_1_link = "/collections/col-1" %}
{%- assign block_1_title = "Title 1" %}
{%- assign block_1_img = "imglink" %}

{%- assign block_2_link = "/collections/col-2" %}
{%- assign block_2_title = "Title 2" %}
{%- assign block_2_img = "imglink" %}

 <div class="slick-slider-row">

  <div class="wrapper">
   <h2><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="x">MyCompants</a><h2>

     {% for NUMBER in (1..5) %}
      {%- assign this_link = "block_" | append: NUMBER | append: "_link" %}
      {%- assign this_image = "block_" | append: NUMBER | append: "_img" %}
      {%- assign this_title = "block_" | append: NUMBER | append: "_title" %}
      <div class="responsive carousel  slider-mobile-hide">
       <div class="slick-slide">
          <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{[this_link]}}">
            <img class="lazyload" alt="{{ [this_title] }}" src="{{ [this_image] }}">
          </a>
          <p><a class="slider-collection-name-link" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="  
         {{[this_link]}}">{{[this_title]}}</a></p>
        </div> 
    {% endfor %}
Ad
source: stackoverflow.com
Ad