先日、数年振りにMakeShopでのECサイト構築の案件に参画させていただきました。以前に少し触ったことがあるものの、ほぼ忘れていた状況で、独自コードの書き方を調べたりするのが面倒だったのと、よく使うUIなんかは控えておくと便利なので備忘録としてまとめてみました。MakeShopでECサイトを構築するときには、2パターンがあり「ベーシックモード」と呼ばれる旧来型のテンプレートを使用するのと、「クリエイターモード」という新しい仕様のもので構築する方法があります。今回はクリエイターモードでのサイト制作ということでした。クリエイターモードでは、レスポンシブデザインにも対応しており（ベーシックモードはPCサイトとモバイルサイトが分かれている）コードも基本的には自由に書くことができ、とても柔軟にECサイトを構築できるようになります。   その分、基本的なコーディングの知識が技術は必要になりますが、クオリティの高いECサイトが構築できるようになります。もちろん、完成したテンプレートデザインもいくつか用意されており、それをそのまま利用することで、コードを書かなくても完成したサイトデザインでショップを始めることも可能です。テンプレートエンジンに「Smarty」が使われているようなのですが、独自のタグや一部組み込み関数が使えなかったりと制約もあるため、慣れていないと意外に時間がかかったりします。そこで覚えておくと使えるようなコードの一部をあげていきたいと思います。    

テンプレートタグ・関数

MakeShopで使われる変数やデータの値などを出力する関数が用意されています。動的に値が変わるところではこういった関数を使ってページに表示させる情報を出力していきいます。主なものに各種ページのURLがありますが、MakeShopの場合、サイト自体をSSL対応していないとルートパスで出力されてしまうようです。ですので、https://から始まる絶対パスで出力したい場合にはサイトのSSL対応が必要になります。  

<{$makeshop.head}>	headタグ内に入れるシステム用タグ
<{$makeshop.body_top}>	body開始タグ直後に入れるシステム用タグ
<{$makeshop.body_bottom}>	body終了タグ直前に入れるシステム用タグ
<{$module.MODULE_ID}>	モジュールの読み込みと出力
<{$url.top}>	トップページURL出力
<{$url.cart}>	カートページURL出力
<{$url.mypage}>	マイページURL出力
<{$url.support}>	お問い合わせフォームURL出力
<{$url.guide}>	利用案内ページURL出力
<{$url.company}>	会社概要ページURL出力
<{$url.contract}>	特商法ページURL出力
<{$url.policy}>	プライバシーポリシーページURL出力

  はじめの3つはECサイトを正しく機能させる上で必要となるので忘れずに注意しておきます。またこれらはMakeShopサイト内ではどのページでも使うことができる共通のタグになります。このような独自タグや関数は他にもたくさんあり、ショップ内のUIを作るときに使われます。実際にいくつか例を上げてみます。   検索フォーム

<input type="text" data-id="<{$search_form.keyword_id}>" value="" placeholder="">
<a href="<{$search_form.search_url}>">検索</a>

一般的にはform要素でsubmitする形になりますが、MakeShopではカスタムデータ属性で紐付けたフォームの値を受け取り商品検索結果ページへリンクさせる形のようです。   購入数量入力フォーム

<input type="number" data-id="<{$item.quantity_id}>">

こちらもカスタムデータ属性を指定することで、商品をカートに入れる際にフォームの値をカートページに受け渡す形になっているようですね。   カートボタン

<{if !$item.is_soldout && 0 < $item.stock_quantity}>
  <a href="<{$item.cart_entry_url}>">カートに入れる</a>
<{/if}>

こちらも検索フォーム同様にform要素でsubmitするのではなく、直接カートページへリンクさせる形になっています。   商品問い合わせリンク

<a href="<{$item.contact_url}>">この商品について問い合わせる</a>

MakeShopではセキュリティの観点から、ショップサイトのページ内の直接フォームが置かれるのではなく、別ウィンドウで専用のページが表示され、そこに用意されているフォームを使います。   お気に入りに追加ボタン

<a href="<{$item.favorite_entry_url}>">お気に入りに追加</a>

クリックイベントで非同期通信といった処理を実装するのも不要で、こちらもリンク形式で用意されているものを設置するだけでOKです。   パンくずリスト

<ul>
  <{section name=i loop=$category.breadcrumb_list.list}>
    <li>
      <a href="<{$category.breadcrumb_list.list[i].url}>">
        <{$category.breadcrumb_list.list[i].name}>
      </a>
    </li>
  <{/section}>
</ul>

ショップサイトでよく見かけるパンくずリストもページごとにディレクトリ情報が変数内に格納されているため、そのままループで出力させるだけで表示されます。ただ、下層ページに設置させる場合、トップページへのリンクは含まれないので注意が必要です。    

分岐処理系

ショップサイトの中にはアプリケーションの状態によって表示内容を切り替えるといった分岐処理も必要になってきます。MakeShopではいろんなステータスに対してBoolean値を返すような条件分岐系の関数もたくさん用意されています。いくつか例をピックアップしてみます。   ログイン周り

<{if $member.is_logged_in}>
  <a href="<{$url.logout}>">ログアウト</a>
  <a href="<{$url.mypage}>">マイページ</a>
  <a href="<{$url.cart}>">カート</a>
<{else}>
  <a href="<{$url.login}>">ログイン</a>
  <a href="<{$url.member_entry}>">新規会員登録</a>
<{/if}>

ログインやログアウトの処理はもちろん、マイページやカート画面などユーザーとしてログイン状態にあるかによってサイトに表示させる内容を切り替える際には「$member.is_logged_in」の関数を使います。   在庫表示

<{if $item.is_soldout || $item.stock_quantity == 0}>
  <span>在庫切れ</span>
  <{if $item.is_restock_enabled}>
    <a href="<{$item.restock_url}>">再入荷のお知らせを受け取る</a>
  <{/if}>
<{else}>
  <span>在庫数：<{$item.stock_quantity}></span>
<{/if}>

独自デザインでサイトを作成する場合には、在庫数に合わせて自動的に商品購入の動線が切り替わるわけでないので、在庫数を取得してサイトに表示させる内容を分岐する必要があります。ステータスが品切れになっていない、在庫数が0になっていないか、という条件を満たす場合に在庫数を表示させるようにします。    

ループ処理系

商品情報やお知らせの情報など、複数のデータをサイト上に出力させるにはループ処理で繰り返して表示させます。MakeShopではSmartyをベースに開発されているので、「section」というSmartyの組み込み関数を使ってループ処理を行なっていきます。   カテゴリアーカイブでの商品リスト出力

<{if $category.item.has_item}>
  <{section name=i loop=$category.item.list}>
    <div>
      <a href="<{$category.item.list[i].url}>">
        <figure>
          <img src="<{$category.item.list[i].image_M}>" alt="">
        </figure>
        <h3><{$category.item.list[i].name}></h3>
        <span><{$category.item.list[i].price|number_format}>円（税込）</span>
        <span>ポイント：<{$category.item.list[i].point}>ポイント</span>
        <span>在庫数：<{$category.item.list[i].stock_quantity}>個</span>
        <p>商品説明：<{$category.item.list[i].description}></p>
      </a>
    </div>
  <{/section}>
<{else}>
  <p>該当する商品はありません</p>
<{/if}>

カテゴリ別一覧ページでの商品情報出力には、上記のように「$category.item.list」の変数に商品情報が格納されています。その商品情報の中にはさらに商品名や商品ページURL、商品画像などの各種情報が含まれているので、キーを指定することでアクセスできます。   親子カテゴリリスト出力

<dl>
  <{section name=i loop=$category_menu.list}>
    <div>
      <dt>
        親カテゴリ名：<{$category_menu.list[i].name}><br>
        URLパス：<{$category_menu.list[i].url}>
      </dt>
      <{section name=j loop=$category_menu.list[i].child_category.list}>
        <dd>
          子カテゴリ名：<{$category_menu.list[i].child_category.list[j].name}><br>
          URLパス：<{$category_menu.list[i].child_category.list[j].url}>
        </dd>
      <{/section}>
    </div>
  <{/section}>
</dl>

MakeShopでは商品カテゴリに階層構造を持たせることができます。その際に子カテゴリの情報は「child_category.list」という変数に格納されているので、この配列をループ処理で展開する必要があります。iやjなどの変数はインデックス値を直接指定することで特定カテゴリの情報にアクセスすることが可能です。   直近のお知らせリスト出力

<{if $latest_news.has_item}>
  <dl>
    <{section name=i loop=$latest_news.list start=0 max=3}>
      <div>
        <dt><{$latest_news.list[i].date.year}>年<{$latest_news.list[i].date.month}>月<{$latest_news.list[i].date.day}>日</dt>
        <dd><{$latest_news.list[i].title}></dd>
      </div>
    <{/section}>
  </dl>
<{else}>
  <p>現在お知らせはありません</p>
<{/if}>

MakeShopには商品情報以外にもショップのお知らせなどを管理するCMS的な機能も用意されています。管理画面内で登録したお知らせの情報は「$latest_news.list」の変数に格納されているのでこれを展開することで直近のお知らせを表示させることができます。Smartyの仕様になりますが、section関数でmax属性に入れた値の回数だけループ処理を行うといったことも可能です。つまり指定の件数だけ表示させるなどの調整ができるようになります。   上位ランキングリスト出力

<{if $ranking_item.has_item}>
  <ul> 
    <{section name=i loop=$ranking_item.list[i].list start=0 max=10}>
      <li> 
        <a href="<{$ranking_item.list[i].list.url}>">
          <{$smarty.section.i.index+1}>位：<{$ranking_item.list[i].list.name}>
        </a>
      </li>
    <{/section}>
  </ul>
<{else}>
  <p>ランキング情報はありません</p>
<{/if}>

ショップサイトでよく見かける人気商品のランキングUIも独自関数を使って簡単に作成できます。「$ranking_item.list」の変数にランキング用の商品情報が含まれているので、これをループ処理で表示させていきます。なお、Smartyのsection関数でインデックスを取得するには、メイクショップ側の変数ではなくSmarty側のsectionからname属性にアクセスして、indexのキーを指定する形となります。   これ以外にもショップサイトではいろんなUIがありますが、また随時こちらの記事も更新していきたいと思います。便利な機能やよく使う機能を実装できる関数が充実しているのは良いですね。   （参考にさせていただいたサイト） MakeShopクリエイターモードタグリファレンス Smarty - Section