In this blog, we are going to learn Magento blocks.

What Are Blocks in Magento?

Block is first class elements in the structure of Magento layouts, in Magento architecture. Blocks are powerful and flexible way to plug your content into already existing layouts. You can remove or reposition existing blocks by using XML files very easily. You can also create your own blocks using custom module in Magento. For example: You want to display special products for upcoming season on the front page then you can achieve it by implementing custom blocks.

Blocks are of two types:

Structural Blocks and Content Blocks

Structural Blocks

Structural Blocks are the containers for holding the "Content Blocks". They don't have any actual content to display but in the end they turn to display the content blocks. They are used to structure the content of the web page. For example, "Header", "Footer", "Left" and "Right" are structural blocks in Magento.

Content Blocks

Content Blocks are used to display the actual content for displaying it on the web page. Majority of contents are generated by the content blocks for different modules.

Custom Block Development

Let's begin to develop custom block for our custom Magento module. It will be a simple block which will be used to display most recent products available in the store.

These are the file structures for our custom block that will be needed to implement

• app/etc/modules/Envato_All.xml: It's a file used to enable our custom module.
• app/code/local/Envato/Recentproducts/etc/config.xml: It's a module configuration file.
• app/code/local/Envato/Recentproducts/Model/Recentproducts.php: It's a model file which provides the array of most recent products.
• app/code/local/Envato/Recentproducts/Block/Recentproducts.php: It's the main block file for our custom block.
• app/design/frontend/default/default/template/recentproducts/recentproducts.phtml: It's a template file which contains the XHTML-related stuff.

Setting Up the Files

First we need to create the module enabler file. Create app/etc/modules/Envato_All.xml and paste the following contents into that file. We've used Envato as our module namespace and Recentproducts as our module name.

<!-- app/etc/modules/Envato_All.xml -->

<?xml version="1.0"?>
<config>
  <modules>
    <Envato_Recentproducts>
      <active>true</active>
      <codePool>local</codePool>
    </Envato_Recentproducts>
  </modules>
</config>

Create app/code/local/Envato/Recentproducts/etc/config.xml and paste the following contents in that file. We've just declared the model and block class names as per the Magento module XML file conventions.

<!-- app/code/local/Envato/Recentproducts/etc/config.xml -->

<?xml version="1.0"?>

<config>
  <modules>
    <Envato_Recentproducts>
      <version>1.0</version>
    </Envato_Recentproducts>
  </modules>
  <global>
    <blocks>
      <recentproducts>
        <class>Envato_Recentproducts_Block</class>
      </recentproducts>
    </blocks>
    <models>
      <recentproducts>
        <class>Envato_Recentproducts_Model</class>
      </recentproducts>
    </models>
  </global>
</config>

Now, create the model file at app/code/local/Envato/Recentproducts/Model/Recentproducts.php. Paste the following contents in the model file.

<?php

// app/code/local/Envato/Recentproducts/Model/Recentproducts.php

class Envato_Recentproducts_Model_Recentproducts extends Mage_Core_Model_Abstract {

  public function getRecentProducts() {
    $products = Mage::getModel("catalog/product")
                ->getCollection()
                ->addAttributeToSelect('*')
                ->setOrder('entity_id', 'DESC')
                ->setPageSize(5);
    return $products;
  }
}
?>

getRecentProducts will return five most recently added products.

Further, create the app/code/local/Envato/Recentproducts/Block/Recentproducts.php file and insert the following code in that file.

<?php

// app/code/local/Envato/Recentproducts/Block/Recentproducts.php

class Envato_Recentproducts_Block_Recentproducts extends Mage_Core_Block_Template {

  public function getRecentProducts() {
    // call model to fetch data

    $arr_products = array();
    $products = Mage::getModel("recentproducts/recentproducts")->getRecentProducts();

    foreach ($products as $product) {
      $arr_products[] = array(
        'id' => $product->getId(),
        'name' => $product->getName(),
        'url' => $product->getProductUrl(),
      );
    }
  
    return $arr_products;
  }
}

This file is related to our custom block and is one of the most important files. We are going to call our model method getRecentProducts to load the array of the products using Mage::getModel

Finally, we'll need a make a template file at app/design/frontend/default/default/template/recentproducts/recentproducts.phtml. It contains the XHTML code related to the products display.

<?php

// app/design/frontend/default/default/template/recentproducts/recentproducts.phtml

$products = $this->getRecentProducts();
?>

  
<div id="product_list">
  <h1>Recent Products</h1>
  <?php if (is_array($products) && count($products)) { ?>
    <?php foreach($products as $product) { ?>
      <div>
        <a href="<?php echo $product['url'] ?>"><?php echo $product['name'] ?></a>
      </div>
    <?php } ?>
  <?php } ?>
</div>

Custom block module section is complete.

In the next section we'll see how we could use the block short codes to display our block in the front­-end pages.

Testing the Front-­End

To insert your custom block using the layout update file, you can use the following code.

<block type="recentproducts/recentproducts" name="recentproducts_recentproducts" template="recentproducts/recentproducts.phtml"></block>

On the other hand, if you want to display your custom block using the CMS page, here is the code you should use.

{{block type="recentproducts/recentproducts" name="recentproducts_recentproducts" template="recentproducts/recentproducts.phtml"}}

Now login to your admin panel of back-end and go to CMS > Pages, now add new page using Add New Page. Now paste your block short code as shown below

Save the page and go to the front-­end to see how it looks!

Looks great, doesn't it? So that's all.

Thanks for reading the blog.