I've asked a similar question before, but because of some research, it would not have been relevant anymore. So here a more comprehensive explanation of my problem.
My scenario
I want the cart page to update without a refresh when the quantity has been changed of a product in the order list.
What I did
First of all, and most essential in this whole problem: I reinstalled Magento so there was a clean work environment I could test the module in.
Secondly, I created a module, named AjaxCart
. This module consists of the following files:
module.xml
has the following content:
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_AjaxCart" setup_version="2.0.0"/>
</config>
checkout_cart_index.xml
has the following content:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Vendor_AjaxCart/js/jquery.cartAjaxQty.js"/>
</head>
</page>
requirejs-config.js
has the following content:
var config = {
map: {
'*': {
ajaxQty: 'Vendor_AjaxCart/js/jquery.cartAjaxQty'
}
}
};
and finally jquery.cartAjax.js
has the following content:
require(['jquery', 'Magento_Checkout/js/action/get-totals'], function () {
jQuery(document).ready(function($, getTotalsAction){
$(".cart-container .form-cart .action.update").remove();
// On change handler
jQuery(document).on('change', 'input[name$="[qty]"]', function(){
console.log("quantity changed");
var form = jQuery(jQuery(this).closest('form'));
$.ajax({
url: form.attr('action'),
data: form.serialize(),
showLoader: true,
context: this.changedInput,
success: function (res) {
var parsedResponse = $.parseHTML(res);
var result = $(parsedResponse).find("#form-validate");
$("#form-validate").replaceWith(result);
var deferred = $.Deferred();
getTotalsAction([], deferred);
console.log('Ajax succes function completed');
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
console.log(err.Message);
}
});
}
);
});
});
So, I also know where things go wrong: the requirements. If the file only has the following requirement:
require([
'jquery']
There is nothing wrong, and I can console.log
the changes in quantities.
Problem
If I add the requirement I have in the file (which I need to update the cart summary block), I get the following error on the cart page:
I don't know if this is a Magento 2.2.x bug, or is it because of the file or directory structures I have made. Anyhow, it is something that has me in it's grip for a long time and I am really thinking this is just a problem caused by Magento self and not my code.
I'm really curious if someone could try exactly what I did (except the clean install, a little bit too much to ask) and see if he/she gets the same problem or if someone knows an answer to this. I've also tried changing themes, but no luck.
-- ADITIONAL INFO --
I've tried to perform a change on the cart in Firefox, but upon showing the page (like in Chrome), Firefox also throws an error, but this time a different one:
So I've followed this question:
TypeError: options is undefined (customer-data.js)
But no luck.
-- Update --
As Pascal Wientjes pointed out, I should use define
instead of require
. I did this, and than the following error occured:
This could be fixed by changing the requirejs-config.js
file to:
var config = {
map: {
'*': {
ajaxQty: 'Vendor_AjaxCart/js/cartAjaxQty'
}
},
deps: [
"Vendor/js/cartAjaxQty"
]
};
And stop including the jquery.cartAjax.js
in the head of checkout_cart_index.xml
. But unfortunately, the old error shows up again.
If of any use: when included using above way, the file is loaded on every page of course. For example, when browsing to the home page, the following errors also show up, but this is probably because of the information it is missing on those pages (just providing as much information as possible):
-- Update --
Sometimes, really sometimes, the page somehow loads correctly, even while customer-data.js is loaded AFTER cartAjaxQty.js. You can see I have a console.log("running");
inside my code which is printend in the console:
Magento_Checkout
to yourmodule.xml
? It is mandatory to use section because of module loading order it may cause some dependency issues. Run abin/magento setup:upgrade
to reorganise yourapp/etc/config.php
file and so the loading order. – Matthéo Geoffray Apr 11 '18 at 9:46Module_AjaxCart
is above in the list, aboveMagento_Checkout
. This meansModule_AjaxCart
is being loaded beforeMagento_Checkout
? And that can cause the error? – Condor Apr 11 '18 at 9:51<module name="Module_AjaxCart" setup_version="2.0.0"> <sequence> <module name="Magento_Checkout" /> </sequence> </module>
and loads the Checkout before Module_AjaxCart but changes nothing unfortunately. – Condor Apr 11 '18 at 10:22