Magento, additional content on the Checkout page

You need to add two pictures to the checkout page, as in this picture:

It was not as easy as it seemed.

To begin with we will make a small template file with the necessary pictures. This is the app/design/frontend/default/sunnyD/template/callouts/checkout.phtml file:

  <div class = "box">
     <script src = "https://siteseal.thawte.com/cgi/server/thawte_seal_generator.exe"> </ script>
 </ div>

 <div class = "box">
     <img src = "<? php echo $ this-> getSkinUrl ('images / free-shipping.gif')?>" alt = "<? php echo __ ('Free Shipping')?>" />
 </ div> 

The first image is loaded dynamically, for which Javascript is used.
')

First try

Why not just add a new block to checkout.xml? To do this, you can use the built-in core/template . It is very convenient for displaying simple templates without logic, it needs to pass only one parameter - the template that needs to be output. And, because A simple checkout template consists of content and a right block ( 2columns-right.phtml ), add our new block to the right side of the page, something like this:

  <code> <checkout_onepage_index>
     ...
     <reference name = "right">
         ...
         <block type = "core / template" name = "images" template = "callouts / checkout.phtml" />
         ... 

It even works, and at first glance we have exactly what we need - our pictures from the checkout.phtml template appear on the right.

But at a second glance, when you click the Continue button to go to the next step of the checkout, the right side of the page completely reloads. The html for the right page comes in an Ajax request. This html no longer contains our images.

Second try

Okay, so you need to fix the returned html, so that it contains our pictures.

For this you need to fix checkout.xml , section checkout_onepage_progress . We need to add our block, as we did in the checkout_onepage_index section. But what is it? Our pictures anyway, no!

In general, it turned out in the end that you need to add the output parameter to the block and assign the value toHtml :

  <checkout_onepage_progress>
     ...
     <block type = "core / template" name = "images" output = "toHtml" template = "callouts / checkout.phtml" />
     ... 

What is it? Now, after the Continue button, only one image is visible, which is loaded via the img tag. The second image loaded via Javascript is not visible. Moreover, although the js code came in response from the server, it disappeared from the DOM tree. Any filter?

In general, attempt number two also failed.

Success

Well, if you can’t show both images by modifying the code for the right-hand side returned by an Ajax request, we’ll try to make the template remain unchanged throughout all steps of the checkout.

Javascript working with the checkout page is in the opcheckout.js file. It seems that the code that updates the right side of the page looks like this:

  ...
 reloadProgressBlock: function () {
     var updater = new Ajax.Updater ($$ ('. col-right') [0], this.progressUrl, {method: 'get', onFailure: this.ajaxFailure.bind (this)});
 },
 ... 

Those. he takes the first element with the class col-right and installs to it the new html received from the server.

And here is where the element with this class is declared - the file template/page/2columns-right.phtml :

  ...
 <! - start right ->
 <div class = "col-right side-col">
     <? php echo $ this-> getChildHtml ('right')?> & nbsp;
 </ div>
 <! - end right ->
 ... 

Not very good ... No matter what we put on the right side of the page using xml and the reference name="right" , or directly into this template, everything will be inside the diva with the class col-right and, as a result, will be erased in the next steps checkout

So, the only way out is to make your template based on 2columns-right.phtml . And in this template somehow put our template with pictures "outside" the right side, so that it would not be erased with new data.

So, first create a new template 2columns-right-checkout.phtml , and specify in checkout.xml what you need to use it.

It was:

  <checkout_onepage_index>
     ...
     <reference name = "root">
         <action method = "setTemplate"> <template> page / 2columns-right.phtml </ template> </ action> 

It became:

  <checkout_onepage_index>
     ...
     <reference name = "root">
         <action method = "setTemplate"> <template> page / 2columns-right-checkout.phtml </ template> </ action> 

Next, we modify the new template 2columns-right.checkout.phtml in the output part of the right side:

  <! - start right ->
 <div class = "side-col" style = "float: right;">
     <div class = "col-right side-col" <? php echo $ this-> getChildHtml ('right')?> </ div>

     <div class = "col-right side-col">
         <? php echo $ this-> getChildHtml ('images')?>
     </ div>
 </ div>
 <! - end right -> 

The meaning of this. Create a new wrapper div that will contain the right column. We cannot assign him the class col-right , because then the content of this diva will be lost. But we can leave it with a side-col class (which simply sets the width of the column, now 195px). And we add the float: right property so that our div-wrapper is located on the right.

Then we add inside the wrapper diva first the initial right part of getChildHtml('right') , then our template with pictures getChildHtml('images') .

Now both divas can have the original side-col and col-right classes. During the transition between steps, the contents of the first block with the class col-right will be updated, and the second block with our pictures will remain intact throughout the checkout. As required.

And also - to get the code getChildHtml('images') work out and display our core/template block with a template with images, you need to add it to checkout.xml inside the reference name="root" . And add the property as , equal to images . This images is the name by which getChildHtml() will find our block. We get:

  <checkout_onepage_index>
     ...
     <reference name = "root">
         ...
         <block type = "core / template" name = "images" as = "images" template = "callouts / checkout.phtml" />
         ... 

Here, just a few hours of work and the checkout page contains our additional template. All within the framework of decency, core files are not modified, all changes are only in the folder with the user theme ...