Shopify在部分块中选择SVG

Question

我正在尝试构建一个块，该块允许商人在我已上传到主题的片段文件夹中的多个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"
          }
        ]
      }
    ]

任何帮助表示赞赏！

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

Answer 2

您的大小写/语法不正确时。

它必须为：

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