I have created a custom theme, let say Namespace/customtheme
based on Magento/Luma
theme and copied onepage.phtml
template of Magento_Checkout
module in custom theme.
After overriding onepage.phtml
, checkout page is not working properly. Block Loader (Magento_Ui/js/block-loader)
of checkout page is always showing even the page has been loaded completely.
If I remove the onepage.phtml file from custom theme the it works well.
I have tried to deploy the static content but no luck.
Here is the content of overridden onepage.phtml template:
app/design/frontend/Namespace/customtheme/Magento_Checkout/templates/onepage.phml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask">
<div class="loader">
<img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
style="position: absolute;">
</div>
</div>
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#checkout": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
}
}
</script>
<script>
window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
// Create aliases for customer.js model from customer module
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
window.customerData = window.checkoutConfig.customerData;
</script>
<script>
require([
'mage/url',
'Magento_Ui/js/block-loader'
], function(url, blockLoader) {
blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
})
</script>
</div>
Checkout Page
Can someone point me in the right direction? Thanks!