0

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

M2 Checkout Screenshot

Can someone point me in the right direction? Thanks!

  • There are any errors on your browser console? – Khoa TruongDinh Jul 24 '16 at 12:04
  • There is no error on browser console – Shyam Jul 24 '16 at 12:14
1

It looks like the problem is caused due to the missing "checkoutLoader" configuration.

Try to add the following code:

data-mage-init='{"checkoutLoader": {}}'

at the end of the div with the id="checkout-loader".

<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.