FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

ponuco
Shopify Partner
37 1 3

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を活用してください。

元の投稿で解決策を見る

4件の返信4

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
37 1 3

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

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

何も反映されず、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
37 1 3

度々すみません!

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

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

{% render 'breadcrumbs' %}   

 

Nishi
Shopify Partner
27 2 1

はじめまして

株式会社UnReactの西川と申します。

既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「シンプルパンくずリスト|お手軽 Breadcrumbs」も有効な解決策の一つとしてご紹介させていただきます。

 

弊社の Shopify アプリで恐縮ですが、 「シンプルパンくずリスト|お手軽 Breadcrumbs」を使用すれば、

「Home→カテゴリー一覧→カテゴリー1→商品名」のパンくずを作成することはできませんが、

「Home→カテゴリー1→商品名」3階層のパンくずリストをコーディング無しで作成することは可能です。

Nishi_0-1722391059704.webp

 

Nishi_1-1722391059688.webp

 

 

 

パンくずリストをShopifyストアに挿入するだけの、非常に安価なアプリです。

 

 

下記、参考情報です。

シンプルパンくずリスト|お手軽 Breadcrumbs

Shopify ストアにパンくずリストを実装する方法について徹底解説!

 

 

その他にも 42 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。

 

参考アプリ一覧

株式会社UnReact


Shopify Expertとして、Shopify ストア構築・運用やアプリ開発に至るまで幅広く活動しています。