如何使用液体模板语言在循环中添加定位标记?

时间:2019-03-20 12:14:57

标签: javascript shopify liquid

我正在尝试添加围绕部分的链接。该链接通过CMS是动态的。其中,我已链接到可用字段中的页面。我对为什么此循环不添加链接URL感到非常困惑。

此循环当前呈现图像,标题和文本字符串。但是,当我尝试在HTML块周围添加带有动态URL的标签时,这会导致未填充标签。

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

    {% capture item_url %}url_{{ i }}{% endcapture %}
    {% assign item_url = block.settings[item_url] %}

    {% capture item_photo %}img_{{ i }}{% endcapture %}
    {% assign item_photo = block.settings[item_photo] %}

    {% capture item_title %}title_{{ i }}{% endcapture %}
    {% assign item_title = block.settings[item_title] %}

    {% capture item_text %}text_{{ i }}{% endcapture %}
    {% assign item_text = block.settings[item_text] %}

    {% if item_url.size > 0 or item_photo.size > 0 or item_title.size > 0 or item_text.size > 0 %}
        <div class="col-sm-3">

          <a class="item_url" href="{{ item_url }}">
            <div class="item">
                {% if item_photo.size > 0 %}
                    <div class="item_img">
                        <img src="{{ item_photo.src | img_url: '270x270' }}" alt="{{ item_icon.alt }}">
                    </div>
                {% endif %}

                {% if item_title.size > 0 %}
                    <h3 class="item_title">{{ item_title }}</h3>
                {% endif %}

                {% if item_text.size > 0 %}
                    <div class="item_text">{{ item_text }}</div>
                {% endif %}
            </div>
          </a> 

        </div>
    {% endif %}
{% endfor %}

支持的模式以块为单位,如下所示;

// PHOTOS BLOCK ///////////////////////////////////////////////////////////////////////////////////
{
    "type": "photos-block",
    "name": "Photos block",
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Title",
            "default": "Our team"
        },

        // ITEM 1 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 1"
        },
        {
            "type": "image_picker",
            "id": "img_1",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_1",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_1",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_1",
            "label": "Url"
        },

        // ITEM 2 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 2"
        },
        {
            "type": "image_picker",
            "id": "img_2",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_2",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_2",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_2",
            "label": "Url"
        },

        // ITEM 3 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 3"
        },
        {
            "type": "image_picker",
            "id": "img_3",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_3",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_3",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_3",
            "label": "Url"
        },

        // ITEM 4 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 4"
        },
        {
            "type": "image_picker",
            "id": "img_4",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_4",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_4",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_4",
            "label": "Url"
        }
    ]
},

1 个答案:

答案 0 :(得分:1)

您正在生成类似{% capture item_url %}url_{{ i }}{% endcapture %}

的变量

会输出url_1url_2等字符串,但是您的字段ID称为url_oneurl_two

{
    "type": "url",
    "id": "url_one",
    "label": "Url"
},

更新您的架构字段,以使代码正常工作。