How to update cart qty using ajax Magento 2

How to update cart qty using ajax magento 2

I want to change qty on cart page.
I don't want to use the update button. It should be update automatically without reloading the page.

edited Jul 19 '18 at 8:46

7ochem

5,72193668

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

add a comment |

How to update cart qty using ajax magento 2

I want to change qty on cart page.
I don't want to use the update button. It should be update automatically without reloading the page.

edited Jul 19 '18 at 8:46

7ochem

5,72193668

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

add a comment |

How to update cart qty using ajax magento 2

I want to change qty on cart page.
I don't want to use the update button. It should be update automatically without reloading the page.

edited Jul 19 '18 at 8:46

7ochem

5,72193668

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

How to update cart qty using ajax magento 2

I want to change qty on cart page.
I don't want to use the update button. It should be update automatically without reloading the page.

magento2 cart ajax shopping-cart

edited Jul 19 '18 at 8:46

7ochem

5,72193668

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

edited Jul 19 '18 at 8:46

7ochem

5,72193668

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

edited Jul 19 '18 at 8:46

7ochem

5,72193668

edited Jul 19 '18 at 8:46

7ochem

5,72193668

edited Jul 19 '18 at 8:46

7ochem

5,72193668

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

asked Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

add a comment |

3 Answers
3

active

oldest

votes

Reload totals cart after ajax change quantity
1. Step

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="MagentoFrameworkViewElementTemplate" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>

    </referenceContainer>

</body>

2.Step

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

<script>

require ([

        'jquery',

    ],

    function ($) {

       $(window).on("load", function () {

            require([

                'custom'

            ]);

        });

    });

3. Step
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);

            }

        });

       });

      });

    });

4.Step ( 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.

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

Hello Surendra Kumar Ahir. Please elaborate the answer. We are trying to achieve this.

– trilok kumar
Oct 12 '18 at 5:05

Hello, I am trying to implement you method on my Magento 2.2 store but having some difficulties. It would be great if you can take a look at this thread: magento.stackexchange.com/questions/253404/…

– Bare Feet
Dec 13 '18 at 9:19

add a comment |

I tried your approach, it is working for me if i enter the quantity in quantity textfield. But it doesn't work if i use increment/decrement signs to update the quanity. Can you please guide me how can do this.

$('.qty-down-fixed-onclick-page-cart, .qty-up-fixed-onclick-page-cart').on('click',  ajaxQuantityUpdate);

Above code works but only once. After ajax call it stops working.
Secondly my product image breaks after ajax call.

edited Jan 9 at 5:46

answered Jan 7 at 6:06

Piyush

New contributor

add a comment |

Hi the current solution is good although I had the same problem, here's how I solved it:

Edit this file Magento_Checkout/templates/cart/form.phtml in your own theme. Remove the following part:

<script>

require([

    'jquery',

    'mage/mage'

], function ($) {

    'use strict';       

    $(".qty-down-fixed-onclick-page-cart").click(function() {

        var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

        var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

        val_input = parseInt(val_input);

        if(val_input <= number_click){

            val_input = number_click;

        }

        else{

            val_input = val_input - number_click;

        }

        $(this).closest('div.qty').find('.input-text.qty').val(val_input);

        return false;

    });

    $(".qty-up-fixed-onclick-page-cart").click(function() {



    });

});

Edit the custom.js file form the current solution to:

define(['jquery','Magento_Checkout/js/action/get-totals',

'Magento_Customer/js/customer-data',

'mage/mage'

], function ($, getTotalsAction, customerData) {

'use strict';

$(document).ready(function(){

    $(document).on(

        'input',

        'input[name$="[qty]"]',

        function(){

            reloadCart();

    });

    $(document).on(

        'click',

        '.qty-down-fixed-onclick-page-cart',

        function(){

            var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            if(val_input <= number_click){

                val_input = number_click;

            }

            else{

                val_input = val_input - number_click;

            }

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

    $(document).on(

        'click',

        '.qty-up-fixed-onclick-page-cart',

        function(){

            var number_click_2 = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            val_input = val_input + number_click_2;

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

});



function reloadCart() {

    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);

        }

    });

}

});

This way you'll get:

On input "event" and not "change". This prevents an additional click
outside the quantity box when you manually enter a quantity.

On every qty increment or decrement the cart will reload on click of the arrows.

answered 5 mins ago

FJ Gosselin

New contributor

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f235040%2fhow-to-update-cart-qty-using-ajax-magento-2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Reload totals cart after ajax change quantity
1. Step

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="MagentoFrameworkViewElementTemplate" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>

    </referenceContainer>

</body>

2.Step

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

<script>

require ([

        'jquery',

    ],

    function ($) {

       $(window).on("load", function () {

            require([

                'custom'

            ]);

        });

    });

3. Step
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);

            }

        });

       });

      });

    });

4.Step ( 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.

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

Hello Surendra Kumar Ahir. Please elaborate the answer. We are trying to achieve this.

– trilok kumar
Oct 12 '18 at 5:05

Hello, I am trying to implement you method on my Magento 2.2 store but having some difficulties. It would be great if you can take a look at this thread: magento.stackexchange.com/questions/253404/…

– Bare Feet
Dec 13 '18 at 9:19

add a comment |

Reload totals cart after ajax change quantity
1. Step

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="MagentoFrameworkViewElementTemplate" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>

    </referenceContainer>

</body>

2.Step

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

<script>

require ([

        'jquery',

    ],

    function ($) {

       $(window).on("load", function () {

            require([

                'custom'

            ]);

        });

    });

3. Step
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);

            }

        });

       });

      });

    });

4.Step ( 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.

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

Hello Surendra Kumar Ahir. Please elaborate the answer. We are trying to achieve this.

– trilok kumar
Oct 12 '18 at 5:05

Hello, I am trying to implement you method on my Magento 2.2 store but having some difficulties. It would be great if you can take a look at this thread: magento.stackexchange.com/questions/253404/…

– Bare Feet
Dec 13 '18 at 9:19

add a comment |

Reload totals cart after ajax change quantity
1. Step

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="MagentoFrameworkViewElementTemplate" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>

    </referenceContainer>

</body>

2.Step

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

<script>

require ([

        'jquery',

    ],

    function ($) {

       $(window).on("load", function () {

            require([

                'custom'

            ]);

        });

    });

3. Step
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);

            }

        });

       });

      });

    });

4.Step ( 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.

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

Reload totals cart after ajax change quantity
1. Step

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="MagentoFrameworkViewElementTemplate" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>

    </referenceContainer>

</body>

2.Step

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

<script>

require ([

        'jquery',

    ],

    function ($) {

       $(window).on("load", function () {

            require([

                'custom'

            ]);

        });

    });

3. Step
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);

            }

        });

       });

      });

    });

4.Step ( 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.

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

answered Jul 18 '18 at 17:13

Surendra Kumar Ahir

798617

Hello Surendra Kumar Ahir. Please elaborate the answer. We are trying to achieve this.

– trilok kumar
Oct 12 '18 at 5:05

Hello, I am trying to implement you method on my Magento 2.2 store but having some difficulties. It would be great if you can take a look at this thread: magento.stackexchange.com/questions/253404/…

– Bare Feet
Dec 13 '18 at 9:19

add a comment |

Hello Surendra Kumar Ahir. Please elaborate the answer. We are trying to achieve this.

– trilok kumar
Oct 12 '18 at 5:05

Hello, I am trying to implement you method on my Magento 2.2 store but having some difficulties. It would be great if you can take a look at this thread: magento.stackexchange.com/questions/253404/…

– Bare Feet
Dec 13 '18 at 9:19

Hello Surendra Kumar Ahir. Please elaborate the answer. We are trying to achieve this.

– trilok kumar
Oct 12 '18 at 5:05

Hello, I am trying to implement you method on my Magento 2.2 store but having some difficulties. It would be great if you can take a look at this thread: magento.stackexchange.com/questions/253404/…

– Bare Feet
Dec 13 '18 at 9:19

add a comment |

$('.qty-down-fixed-onclick-page-cart, .qty-up-fixed-onclick-page-cart').on('click',  ajaxQuantityUpdate);

Above code works but only once. After ajax call it stops working.
Secondly my product image breaks after ajax call.

edited Jan 9 at 5:46

answered Jan 7 at 6:06

Piyush

New contributor

add a comment |

$('.qty-down-fixed-onclick-page-cart, .qty-up-fixed-onclick-page-cart').on('click',  ajaxQuantityUpdate);

Above code works but only once. After ajax call it stops working.
Secondly my product image breaks after ajax call.

edited Jan 9 at 5:46

answered Jan 7 at 6:06

Piyush

New contributor

add a comment |

$('.qty-down-fixed-onclick-page-cart, .qty-up-fixed-onclick-page-cart').on('click',  ajaxQuantityUpdate);

Above code works but only once. After ajax call it stops working.
Secondly my product image breaks after ajax call.

edited Jan 9 at 5:46

answered Jan 7 at 6:06

Piyush

New contributor

$('.qty-down-fixed-onclick-page-cart, .qty-up-fixed-onclick-page-cart').on('click',  ajaxQuantityUpdate);

Above code works but only once. After ajax call it stops working.
Secondly my product image breaks after ajax call.

edited Jan 9 at 5:46

answered Jan 7 at 6:06

Piyush

New contributor

edited Jan 9 at 5:46

answered Jan 7 at 6:06

Piyush

New contributor

answered Jan 7 at 6:06

Piyush

answered Jan 7 at 6:06

Piyush

New contributor

Piyush is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

Hi the current solution is good although I had the same problem, here's how I solved it:

Edit this file Magento_Checkout/templates/cart/form.phtml in your own theme. Remove the following part:

<script>

require([

    'jquery',

    'mage/mage'

], function ($) {

    'use strict';       

    $(".qty-down-fixed-onclick-page-cart").click(function() {

        var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

        var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

        val_input = parseInt(val_input);

        if(val_input <= number_click){

            val_input = number_click;

        }

        else{

            val_input = val_input - number_click;

        }

        $(this).closest('div.qty').find('.input-text.qty').val(val_input);

        return false;

    });

    $(".qty-up-fixed-onclick-page-cart").click(function() {



    });

});

Edit the custom.js file form the current solution to:

define(['jquery','Magento_Checkout/js/action/get-totals',

'Magento_Customer/js/customer-data',

'mage/mage'

], function ($, getTotalsAction, customerData) {

'use strict';

$(document).ready(function(){

    $(document).on(

        'input',

        'input[name$="[qty]"]',

        function(){

            reloadCart();

    });

    $(document).on(

        'click',

        '.qty-down-fixed-onclick-page-cart',

        function(){

            var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            if(val_input <= number_click){

                val_input = number_click;

            }

            else{

                val_input = val_input - number_click;

            }

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

    $(document).on(

        'click',

        '.qty-up-fixed-onclick-page-cart',

        function(){

            var number_click_2 = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            val_input = val_input + number_click_2;

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

});



function reloadCart() {

    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);

        }

    });

}

});

This way you'll get:

On input "event" and not "change". This prevents an additional click
outside the quantity box when you manually enter a quantity.

On every qty increment or decrement the cart will reload on click of the arrows.

answered 5 mins ago

FJ Gosselin

New contributor

add a comment |

Hi the current solution is good although I had the same problem, here's how I solved it:

Edit this file Magento_Checkout/templates/cart/form.phtml in your own theme. Remove the following part:

<script>

require([

    'jquery',

    'mage/mage'

], function ($) {

    'use strict';       

    $(".qty-down-fixed-onclick-page-cart").click(function() {

        var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

        var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

        val_input = parseInt(val_input);

        if(val_input <= number_click){

            val_input = number_click;

        }

        else{

            val_input = val_input - number_click;

        }

        $(this).closest('div.qty').find('.input-text.qty').val(val_input);

        return false;

    });

    $(".qty-up-fixed-onclick-page-cart").click(function() {



    });

});

Edit the custom.js file form the current solution to:

define(['jquery','Magento_Checkout/js/action/get-totals',

'Magento_Customer/js/customer-data',

'mage/mage'

], function ($, getTotalsAction, customerData) {

'use strict';

$(document).ready(function(){

    $(document).on(

        'input',

        'input[name$="[qty]"]',

        function(){

            reloadCart();

    });

    $(document).on(

        'click',

        '.qty-down-fixed-onclick-page-cart',

        function(){

            var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            if(val_input <= number_click){

                val_input = number_click;

            }

            else{

                val_input = val_input - number_click;

            }

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

    $(document).on(

        'click',

        '.qty-up-fixed-onclick-page-cart',

        function(){

            var number_click_2 = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            val_input = val_input + number_click_2;

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

});



function reloadCart() {

    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);

        }

    });

}

});

This way you'll get:

On input "event" and not "change". This prevents an additional click
outside the quantity box when you manually enter a quantity.

On every qty increment or decrement the cart will reload on click of the arrows.

answered 5 mins ago

FJ Gosselin

New contributor

add a comment |

Hi the current solution is good although I had the same problem, here's how I solved it:

Edit this file Magento_Checkout/templates/cart/form.phtml in your own theme. Remove the following part:

<script>

require([

    'jquery',

    'mage/mage'

], function ($) {

    'use strict';       

    $(".qty-down-fixed-onclick-page-cart").click(function() {

        var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

        var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

        val_input = parseInt(val_input);

        if(val_input <= number_click){

            val_input = number_click;

        }

        else{

            val_input = val_input - number_click;

        }

        $(this).closest('div.qty').find('.input-text.qty').val(val_input);

        return false;

    });

    $(".qty-up-fixed-onclick-page-cart").click(function() {



    });

});

Edit the custom.js file form the current solution to:

define(['jquery','Magento_Checkout/js/action/get-totals',

'Magento_Customer/js/customer-data',

'mage/mage'

], function ($, getTotalsAction, customerData) {

'use strict';

$(document).ready(function(){

    $(document).on(

        'input',

        'input[name$="[qty]"]',

        function(){

            reloadCart();

    });

    $(document).on(

        'click',

        '.qty-down-fixed-onclick-page-cart',

        function(){

            var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            if(val_input <= number_click){

                val_input = number_click;

            }

            else{

                val_input = val_input - number_click;

            }

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

    $(document).on(

        'click',

        '.qty-up-fixed-onclick-page-cart',

        function(){

            var number_click_2 = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            val_input = val_input + number_click_2;

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

});



function reloadCart() {

    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);

        }

    });

}

});

This way you'll get:

On input "event" and not "change". This prevents an additional click
outside the quantity box when you manually enter a quantity.

On every qty increment or decrement the cart will reload on click of the arrows.

answered 5 mins ago

FJ Gosselin

New contributor

Hi the current solution is good although I had the same problem, here's how I solved it:

Edit this file Magento_Checkout/templates/cart/form.phtml in your own theme. Remove the following part:

<script>

require([

    'jquery',

    'mage/mage'

], function ($) {

    'use strict';       

    $(".qty-down-fixed-onclick-page-cart").click(function() {

        var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

        var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

        val_input = parseInt(val_input);

        if(val_input <= number_click){

            val_input = number_click;

        }

        else{

            val_input = val_input - number_click;

        }

        $(this).closest('div.qty').find('.input-text.qty').val(val_input);

        return false;

    });

    $(".qty-up-fixed-onclick-page-cart").click(function() {



    });

});

Edit the custom.js file form the current solution to:

define(['jquery','Magento_Checkout/js/action/get-totals',

'Magento_Customer/js/customer-data',

'mage/mage'

], function ($, getTotalsAction, customerData) {

'use strict';

$(document).ready(function(){

    $(document).on(

        'input',

        'input[name$="[qty]"]',

        function(){

            reloadCart();

    });

    $(document).on(

        'click',

        '.qty-down-fixed-onclick-page-cart',

        function(){

            var number_click = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            if(val_input <= number_click){

                val_input = number_click;

            }

            else{

                val_input = val_input - number_click;

            }

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

    $(document).on(

        'click',

        '.qty-up-fixed-onclick-page-cart',

        function(){

            var number_click_2 = parseInt($(this).closest('div.qty').find('.input-text.qty').attr('data-qty'));

            var val_input = $(this).closest('div.qty').find('.input-text.qty').val();

            val_input = parseInt(val_input);

            val_input = val_input + number_click_2;

            $(this).closest('div.qty').find('.input-text.qty').val(val_input);

            reloadCart();

            return false;

        }

    );

});



function reloadCart() {

    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);

        }

    });

}

});

This way you'll get:

On input "event" and not "change". This prevents an additional click
outside the quantity box when you manually enter a quantity.

On every qty increment or decrement the cart will reload on click of the arrows.

answered 5 mins ago

FJ Gosselin

New contributor

answered 5 mins ago

FJ Gosselin

New contributor

answered 5 mins ago

FJ Gosselin

answered 5 mins ago

FJ Gosselin

New contributor

FJ Gosselin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj