
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:
1 2 3 4 5 6 7 8 |
#Backend side app/etc/modules/Vendor_ExampleAfterPurchase.xml app/code/local/Vendor/ExampleAfterPurchase/etc/config.xml app/code/local/Vendor/ExampleAfterPurchase/Block/Details.php #Frontend side app/design/frontend/mytheme/default/layout/exampleafterpurchase.xml app/design/frontend/mytheme/default/template/exampleafterpurchase/details.phtml |
Add the following content to the files:
- app/etc/modules/Vendor_ExampleAfterPurchase.xml
123456789<?xml version="1.0"?><config><modules><Vendor_ExampleAfterPurchase><active>true</active><codePool>local</codePool></Vendor_ExampleAfterPurchase></modules></config> - 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:123456789<config><!-- ... --><frontend><layout><updates></updates></layout></frontend></config>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 updateThen, you will need to add a uniquely node name that identifies your design updates, and a file name, as follows:
12345678910111213<?xml version="1.0"?><config>< -- --><frontend><layout><updates><vendor_exampleafterpurchase><file>exampleafterpurchase.xml</file></vendor_exampleafterpurchase></updates></layout></frontend></config>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:
1234567891011 <config><adminhtml><layout><updates><vendor_exampleafterpurchase><file>exampleafterpurchase.xml</file></vendor_exampleafterpurchase></updates></layout></adminhtml></config>
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:
1 2 3 4 5 6 7 8 9 10 |
<config> <-- --> <global> <blocks> <vendor_exampleafterpurchase> <class>Vendor_ExampleAfterPurchase_Block</class> <!--Folder where all the blocks are located in your module--> </vendor_exampleafterpurchase> </blocks> </global> </config> |
Finally, your config.xml file should like like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0"?> <config> <modules> <Vendor_ExampleAfterPurchase> <version>0.0.1</version> </Vendor_ExampleAfterPurchase> </modules> <global> <blocks> <vendor_exampleafterpurchase> <class>Vendor_ExampleAfterPurchase_Block</class> <!--Folder where all the blocks are located in your module--> </vendor_exampleafterpurchase> </blocks> </global> <frontend> <layout> <updates> <vendor_exampleafterpurchase> <file>vendor_exampleafterpurchase.xml</file> </vendor_exampleafterpurchase> </updates> </layout> </frontend> </config> |
- 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:
1 2 |
// Vendor_ExtensionName _Block_Blockname Vendor_ExampleAfterPurchase_Block_Detail |
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
1 2 3 4 5 6 7 |
<?php class Vendor_ExampleAfterPurchase_Block_Detail extends Mage_Checkout_Block_Onepage_Success { public function testMethod(){ echo "IT WORKS!"; } } |
- app/design/frontend/mytheme/default/layout/exampleafterpurchase.xml
In this file is where we will locate all our design configuration.
12345678 <?xml version="1.0"?><layout version="0.1.0"><checkout_onepage_success><reference name="content"><block type="vendor_exampleafterpurchase/details" name="details" template="exampleafterpurchase/details.phtml"/></reference></checkout_onepage_success></layout><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
123 <div><?php $this->testMethod(); ?></div>
That’s all, remember before making your first try, to clean cache.