I'm running Magento 2.0.1. I want to show a block in the checkout page. So, I created a module to override the checkout page. I have added the block code in the checkout_index_index.xml file, but the block shows at the bottom of the page.

I want to render the block on the top of the page without using Knockout.js.

Here's my code:

<!-- block code -->
<referenceContainer name="content">
    <block class="VendorName\ModuleName\Block\ClassName" name="content.options" after="-" cacheable="false"/>

<!-- Checkout page components -->
<referenceBlock name="checkout.root">
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="checkout" xsi:type="array">
                    <item name="children" xsi:type="array">

Use before="checkout.root" to show your content at the top of checkout page

Your final checkout_index_index.xml should look like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="content">
            <block class="VendorName\ModuleName\Block\ClassName" name="content.options" template="Vendor_Module::myfile.phtml" before="checkout.root" cacheable="false"/>
  • Excellent! This is what I was looking for. – Sai Kiran Sripada Nov 1 '17 at 7:20

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.