EC-CUBE3.0 カートブロックのカスタマイズ方法

Pocket

EC-CUBE3.0のカートブロックをカスタマイズする方法。

アップデートされてますます使いやすくなっているEC-CUBE3.0。デフォルトで用意されているブロックも実用的なものなので、そのまま使用しても問題なレベルになっています。

ここではデフォルトにあるカートブロックをカスタマイズしてみます。

カートブロックのカスタマイズ方法

使えるデータをチェックする方法

twigテンプレート内でdump()を使うとページにデータの配列を表示させることができます。

{{ dump(cart) }}

eccube3-cart-block-01

テンプレート内で使われているデータ一覧

カートブロック内で使用されているデータは以下のとおり。

  • Cart.total_quantity: カートに入っている商品の合計数量
  • Cart.total_price: カートに入っている商品の合計金額
  • Cart.CartItems: カートに入っている商品情報(オブジェクト)

3つ目のCart.CartItemsはオブジェクトなので、ループでデータを1つ1つ取り出すことで表示可能。ループ内では以下のようなデータを表示しています。

  • Product.MainListImage: メイン(1枚目)画像
  • CartItem.price: 商品価格
  • Product.name: 商品名
  • ClassCategory1.ClassName: 規格1の規格名
  • ProductClass.ClassCategory1: 規格1で選択したもの
  • ClassCategory2.ClassName: 規格2の規格名
  • ProductClass.ClassCategory2: 規格2で選択したもの
  • CartItem.quantity: 商品数量

テンプレートにないデータを表示させる方法

テンプレートには上記のようなデータが表示されていますが、dumpで出力した元データにはそれ以外にも値が送られています。

例えば商品の在庫数を表示させたい場合、dumpデータを見るとstockで取得しているので、あとはこれを出力すれば表示可能です。

<dd>ストック: {{ ProductClass.stock }}</dd>

eccube3-cart-block-02

不要な部分の削除方法

単にループで値を表示しているだけなので、HTMLコードを編集するのと同じようにTwigテンプレートをカスタマイズすることが可能。

例えば商品画像を非表示にする場合、ループ内のitem_photo部分を削除すればOK

<div class="item_box clearfix">
    <!--削除ここから-->
    <div class="item_photo"><img
                src="{{ app.config.image_save_urlpath }}/{{ Product.MainListImage|no_image_product }}"
                alt="{{ Product.name }}"></div>
    <!--削除ここまで-->
    <dl class="item_detail">

        <!--省略-->

    </dl>
</div><!--/item_box-->

TwigテンプレートやSymfonyの使い方などはこちらの書籍が参考になります。