liquid

特定のページのみコードを適用させる

2023년 7월 22일公開

特定のページのみコードを適用させる方法について解説します

例えば、theme.liquidを編集すると全ページにコードが反映されてしまいます

特定のページだけ
「セクションを表示したい」
「cssやjsを当てたい」

そんな時に使えるコードです

ちなみにtheme.liquidだけでなく各セクションなどにも使えます！！

記述するコードはこちら

①

{%- if template.name == 'page' -%}
    表示させたいものをここに記入
{%- endif -%}

②

{%- if request.path == 'pathを記入' -%}
    表示させたいものをここに記入
{%- endif -%}

他のやり方もあったりするのですが、
今回はよく使う①と②のコードに絞って解説します！

ショピクラだとこんな使い方

例えば、ショピクラですと下記のような使い方をしています

・サイドバーを特定のページのみ非表示
・ファーストビューの画像バナーをブログ記事のみ非表示

TOPなどではサイドバーが表示されていますが、検索ページではサイドバーを非表示にしてます。

トップページにサイドバーを表示

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.path }}の記述例

サイトでの見え方

使用するオブジェクト

今回使用しているオブジェクトは以下になります

最後に

特定のページのみにコードを反映させる実装は
割と実務で使うことが多いので参考になると嬉しいです

requestオブジェクトはURLの値が取れるので
if文のcontainsなんかと組み合わせたら色々な実装ができますよー！

블로그로 돌아가기

ショピクラ