Magento 2: Override checkout/onepage template of Luma theme

Question

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!

Answer 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": {}}'>