数量変更時にカート数量を自動更新
-
12-12-2019 - |
質問
Magento のデフォルトのカートでは、顧客が数量を編集する場合、ボタンを押して数量を更新する必要があります。
ユーザーが数量フィールドに別の数値を入力したときに、カートの数量が自動的に更新される方法はありますか?
解決
まずカートテンプレートを編集します /app/design/frontend/{package}/{theme}/template/checkout/cart.phtml
簡単にアクセスできるように、フォーム要素に ID を追加します。「id="cart-form"」を追加するとします。
次に、カート項目をレンダリングするテンプレートを編集します。
- app/design/frontend/{パッケージ}/{テーマ}/template/checkout/cart/item/default.phtml
- app/design/frontend/{パッケージ}/{テーマ}/template/downloadable/checkout/cart/item/default.phtml
そして上に <input>
名前の付いた要素 cart[<?php echo $_item->getId() ?>][qty]
これを追加:
onchange="$('cart-form').submit()"
しかし、これを行うことはお勧めしません。ユーザーにとっては本当に迷惑です。(少なくとも私にとっては)。
他のヒント
サイトが紛争のないモードに含まれていると仮定すると、これが非同期的にこのことをする方法があります(はるかに厄介な!)。
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()
});
}
);
});
.
私はこれが以下の仮定をすることを指摘するべきです:
- ショッピングカートはショッピングカートテーブル のIDを持つ要素内に住んでいます
- 数量の入力フィールドには、 [qty] で終わるname属性があります。
行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バージョンが古い場合は、成功しません。私は次のような方法を見つけました、私たちの友人Mariusの指示をを挿入するための指示を続けました
/app/design/frontend/{package}/{theme}/template/checkout/cart.phtml
とForm要素に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