https://ikdlog.com/breadcrumbs/
上記のサイトを参考にパンくずリストを作ってみましたが、商品詳細ページだけうまくパンくずリストが反映されません。
現在は「Home→商品名」と表示されている状態なのですが、
「Home→カテゴリー一覧→カテゴリー１→商品名」のように表示されるようにしたいです。
どなたかご教授いただけないでしょうか？
Topic summary
商品詳細ページのパンくずリストで「Home→コレクション一覧→コレクション名→商品名」という階層表示を実現したいが、現状は「Home→商品名」のみ表示される問題について議論されています。
原因の解説:
- Shopifyでは商品ページへのアクセス方法が2通りあり、コレクションページ経由でアクセスした場合のみコレクション名が表示される仕様
collection.urlが存在する場合のみコレクション情報が反映される
提案された解決策:
- コードAとB:
product.collections[0]を使用して所属コレクションを取得する方法が提示されたが、複数コレクション所属時の順序が不規則という注意点あり - 商品詳細ページで
{% render 'breadcrumbs' %}を使用する方法で、質問者は「コレクション一覧→コレクション名」の表示に成功
その他:
- コーディング不要でパンくずリストを実装できるShopifyアプリ「シンプルパンくずリスト」も紹介された
- 別のユーザーも同様の問題に直面しており、詳細な設定方法について追加質問中
まず、「カテゴリー」というのはshopifyの正式な名称だと「コレクション」なので、表記をそちらに変えながら説明します。
該当のコードは以下の部分ですね。
{% elsif template contains 'product' %}
{% if collection.url %}
›
{{ collection.title | link_to: collection.url }}
{% endif %}
›
{{ product.title }}
これは以下を意味します。
- （1行目）productテンプレートの時
- （2行目）URLにコレクションが含まれていれば
- （4行目）そのコレクション名、リンクを追加する
また、shopifyで商品ページに到達するには、2通りの方法があります。
- https://***.com/products/00000
- https://***.com/**collections/コレクション名/**products/00000
（2へは、コレクションページから商品にリンクすると到達可能です）
つまり、現状ではパンクズにコレクション名（カテゴリー1）を追加されるのは、2のURLでアクセスした時に限られるのです。
ーー
そして対策法についてです。
まず「コレクション一覧（カテゴリー一覧）」は、そのまま記述を加えるだけで可能です。表示名は自由に変更してください。
コードA
{% elsif template contains 'product' %}
›
{{ 'コレクション一覧' | link_to: '/collections' }}
{% if collection.url %}
›
{{ collection.title | link_to: collection.url }}
{% endif %}
›
{{ product.title }}
続いて、コレクション名（カテゴリー1）についてですが、該当の商品が複数のコレクションに属しているなど、登録状況が複雑であれば対処が難しくなります。
一旦、登録状況がシンプルと仮定して、コードを作成しました。
product.collectionsを使えば、商品の所属コレクションが配列形式で取得できますので、そちらを活用します。
コードB
{% elsif template contains 'product' %}
›
{{ 'コレクション一覧' | link_to: '/collections' }}
{% if product.collections[0] %}
›
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
›
{{ product.title }}
- URLに差があっても、関係なく所属コレクションが出力されます。
- https://***.com/products/00000
- https://***.com/**collections/コレクション名/**products/00000
- コレクションに所属していなければ何も出力されません。
- 所属コレクションが複数存在する場合、最初のコレクション（※）が選ばれます。
- ※コレクションの順序に関しては、調べた限り規則性が見つかりませんでした。
- ※コレクションの作成順、登録順、タイトル順とは無関係に、内部で順序が決められるようです。
コードBで問題無さそうであればそのまま活かしてください。
理想と違っていそうならば、妥協案にはなりますが、コードAを活用してください。
1 Like
ご教授いただきありがとうございます！
下記の通りに書き換えて、コレクション一覧→コレクション名→商品詳細に飛んてみたのですが、
何も反映されず、Home→商品名と表示されてしまいます…
コードA、コードBとも試してみましたがダメでした。
コレクションは現在8種類あり、複数のコレクションには属さずに設定しております。
不躾なお願いですが、もし何か原因等わかれば教えていただきたいです。
よろしくお願いいたします。
{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
{% endunless %}
度々すみません！
商品詳細ページだけ下記で呼び起こすように設定したらコレクション一覧→コレクション名が表示されるようになりました！
ありがとうございました。
{% render 'breadcrumbs' %}
1 Like
はじめまして
株式会社UnReactの西川と申します。
既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「シンプルパンくずリスト｜お手軽 Breadcrumbs」も有効な解決策の一つとしてご紹介させていただきます。
弊社の Shopify アプリで恐縮ですが、 「シンプルパンくずリスト｜お手軽 Breadcrumbs」を使用すれば、
「Home→カテゴリー一覧→カテゴリー１→商品名」のパンくずを作成することはできませんが、
「Home→カテゴリー１→商品名」３階層のパンくずリストをコーディング無しで作成することは可能です。
パンくずリストをShopifyストアに挿入するだけの、非常に安価なアプリです。
下記、参考情報です。
Shopify ストアにパンくずリストを実装する方法について徹底解説！
その他にも 42 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。
同じような現象で困っておりました。
＞商品詳細ページだけ下記で呼び起こすように設定したらコレクション一覧→コレクション名が表示されるようになりました！
もう少し詳しく設定方法を教えて頂けると助かります。
よろしくお願いします。