Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Custom block under Order Summary block

SOLVED
Go to solution
‎05-11-2017 08:52 AM
‎05-11-2017 08:52 AM

Custom block under Order Summary block

Hi,

 

I'm trying to add a custom form block under the "Order Summary" block on the checkout page. No error but I can't get my custom block to display.

 

What I've done is:

 

1. Create a block class at Namespace\MyModule\Block\CustomForms\MyFormClass

2. Create a layout file at Namespace/MyModule/view/frontend/layout/checkout_cart_index.xml

3. Create a template file at Namespace/MyModule/view/frontend/templates/my-form.phtml

 

Step 1, my for class is extending Magento\Framework\View\Element\Template.

Step 2 in checkout_cart_index.xml, I have the following:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block 
                template="Namespace_MyModule::my-form.phtml" 
                class="Namespace\MyModule\Block\CustomForms\MyFormClass"
                name="my_form"
                after="-"
            />
        </referenceContainer> 
    </body>
</page>

My block is not rendered on the right column below the Order Summary block.

I also tried with the following xml tag, which doesn't work better:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

 

What am I missing?

 

Thank your for your answers.

 

Labels:
0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
‎05-16-2017 04:22 AM
‎05-16-2017 04:22 AM

Re: Custom block under Order Summary block

I finally found a way to do this.

First, the sidebar on /checkout/#payment cannot be modified via xml.

The only way in the use case presented above is to override the core sidebar.html template with another one located in the custom module.

 

So in order to add a custom block on the right sidebar on the checkout payment page follow the steps below:

 

1- Create a requirejs-config.js in your custom module.

For example, mine is at MyModule/view/frontend/requirejs-config.js

 

In the requirejs-config.js file, put the following declaration:

 

var config = {
	"map": {
	    "*": {
	      "Magento_Checkout/template/sidebar.html": "Namespace_MyModule/template/sidebar.html"
	    }
	}
};

This is telling Magento to replace the default core sidebar.html with the one available in the custom module.

 

2- Customise your sidebar.html

Copy the core Magento_Checkout/template/sidebar.html file and paste it in your custom module as specified in the requirejs-config.js, at Namespace_MyModule/template/sidebar.html

 

You can now add a new block into your custom sidebar.html.

If you need to do more complex things than a simple html file can do, it's possible to override the default html file with a phtml file placed in your custom module.

 

 

View solution in original post

Reply
10 REPLIES 10
‎05-12-2017 02:50 AM
‎05-12-2017 02:50 AM

Re: Custom block under Order Summary block

I found out that checkout_cart_index.xml is not the file I should be using for my block declaration, which explains why I couldn't see any change.

 

But which xml file manages the /checkout/#payment page then?

I can see that checkout_index_index.xml is involved, but I can't see any xml reference to the Order Summary block (on the right) on the /checkout/#payment page.

 

There is no resource online about this specific case. Is the implementation of such a behaviour a problem on Magento 2? I am not looking for a ready to use solution, just pointing out a file name would be wonderful if this is actually possible.

0 Kudos
Reply
‎05-12-2017 07:00 AM
‎05-12-2017 07:00 AM

Re: Custom block under Order Summary block

I have finally managed to display my block on the checkout/#payment page, but not in or after the "Order Summary" block on the right.

 

So my question simply turns into: what is the container name usable in xml for the "Order Summary" block on the right?

0 Kudos
Reply
‎05-12-2017 07:29 AM
‎05-12-2017 07:29 AM

Re: Custom block under Order Summary block

in my custom module, a checkout_index_index.xml allows me to display a custom block above the payment options if I add the following xml code:

<referenceContainer name="content">
  <block class="Namespace\MyModule\Block\MyBlockClass" before="-" template="Namespace_MyModule::checkout/cart/my-form.phtml"/>
</referenceContainer>

 

Basically I just want to know what I should replace name="content" with in the referencecontainer tag so that my block is displayed in the sidebar on the right.

 

I have tried sidebar.additional but it's not working. Any suggestion?

 

 

0 Kudos
Reply
‎05-12-2017 07:48 AM
‎05-12-2017 07:48 AM

Re: Custom block under Order Summary block

sidebar.main is not working either...

0 Kudos
Reply
‎05-12-2017 08:06 AM
‎05-12-2017 08:06 AM

Re: Custom block under Order Summary block

man, monoposting is my favorite activity. I can keep this thread up for weeks.

Reply
‎05-12-2017 08:19 AM
‎05-12-2017 08:19 AM

Re: Custom block under Order Summary block

I went through all the module-checkout/view/frontend/layout files and I am running out of ideas. Mayday!

0 Kudos
Reply
‎05-12-2017 08:31 AM
‎05-12-2017 08:31 AM

Re: Custom block under Order Summary block

how do you call a cheese that is not yours?

nacho cheese 

Smiley Happy

0 Kudos
Reply
‎05-12-2017 08:50 AM
‎05-12-2017 08:50 AM

Re: Custom block under Order Summary block

after 3 days looking for a solution, I have decided to go the dirty way: I place my block on the "content" container as described above, and I use Javascript to move the block from the top of the page to the right sidebar.

 

It's very hacky and I hope Magento 2 offers a better way to work with blocks on that page.

Good luck to all the developers who need the same thing. Reading all the questions on this forum and on stack overflow, there must be quite a few.

0 Kudos
Reply
‎05-16-2017 04:22 AM
‎05-16-2017 04:22 AM

Re: Custom block under Order Summary block

I finally found a way to do this.

First, the sidebar on /checkout/#payment cannot be modified via xml.

The only way in the use case presented above is to override the core sidebar.html template with another one located in the custom module.

 

So in order to add a custom block on the right sidebar on the checkout payment page follow the steps below:

 

1- Create a requirejs-config.js in your custom module.

For example, mine is at MyModule/view/frontend/requirejs-config.js

 

In the requirejs-config.js file, put the following declaration:

 

var config = {
	"map": {
	    "*": {
	      "Magento_Checkout/template/sidebar.html": "Namespace_MyModule/template/sidebar.html"
	    }
	}
};

This is telling Magento to replace the default core sidebar.html with the one available in the custom module.

 

2- Customise your sidebar.html

Copy the core Magento_Checkout/template/sidebar.html file and paste it in your custom module as specified in the requirejs-config.js, at Namespace_MyModule/template/sidebar.html

 

You can now add a new block into your custom sidebar.html.

If you need to do more complex things than a simple html file can do, it's possible to override the default html file with a phtml file placed in your custom module.

 

 

Reply