見出し画像

Shopifyテーマ Chapter13 Liquidで便利なCSS hooks

Javascript hooks  やWordpress のように、ShopifyにもCSSクラスをbody タグに動的に加えることができます。

bodyのクラスに現在のレンダリング中のテンプレートを加える

<body class="{{ template | handlize }}">

以前のチャプターでLiquidコードの{{ template }}をつかって現在使用中のテンプレート名を出力する方法を紹介しましたが、その応用です。
テンプレートによって下記のようにclass名を動的につけることが可能です。

<body class='index'>
<body class='product'>
<body class='collection'>

これは特定のオルタネイトテンプレートが必要なときに便利な方法です。

現在レンダリングしている商品のハンドルをbodyのclassに加える。

現在の商品のハンドルをbodyのclassに加えたいとします。Liquidのif文を使うことにより条件を分岐させて加えることもできます。

<body class="{{ template }}{% if template == 'product' %}"{{ product.handle}} {{% endif%}}

*注意:CSSのクラスはスペースによって区切られて判断されるので、{{ product.handle }}の前にスペースが含まれるようにします。

もしオルタネイトテンプレートをつかっているならcontainのオペレーターを使うのも便利です。

<body class="{{ template}}{% if template contains "product" %}{{ product.handle }}{% endif %}>

bodyのclassに現在のページタイトルを加える

いくつかのテーマはidを利用し現在のページタイトルをbodyのclassに加えているものもあります。下記のように記述します。

<body id="{{ page_title | handlize }}">

ここで注意するべきななのが、handlizeのLiquidフィルターを使用しているところです。
HTMLの文法上、idclassに空白スペースを含めることはできません。
そのためページのタイトルが例えば 「Blue Jeans」だとすると、handlizeフィルターを使用して「blue-jeans」と変換する必要があります。

現在のcollection名をclassとして加える

先の例のようにcollection名をclassに加えることもできます。

<body class="{{ collection.title | handlize }}">

このように目的に応じて簡単にclass名を変化させることができます。

まとめ

このようにbodyのHTMLタグの中にいろいろなclassを動的に加えることを紹介しました。これらのhooksをCSSやJavascriptに活用すると、よりダイナミックで柔軟なテーマデザインを施すことができます。


この記事が気に入ったらサポートをしてみませんか?