Gabriel Z Blog

ATENÇÃO: O conteúdo deste post é válido somente até a versão 1.1.8 do Magento.

Uma dúvida bem comum para quem instala o Magento pela primeira vez é: por que a página inicial está em branco?

Bem, o sistema vem com uma página (gerenciável no backend em CMS > Gerenciar Páginas) chamada Home Page. O que você quiser que apareça na home do site, deve colocar nesta página.

Ótimo, mas e se você não quiser colocar um HTML lá, mas simplesmente exibir alguns produtos, p. ex., os mais vendidos, os novos, ou os pertencentes a uma determinada categoria, automaticamente?

Exibindo produtos com “new from date” OU os “mais vistos” (clicados)

O que se faz, em geral, é descomentar o código que já vem por padrão na Home, usando alguns templates que ajudam bastante. Um exemplo comum de código XML de Atualização de Layout (na aba “Design Personalizado”), seria:


<reference name="content">
<block type="catalog/product_new" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="cms_page"/>
<!-- <block type="reports/product_viewed" name="home.reports.product.viewed" alias="product_viewed" template="reports/home_product_viewed.phtml" after="product_new"/>
<block type="reports/product_compared" name="home.reports.product.compared" template="reports/home_product_compared.phtml" after="product_viewed" /> -->
</reference>
<reference name="right">
<action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
<action method="unsetChild"><alias>right.reports.product.compared</alias></action>
</reference>



right.reports.product.viewed
right.reports.product.compared


Sendo também necessário referenciar o template no campo Conteúdo, na guia Informações Gerais:

{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

Esta combinação de códigos mostraria os produtos novos, ou os que possuírem o campo “new from date” preenchidos. Se você descomentar o código que vem logo abaixo, vai poder também mostrar os produtos mais vistos (home_product_viewed.phtml).

Se você optar por utilizar os novos, verá que há ainda alguns problemas na formatação do arquivo new.phtml. A listagem fica meio bagunçada, só 5 produtos são exibidos e os thumbnails saem desproporcionais. A solução que eu encontrei foi substituir o código original do catalog/product/new.phtml pelo seguinte (a partir da linha 21):


<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
<div class="listing-type-grid  catalog-listing">
<h3>Vitrine de Produtos</h3>
<?php $_collectionSize = $_products->getSize() ?>
<table cellspacing="0" class="generic-product-grid" id="product-list-table">
<?php $i=0; foreach ($_products as $_product): ?>
<?php if ($i++%3==0): ?>
<tr>
<?php endif ?>
<td>
<p class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</a>
</p>
<h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>
<?php else: ?>
<div class="out-of-stock"><?php echo $this->__('Out of stock') ?></div>
<?php endif; ?>
<div class="clear"></div>
<p class="add-to">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/>
<a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a>
<?php endif; ?>
</p>
</td>
<?php if ($i%3==0 && $i!=$_collectionSize): ?>
</tr>
<?php endif ?>
<?php endforeach ?>
<?php for($i;$i%3!=0;$i++): ?>
<td class="empty-product"> </td>
<?php endfor ?>
<?php if ($i%3==0): ?>
</tr>
<?php endif ?>
</table>
<script type="text/javascript">decorateTable('product-list-table')</script>
</div>
<?php endif; ?>


Além disso, se todos os produtos estiverem aparecendo como “Esgotados”, inclua a seguinte linha no arquivo app\code\core\Mage\Catalog\Block\Product\New.php (provavelmente na linha 47):

$products->addAttributeToSelect('status');

Se quiser, também pode colocar as seguintes linhas, antes de $this->setProductCollection($products):

// alterado para 9 produtos, ao inves de 5
$products->setOrder('news_from_date')->setPageSize(9)->setCurPage(1);

// randomizar os resultados
$products->getSelect()->order('rand()');

Exibindo produtos de uma categoria

Se por acaso você quiser exibir os produtos de uma determinada categoria nesta página, coloque o seguinte código no campo Conteúdo (na guia Informações Gerais):

{{block type="catalog/product_list" category_id="5" template="catalog/product/new.phtml"}}

Neste caso, estou pegando os produtos da categoria 5, mas você pode substituir pelo ID de qualquer categoria existente na sua loja.

O mais interessante é que você pode mexer na página inicial sempre que quiser e, usando estes exemplos como modelo, pode criar diversas combinações de recursos, conforme as suas necessidades.

Aguardo comentários, com seus códigos para a home do Magento!