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.
magento2 cart ajax shopping-cart
edited Jul 19 '18 at 8:46
7ochem
5,72193668
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
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.
magento2 cart ajax shopping-cart
edited Jul 19 '18 at 8:46
7ochem
5,72193668
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
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.
magento2 cart ajax shopping-cart
edited Jul 19 '18 at 8:46
7ochem
5,72193668
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
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
magento2 cart ajax shopping-cart
edited Jul 19 '18 at 8:46
7ochem
5,72193668
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
edited Jul 19 '18 at 8:46
7ochem
5,72193668
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
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
5,72193668
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
asked Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
788617
add a comment |
add a comment |
2 Answers
2
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 AhirSurendra Kumar Ahir
788617
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.
answered yesterday
PiyushPiyush
1
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 |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
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 AhirSurendra Kumar Ahir
788617
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 AhirSurendra Kumar Ahir
788617
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 AhirSurendra Kumar Ahir
788617
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 AhirSurendra Kumar Ahir
788617
answered Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
answered Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
answered Jul 18 '18 at 17:13
Surendra Kumar AhirSurendra Kumar Ahir
788617
788617
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 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, 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.
answered yesterday
PiyushPiyush
1
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 |
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.
answered yesterday
PiyushPiyush
1
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 |
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.
answered yesterday
PiyushPiyush
1
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.
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.
answered yesterday
PiyushPiyush
1
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.
answered yesterday
PiyushPiyush
1
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.
answered yesterday
PiyushPiyush
1
answered yesterday
PiyushPiyush
1
1
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.
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.
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 |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
