MAGENTO 1.X – CREATE A CUSTOM BLOCK IN MAGENTO


If you want to add your own block, you’ll need to add a Magento module, so first of all, we need to create an extension with the following structure:

Add the following content to the files:

  • app/etc/modules/Vendor_ExampleAfterPurchase.xml
  • app/code/local/Vendor/ExampleAfterPurchase/etc/config.xml
    Once you’ve added a module to the system, you’ll need to configure the name of the Layout Update XML file you would like added, in your config.xml. To do this, you will need to perform the following steps:First add the following node to your module’s config.xml file:

    The <updates> node is where you configure the XML files where Magento will load the design package. Next, add a uniquely named node that identifies your update

    Then, you will need to add a uniquely node name that identifies your design updates, and a file name, as follows:

    If you use a node name that is already in use by another Magento module (eg. <catalog/>), one node will get lost in the shuffle.

Moreover, if you need to add any kind of layout xml on the backend side, you will need to add all those tags inside the <adminhtml> one, as follows:

In addition, you will need to add the following <blocks> node, where you will set up the class and folder where all blocks will be located:

Finally, your config.xml file should like like this:

  • app/code/local/Vendor/ExampleAfterPurchase/Block/Details.php

The main point in there, is that our block class name should be the folder that contains the file, and the file name itself, in this case:

Lets create the class itself, in this case, we are extending Mage_Checkout_Block_Onepage_Success because we are going to allocate the new block, on the order success page, otherwise, it could extend directly Mage_Core_Block_Template

  • app/design/frontend/mytheme/default/layout/exampleafterpurchase.xml

In this file is where we will locate all our design configuration.

<checkout_onepage_success> => This place is where we are going to locate/show our block, in this case is the success page. If we don’t need to set it up in a particular place, we will need to use <default> tag instead.

<reference name=”content”> => This is the reference of the block where we are going to put our block.

<block type=”vendor_exampleafterpurchase/details” name=”details” template=”exampleafterpurchase/details.phtml”/> => Here is where we instantiate our block, and where we link the design with the backend.

Type is our block backend class, that is, vendor_extension/classname. Is important to mention that if your class in inside another folder on the Block on, for example, app/code/local/Vendor/ExampleAfterPurchase/Block/Product/Detail.php you will need to separate the folder and class name with an underscore, such as, exampleafterpurchase/product_details.phtml (vendor_extension/foldername_classname).

Name is the name of our block.

Template is the phtml file where we are going to locate all the design and the html stuff.

  • app/design/frontend/mytheme/default/template/exampleafterpurchase/details.phtml

This is the html itself of the block, here we can call any method in the backend implementated as Details.php

 

That’s all, remember before making your first try, to clean cache.