【EC-CUBE4】カート画面の数量の変更をプルダウンからできるようにする

2023.11.06

数量のプラスマイナスボタンをプルダウンに変更する

記事の内容は画像の通りです。本当はカスタマイズするつもりなんてなかった人間向けの記事です。

やっていることは簡単なことですが、見た目よりはカロリーが高いので記事にしました。

バージョンは4系でも4.2系でも確認しましたので大丈夫だと思います。

まず、以下を「App\Customize\Controller\CartController.php」（なかったら追加してください）に貼り付けます。

ほぼほぼ元からあるものを再利用しているので現在の数量と変えたい数量から差分を求めて…というやり方になっています。

本当は「現在の数量」だけあれば良さそうなのですが、そこを改造しようとしたら過酷そうな道が見えたので、

あんまり触らない方がいいと思いました。

　　/**
     * カートの中の商品の個数を変更する
     * @Route(
     *     path="/cart/quantity_change/{productClassId}/{quantity}/{current_quantity}",
     *     name="cart_change_quantity",
     *     methods={"GET"}
     * )
     */
    public function changeQuantityCartItem($productClassId, $quantity, $current_quantity)
    {
        log_info('カート明細操作開始', ['operation' => 'change', 'product_class_id' => $productClassId]);

        /** @var ProductClass $ProductClass */
        $ProductClass = $this->productClassRepository->find($productClassId);

        if (is_null($ProductClass)) {
            log_info('商品が存在しないため、カート画面へredirect', ['operation' => 'change', 'product_class_id' => $productClassId]);

            return $this->redirectToRoute('cart');
        }

        //現在の個数と変更したい個数の差を求める
        $diff = $quantity - $current_quantity;

        $this->cartService->addProduct($ProductClass, $diff);

        // カートを取得して明細の正規化を実行
        $Carts = $this->cartService->getCarts();
        $this->execPurchaseFlow($Carts);

        log_info('カート演算処理終了', ['operation' => 'change', 'product_class_id' => $productClassId]);

        //元いたページに戻す
        return $this->redirect($_SERVER['HTTP_REFERER']);
    }

　　/**

* カートの中の商品の個数を変更する

* @Route(

* path="/cart/quantity_change/{productClassId}/{quantity}/{current_quantity}",

* name="cart_change_quantity",

* methods={"GET"}

* )

public function changeQuantityCartItem($productClassId, $quantity, $current_quantity)

{

log_info('カート明細操作開始', ['operation' => 'change', 'product_class_id' => $productClassId]);

/** @var ProductClass $ProductClass */

$ProductClass = $this->productClassRepository->find($productClassId);

if (is_null($ProductClass)) {

log_info('商品が存在しないため、カート画面へredirect', ['operation' => 'change', 'product_class_id' => $productClassId]);

return $this->redirectToRoute('cart');

}

//現在の個数と変更したい個数の差を求める

$diff = $quantity - $current_quantity;

$this->cartService->addProduct($ProductClass, $diff);

// カートを取得して明細の正規化を実行

$Carts = $this->cartService->getCarts();

$this->execPurchaseFlow($Carts);

log_info('カート演算処理終了', ['operation' => 'change', 'product_class_id' => $productClassId]);

//元いたページに戻す

return $this->redirect($_SERVER['HTTP_REFERER']);

}

その後、カートのテンプレート（デフォルトは「src\Eccube\Resource\template\default\Cart\index.twig」をコピーした「app\template\default\Cart\index.twig」）の

<li class="ec-cartRow__amountColumn"> のあたりを以下のようにします。

<li class="ec-cartRow__amountColumn">
    <div class="ec-cartRow__amountUpDown">
        <select class="quantity_change w-50" data-current-quantity="{{ CartItem.quantity|number_format }}" data-productclass-id="{{ ProductClass.id }}">
            {% for i in 1..10 %}
                <option value="{{ i }}" {% if i == CartItem.quantity %}selected{% endif %}>{{ i }}</option>
            {% endfor %}
        </select>
    </div>
</li>

{% for i in 1..10 %}

{% endfor %}

</select>

</div>

</li>

現在の数量とプラスマイナスのボタンをプルダウンにごそっと変えているだけです。

その後twigのどこかに以下のjavascriptを追加してください。

<script>
    //ダミーの数字が入っている
    const url = "{{ url('cart_change_quantity', {productClassId : 'dummy_class_id', quantity : 'dummy_quantity', current_quantity: 'dummy_current_quantity'} ) }}";

    $('.quantity_change').change(function(){
        //urlを正しい値に置換する
        var new_url = url.replace('dummy_class_id', $(this).attr('data-productclass-id'));
        new_url = new_url.replace('dummy_quantity', $(this).val());
        new_url = new_url.replace('dummy_current_quantity', $(this).attr('data-current-quantity'));

        location.href = new_url;
    });
</script>

//ダミーの数字が入っている

const url = "{{ url('cart_change_quantity', {productClassId : 'dummy_class_id', quantity : 'dummy_quantity', current_quantity: 'dummy_current_quantity'} ) }}";

$('.quantity_change').change(function(){

//urlを正しい値に置換する