Re: bodyタグに商品毎、コレクション毎、固定ページ毎などそれぞれ独自のidもしくはclassを付与したい

next_kota · ‎09-10-2020

shopifyの初心者です。

bodyタグに商品毎、コレクション毎、固定ページ毎などそれぞれ独自のidもしくはclassを付与したいと考えています。

過去記事を探していた所、下記内容が希望していた内容でした。
https://community.shopify.com/c/Shopify-Design/More-detail-in-body-tags/td-p/241310

ただ、こちらの記述を利用させてもらうと、
タイトルを出力するので、idやclassが日本語表記になってしまいます。

【例】
コレクションが動物
商品名が猫

▼記述
<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} {% if collection %}collection-{{ collection.title | handle }}{% endif %}">

▼出力
<body id="猫" class="template-product collection-動物">

こちらの解決策として、商品毎、コレクション毎、固定ページ毎それぞれ登録する際に、
URLとハンドルの部分を英語表記に変更しようと考えております。

【例】
コレクションが動物　URLとハンドルはanimal
商品名が猫　URLとハンドルはcat

▼出力したい例
<body id="cat" class="template-product collection-animal">

記述の変更を下記ページを確認しながら検証していたのですが、うまく出力できませんでした。

https://shopify.dev/docs/themes/liquid/reference/objects/page

お手数おかけしますが、bodyタグの記述を教えていただけたらと思います。
ご確認どうぞよろしくお願いします。

Jizo_Inagaki · ‎09-11-2020

申し訳ありません。
最初に記載しましたコードを修正させていただきたいと思います。

ああいう書き方せずとも恐らく以下で簡単に取れますね...。

{% if handle %}
  {% assign body_id = handle %}
{% else %}
  {% assign body_id = 'other' %}
{% endif %}

<body id="{{ body_id | escape }}">

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

Jizo_Inagaki · ‎09-10-2020

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

<body id="{{ body_id | escape }}" class="{{ handle_class | escape }}" >

上記は、とりあえず商品とコレクションとページとそれ以外で分けており、それ以外の場合はidが「otherpage」と出力されます。

一応classの方もid用の値を利用して作りましたが、コレクションのみに出力したい場合はif文で出力条件を限定してください。

なお下記URLを参照いただければ他のページに対する分岐も作れますので、必要に応じて作成いただければと思います。

https://shopify.dev/docs/themes/liquid/reference/objects/request#request-page_type

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

next_kota · ‎09-11-2020

ご返答いただきありがとうございます。
内容を確認いたしました。

いただいた記述を試してみたところ、付与されるのは日本語タイトルになってしまいます。
ハンドルを出力　＝「URLとハンドル」　の部分だと思っていたのですが、
そもそもが捉え方が違うのでしょうか？

▼URLとハンドル

▼実際の出力

文鳥の商品ページでも、
ページURLは
〇〇.myshopify.com/collections/bird/products/buncho
となっていますが、
<body id="文鳥" class="template-product collection-鳥 ">
と出力されてしまいます。

こちらを、
<body id="buncho" class="template-product collection-bird ">
と出力する方法はありますでしょうか？

基本的な理解不足で考え方が違うのかもしれませんが、引き続きご教授いただければ幸いです。
お手数おかけいたしますが、ご確認よろしくお願いいたします。

Jizo_Inagaki · ‎09-11-2020

確認いただきありがとうございます。

ハンドルを出力　＝「URLとハンドル」　の部分だと思っていたのですが、そもそもが捉え方が違うのでしょうか？

ご指摘の「URLとハンドル」の部分が出力対象です。

そのため、スクリーンショットをみる限りハンドルは「buncho」になっていますので、先ほどの私の投稿で前提としていた状態になっていると思います。

確認するために、以下を書いてどう出力されるのか見ていただけますでしょうか？

<p>handle: {{ collection.handle }}</p>
<p>title: {{ collection.title }}</p>
<p>url: {{ collection.url }}</p>

想定するのは以下の状態です。

handleとURL末尾の文字列が同じ
handleとtitleは違う

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

Jizo_Inagaki · ‎09-11-2020

申し訳ありません。
最初に記載しましたコードを修正させていただきたいと思います。

ああいう書き方せずとも恐らく以下で簡単に取れますね...。

{% if handle %}
  {% assign body_id = handle %}
{% else %}
  {% assign body_id = 'other' %}
{% endif %}

<body id="{{ body_id | escape }}">

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

next_kota · ‎09-11-2020

ご返信ありがとうございます。

handleの間違ってはいなかったので、安心いたしました。

そして、

<p>handle: {{ collection.handle }}</p>

で出力を確認してから、頂いた記述を記入したところ、

無事にbodyに独自idを付与出来ました。

この度はご対応いただきありがとうございました。

とても助かりました。

また、不明点が出た際にご縁がありましたら、どうぞよろしくお願いします。

Re: bodyタグに商品毎、コレクション毎、固定ページ毎などそれぞれ独自のidもしくはclassを付与したい

bodyタグに商品毎、コレクション毎、固定ページ毎などそれぞれ独自のidもしくはclassを付与したい

コミュニティ・ブログ記事