fy3
1
商品詳細ページのパンくずリストを下記のように表示させたいです。
「Home › Catalog › コレクション名 › コレクション名 › コレクション名 › 商品名」
現在は、「Home › Catalog › コレクション名 › 商品名」のようにコレクション名が一つしか表示されません。
私たちのショップの商品は、「ぬいぐるみ、ブランド名、キャラクター名」など複数のコレクションに該当するものが多く、一つの商品に２つ以上のコレクションが割り当てられています。
これら全てのコレクションをパンくずに表示したいです。
わかる方がいらっしゃいましたらご教示いただければ嬉しいです。
よろしくお願いいます。
*現在導入しているスニペットのコード
{% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %}
Home
{% if template contains 'page' %}
›
{{ page.title }}
{% elsif template contains 'product' %}
›
{{ 'Catalog' | link_to: '/collections' }}
{% if product.collections[0] %}
›
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
›
{{ product.title }}
{% elsif template contains 'collection' and collection.handle %}
›
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
›
{{ current_tags | join: " + " }}
{% else %}
{{ collection.title }}
{% endif %}
{% elsif template == 'blog' %}
›
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
›
{{ current_tags | join: " + " }}
{% else %}
{{ blog.title }}
{% endif %}
{% elsif template == 'article' %}
›
{{ blog.title | link_to: blog.url }}
›
{{ article.title }}
{% else %}
›
{{ page_title }}
{% endif %}
{% endunless %}
fy3
3
お返事ありがとうございます。
下記のように書き換えましたが、うまくいきませんでした。
{% if product.collections[0] %}
↓
{% for product.collections[0] %}
参考URLもご丁寧にありがとうございます。
ただ私の理解が乏しく、、よくわかりませんでした。
もう少し勉強して頑張ってみます。。
基本的な形としましては以下ページのベストソリューション内のコードが該当します。
https://community.shopify.com/c/shopify-design/display-on-product-page-all-collections-a-product-is-in-in-an/td-p/1752419
あとは上記と、質問時に記載された該当箇所の記述を合わせてみると良いかなと思います。
■イメージを掴む方法
https://shopify.dev/docs/api/liquid/objects/collection
一例ですが上記を参考にfor文の中を以下のように書くとなんとなくイメージといいますかパターンを掴めるかなと思います。
{% for collection in product.collections %}
コレクションのタイトル: {{ collection.title }}
コレクションのハンドル: {{ collection.handle }}
コレクションのURL: {{ collection.url }}
{% endfor %}
上記の title や handle を前述のドキュメントを参考にいろいろ書き換えてみてください。
そうすれば目的の情報を出力できるようになると思います。
1 Like
fy3
5
教えていただいた情報を元に記述した結果、無事に解決しました。
丁寧に教えていただいてありがとうございました。
大変助かりました！
はじめまして
株式会社UnReactの西川と申します。
既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「シンプルパンくずリスト｜お手軽 Breadcrumbs」も有効な解決策の一つとしてご紹介させていただきます。
弊社の Shopify アプリで恐縮ですが、 「シンプルパンくずリスト｜お手軽 Breadcrumbs」を使用すれば、
「Home › Catalog › コレクション名 › コレクション名 › コレクション名 › 商品名」のパンくずを作成することはできませんが、
「Home › Catalog › コレクション名 › 商品名」３階層のパンくずリストをコーディング無しで作成することは可能です。
パンくずリストをShopifyストアに挿入するだけの、非常に安価なアプリです。
下記、参考情報です。
シンプルパンくずリスト｜お手軽 Breadcrumbs
Shopify ストアにパンくずリストを実装する方法について徹底解説！
その他にも 42 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。
参考アプリ一覧
