foto
Gabriel Z Blog

Gabriel Z Blog

Tecnologia web, Magento & geek stuff

Página inicial no Magento – exibindo produtos

9 de setembro de 2008

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!

Tags: , , , , ,

12 comentários para “Página inicial no Magento – exibindo produtos”

  1. Augusto disse:

    esse será mesmo os produtos mais vistos? ou os últimos vistos pela pessoa?

  2. Sabrina Bandare disse:

    Olá,

    Como carregar na loja virtual o menu e submenus com categorias e subcategorias?

    Já está cadastrado no sistema administrativo do Magento, porém não carrega na loja virtual.

    Link da loja virtual sem as categorias e subcategorias:
    http://www.softwaresonline.net/magento/

    Grata pela atenção …

  3. Gabriel Zamprogna disse:

    Augusto, no caso de você estar usando o home_product_viewed.phtml, deverá ver os últimos vistos pela pessoa, sim.
    No caso do new.phtml, verá apenas os com data “new from date” preenchida e igual ou inferior à data atual.

  4. Vinícius disse:

    Legal, vc é bastante técnico, vai espantar bastante gente preguiçosa de usar esse cms, mas o artigo elucida muito bem a questão.
    Tem uns livros saindo sobre o Magento, vc sugere algum?

  5. Marcos Ribeiro disse:

    Simplesmente fantástico, fiz estas mudanças e …. 1000%.
    Agora sem querer abusar, tô com um probleminha e se vc puder dar uma olhada: http://mrdezigner.com/ecommerce/edicaovideo.html, notou, o menu está se repetindo. Por que será isso? Vc tem alguma dica? No mais muito obrigado e gostaria de saber se posso postar o seu conteúdo no meu site.
    Atenciosamente
    Marcos Ribeiro.

  6. Giolvani disse:

    muito bom Gabriel seu tópico sobre magento…
    ainda é dificil conteúdo sobre Magento na nossa lingua.

    mas seguinte cara, tem como fazer isso com a atual versao do Magento 1.2.1???

    abraços

  7. Andre Luiz disse:

    Estou iniciando utilização do magento e estou gostando muito desta ferramenta. Seu post foi de muita satisfação para o que estou precisando, mas para mim esta duplicando a visualização do produto na pagina que insiro o código. Já tentei entender o porque mas nao estou conseguindo.

    Alguém pode me ajudar? Estou utilizando a versão 1.3.1

  8. Evandro Saraiva disse:

    Boa tarde. Sou novo no Magento e estou cada dia mais impressionado com a ferramenta. Gabriel, não teria como você mostrar um exemplo de paginação ?

  9. David disse:

    Como faço isso na versão 1.3.2.3?

    To apanhando muito disso, a semanas! Se puder me ajudar ficarei muito grato.

  10. Gabriel Zamprogna disse:

    David
    Faz do mesmo jeito.
    Por favor, revise todos os passos.

  11. Pablo disse:

    Gabriel, com relação a pergunta do David sobre como fazer na versão 1.3.2.3 eu acho que ele tem razão, as coisas estas bem diferentes nessa versão.
    A linha “$this->setProductCollection($products):” que vc cita aqui no post não existe no arquivo new.phtml.
    Você não poderia atualizar esse post?
    obrigado

  12. Vinicius disse:

    E se eu quiser que os esgotados, não fossem exibidos na vitrine principal, somente em suas categorias? existe tal possibilidade?

Deixe um comentário



© 2014 - Indexa Ltda. Todos os direitos reservados.