Shopify｜特集コレクションに商品タグを表示する（Dawn）

こんにちは、ななこまです。

今回は、Dawnテーマのトップページに特集コレクションを追加し、コード編集でその商品カード内に商品タグを表示させました。では早速☺

1. 商品ページにタグを追加する

商品管理＞商品を選択し、右側 商品整理の1番下にある「タグ」という項目に追加したいタグ名を入れます。

これで下準備はOK
次にコードを編集していきます。

2. featured-collection.liquidの編集

コード編集＞featured-collection.liquid の398行目あたりに以下のコードを追加します。

    {
      "type": "checkbox",
      "id": "show_tags",
      "label": "タグを表示する",
      "default": false
    }

そうすると、{% schema %}内の最下部は以下のようになります。

    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "checkbox",
      "id": "show_tags",
      "label": "タグを表示する",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection.presets.name"
    }
  ]
}
{% endschema %}

続いて、80~90行目の render 内と93行目辺りの li 内に以下を追加します。

show_tags: section.settings.show_tags,

そうすると以下のようになりますね。

            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              show_secondary_image: section.settings.show_secondary_image,
              show_vendor: section.settings.show_vendor,
              show_tags: section.settings.show_tags,
              show_rating: section.settings.show_rating,
              show_quick_add: section.settings.enable_quick_add,
              section_id: section.id
            %}
          </li>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor ,show_tags: section.settings.show_tags %}
            </li>

これでカスタマイズ画面で特集コレクションを確認すると、「タグを表示する」のチェックボックスが表示されるようになりました。

3. card-product.liquidの編集

続いて、card-product.liquidの<div class="card-information">内に以下のコードを入力します。

{%- if show_tags -%}
  <span class="visually-hidden">{{ 'accessibility.tags' | t }}</span>
  <div class="caption-tags">
    {% assign tags = card_product.tags | remove: '[' | remove: ']' | remove: '"' | split: ',' %}
    {% for tag in tags %}
      <span class="tag">{{ tag | strip }}</span>
    {% endfor %}
  </div>
{%- endif -%}

↓前後含めるとこんな感じになります。

          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}
  
　　　　　　{%- if show_tags -%}
 　　　　　　 <span class="visually-hidden">{{ 'accessibility.tags' | t }}</span>
　　　　　　  <div class="caption-tags">
 　　　　   {% assign tags = card_product.tags | remove: '[' | remove: ']' |  remove: '"' | split: ',' %}
   　　　　　 {% for tag in tags %}
 　　　　　     <span class="tag">{{ tag | strip }}</span>
 　　　　 　  {% endfor %}
　　　　　　  </div>
　　　　　　{%- endif -%}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>

これでタグが表示されるようになりました。

4. cssを追加

このままだとタグ感がないので、cssを追加します。

「新しいアセットを追加する」→今回は[ tags.css ]としました。
tags.css内に以下を入力して、card-product.liquid 内に
{{ 'tags.css' | asset_url | stylesheet_tag }}を追加すると、、

.caption-tags .tag {
  display: inline-block;
  margin: 0 0.3rem 0.3rem 0;
  font-size: 11px;
  background-color: #eee;
  padding: 0.6rem;
  border-radius: 4px;
}

こんな感じになりました↓

背景があるだけで少しタグ感が出ました〜

無事完成！
プログラミング経験のない私でもできたので、コードが分からない、、という方もおそらく出来るかなと思います◎

ぜひ試してみてください☺
以上ななこまでした。