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の文法上、idやclassに空白スペースを含めることはできません。
そのためページのタイトルが例えば ｢Blue Jeans｣だとすると、handlizeフィルターを使用して｢blue-jeans｣と変換する必要があります。
現在のcollection名をclassとして加える
先の例のようにcollection名をclassに加えることもできます。
<body class="{{ collection.title | handlize }}">このように目的に応じて簡単にclass名を変化させることができます。
まとめ
このようにbodyのHTMLタグの中にいろいろなclassを動的に加えることを紹介しました。これらのhooksをCSSやJavascriptに活用すると、よりダイナミックで柔軟なテーマデザインを施すことができます。
この記事が気に入ったらサポートをしてみませんか？