前回のレッスンで、商品ページに使用する独自セクションが出来ました。 今回は自作セクションの見た目を整え、テーマのカスタマイズ画面から設定できる項目を作って利便性を高めていきましょう。
メタフィールドの見た目を整える
メタフィールド部分を、完成見本のように表示できるようHTMLとCSSを書きます。
1.CSSファイルを作成
Shopifyテーマへの独自CSS追加には、何通りか方法があります。 今回は1つのCSSファイルにまとめて書いていく方法を使います。
アセットディレクトリ内に「edoya.css」を新規作成してください。
レイアウトディレクトリ > theme.liquid を開きます。
base.cssの下で、作成したedoya.cssを読み込ませてください。
{{ 'edoya.css' | asset_url | stylesheet_tag }}
2.HTMLとCSSを書く
Liquidファイル内のHTMLを調整し、CSSファイルに記述を加えます。
このあたりは普通のコーディングです。 やりやすい方法でクラス名をつけたり、CSSを書いていけばOKです。
main-product-custom.liquid
{%- when 'textblock' -%}
<div class="col2list">
<p class="col2list_heading">{{ block.settings.heading }}</p>
<div class="col2list_text">{{ block.settings.text }}</div>
</div>
上ではcol2list、col2list_heading、col2list_textと３つのクラスを付けました。
edoya.cssの方で、作ったクラスをセレクタにCSSを書きます。
edoya.css
.col2list{
padding: 1.25rem 0;
border-top: 1px #bbb solid;
}
.col2list:last-child{
border-bottom: 1px #bbb solid;
}
/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) {
.col2list {
display: flex;
}
.col2list_heading{
flex: 0 0 25%;
}
.col2list_text{
flex: 1;
}
}
メタフィールドの表示は、見やすくなったのではないでしょうか。
更にカスタマイズするなら
上記CSSだけだと、メタフィールドと商品説明の最後がくっついています。 余白を追加したい場合は、クラスを作る・既存のクラスを使って、自作CSSファイルにスタイル指定を書いていけばOK。
既存のクラスを使う場合、自作したセクション全体に、新しくオリジナルクラスを命名すると、そのセクションにだけ有効なスタイル指定もできます。 今回の例だと、下記のような書き方です。
main-product-custom.liquid
edoya.css
.product-custom .product__description{
margin-top: 3rem;
margin-bottom: 5rem;
}
3.条件分岐を作る
メタフィールドで、商品登録の時に情報を入力していない箇所がありますよね。 下図の商品だと、「そのほか」は何も登録されていないので空です。
情報が無い場合、その行は表示させたくない、という場合もあるでしょう。
こうした時はLiquidタグを使い、条件分岐を作って対応します。
以下は「block.settings.textに情報がある場合のみ、<div class="col2list">~</div>を出力せよ」という分岐です。
main-product-custom.liquid
{%- when 'textblock' -%}
{%- if block.settings.text != blank -%}
<div class="col2list">
<p class="col2list_heading">{{ block.settings.heading }}</p>
<div class="col2list_text">{{ block.settings.text }}</div>
</div>
{%- endif -%}
セクション＆ブロックの利便性アップ
ここまでで、表示したい情報の取得は出来ています。 次はカスタマイズ画面からの設定のしやすさ、見やすさをアップさせていきましょう。
- セクション見出しを登録できるようにする
- セクションの上下余白を設定できるようにする
- 選択ブロックを分かりやすくする
1.セクション見出しを登録できるようにする
まず、セクションの見出しを設定できるようにします。
schema内、nameの下にある"settings": [] の中に記述して入力箇所を作ります。
main-product-custom.liquid
{% schema %}
{
"name": "商品説明",
"settings": [
{
"type" : "text",
"id" : "title",
"label": "セクションタイトル",
"default": "商品説明"
}
],
"blocks"...以下略
schemaタグの外側、表示部分の一番上にセクション見出しを出力します。
main-product-custom.liquid
{%- if section.settings.title != blank -%}
<h3>
{{section.settings.title}}
</h3>
{%- endif -%}
更にカスタマイズするなら
settingsのオブジェクトを増やすと、カスタマイズ画面から見出しの文字サイズを変更できるようにすることも可能です。
コードは、この設定箇所が既にあるマルチカラムのセクション（multicolumn.liquid）からコピーしてきましょう。 以下のようになります。
main-product-custom.liquid
{%- if section.settings.title != blank -%}
<h3 class="title {{ section.settings.heading_size }}">
{{section.settings.title}}
</h3>
{%- endif -%}
<!-- 中略 -->
{% schema %}
{
"name": "商品説明",
"settings": [
{
"type" : "text",
"id" : "title",
"label": "セクションタイトル",
"default": "商品説明"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
],
"blocks"...以下略
これは、セレクトのオプションで選んだvalueの値を、h3タグのクラス {{ section.settings.heading_size }} に出力する、という設定です。
defaultであれば、h3タグは<h3 class="title h1">となります。
2.セクションの余白設定
商品情報のセクションだと設定できる、上下余白を選ぶスライダー。 これもあるとストア運営者に優しそうなので、追加します。
下記の設定をすると、自作セクションの表示幅も、他セクションと同じ幅に揃いますよ。
2-1.paddingの設定フィールドを作る
main-product.liquidから、必要箇所のコードをコピーしましょう。
ファイルの一番下までスクロールダウンすると、idがpadding_topとpadding_bottomのオブジェクトがあります。この２つをコピーします。
コピーした部分を、main-product-custom.liquidの"settings": [] 内に貼り付けます。
} と { の間に、区切りのカンマ,を忘れずに入れてください。
2-2.設定したpaddingを反映させる
次に、設定された上下paddingをセクションに適用する設定です。 こちらも、既に完成形があるmain-product.liquidのコードを使います。
main-product.liquidから以下2箇所をコピーしてください。
それぞれ、自作セクション（main-product-custom.liquid）へと貼り付けます。
* 1行目～5行目のsectionタグ
* {%- style -%} から {%- endstyle -%}まで
main-product-custom.liquidへ貼り付けたら、</section>タグを追加しましょう。
{% schema %}タグのすぐ上に書けばOKです。
main-product-custom.liquid
<section
id="MainProduct-{{ section.id }}"
class="page-width section-{{ section.id }}-padding"
data-section="{{ section.id }}"
>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if section.settings.title != blank -%}
<h3 class="title {{ section.settings.heading_size }}">
{{section.settings.title}}
</h3>
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'description' -%}
{%- if product.description != blank -%}
<div class="product__description rte quick-add-hidden"}}>
{{ product.description }}
</div>
{%- endif -%}
{%- when 'textblock' -%}
{%- if block.settings.text != blank -%}
<div class="col2list">
<p class="col2list_heading">{{ block.settings.heading }}</p>
<div class="col2list_text">{{ block.settings.text }}</div>
</div>
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
</section>
上記コードの仕組み
main-product.liquidからコピーしたコードは、下図の流れでpaddingを設定します。
{{ section.id }}はセクションのID（動的セクションの場合、Shopifyが自動生成するID）を出力しています。
{{ section.id }}を使うことで「このセクションだけに有効なidもしくはclass名」を作って、CSSを適用させている、という形です。
ここではpaddingを設定していますが、font-sizeなどの値でも同様に使用できます。
なお、使われているフィルターの役割は以下のとおりです。
- timesフィルター：入力値をtimesで設定した値で乗算する
- roundフィルター：小数点以下を四捨五入した整数にする
3.選択ブロックを分かりやすくする
テーマカスタマイズ画面でインスペクターをONにしていても、自作した“商品情報”のブロックは、プレビュー部分でハイライト表示がされません。
何かが設定できない…という害はありませんが、ちょっと不便。 ブロックを選択した時に、プレビュー画面の方も反応するように設定しましょう。
方法は簡単。
ブロックを囲む要素に{{ block.shopify_attributes }}属性を加えるだけです。
main-product-custom.liquid
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'description' -%}
{%- if product.description != blank -%}
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
{{ product.description }}
</div>
{%- endif -%}
{%- when 'textblock' -%}
{%- if block.settings.text != blank -%}
<div class="col2list" {{ block.shopify_attributes }}>
<p class="col2list_heading">{{ block.settings.heading }}</p>
<div class="col2list_text">{{ block.settings.text }}</div>
</div>
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
block.shopify_attributesについては、Section Schema - Content内“Render blocks”の項目で紹介されています。
Shopify公式ドキュメント / Section Schema
https://shopify.dev/themes/architecture/sections/section-schema#content
コードを上書き保存して、もう一度カスタマイズ画面を見てみましょう。
ここまでの変更箇所が反映されていれば完成です。