plus, minus in cart page
-
27-03-2021 - |
解决方案
For the cart page
First, override this file in your module or theme Path: vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml
Find the element
<div class="control qty">
and replace it with below code
<div class="control qty">
<input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
type="number"
size="4"
title="<?= $block->escapeHtml(__('Qty')) ?>"
class="input-text qty"
data-validate="{required:true,'validate-greater-than-zero':true}"
data-role="cart-item-qty"/>
<div class="qty_control">
<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty">+</button>
<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class="decreaseQty">-</button>
</div>
</div>
and add below script in the last
<script type="text/javascript">
require(["jquery"],function($){
$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){
var $this = $(this);
var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');
var currentQty = $("#cart-"+ctrl+"-qty").val();
if($this.hasClass('increaseQty')){
var newAdd = parseInt(currentQty)+parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
}else{
if(currentQty>1){
var newAdd = parseInt(currentQty)-parseInt(1);
$("#cart-"+ctrl+"-qty").val(newAdd);
}
}
});
});
</script>
For mini cart
Override this file in your module or your theme Path: vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html
Find the element
<div class="details-qty qty">
and replace it with below code
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<div class="more">+</div>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty">
<div class="less">-</div>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
Path: vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml
Put this code in last
<script type="text/javascript">
require(["jquery"],function($){
$('body').on("click",".more, .less",function(){
var obj = $(this);
var currentQty = obj.siblings('.cart-item-qty').val();
var iid = obj.siblings('.update-cart-item').attr('data-cart-item');
if(obj.hasClass('more')){
var newAdd = parseInt(currentQty)+parseInt(1);
obj.siblings('.cart-item-qty').val(newAdd);
obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
$('.update-cart-item').show();
}else{
if(parseInt(currentQty) > 1)
{
var newAdd = parseInt(currentQty)-parseInt(1);
obj.siblings('.cart-item-qty').val(newAdd);
obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
$('.update-cart-item').show();
}
}
});
});
</script>
Note: Run all necessary CLI commands Ex.
- php bin/magento setup:upgrade
- php bin/magento setup:static-content:deploy -f
- php bin/magento cache:clean