商品詳細ページのパンくずリストについて

[ponuco]

https://ikdlog.com/breadcrumbs/

上記のサイトを参考にパンくずリストを作ってみましたが、商品詳細ページだけうまくパンくずリストが反映されません。

現在は「Home→商品名」と表示されている状態なのですが、

「Home→カテゴリー一覧→カテゴリー１→商品名」のように表示されるようにしたいです。

どなたかご教授いただけないでしょうか？

[st_mh · Accepted solution]

まず、「カテゴリー」というのはshopifyの正式な名称だと「コレクション」なので、表記をそちらに変えながら説明します。

該当のコードは以下の部分ですね。

{% elsif template contains 'product' %}
  {% if collection.url %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ collection.title | link_to: collection.url }}
  {% endif %}
  <span aria-hidden="true">&rsaquo;</span>
  <span>{{ product.title }}</span>

 これは以下を意味します。

• （1行目）productテンプレートの時
• （2行目）URLにコレクションが含まれていれば
• （4行目）そのコレクション名、リンクを追加する

また、shopifyで商品ページに到達するには、2通りの方法があります。

1. https://***.com/products/00000 
2. https://***.com/collections/コレクション名/products/00000

（2へは、コレクションページから商品にリンクすると到達可能です）

つまり、現状ではパンクズにコレクション名（カテゴリー1）を追加されるのは、2のURLでアクセスした時に限られるのです。

ーー

そして対策法についてです。

まず「コレクション一覧（カテゴリー一覧）」は、そのまま記述を加えるだけで可能です。表示名は自由に変更してください。

コードA

{% elsif template contains 'product' %}
  <span aria-hidden="true">&rsaquo;</span>
  {{ 'コレクション一覧' | link_to: '/collections' }}
  {% if collection.url %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ collection.title | link_to: collection.url }}
  {% endif %}
  <span aria-hidden="true">&rsaquo;</span>
  <span>{{ product.title }}</span>

続いて、コレクション名（カテゴリー1）についてですが、該当の商品が複数のコレクションに属しているなど、登録状況が複雑であれば対処が難しくなります。

一旦、登録状況がシンプルと仮定して、コードを作成しました。

product.collectionsを使えば、商品の所属コレクションが配列形式で取得できますので、そちらを活用します。

コードB

{% elsif template contains 'product' %}
  <span aria-hidden="true">&rsaquo;</span>
  {{ 'コレクション一覧' | link_to: '/collections' }}
  {% if product.collections[0] %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ product.collections[0].title | link_to: product.collections[0].url }}
  {% endif %}
  <span aria-hidden="true">&rsaquo;</span>
  <span>{{ product.title }}</span>

•  URLに差があっても、関係なく所属コレクションが出力されます。
  1. https://***.com/products/00000 
  2. https://***.com/collections/コレクション名/products/00000
• コレクションに所属していなければ何も出力されません。
• 所属コレクションが複数存在する場合、最初のコレクション（※）が選ばれます。
  • ※コレクションの順序に関しては、調べた限り規則性が見つかりませんでした。
  • ※コレクションの作成順、登録順、タイトル順とは無関係に、内部で順序が決められるようです。

コードBで問題無さそうであればそのまま活かしてください。

理想と違っていそうならば、妥協案にはなりますが、コードAを活用してください。

[ponuco]

ご教授いただきありがとうございます！

下記の通りに書き換えて、コレクション一覧→コレクション名→商品詳細に飛んてみたのですが、

何も反映されず、Home→商品名と表示されてしまいます...

コードA、コードBとも試してみましたがダメでした。

コレクションは現在8種類あり、複数のコレクションには属さずに設定しております。

不躾なお願いですが、もし何か原因等わかれば教えていただきたいです。

よろしくお願いいたします。

{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>
  {% if template contains 'page' %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>
{% elsif template contains 'product' %}
  <span aria-hidden="true">&rsaquo;</span>
  {{ 'カテゴリー一覧' | link_to: '/collections' }}
  {% if product.collections[0] %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ product.collections[0].title | link_to: product.collections[0].url }}
  {% endif %}
  <span aria-hidden="true">&rsaquo;</span>
  <span>{{ product.title }}</span>
  {% elsif template contains 'collection' and collection.handle %}
    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}
  {% elsif template == 'blog' %}
    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ blog.title }}</span>
    {% endif %}
  {% elsif template == 'article' %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ article.title }}</span>
  {% else %}
   <span aria-hidden="true">&rsaquo;</span>
   <span>{{ page_title }}</span>
  {% endif %}
</nav>
{% endunless %}

[ponuco]

度々すみません！

商品詳細ページだけ下記で呼び起こすように設定したらコレクション一覧→コレクション名が表示されるようになりました！

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

{% render 'breadcrumbs' %}