Liquid、JavaScriptなどに関する質問
https://ikdlog.com/breadcrumbs/
上記のサイトを参考にパンくずリストを作ってみましたが、商品詳細ページだけうまくパンくずリストが反映されません。
現在は「Home→商品名」と表示されている状態なのですが、
「Home→カテゴリー一覧→カテゴリー1→商品名」のように表示されるようにしたいです。
どなたかご教授いただけないでしょうか?
解決済! ベストソリューションを見る。
成功
まず、「カテゴリー」というのはshopifyの正式な名称だと「コレクション」なので、表記をそちらに変えながら説明します。
該当のコードは以下の部分ですね。
{% elsif template contains 'product' %}
{% if collection.url %}
<span aria-hidden="true">›</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
これは以下を意味します。
また、shopifyで商品ページに到達するには、2通りの方法があります。
(2へは、コレクションページから商品にリンクすると到達可能です)
つまり、現状ではパンクズにコレクション名(カテゴリー1)を追加されるのは、2のURLでアクセスした時に限られるのです。
ーー
そして対策法についてです。
まず「コレクション一覧(カテゴリー一覧)」は、そのまま記述を加えるだけで可能です。表示名は自由に変更してください。
コードA
{% elsif template contains 'product' %}
<span aria-hidden="true">›</span>
{{ 'コレクション一覧' | link_to: '/collections' }}
{% if collection.url %}
<span aria-hidden="true">›</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
続いて、コレクション名(カテゴリー1)についてですが、該当の商品が複数のコレクションに属しているなど、登録状況が複雑であれば対処が難しくなります。
一旦、登録状況がシンプルと仮定して、コードを作成しました。
product.collectionsを使えば、商品の所属コレクションが配列形式で取得できますので、そちらを活用します。
コードB
{% elsif template contains 'product' %}
<span aria-hidden="true">›</span>
{{ 'コレクション一覧' | link_to: '/collections' }}
{% if product.collections[0] %}
<span aria-hidden="true">›</span>
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
コードBで問題無さそうであればそのまま活かしてください。
理想と違っていそうならば、妥協案にはなりますが、コードAを活用してください。
成功
まず、「カテゴリー」というのはshopifyの正式な名称だと「コレクション」なので、表記をそちらに変えながら説明します。
該当のコードは以下の部分ですね。
{% elsif template contains 'product' %}
{% if collection.url %}
<span aria-hidden="true">›</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
これは以下を意味します。
また、shopifyで商品ページに到達するには、2通りの方法があります。
(2へは、コレクションページから商品にリンクすると到達可能です)
つまり、現状ではパンクズにコレクション名(カテゴリー1)を追加されるのは、2のURLでアクセスした時に限られるのです。
ーー
そして対策法についてです。
まず「コレクション一覧(カテゴリー一覧)」は、そのまま記述を加えるだけで可能です。表示名は自由に変更してください。
コードA
{% elsif template contains 'product' %}
<span aria-hidden="true">›</span>
{{ 'コレクション一覧' | link_to: '/collections' }}
{% if collection.url %}
<span aria-hidden="true">›</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
続いて、コレクション名(カテゴリー1)についてですが、該当の商品が複数のコレクションに属しているなど、登録状況が複雑であれば対処が難しくなります。
一旦、登録状況がシンプルと仮定して、コードを作成しました。
product.collectionsを使えば、商品の所属コレクションが配列形式で取得できますので、そちらを活用します。
コードB
{% elsif template contains 'product' %}
<span aria-hidden="true">›</span>
{{ 'コレクション一覧' | link_to: '/collections' }}
{% if product.collections[0] %}
<span aria-hidden="true">›</span>
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
コードBで問題無さそうであればそのまま活かしてください。
理想と違っていそうならば、妥協案にはなりますが、コードAを活用してください。
ご教授いただきありがとうございます!
下記の通りに書き換えて、コレクション一覧→コレクション名→商品詳細に飛んてみたのですが、
何も反映されず、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">›</span>
<span>{{ page.title }}</span>
{% elsif template contains 'product' %}
<span aria-hidden="true">›</span>
{{ 'カテゴリー一覧' | link_to: '/collections' }}
{% if product.collections[0] %}
<span aria-hidden="true">›</span>
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
{% elsif template contains 'collection' and collection.handle %}
<span aria-hidden="true">›</span>
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
<span aria-hidden="true">›</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ collection.title }}</span>
{% endif %}
{% elsif template == 'blog' %}
<span aria-hidden="true">›</span>
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">›</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ blog.title }}</span>
{% endif %}
{% elsif template == 'article' %}
<span aria-hidden="true">›</span>
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">›</span>
<span>{{ article.title }}</span>
{% else %}
<span aria-hidden="true">›</span>
<span>{{ page_title }}</span>
{% endif %}
</nav>
{% endunless %}
度々すみません!
商品詳細ページだけ下記で呼び起こすように設定したらコレクション一覧→コレクション名が表示されるようになりました!
ありがとうございました。
{% render 'breadcrumbs' %}
はじめまして
株式会社UnReactの西川と申します。
既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「シンプルパンくずリスト|お手軽 Breadcrumbs」も有効な解決策の一つとしてご紹介させていただきます。
弊社の Shopify アプリで恐縮ですが、 「シンプルパンくずリスト|お手軽 Breadcrumbs」を使用すれば、
「Home→カテゴリー一覧→カテゴリー1→商品名」のパンくずを作成することはできませんが、
「Home→カテゴリー1→商品名」3階層のパンくずリストをコーディング無しで作成することは可能です。
パンくずリストをShopifyストアに挿入するだけの、非常に安価なアプリです。
下記、参考情報です。
Shopify ストアにパンくずリストを実装する方法について徹底解説!
その他にも 42 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。
Shopify Expertとして、Shopify ストア構築・運用やアプリ開発に至るまで幅広く活動しています。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024