Magento : Come creare un blocco

Oggi vi spiegherò come creare un blocco per Magento, con un proprio layout e personalizzabile con dei parametri passati attraverso il pannello di amministrazione del CMS. In questo modo potrete rilasciare ai vostri clienti un comodo sistema di personalizzazione, ad esempio per poter pubblicare in home page un blocco con un'offerta speciale. Il tutto richiede appena 6, brevissimi, files. 

1) creiamo il codice php del blocco.

Creiamo nella directory di lavoro (nel mio caso, app/code/local/Infocurci/Prodottohome) una sottodirectory Block e dentro salviamo il file Prodottohome.php, con questo semplice contenuto:

<?php
    class Infocurci_Prodottohome_Block_Prodottohome extends Mage_Core_Block_Template
    {
        protected function _construct()
    {
        parent::_construct();
    }
   
        public function _prepareLayout()
        {
            return parent::_prepareLayout();
        }
       
        public function getProductData()
        {
            $_product = Mage::getModel('catalog/product')->load($this->getData('prodotto'));
            $priceIncludingTax = Mage::helper('tax')->getPrice($_product, $_product->getPrice());
            return array('nome'=>$_product->getName(),'prezzoOriginale'=>$_product->getPrice(),'prezzoPromo'=>$_product->getFinalPrice(),'url'=>$_product->getProductUrl(),'thumb'=>(string)Mage::helper('catalog/image')->init($_product, 'image')->resize(190));
        }
    }
 

2) la configurazione del blocco

Dentro app/code/local/Infocurci/Prodottohome/etc, creiamo il consueto config.xml nel quale è sufficiente indicare il file del blocco (appena creato) e il file di aggiornamento del layout, che ci servirà per includere il css:

<?xml version="1.0"?>
<config>
    <modules>
        <Infocurci_Prodottohome>
            <version>0.1.0</version>
        </Infocurci_Prodottohome>
    </modules>
    <global>
        <blocks>
            <prodottohome>
                <class>Infocurci_Prodottohome_Block</class>
            </prodottohome>
        </blocks>
    </global>
    <frontend>
        <layout>
            <updates>
                <prodottohome>
                    <file>prodottohome.xml</file>
                </prodottohome>
            </updates>
        </layout>
    </frontend>
</config>
 

3) aggiornamento del layout

Dentro app/design/frontend/base/default/layout inseriamo il file prodottohome.xml che abbiamo appena inserito nel file di configurazione. Dentro va inserita soltanto l'indicazione per aggiungere il css:

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addCss"><name>css/prodottohome.css</name></action>
        </reference>
    </default>
</layout>
 

4) il template

Ecco il file del template (app/design/frontend/base/default/template/prodottohome/prodottohome.phtml):

<?php
    $product =  $this->getProductData();
?>
<div class="prodottoHome_container" >
    <div class="prodottoHome_divInternal">
        <div class="prodottoHome_name"><?php echo $product['nome'];?></div>
        <?php
            if($product['prezzoOriginale'] != $product['prezzoPromo']){
                ?>
                A soli <span id="bannerPrice"><?php echo number_format($product['prezzoPromo'],2,',','.');?> €</span>
                anzichè
                <span id="bannerPriceOld"><?php echo number_format($product['prezzoOriginale'],2,',','.');?> €</span>
            <?php
            }
            else{
                ?>
                <span id="bannerPrice"><?php echo number_format($product['prezzoOriginale'],2,',','.');?> €</span>
                <?php
            }
        ?>
        <br /><a href="<?php echo $product['url'];?>">Scopri l'offerta!!!</a>
    </div>
    <div style="padding-top:5px;">
        <img src="<?php echo $product['thumb'];?>" class="prodottoHome_image" />
    </div>
</div>

5) il css

Ovviamente si tratta di un file (skin/frontend/base/default/css/prodottohome.css) da personalizzare secondo quanto appena inserito nel template, nel mio caso è cosi:

.prodottoHome_container{
    width:900px;
    height:200px;
    background-image:url(../images/sfondo-banner-home.png);
}
.prodottoHome_divInternal{
    padding-left:20px;
    padding-top:70px;
    float:left;
    width:700px;
}
.prodottoHome_name{
    font-family:georgia;
    font-size:40px;
    color:#0085B5;
}
.prodottoHome_image{
    border: solid 1px #FFCFA6;
}
Visto che ho voluto inserire uno sfondo, ho anche creato un png chiamato "sfondo-banner-home.png" e l'ho inserito dentro skin/frontend/base/default/images.

6) attivazione

dentro app/etc/modules non dimentichiamo di attivare il nostro modulo, nel mio caso il file è Infocurci_Prodottohome.xml

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


7) Creiamo il blocco

Dentro il menù di amministrazione di Magento, voce "Cms" scegliamo "pages" e quindi "Home page". A sinistra nella tab "Content" inseriamo il codice del blocco:

{{block type="prodottohome/prodottohome" template="prodottohome/prodottohome.phtml" prodotto="2"  }}

dove "prodotto" corrisponde all'id numerico di un qualsiasi prodotto del nostro catalogo.

Ed ecco il risultato finale: