EC-CUBE3.0のカートブロックをカスタマイズする方法。
アップデートされてますます使いやすくなっているEC-CUBE3.0。デフォルトで用意されているブロックも実用的なものなので、そのまま使用しても問題なレベルになっています。
ここではデフォルトにあるカートブロックをカスタマイズしてみます。
カートブロックのカスタマイズ方法
使えるデータをチェックする方法
twigテンプレート内でdump()を使うとページにデータの配列を表示させることができます。
{{ dump(cart) }}
テンプレート内で使われているデータ一覧
カートブロック内で使用されているデータは以下のとおり。
- Cart.total_quantity: カートに入っている商品の合計数量
- Cart.total_price: カートに入っている商品の合計金額
- Cart.CartItems: カートに入っている商品情報（オブジェクト）
３つ目のCart.CartItemsはオブジェクトなので、ループでデータを１つ１つ取り出すことで表示可能。ループ内では以下のようなデータを表示しています。
- Product.MainListImage: メイン（１枚目）画像
- CartItem.price: 商品価格
- Product.name: 商品名
- ClassCategory1.ClassName: 規格１の規格名
- ProductClass.ClassCategory1: 規格１で選択したもの
- ClassCategory2.ClassName: 規格２の規格名
- ProductClass.ClassCategory2: 規格２で選択したもの
- CartItem.quantity: 商品数量
テンプレートにないデータを表示させる方法
テンプレートには上記のようなデータが表示されていますが、dumpで出力した元データにはそれ以外にも値が送られています。
例えば商品の在庫数を表示させたい場合、dumpデータを見るとstockで取得しているので、あとはこれを出力すれば表示可能です。
<dd>ストック: {{ ProductClass.stock }}</dd>
不要な部分の削除方法
単にループで値を表示しているだけなので、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の使い方などはこちらの書籍が参考になります。
