Dawnでのパンくずリストを表示させ、SEO対策の１つになればと考えているのですが、
うまくいかず困っております。
教えていただけますと幸いです。
なんとか、パンくずリストは表示できたのですが、
かなり画面左端に（余白なし）、フッター近い場所に表示されてしまいます。
以下添付写真参照。
ヘッダーの下に、多少の余白を持たせて表示させるにはどうすれば良いでしょうか？
以下、私が行ったコード編集です。
theme.liquidの
{{ content_for_layout }}
の後に、
{% unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ %}
Home
{% if template contains 'page' %}
›
{{ page.title }}
{% elsif template contains 'product' %}
{% if collection.url %}
›
{{ collection.title | link_to: collection.url }}
{% endif %}
›
{{ product.title }}
{% elsif template contains 'collection' and collection.handle %}
›
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
›
{{ current_tags | join: " + " }}
{% else %}
{{ collection.title }}
{% endif %}
{% elsif template == 'blog' %}
›
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
›
{{ current_tags | join: " + " }}
{% else %}
{{ blog.title }}
{% endif %}
{% elsif template == 'article' %}
›
{{ blog.title | link_to: blog.url }}
›
{{ article.title }}
{% else %}
›
{{ page_title }}
{% endif %}
{% endunless %}
を入れ込みました。
追加説明が必要であればお知らせくださいませ。
どうぞよろしくお願いいたします。
Qcoltd
2
現在挿入しているコードを、{{ content_for_layout }}の後ではなく、前に入れてみてはいかがでしょうか？
また、画面左端にパンくずリストが表示されてしまう件に関しては、下記コードのclassに「page-width」を追加し
↓
とすることで、解決できるのではないかと思います。
パンくずリストの上下の余白を調整したい場合は、base.cssに「breadcrumb」classを追加し、スタイル調整をするのがおすすめです。
例:
.breadcrumb {
margin-top: 10px;
margin-bottom: 10px;
}
10pxの部分をお好みの大きさにご変更ください。
ご参考まで。
(キュー小坂)
3 Likes
キュー小坂様
ご回答いただき、ありがとうございます！
無事、上記の内容について解決されました。
大変助かりました。
しかしながら、新たな問題に気づきまして…
Home画面から2022AWを選択すると、
”Home＞2022AW”と表示されるのですが、
2022AWのうちの一つの商品をクリックすると、
本来であれば、”Home＞2022AW＞フード付ニットワンピース”のように表示されてほしいのですが、
”Home＞フード付ニットワンピース”のみの表示となり”2022AW”の表示が抜けてしまいます…
コードのどこを修正すれば解決されますでしょうか？
もしよければお答えいただけますと大変ありがたいです。
どうぞよろしくお願いいたします。
Qcoltd
4
パンくずの「2022AW」（コレクション名）表示についてですが、
アップいただいているコードを確認すると、
productテンプレートで、collectionオブジェクトを参照するようになっていますが、
collectionオブジェクトを参照するには商品ページ表示URLに「collections/コレクションのURL/」というように、コレクションのURLが含まれている必要があるため、パンくずにコレクションが表示できていないようです。
下記コードを商品詳細ページ部分を
{% elsif template contains 'product' %}
{% if collection.url %}
›
{{ collection.title | link_to: collection.url }}
{% endif %}
↓
下記コードのように変更することで、コレクション部分を表示することができるかと思います。
{% elsif template contains 'product' %}
{% if product.collections %}
›
{% for collection in product.collections %}
{{ collection.title | link_to: collection.url }}
{% if forloop.last != true %} , {% endif %}
{% endfor %}
{% endif %}
商品にコレクションが1つのみ登録されている場合は、下記のように表示されます。
”Home ＞コレクションA ＞商品タイトル”
商品にコレクションが複数登録されている場合は、下記のようにコレクション名が複数表記されます。
”Home ＞コレクションA , コレクションB ＞商品タイトル”
もし、商品にコレクションが複数登録されている場合でも、パンくずにはコレクションを1つのみ表示したい、というご要望がある場合は、例えば、最初の1つだけを表示するというカスタマイズは、下記コードのように簡単にできます。
{% elsif template contains 'product' %}
{% if product.collections %}
›
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
ご参考まで。
(キュー小坂)
3 Likes
キュー小坂様
お返事と問題解決方法をお教えいただき、ありがとうございます。
上記のようにコードを修正するとうまく動作いたしました！
ご丁寧に分かりやすくご説明いただけ、大変助かりました。
さらに質問が出てきてしまいまして・・・！
本来であれば、実際にクリックして辿ったコレクション名が
”Home ＞コレクションA ＞商品タイトル”の場合に、
コレクションAに記載されるべきですが、
商品にコレクションが複数登録されているため、
ご提案いただいた最初の1つだけを表示するというカスタマイズをコードに書き込んだため、
実際に辿ったコレクション名が表示されません・・・
そこまでのコード編集となるとかなり素人には難しいのでしょうか？
もし可能な場合にはその解決策についてもお教えいただけますと幸いです。
何卒よろしくお願いいたします。
Qcoltd
6
下記の変更をお試しください。
まず、コレクションページの商品詳細ページへのリンクURLを変更します。
「スニペット(snippets) > card-product.liquid」のコードを下記のように変更します。
{{ card_product.url }}
↓
{{ collection.url }}{{ card_product.url }}
※Dawnの最新版をご利用であれば、{{ card_product.url }} が3つあると思いますので、3つとも同様の変更をお願いします。
その後、theme.liquidの先に提示しましたコードを下記に変更します。
{% if collection.url != null %}
›
{{ collection.title | link_to: collection.url }}
{% else %}
{% if product.collections %}
›
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
{% endif %}
これらを設定いただければ、コレクションページから商品詳細ページに遷移した場合には、辿ったコレクションがパンくずに表示されます。
例：
コレクションAから商品Aに遷移した場合のパンくず
“ HOME > コレクションA > 商品A ”
コレクションBから商品Aに遷移した場合のパンくず
“ HOME > コレクションB > 商品A ”
また、「collections/all」や、コレクションページ以外から商品詳細ページに遷移した場合は、「最初のコレクション」がパンくずに表示されるようにしました。
しかし、この場合に、パンくずにコレクションが表示される必要がないようでしたら、上記コードから下記の部分を削除お願いします。
{% else %}
{% if product.collections %}
›
{{ product.collections[0].title | link_to: product.collections[0].url }}
{% endif %}
ご参考まで。
(キュー小坂)
3 Likes
キュー小坂様
今回もご丁寧で分かりやすいご回答をいただき、
大変ありがとうございます！！！
無事、表示させたいパンくずを表示させることができました。
なぜか、「スニペット(snippets) > card-product.liquid」のコード修正のみで、
theme.liquidのコードは追加修正は不要（前回お教えいただいたコードのまま）
で表示されました。
本当にありがとうございます。
より一層分かりやすいWebデザインを目指し、改良してまいります。
