はじめに

EC-CUBE4の管理画面からは、フロント画面のテンプレートファイル(twig)を編集することができます。twigだけでも条件判断や計算ができるので、管理画面からtwigを編集するだけでどんなカスタマイズができるか考えてみました。

この記事を書いた環境

EC-CUBE 4.0.3

管理画面からのテンプレートの編集方法

この記事ではすべて「商品詳細ページ」のカスタマイズのサンプルになっています。
管理画面 > コンテンツ管理 > ページ管理 > 商品詳細ページ からtwigテンプレートの編集ができます。

このサンプルの制限事項

「1.」「2.」のカスタマイズは、規格なし商品のみのサンプルです。規格あり商品で同じことを実現する場合は、複数規格を考慮した実装が必要になります。(今回はサンプルを作る時間が無かった...)

1. 商品の在庫数が5個以下のときにお知らせを表示する

商品の在庫数を取得して、5個以下の場合はお知らせと在庫数を表示してみます。

変更後の表示

実装コード

商品詳細ページ(Product/detail.twig)

{% if Product.StockMax <= 5 %}
  <div class="ec-color-red ec-font-size-3">(在庫僅か：残り{{Product.StockMax}}個)</div>
{% endif %}

1行目：在庫数(Product.StockMax)を取得して、5個以下かどうかを判定しています。
2行目：判定に利用したProduct.StockMaxを使って、残りの在庫数を表示しています。

※ソースコードの差分はこちら

ポイント

在庫はStockMaxで取得できる。
表示で利用しているclass(ec-color-redなど)はEC-CUBE 4 Style Guideであらかじめ用意されている.

2. 商品の割引率を表示する

商品には「通常価格」と「販売価格」を設定することができます。
２つの価格から販売価格の割引率を計算して表示してみます。

変更後の表示

実装コード

商品詳細ページ(Product/detail.twig)

{% if Product.getPrice01Max is not null %}
  {% set discountRate = (1.0 - (Product.getPrice02Min / Product.getPrice01Min)) * 100 %}
  <div class="ec-color-red ec-font-size-3">(通常価格より {{discountRate|round}}% 割引)</div>
{% endif %}

1行目：通常価格(Price01Min)が入力されていない場合を想定しています。
2行目：Productから通常価格(Price01Min)と販売価格(Price02Min)を取得して割引率を計算し、変数discountRateに設定します。
3行目：discountRateを利用して割引率を表示しています。このときtwigのroundフィルターを利用して、小数点以下を表示しないようにしています。

※ソースコードの差分はこちら

ポイント

EC-CUBEでは「通常価格=Price01」「販売価格=Price02」。
twigのフィルターを利用して値の表示方法を変更できる。(参考：twigドキュメント)

3. 会員ログイン時のみメッセージを表示する

会員ログイン状態を取得して、ログインしているときのみ会員向けのメッセージを表示してみます。

変更後の表示

実装コード

商品詳細ページ(Product/detail.twig)

{% if is_granted('ROLE_USER') %}
    <div class="ec-color-red ec-font-size-2">
        {{ app.user.name01 }}様いつもご利用ありがとうございます。<br>
        会員のみなさまにお試しセットをプレゼントしています！
    </div>
{% endif %}

1行目：会員のログイン状態を取得して判定しています。
3行目：ログイン状態だったときに表示するメッセージで、app.user.name01から会員の名前(姓)を取得して利用しています。

※ソースコードの差分はこちら

ポイント

会員がログイン状態かどうかはis_granted('ROLE_USER')で判定できる。
app.userからログインしている会員の情報を取得できる。

おわりに

テンプレートファイルの編集だけでできる簡単なカスタマイズをご紹介しました。
今回は商品詳細ページのみでしたが、他のページにも応用してカスタマイズしてみて下さい。