PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

ECCube3 カート画面をテキストボックスで数量変更できるようにカスタマイズ

2018年9月24日

EcCube3にてカート画面(cart/index.twig)にて数量を変更する際、
デフォルトでは、+とーのボタンになっています。

これを以下のようにカート画面のcart/index.twigにテキストボックスを作成し、テキストボックスに入力した値になるように変更してみます。

cart/index.twigにテキストボックスとリンクを作成します

cart/index.twigにテキストボックスとリンクを作成します

手順1・・カート画面のテンプレート cart/index.twigに、ここでは横着ですが、直にテキストボックスを書いちゃってます
(本当はFormTypeをさわりますがこっちのほうが早いですし、システムでゲッターセッターをわざわざする必要もないので。。;;)
ここでは、<ul id=”cart_item_list__quantity_edit”>の上の行に以下の命令を記述しています。

<span>
<input id=”mkazu” type=”text” style=”border-radius:5px; width:40px;text-align:right;” value=”{{ CartItem.quantity|number_format }}”>
<a href=”#” id=”cart_item_list_henkou” {{ csrf_token_for_anchor() }} data-method=”put” data-confirm=”false”>変更</a>
</span>


また、数量を入れてるclass=”kosu”のspanにidをつけておきます。
<span class=”kosu” id=”kokomo_kosu”>{{ CartItem.quantity|number_format }}</span>

 

手順2・・同じくcart/index.twigにjQueryを記述します。

$(function(){
$(“#mkazu”).val($(“#kokomo_kosu”).text());

$(“#mkazu”).change(function(){
var url=”{{ url(‘cart_henkou’, {‘productClassId’: ProductClass.id}) }}”;
newkosu=$(this).val();
$(“#cart_item_list_henkou”).attr(“href”,url+”?quantity=”+newkosu);

});
});

手順3・・src/Eccube/ControllerProvider/FrontControllerProvider.phpを以下のように編集します。この$c->put(“cart/downの下の行に以下を追加して入力。

$c->put(‘/cart/down/{productClassId}’, ‘\Eccube\Controller\CartController::down’)->bind(‘cart_down’)->assert(‘productClassId’, ‘\d+’);
$c->put(‘/cart/henkou/{productClassId}’, ‘\Eccube\Controller\CartController::henkou’)->bind(‘cart_henkou’)->assert(‘productClassId’, ‘\d+’);

手順4・・つづけて、以下のように、src/Eccube/Controller/CartController.phpを編集します。

public function henkou(Application $app, Request $request, $productClassId)
{
$quantity=$request->get(“quantity”);
$this->isTokenValid($app);
$event = new EventArgs(
array(
‘productClassId’ => $productClassId,
‘q’=>intval($quantity),
),
$request
);
$app[‘eccube.event.dispatcher’]->dispatch(EccubeEvents::FRONT_CART_HENKOU_INITIALIZE, $event);

try {

log_info(‘カート加算処理開始’, array(‘product_class_id’ => $productClassId));

$productClassId = $event->getArgument(‘productClassId’);

$app[‘eccube.service.cart’]->kazuProductQuantity($productClassId,$quantity)->save();

// FRONT_CART_UP_COMPLETE
$event = new EventArgs(
array(
‘productClassId’ => $productClassId,
),
$request
);
$app[‘eccube.event.dispatcher’]->dispatch(EccubeEvents::FRONT_CART_UP_COMPLETE, $event);

 

手順5・・つづけて、src/Eccube/EventEccubeEvents.phpのdownの下の行に以下のように記述します

// down
const FRONT_CART_DOWN_INITIALIZE = ‘front.cart.down.initialize’;
const FRONT_CART_DOWN_COMPLETE = ‘front.cart.down.complete’;
const FRONT_CART_DOWN_EXCEPTION = ‘front.cart.down.exception’;

// henkou
const FRONT_CART_HENKOU_INITIALIZE = ‘front.cart.henkou.initialize’;

EcCube3にてカート画面にテキストボックスを設置し、数量変更する方法を紹介しましたが、
いろいろ商品登録や、注文確認画面など、あらゆるところで、カスタマイズする場合に、似たような手順で行うことが出来ます。

Symfonyって簡単に習得できてしまいますし、分かりやすくできてるので、カスタマイズは実に楽で、優れたフレームワークだなぁと関心してしまいました。

—————————————————————————————————–
後日、カートに複数の商品が入ってる際にidだと都合が悪く、classに変更して、
作り直しました。
—————————————————————————————————–

パソコン教室、パソコンスクール・テルンでは、初心者のかたより、
パソコンをよりマスターしたい業者様も含めて幅広い受講生のかたが通っています。
https://www.telln.com