In checkout page loader stuck and spinning forever. There are no js errors in console. HTML of spinner looks like this
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
<div class="loader">
<img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
style="position: absolute;">
</div>
</div>
File checkout-loader.js looks like this
define([
'rjsResolver'
], function (resolver) {
'use strict';
/**
* Removes provided loader element from DOM.
*
* @param {HTMLElement} $loader - Loader DOM element.
*/
function hideLoader($loader) {
$loader.parentNode.removeChild($loader);
}
/**
* Initializes assets loading process listener.
*
* @param {Object} config - Optional configuration
* @param {HTMLElement} $loader - Loader DOM element.
*/
function init(config, $loader) {
resolver(hideLoader.bind(null, $loader));
}
return init;
});
I tried console.log
on init()
function and it works, but not in hideLoader()
function – so it is not called.
Also site using IWD_Opc extension.
Can you please give a hint where to look up the error
UPDATE
Here is some dirty fix that works for me.
I added line
resolver($loader.parentNode.removeChild($loader));
to init() function in checkout-loader.js
and line
$(document).find(blockLoaderClass).remove();
to removeBlockLoader() function in block-loader.js
Best Answer
I had the same problem a while ago, it was caused by someone removing
data-mage-init='{"checkoutLoader": {}}'
insideapp/design/frontend/PartyShowroom/default/Magento_Checkout/templates/onepage.phtml
The div for the checkout loader should look similar to this:
No idea if this could be the case for you but it's worth a look. If this isn't the case it's worth debugging the checkoutLoader JS.