こんにちは、makeshopの大本です。
いつもmakeshopをご利用いただきありがとうございます。

2019年3月末にリリースした「クリエイターモード」で、レスポンシブに対応したのはもちろん、より細かくショップデザインができるようになりました。
その分従来のベーシックモードより複雑になっていますので、makeshopサポートでは今後クリエイターモードについてもご紹介していきたいと思います。

まず第一弾としては、クリエイターモードの変数の基本的な使い方についてご説明いたします。

基本的なタグの書き方

クリエイターモードの変数については、ベーシックモードのようにhtmlごと吐き出されるタグはほぼなく、管理画面で設定された値がそのままでるようになっているものがほとんどです。

例えば商品画像を商品詳細画面で表示する際はこのように書きます。

<img src="<{$item.image_S}>"> 

このようにタグが細かくなっていることで、他のhtml要素やclass、idなど好きに書くことができます。

<img src="<{$item.image_S}>" alt="<{$item.name}>" class="item-name"> 

条件によって出しわけてみよう

クリエイターモードの変数はSmartyというものをベースに作られています。
そのSmartyを利用することで、さまざまな条件によって出しわけることが可能になります。

【真偽値】もし●●だったら

クリエイターモードのタグ一覧の説明文には 【真偽値】 という記述があります。
これは●●が真(true)か偽(false）を判定するためのタグで、一番シンプルな条件式です。

たとえば、商品にオプションがある場合にオプションを選択するプルダウンを表示したいときは以下のように書いてみましょう。

<div class="item-option">
<{if $item.has_option}>
オプションを選択してください
<{$item.option_html}>
<{/if}>
</div>

真偽値の前にifを書くことで「真偽値の値がtrueだったらifで囲われてる中身を表示」という条件で表示を出しわけることができるようになります。

“$item.has_option”はオプションが設定されているかどうかの真偽値なので、商品Aはオプションあり、商品Bはオプションない場合は、Aのみ「オプションを選択してください」という文言とオプション選択用のプルダウンが表示されるようになります。

また、真偽値がtrueとfalseで表示を変えたい場合はelseを使って出しわけてみましょう。

<div class="item-option">
<{if $item.has_option}>
オプションを選択してください
<{$item.option_html}>
<{else}>
この商品にオプションはありません
<{/if}>
</div>

“$item.has_option”がtrueだったら先ほどと同じものが、falseだったら「この商品にオプションはありません」という文言が表示されるようになります。

また「●●がfalseだったら」という条件にしたいときは、$の前に!を付けてみましょう。

<div class="item-option">
<{if !$item.has_option}>
この商品にオプションはありません
<{/if}>
</div>

この真偽値を使いこなすことで、「検索結果が0件だった場合」や「売り切れだった場合」などさまざまな条件にあわせてショップのデザインやレイアウトを変更することができるようになります。

テンプレートの初期値にも記述してありますので、リファレンスのタグ一覧を見ながらどのような出しわけをしているか確認してみましょう。