FROM CACHE - jp_header
解決済

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

ponuco
Shopify Partner
34 1 2

https://ikdlog.com/breadcrumbs/

 

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

 

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

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

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

1 件の受理された解決策

st_mh
探検家
40 13 11

成功

まず、「カテゴリー」というのは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を活用してください。

元の投稿で解決策を見る

3件の返信3

st_mh
探検家
40 13 11

成功

まず、「カテゴリー」というのは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
Shopify Partner
34 1 2

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

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

何も反映されず、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
Shopify Partner
34 1 2

度々すみません!

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

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

{% render 'breadcrumbs' %}