Shopify在部分块中选择SVG

时间:2018-07-30 18:29:48

标签: shopify liquid

我正在尝试构建一个块,使商人可以在我已上传到主题的片段文件夹中的多个SVG之间进行选择。

我在这里拥有的代码对我来说很有意义,但是Shopify将不会输出任何SVG。默认情况下为“未选择SVG”。

这是for循环:

  {% for block in section.blocks %}
    <div class="grid__item large--one-third text-center reason-block">
      {% case svg__choice %}
        {% when block.settings.svg == 'family' %}
          {% include 'svg--family' %}
        {% when block.settings.svg == 'bottles' %}
          {% include 'svg--plastic' %}
        {% when block.settings.svg == "globe" %}
          {% include 'svg--globe' %}
        {% else %}
          No SVG Selected
      {% endcase %}
      <h4 class="h4v3">{{ block.settings.title }}</h4>
      <p>{{ block.settings.text }}</p>
    </div>
  {% endfor %}

这是我的{%模式%}:

"blocks": [
      {
        "type": "select",
        "name": "Standard Block",
        "settings": [
          {
            "type": "select",
            "id": "svg",
            "label": "Select SVG code",
            "options": [
              {
                "value": "family",
                "label": "Family"
              },
              {
                "value": "globe",
                "label": "Globe"
              },
              {
                "value": "bottles",
                "label": "Bottles"
              }
            ],
            "default": "family"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Block Title"
          },
          {
            "type": "textarea",
            "id": "text",
            "label": "Block Paragraph"
          }
        ]
      }
    ]

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

找到了答案。必须使用if / else代替大小写。答案应如下所示:

  {% for block in section.blocks %}
    <div class="grid__item large--one-third text-center reason-block">

        {% if block.settings.svg == 'family' %}
          {% include 'svg--family' %}
        {% elsif block.settings.svg == 'bottles' %}
          {% include 'svg--plastic' %}
        {% elsif block.settings.svg == 'globe' %}
          {% include 'svg--globe' %}
        {% else %}
          No SVG Selected
        {% endif %}

      <h4 class="h4v3">{{ block.settings.title }}</h4>
      <p>{{ block.settings.text }}</p>
    </div>
  {% endfor %}

答案 1 :(得分:1)

您的case/when syntax不正确。

它必须显示为:

  {% case block.settings.svg %}
    {% when 'family' %}
      {% include 'svg--family' %}
    {% when 'bottles' %}
      {% include 'svg--plastic' %}
    {% when "globe" %}
      {% include 'svg--globe' %}
    {% else %}
      No SVG Selected
  {% endcase %}