数量変更時にカートの数量を自動更新

Magentoのデフォルトのカートでは、顧客が数量を編集するときに、ボタンを押して数量を更新する必要があります。

ユーザーが数量フィールドに別の数値を入力したときに、カートが数量を自動的に更新する方法はありますか？

最初にカートテンプレート/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlを編集し、フォーム要素にidを追加して、アクセスしやすくします。'id = "cart-form"'を追加するとします。

次に、カートのアイテムをレンダリングするテンプレートを編集します。

• app / design / frontend / {package} / {theme} /template/checkout/cart/item/default.phtml
• app / design / frontend / {package} / {theme} /template/downloadable/checkout/cart/item/default.phtml

そして<input>、名前の要素cart[<?php echo $_item->getId() ?>][qty]にこれを追加します：

onchange="$('cart-form').submit()"

しかし、これを行うことはお勧めしません。ユーザーにとっては本当に迷惑です。（少なくとも私にとっては）。

サイトに非競合モードにjQueryが含まれていると仮定すると、非同期でこれを行う方法があります（これは非常に面倒です！）。

jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
    .on(
        'change',
        'input[name$="[qty]"]',
        function(){
            var form = jQuery(jQuery(this).closest('form'));

            // we'll extract the action and method attributes out of the form

            // kick off an ajax request using the form's action and method,
            // with the form data as payload
            jQuery.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serializeArray()
            });
        }
    );
});

これは次のことを前提としていることを指摘する必要があります。

• ショッピングカートは、shopping-cart-tableの IDを持つ要素内に存在します
• 数量の入力フィールドには、[qty]で終わる名前属性があります

状況に合わせて、2行目と5行目のコード内のセレクターをそれぞれ簡単に調整する必要があります。

これらの2つのファイルを編集します

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

そして、名前の要素cart[<?php echo $_item->getId() ?>][qty]にこれを追加します：

onchange="this.form.submit()"

jQueryバージョンが古い場合、成功しません。私は次のような方法を見つけました、私たちの友人マリウスの指示に従って挿入する

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlアクセスしやすくするために、フォーム要素にidを追加します。追加するとしましょうid="cart-form"

ファイルを開く

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

そして、ファイルの最後までスクロールすると、数量の増減を行うJavaScriptが見つかります。関数は次のようになります。

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
    }
}

このための変更：

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
    document.getElementById("cart-form").submit();  
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);

    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
         document.getElementById("cart-form").submit();   
    }
}

（まだ）jQueryがロードされていない<input> 場合は<select>、名前name="cart[<?php echo $_item->getId() ?>][qty]"で要素（または、私の場合はドロップダウンフィールドを作成して量を選択するための要素）を見つけて追加することもできます。

onchange="this.form.submit()"

編集する必要があるphtmlファイルは次の場所にあります。

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml