Question

我想用ajax更改购物车magento 2购物车页面上一项的数量。它只能工作一次。在购物车中的更新数量减少之后，reducingQty和增加数量按钮不起作用。

请帮助我的人

我已经尝试过此步骤：-

我在 app / degign / frontend / Theme Vendor / Theme / Magento_checkout / templates / cart / item / default.phtml 中添加了以下代码，以添加+/-按钮

<div class="control qty">
    <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"></button>
    <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"/>
    <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
</div>

然后我将 shopping-cart.js 覆盖为 app / design / frontend / Theme Vendor / Theme / Magento_Checkout / web / js / shopping-cart.js 并添加我的JavaScript代码在那里。

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'jquery/ui',
    'Magento_Checkout/js/action/get-totals' //additionally added
], function ($, jQueryUi, getTotalsAction) {
    'use strict';

    //code to update quantity starts
    $(document).ready(function(){
        $('.increaseQty, .decreaseQty').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);
                 $('input.qty').trigger('change');
            }else{
                 if(currentQty>1){
                    var newAdd = parseInt(currentQty)-parseInt(1);
                    $("#cart-"+ctrl+"-qty").val(newAdd);
                    $('input.qty').trigger('change');
                 }
            }
        });

        var form = $('form#form-validate');
        var qtyfields = $('input.qty');
        $('.page.messages').each(function () {
            var thismessage = $(this);
            thismessage.attr('id', 'messages');
        });

        form.find(qtyfields).each(function (e) {
            var thisfield = $(this);
            $(this).change(function () {
                console.log('change detected');
                form.submit();
            });

        });
        form.on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: form.attr('action'),
                data: form.serialize(),
                type: 'post',
                success: function (res) {
                    var parsedResponse = $.parseHTML(res);
                    var result = $(parsedResponse).find("#form-validate");
                    $("#form-validate").replaceWith(result);

                    var deferred = $.Deferred();
                    getTotalsAction([], deferred);

                },
                error: function () {
                    console.log('error');
                }
            });
            console.log('form submitted');
        });
    });
    //code to update quantity ends

    $.widget('mage.shoppingCart', {
        /** @inheritdoc */
        _create: function () {
            var items, i;

            $(this.options.emptyCartButton).on('click', $.proxy(function () {
                $(this.options.emptyCartButton).attr('name', 'update_cart_action_temp');
                $(this.options.updateCartActionContainer)
                    .attr('name', 'update_cart_action').attr('value', 'empty_cart');
            }, this));
            items = $.find('[data-role="cart-item-qty"]');

            for (i = 0; i < items.length; i++) {
                $(items[i]).on('keypress', $.proxy(function (event) { //eslint-disable-line no-loop-func
                    var keyCode = event.keyCode ? event.keyCode : event.which;

                    if (keyCode == 13) { //eslint-disable-line eqeqeq
                        $(this.options.emptyCartButton).attr('name', 'update_cart_action_temp');
                        $(this.options.updateCartActionContainer)
                            .attr('name', 'update_cart_action').attr('value', 'update_qty');

                    }
                }, this));
            }
            $(this.options.continueShoppingButton).on('click', $.proxy(function () {
                location.href = this.options.continueShoppingUrl;
            }, this));
        }
    });

    return $.mage.shoppingCart;
});

Magento 2-Ajax更改购物车页面上的数量后，重新加载购物车

0 个答案: