shopifyの初心者です。
bodyタグに商品毎、コレクション毎、固定ページ毎などそれぞれ独自のidもしくはclassを付与したいと考えています。
過去記事を探していた所、下記内容が希望していた内容でした。
https://community.shopify.com/c/Shopify-Design/More-detail-in-body-tags/td-p/241310
ただ、こちらの記述を利用させてもらうと、
タイトルを出力するので、idやclassが日本語表記になってしまいます。
【例】
コレクションが動物
商品名が猫
▼記述
▼出力
こちらの解決策として、商品毎、コレクション毎、固定ページ毎それぞれ登録する際に、
URLとハンドルの部分を英語表記に変更しようと考えております。
【例】
コレクションが動物 URLとハンドルはanimal
商品名が猫 URLとハンドルはcat
▼出力したい例
記述の変更を下記ページを確認しながら検証していたのですが、うまく出力できませんでした。
https://shopify.dev/docs/themes/liquid/reference/objects/page
お手数おかけしますが、bodyタグの記述を教えていただけたらと思います。
ご確認どうぞよろしくお願いします。
id="{{ page_title | handle }}"
上記ですが、これは「ページのタイトルをハンドル形式に変換して出力」というコードになるため、ページのハンドルを出力するコードではありません。
handleフィルターに関しては以下を参照ください。
https://shopify.dev/docs/themes/liquid/reference/filters/string-filters#handle-handleize
{{ page_handle }}というオブジェクトはないようなので(ありましたら他の方ご指摘いただけると助かります)、以下のようにページごとにハンドルを取得して出力することになると思います。
{% if request.page_type == 'product' %}
{% assign body_id = product.handle %}
{% elsif request.page_type == 'collection' %}
{% assign body_id = collection.handle %}
{% elsif request.page_type == 'page' %}
{% assign body_id = page.handle %}
{% else %}
{% assign body_id = 'otherpages' %}
{% endif %}
{% capture handle_class %}{{ request.page_type }}-{{ body_id }}{% endcapture %}
上記は、とりあえず商品とコレクションとページとそれ以外で分けており、それ以外の場合はidが「otherpage」と出力されます。
一応classの方もid用の値を利用して作りましたが、コレクションのみに出力したい場合はif文で出力条件を限定してください。
なお下記URLを参照いただければ他のページに対する分岐も作れますので、必要に応じて作成いただければと思います。
https://shopify.dev/docs/themes/liquid/reference/objects/request#request-page_type
1 Like
ご返答いただきありがとうございます。
内容を確認いたしました。
いただいた記述を試してみたところ、付与されるのは日本語タイトルになってしまいます。
ハンドルを出力 ＝「URLとハンドル」 の部分だと思っていたのですが、
そもそもが捉え方が違うのでしょうか？
▼URLとハンドル
▼実際の出力
文鳥の商品ページでも、
ページURLは
〇〇.myshopify.com/collections/bird/products/buncho
となっていますが、
と出力されてしまいます。
こちらを、
と出力する方法はありますでしょうか？
基本的な理解不足で考え方が違うのかもしれませんが、引き続きご教授いただければ幸いです。
お手数おかけいたしますが、ご確認よろしくお願いいたします。
確認いただきありがとうございます。
ハンドルを出力 ＝「URLとハンドル」 の部分だと思っていたのですが、そもそもが捉え方が違うのでしょうか？
ご指摘の「URLとハンドル」の部分が出力対象です。
そのため、スクリーンショットをみる限りハンドルは「buncho」になっていますので、先ほどの私の投稿で前提としていた状態になっていると思います。
確認するために、以下を書いてどう出力されるのか見ていただけますでしょうか？
handle: {{ collection.handle }}
title: {{ collection.title }}
url: {{ collection.url }}
想定するのは以下の状態です。
- handleとURL末尾の文字列が同じ
- handleとtitleは違う
申し訳ありません。
最初に記載しましたコードを修正させていただきたいと思います。
ああいう書き方せずとも恐らく以下で簡単に取れますね…。
{% if handle %}
{% assign body_id = handle %}
{% else %}
{% assign body_id = 'other' %}
{% endif %}
ご返信ありがとうございます。
handleの間違ってはいなかったので、安心いたしました。
そして、
handle: {{ collection.handle }}
で出力を確認してから、頂いた記述を記入したところ、
無事にbodyに独自idを付与出来ました。
この度はご対応いただきありがとうございました。
とても助かりました。
また、不明点が出た際にご縁がありましたら、どうぞよろしくお願いします。
1 Like
