特定のページのみコードを適用させる方法について解説します
例えば、theme.liquidを編集すると全ページにコードが反映されてしまいます
特定のページだけ
「セクションを表示したい」
「cssやjsを当てたい」
そんな時に使えるコードです
ちなみにtheme.liquidだけでなく各セクションなどにも使えます！！
記述するコードはこちら
①{%- if template.name == 'page' -%}
表示させたいものをここに記入
{%- endif -%}
{%- if request.path == 'pathを記入' -%}
表示させたいものをここに記入
{%- endif -%}
他のやり方もあったりするのですが、
今回はよく使う①と②のコードに絞って解説します！
ショピクラだとこんな使い方
例えば、ショピクラですと下記のような使い方をしています
・サイドバーを特定のページのみ非表示
・ファーストビューの画像バナーをブログ記事のみ非表示
TOPなどではサイドバーが表示されていますが、検索ページではサイドバーを非表示にしてます。
記事詳細ページでは画像バナーを非表示に↑↑
その他にも
・特定のページのみヘッダーを非表示させたい！
・特定のページのみヘッダーの色を変えたい！
・特定のページのみセクションを表示したい！
こんな感じで使えたりします！
コードの解説
条件分岐（if文）を使い特定のページのみ値を返してくれるようにしています。
①テンプレートで区別（template.name）
②現在のURLで区別
と２つのパターンに分けて解説します。
①テンプレートで区別 {{ template.name }}
テンプレート名"page"のみ表示される{%- if template.name == 'page' -%}
表示させたいものをここに記入
{%- endif -%}
template.nameで現在のページのテンプレート名が取得できます。
テンプレート名（'page' の部分）については、こちらに各テンプレートの名前（page、articleなど）がありますので該当するテンプレートに合わせてお使いください。
後述するrequestオブジェクトの{{ request.page_type }}を使っても同じような制御ができます。
{%- if request.page_type == 'page' -%}
表示させたいものをここに記入
{%- endif -%}
②現在のURLで区別 {{ request.path }}
"path"が一致する時のみ表示される{%- if request.path == 'pathを記入' -%}
表示させたいものをここに記入
{%- endif -%}
requestオブジェクトを使えば現在のURLとそれに関連するページ情報の値が取得できます。
{{ request.path }}は現在のURLパスが以下のように取得できます。
・top → /
・商品ページ → /products/商品のhandle
・ブログ → /blogs/ブログのhandle
現在のページのpathがわからないって方は下記画像のようにtheme.liquidのbodyタグの下に{{ request.path }}と入力すれば確認できます
使用するオブジェクト
今回使用しているオブジェクトは以下になります
最後に
特定のページのみにコードを反映させる実装は
割と実務で使うことが多いので参考になると嬉しいです
requestオブジェクトはURLの値が取れるので
if文のcontainsなんかと組み合わせたら色々な実装ができますよー！
