カートページで、特定のコレクションの商品だけに、指定の文字を入れたい

[福水正太]

お世話になります。

当方、カートページをカスタマイズしたいと考えておりまして、liquidのチートシートや海外のYouTube動画などで調べたのですが、

どうしても思うような表示にならず、こちらのフォーラムに投稿させていただきました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【要件】

・ハンドル名「cosmetics-from-japan」のコレクションに属する商品がカートに追加されている場合、カートページでその商品のタイトルの真下に「test」と表示する

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

下記に、実際のカートページのコードを記載しております。

※表示したい箇所は、下記コードの真ん中くらいにございます。

              {%- for item in cart.items -%}
                <div class="cart-item" data-cart-item="{{ item.key }}">
                  <div class="grid">
                    <div class="td cart-item-product">
                      {%- comment -%}
                        Cart item - image
                      {%- endcomment -%}
                      <div class="cart-item-image">
                        {%- assign image = item.image -%}
                        <a href="{{ item.url | within: collections.all }}" class="card__image-wrapper"
                          style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%"
                          data-cart-item-href>
                          {%- assign image_widths = '120,240,394,590' -%}
                          {% include 'theme-rias' %}
                          <img class="card__image lazyload"
                            src="{{ image | img_url: '120x' }}"
                            data-src="{{ image_url_pattern }}"
                            data-widths="[{{ image_widths }}]"
                            data-aspectratio="{{ image.aspect_ratio }}"
                            data-sizes="auto"
                            data-cart-item-image
                            alt="{{ image.alt | escape }}">
                          <noscript>
                            <img class="card__image" src="{{ image | img_url: '120x' }}" alt="{{ image.alt | escape }}">
                          </noscript>
                        </a>
                      </div>
                      {%- comment -%}
                        Cart item - title
                      {%- endcomment -%}
                      <div class="cart-item-title">
                        <a href="{{ item.url | within: collections.all }}" class="title" data-cart-item-href data-cart-item-title>{{ item.product.title }}</a>
                        {%- if section.settings.show_vendors -%}
                          <span class="vendor" data-cart-item-vendor>{{ item.vendor }}</span>
                        {%- endif -%}
                        {%- unless item.product.has_only_default_variant -%}
                          <span class="variant" data-cart-item-variant-title>{{ item.variant.title }}</span>
                        {%- endunless -%}
                        {%- comment -%}
                          Optional, loop through custom product line items if available
                          For more info on line item properties, visit:
                            - https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products
                        {%- endcomment -%}
                        {%- unless item.properties == empty -%}
                          {%- for property in item.properties -%}
                            {%- unless property.last == blank -%}
                              {{ property.first }}: {% if property.last contains '/uploads/' %}
                                <a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
                              {% else %}
                                {{ property.last }}
                              {% endif %}<br>
                            {%- endunless -%}
                          {%- endfor -%}
                        {%- endunless -%}
                      </div>
                      
                      //////////////////ここにtestと表示したい////////////////
                      
                      {% if item.collections.handle == 'cosmetics-from-japan' %}
                      	<div>test</div>
                      {% endif %}
                      
                      //////////////////ここまで//////////////////////////////////

                    </div>
                    {%- comment -%}
                      Cart item - price
                    {%- endcomment -%}
                    <div class="td cart-item-price">
                      <p><span class="money final-price{% if item.original_line_price > item.final_line_price %} final-price-discount{% endif %}" data-cart-item-final-price>{{ item.final_price | money }}</span></p>
                      {%- if item.original_line_price > item.final_line_price -%}
                        <p><span class="money original-price" data-cart-item-original-price>{{ item.original_price | money }}</span></p>
                      {%- endif -%}
                      {% if item.line_level_discount_allocations.size > 0 %}
                        <ul class="cart-item-discounts">
                        {% for discount_allocation in item.line_level_discount_allocations %}
                          <li class="cart-item-discount"><span class="cart-item-discount-title">{{ discount_allocation.discount_application.title }}</span><br>
                          <span class="cart-item-discount-amount">(-<span class="money">{{ discount_allocation.amount | money }}</span>)</span></li>
                        {% endfor %}
                        </ul>
                      {% endif %}
                    </div>
                    {%- comment -%}
                      Cart item - quanity
                    {%- endcomment -%}
                    <div class="td cart-item-quantity">
                      <span>
                        <div class="quantity-select">
                          <div class="button-wrapper">
                            <button type="button" class="adjust adjust-minus" data-cart-item-quantity-minus>-</button>
                          </div>
                          <div class="input-wrapper">
                            <input type="text" class="quantity" data-cart-item-quantity min="0" pattern="[0-9]*" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" >
                          </div>
                          <div class="button-wrapper">
                            <button type="button" class="adjust adjust-plus" data-cart-item-quantity-plus>+</button>
                          </div>
                        </div>
                      </span>
                      <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="remove" data-cart-item-remove>{{ 'cart.general.remove' | t }}</a>
                    </div>
                    {%- comment -%}
                      Cart item - total
                    {%- endcomment -%}
                    <div class="td cart-item-total" data-mobile-label="{{ 'cart.label.total' | t }}">
                      <div class="mobile-label">{{ 'cart.label.total' | t }}</div> 
                      <p><span class="money" data-cart-item-line-price>{{ item.final_line_price | money }}</span></p>
                      {%- if item.original_line_price > item.final_line_price -%}
                        <p><span class="money original-price" data-cart-item-original-price>{{ item.original_line_price | money }}</span></p>
                      {%- endif -%}
                    </div>
                  </div>
                </div>
              {%- endfor -%}

以上となります。

何卒よろしくお願い致します。

[Jizo_Inagaki · Accepted solution]

実際に試していないので動くかはわかりませんが、以下のURLにある下記コードが回答になるかと思います。

https://stackoverflow.com/questions/27295654/shopify-cart-show-item-based-on-title

{% assign found_mukluk = false %}              
{% for item in cart.items %}
    {% for collection in item.product.collections %}
        {% if found_mukluk == false and collection.handle == "mukluks" %}
            {% assign found_mukluk = true %}
            this is a mukluk
        {% endif %}
     {% endfor %}  
{% endfor %}

assignの部分は無視しまして、重要なのはcollectionsをforで回す部分です。

もしも動作しない場合は申し訳ありません。

[福水正太]

ご回答ありがとうございました。

結論、ご提示いただいたコードで動作はできなかったのですが（私の記述ミスの可能性もあります）、『コレクションの条件になっている商品のtypeを指定する』ことで、問題解決できました。

{%- for item in cart.items -%}
  {% if item.product.type == "Cosmetics from Japan" %}
     ここに文字が入る
  {% endif %}
{%- endfor -%}

アドバイスありがとうございました！