Debutテーマ パンくずリストを表示したい

[Aa16]

Debut テーマを使っています。

パンくずリストを表示したいです。

こちらのサイトを参考に、

コピペでできるのかな… と期待しています。

(https://hon-dana.org/online-shop/bread-crumbs-shopify/)

サイト内では、106行目に貼り付けとあります。

Debut テーマで、メインメニューの下にパンくずリストを表示させる場合。

どのようなコードの後に、貼り付けるべきか、教えていただきたいです。

よろしくお願いします。

[Qcoltd]

参考URLのやり方でうまく動くかの確認はしておりませんが、

layout/theme.liquidでしたら、

{% section 'header' %}

の下、205行目あたりにコードを挿入されると良いかと思います。

もしくは、

sections/header.liquidの

<script type="application/ld+json">

の上、257, 258行目でも挿入位置としては問題ないように思われます。

なお、今からストア構築をされるのでしたら、

Debutではなく、Shopifyの最新のテーマであるDawnの方をおすすめいたします。

https://themes.shopify.com/themes/dawn/styles/default?architecture%5B%5D=os2&locale=ja

コード挿入に関しては動作確認などしていないため、うまくいかない可能性がありますので、

あくまで参考まで。

(キュー田辺)

[Aa16]

ありがとうございます。

試してみました。

パンくずリスト、表示はされたのですが．．．

ページやプロダクトは、きれいな階層表示です。

一方で、ブログは階層表示がなく、「ホーム」という表示だけです。

そこで．．．

このような記事を見つけました。

Shopifyで階層のあるパンくずリストを実装【サンプルコードあり】｜liquid note | 初学者向けShopify情報ブログ (ikdlog.com)

記事内では、新しくbreadcrumb.liquidを作るようにあります。

snippetsフォルダ>新しいsnippetを追加する>breadcrumb.liquid ファイルを作り、

コードをコピペしました。

しかし、パンくずリストが表示されません。

当方の手順が異なるのでしょうか？

アドバイスいただけると、ありがたいです。

どうぞ、よろしくお願いします。

[Qcoltd]

返信遅くなりました。

ご記載の参考記事の、breadcrumb.liquid を作るの部分は、

記事内のリンクを拝見するに、「Simple」というテーマを前提にしたお話に見受けられました。

他のテーマでは、breadcrumb.liquid を読み込む必要があるのではないでしょうか？

{% render 'breadcrumb' %}

か

{% include 'breadcrumb' %}

を、

私の前回の回答に記載した場所に設置してみてはどうでしょうか？

（※ renderで動くのであればrenderを使った方がいいです。https://shopify.dev/api/liquid/tags/theme-tags#render）

ご参考まで。

(キュー田辺)

[Aa16]

ありがとうございます。

ここまでのアドバイスを踏まえ、このように行いました。

備忘録として、残しておきます。

その上で、２点お伺いしたいです。

１）snippetsフォルダ>新しいsnippetを追加する>breadcrumb.liquid ファイルを作る

２）下記コードをコピーする

{% 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' %}
{% 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>
{% 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 %}

３）２）に貼り付ける

４）sections>header.liquid ファイルを開く

５）<script type="application/ld+json"> を探す

６）５）の上に {% render 'breadcrumb' %} を貼り付ける。

[Aa16]

お伺いしたい２点...

１）階層表示について

ブログ、プロダクトは、きれいな階層表示で満足しています。

気になるのは、ページの表示階層です。

希望は、Home>フォルダ名>ページタイトル　の表示です。

現在は、フォルダ名を飛ばしています。

ここを解決したいです。

２）パンくずリストが表示される上部に、少し余白を入れたい　（可能であれば）

どうぞ、よろしくお願いします。

[Qcoltd]

> 希望は、Home>フォルダ名>ページタイトル　の表示です。

ページにフォルダを作成する機能はないように思いますので、

フォルダ名、というのが何を意味するのかがわかっていないのですが、

例えば、

Home > ページ > {{ ページタイトル }}
とされたいのでしたら、

下記を、

  {% if template contains 'page' %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>

 
下記のようにされてはいかがでしょうか？ (動作確認はしておりません。)

  {% if template contains 'page' %}
    <span aria-hidden="true">&rsaquo;</span>
　　　　　　　　<span>ページ</span>
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>

しかし、この場合、「ページ」に設定できるリンクは存在しません。

ページの一覧ページは存在しないからです。( /pages/ にアクセスしても一覧は表示されません)

> ２）パンくずリストが表示される上部に、少し余白を入れたい　（可能であれば）

どのようにCSSを管理されているか分かりませんので、雑なやり方になってしまいますが、(おすすめできる方法でありません。)

<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">

を

<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs" style="margin-top:10px">

とされれば余白が入るはずです。(動作確認はしていません。)

margin-top:10pxの10pxの部分の数値を大きくすれば余白が大きくなり、小さくすれば余白が小さくなります。

なお、

他にもご要望があり、その形に近づけられたい場合は、

Shopifyの制作を請け負っている会社様にご依頼いただいた方が良いかと思います。

ご参考まで。

(キュー田辺)

[Aa16]

ありがとうございます。

フォルダ名と認識していたもの...

正式には、メニュー項目でした。

メインメニュー>メニュー項目>ページ　といった順で

パンくずリストに表示させたい、という要望でした。

[Qcoltd]

メニューとおっしゃられているのは、

Shopify管理画面で設定できるメニューのことでしょうか？

(管理画面 > オンラインストア > メニュー)

おそらく合っていると思いますので、それを前提に回答いたします。

元々、使用されていたコードの下記の部分のうち

  {% if template contains 'page' %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>
  {% elsif template contains 'product' %}

    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>

を削除し、代わりに、 

質問者様が参考にされているサイト様で紹介されている下記のコードを差し込んでみてはいかがでしょうか？

{% assign menu = linklists.main-menu %}
<a href="/">Home </a>
{% for link in menu.links %}
    {% if link.active or link.child_active %} <a href={{link.url}}> > {{ link.title }}</a> {% endif %}
  {% for sub_link in link.links %}
    {% if sub_link.active or sub_link.child_active %}> <a href={{sub_link.url}} > {{ sub_link.title }}</a> {% endif %}
	{% for sub_sub_link in sub_link.links %}
    {% if sub_sub_link.active %} > <a href={{sub_sub_link.url}} > {{ sub_sub_link.title }}</a> {% endif %}
	{% endfor %}
  {% endfor %}
{% endfor %}

例によって、動作確認はしておりませんので、参考まで。

(キュー田辺)

[Aa16]

！　！　！

ありがとうございます。

希望通りの表示になりました。

最後に一点だけ、お付き合いいただけませんか？

ブログ、プロダクトはきれいに表示されています。

HOME>階層>ブログ記事orプロダクト

ページのパンくずリストのみ、次のように表示されます。

HOME HOME >階層>ページ

HOME の重複表示は、どこで修正できますか？

申し訳ありませんが、よろしくお願いします。

[Qcoltd · Accepted solution]

挿入いただいたコードを、

{% assign menu = linklists.main-menu %}
<a href="/">Home </a>
{% for link in menu.links %}
    {% if link.active or link.child_active %} <a href={{link.url}}> > {{ link.title }}</a> {% endif %}
  {% for sub_link in link.links %}
    {% if sub_link.active or sub_link.child_active %}> <a href={{sub_link.url}} > {{ sub_link.title }}</a> {% endif %}
	{% for sub_sub_link in sub_link.links %}
    {% if sub_sub_link.active %} > <a href={{sub_sub_link.url}} > {{ sub_sub_link.title }}</a> {% endif %}
	{% endfor %}
  {% endfor %}
{% endfor %}

下記のようにされてはいかがでしょうか？

{% assign menu = linklists.main-menu %}
{% for link in menu.links %}
    {% if link.active or link.child_active %}<span aria-hidden="true">&rsaquo;</span> 
 <a href={{link.url}}>{{ link.title }}</a> {% endif %}
  {% for sub_link in link.links %}
    {% if sub_link.active or sub_link.child_active %}<span aria-hidden="true">&rsaquo;</span><a href={{sub_link.url}} >{{ sub_link.title }}</a> {% endif %}
	{% for sub_sub_link in sub_link.links %}
    {% if sub_sub_link.active %}<span aria-hidden="true">&rsaquo;</span><a href={{sub_sub_link.url}} >{{ sub_sub_link.title }}</a> {% endif %}
	{% endfor %}
  {% endfor %}
{% endfor %}

パンクズの「>」のHTMLも少し変えてあります。

例によって、動作確認はしておりませんので、ご参考まで。

(キュー田辺)

[Aa16]

希望通りの表示になりました！

お忙しいところ、

お付き合いいただきありがとうございました。