Makeshopには「クリエイターモード」という構築方法が用意されており、これにより自由度の高いデザインカスタマイズ性やレスポンシブWebデザインへの対応が可能となっています。
この記事では、クリエイターモードでのECサイト構築時に肝となる「独自タグ」と「モジュール」という機能について簡単に解説していきます。
目次
独自タグについて
基本的なタグの書き方
ベーシックモードにも独自タグが用意されており、下記のように [ ] で囲まれた指定の文字列を書くことで、それぞれに対応したhtmlが出力されるような仕組みになっていました。
ベーシックモードの独自タグ
<div id="itemImg">
[IMAGE]
</div>
クリエイターモードではsmartyを採用した新たな独自タグが使用されています。htmlごと出力するようなタグが少なく、管理画面で設定した値がそのまま出力されることが多いので、より細かくhtmlの構造を調整したり、classやidを自由に書くことができます。
クリエイターモードの独自タグ
<div id="item">
<img src="<{$item.image_S}>" class="item-image">
</div>
条件分岐の書き方
①基本的な書き方
独自タグでは値を出力するだけでなく、条件分岐を指定することもできます。
「もし〇〇なら」という条件に当てはまっている場合のみ、中身のhtmlを表示するといったような、シンプルな構文で使用できます。
例えば、「商品に”追加商品画像”が登録されていたら」という条件の場合は以下のようになります。
<{if $item.add_image.has_item}>
<p><{$item.add_image.list[i].description}></p>
<{/if}>
追加商品画像は通常の商品画像とは別に商品画像を最大で3枚まで登録できる機能です。上記の構文の場合、「商品に”追加商品画像”が登録されていたらそれに付随する”追加商品説明文”を表示する」という意味になります。
②カテゴリー別、商品別に商品ページのデザインを変更する
お客様の中には、「このカテゴリーの商品はこのレイアウトにしたい」や「この商品にはこの画像を挿入したい」など、商品詳細の見せ方に特にこだわりを持つ方も多いと思います。
クリエイターモードでは「このカテゴリーの場合」や「この商品の場合」というような条件の指定もできるので、上記のようなご要望を叶えることも可能です。
少しやり方をみてみましょう。
１）「カテゴリID」「システム商品コード」の確認
カテゴリー別、商品別の条件分岐には、「カテゴリID」「システム商品コード」を使用します。
それぞれ商品管理画面から確認ができます。
– カテゴリID –
– システム商品コード –
２）条件分岐を書く（システム商品コードの例）
あとは以下のように記載することで条件分岐ができます。
<{if $page.id == "000000000675"}>
<p>000000000675の商品にしか表示されません</p>
<{/if}>
以下のように複数を同時に指定することもできます。
<{if $page.id == "000000000675 || $page.id == "000000000090" || $page.id == "000000000078"}>
<p>000000000675、000000000090、000000000078の商品にしか表示されません</p>
<{/if}>他にも「商品が売り切れていた場合」や「検索結果が0件の場合」など様々な条件に合わせてデザインやレイアウトをカスタマイズすることができるようになりますので、ぜひ使いこなしてみてください。
モジュールについて
モジュールとは
もう一つクリエーターモードで重要になる機能が、「モジュール」です。
モジュールはhtmlをパーツのようにまとめることができる機能です。作成したモジュールは変数として簡単に呼び出すことができるので、全ページ共通で使用したい部分（ヘッダーやフッターなど）をモジュール化しておくことで、一つずつページを更新する手間がなくなり、運用がとても楽になります。
また、何かしらのコードを更新する時、ページから直接更新箇所を探すより、モジュールとしてまとめられている方が、管理画面から探す労力も短縮でき、ミスも減らすことができます。
モジュールの使い方
モジュールはテンプレート管理画面の モジュール管理 ＞ モジュール追加 から登録、編集ができます。
赤枠内にパーツ化したいhtmlを記載します。独自タグで値を取得したり、条件分岐を記載することも可能です。
モジュールIDに呼び出すための変数を追記したら登録完了です。
登録したモジュールは、モジュールIDをページ任意の位置に呼び出すことでサイトに表示することができます。
まとめ
いかがでしたでしょうか。
クリエイターモードでの「独自タグ」「モジュール」という機能について簡単に解説していきました。
今回はこの2点についてお話しましたが、Makeshopには他にも様々な機能が用意されています。
アートピースではこれらの機能を駆使し、デザイン性だけでなく、UI/UX、運用面にも優れたECサイトを構築していきます。何かお困りの際はぜひ弊社にもご相談ください！
株式会社アートピースでは、16年にわたり50社以上のECサイト運用代行を通じて培った経験と知識を活かし、各企業の特定の課題に焦点を当てたコンサルティングサービスも展開しております。
ご興味をお持ちの方は、さまざまな成功事例等をご紹介しておりますので、ぜひご覧ください。
