Re: Instead of update cart button, qty should get ...

imranhasmi0796 · ‎10-19-2022

I want to implement Ajax Cart Page: Qty should get changes on click of +/- button instead of update cart button I didn't find any article or any module to achieve this. as qty increment(+) and decrement(-)

Profile

Bhanu Periwal · ‎10-19-2022

Hello @imranhasmi0796

Kindly refer below code for your requirement:

Step1:
In your custom them create ( Magento_Theme/layout/checkout_cart_index.xml )

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>
    </referenceContainer>
</body>

Step2:

creat js.phtml file ( Magento_Theme/templates/js.phtml )

<script>
require ([
        'jquery',
    ],
    function ($) {
       $(window).on("load", function () {
            require([
                'custom'
            ]);
        });
    });

Step3: create custom.js file in theme web folder ( Namespace/Yourtheme/web/js/custom.js )

define([
    'jquery',
    'Magento_Checkout/js/action/get-totals',
    'Magento_Customer/js/customer-data'
     ], function ($, getTotalsAction, customerData) {

    $(document).ready(function(){
    $(document).on('change', 'input[name$="[qty]"]', function(){
        var form = $('form#form-validate');
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            showLoader: true,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                var sections = ['cart'];

                $("#form-validate").replaceWith(result);

                // The mini cart reloading
                customerData.reload(sections, true);

                // The totals summary block reloading
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });
       });
      });
    });

Step4: ( map your js file )

Create requirejs-config.js on your theme root ( Namespace/yourtheme/requirejs-config.js)

var config = {
   map: {
    '*': {
        custom:'js/custom'
    }
  }
};

Now the qty update work using ajax If have any issue ask in comment.

Problem solved? Click Accept as Solution!

oliverhils884c

That’s a great idea for a smoother user experience! You can achieve this by using AJAX to update the quantity without needing to reload the Reload packages page. Look into using jQuery for handling the button clicks and sending AJAX requests to update the cart in real-time. You might also want to check if there are any existing plugins for your platform that can help!

tatetopggg93cb

To implement automatic quantity updates in Magento 2's cart page without requiring a manual "Update Cart" action, you can integrate AJAX functionality. First, modify the cart item quantity input field to include "+" and "−" buttons, making it easier for users to adjust product quantities. Then, use jQuery to detect clicks on these buttons and send an AJAX request to update the cart in real time. This prevents unnecessary page reloads and enhances user experience.

For example, you can write a script that listens for clicks on elements with the class .qty-change, adjusts the quantity value, and sends an AJAX request to update the cart. Ensure that the correct URL endpoint is used for processing cart updates. Once the AJAX request is successful, the cart totals and subtotals should be refreshed to reflect the changes dynamically. Additionally, error handling should be implemented to manage potential failures in updating the cart.

Instead of update cart button, qty should get update on click of Increment And Decrement button

Instead of update cart button, qty should get update on click of Increment And Decrement button

Re: Instead of update cart button, qty should get update on click of Increment And Decrement button

Re: Instead of update cart button, qty should get update on click of Increment And Decrement button

Re: Instead of update cart button, qty should get update on click of Increment And Decrement button