Tutorial: Inserir ícone dinâmico do carrinho de compras no topo da loja
Autor: Gbo Web | Publicado: 2013-03-12T13:59:00-07:00



Tutorial: Inserir ícone dinâmico do carrinho de compras no topo da loja









Uma dúvida que tive logo no começo era a de como colocar o ícone do carrinho de compras com a quantidade de itens no topo da minha loja. Na época(quer dizer, alguns meses atrás), havia procurado tutoriais e, como na maioria das vezes, não havia encontrado algo que realmente me ajudasse. Como estava apenas estudando o Magento, resolvi deixar para lá, só que, recentemente, essa curiosidade virou uma necessidade para o meu projeto em execução. Depois de testar várias formas, finalmente consegui colocar esse bendito ícone! E ainda melhor, consegui mudar ele, diferenciando quando o carrinho estiver vazio ou cheio! Sei que não é uma grande descoberta, mas para mim foi! Nesse tutorial vou postar o passo-a-passo de como fazer isso, espero que ajude alguém!1º Passo -&nbsp;Baixar os ícones e colocar no diretório images:Nesse exemplo você terá que baixar dois ícones, um para o carrinho vazio e outro para o carrinho cheio.Pesquisando um pouco, encontrei o seguinte link:&nbsp;18 Free Ecommerce Icon Sets Tutorialque contém dicas de sites que oferecem ícones free. No meu caso, eu baixei esse aqui:Freebie: Professional E-Commerce Icons Set (20 Icons). Fique a vontade para escolher os seus!Após baixar as imagens, mova-as para o seguinte diretório:skin-&gt;frontend-&gt;default-&gt;SeuTema-&gt;images2º Passo -&nbsp;Criar o arquivo para a exibição do carrinho no header:Em&nbsp;app-&gt;design-&gt;frontend-&gt;default-&gt;SeuTema-&gt;template-&gt;checkout-&gt;cart&nbsp;crie um arquivo chamado&nbsp;header.cart.phtml&nbsp;com o seguinte conteúdo:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php $_cartQty = $this-&gt;getSummaryCount() ?&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php if ($_cartQty == 0): ?&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php echo $this-&gt;__('&lt;a href="%s" id="ico-cart"&gt;&lt;img src='.$this-&gt;getSkinUrl('images/carrinho-vazio.png').' /&gt;&lt;br /&gt;Vazio&lt;/a&gt;', $this-&gt;getUrl('checkout/cart')) ?&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php elseif ($_cartQty == 1): ?&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php echo $this-&gt;__('&lt;a href="%s" id="ico-cart"&gt;&lt;img src='.$this-&gt;getSkinUrl('images/carrinho-cheio.png').' /&gt;&lt;br /&gt;1 item&lt;/a&gt;', $this-&gt;getUrl('checkout/cart')) ?&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php else: ?&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;?php echo $this-&gt;__('&lt;a href="%s" id="ico-cart"&gt;&lt;img src='.$this-&gt;getSkinUrl('images/carrinho-cheio.png').' /&gt;&lt;br /&gt;%s itens&lt;/a&gt;', $this-&gt;getUrl('checkout/cart'), $_cartQty) ?&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php endif ?&gt;Substituindo&nbsp;carrinho-vazio.png&nbsp;e&nbsp;carrinho-cheio.png&nbsp;pelos ícones salvos anteriormente.3º Passo -&nbsp;Adicionar a chamada do bloco no header do page.xml:Abra o arquivo&nbsp;page.xml(app-&gt;design-&gt;frontend-&gt;default-&gt;SeuTema-&gt;layout) e procure o seguinte trecho:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;block type="page/html_header" name="header" as="header"&gt;Logo abaixo dele, insira o seguinte código:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;block type="checkout/cart_sidebar" name="headerCart" as="headerCart" template="checkout/cart/header.cart.phtml"/&gt; 4º Passo -&nbsp;Chamar o bloco no header do template:Abra o arquivo&nbsp;header.phtml(app-&gt;design-&gt;frontend-&gt;default-&gt;SeuTema-&gt;template-&gt;page-&gt;html) e procure o seguinte:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?php echo $this-&gt;getChildHtml('topLinks') ?&gt;Logo acima, insira o seguinte código:&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;?php echo $this-&gt;getChildHtml('headerCart') ?&gt;5º Passo -&nbsp;Editar o css para que&nbsp; carrinho fique alinhado:No arquivo&nbsp;styles.css(skin-&gt;frontend-&gt;default-&gt;SeuTema-&gt;css) insira o seguinte, logo no ínício:a#ico-cart { float:right; text-align:center; color:#ebbc58;&nbsp;&nbsp; }Nessa div você poderá especificar a cor do texto, o alinhamento, a fonte, o tamanho etc.Nesse caso, escolhi essa cor para se igualar aos top-links. Customize como achar necessário!Para que os top-links não fiquem "grudados" com o carrinho, procure a seguinte div:.header .links { float:right; margin:0 0 6px; }E mude para:.header .links { float:right; margin-top:20px; margin-right:20px; }6º Passo e último -&nbsp;Comentar a chamada do top-link "Meu Carrinho":No arquivo&nbsp;checkout.xml(app-&gt;design-&gt;frontend-&gt;default-&gt;SeuTema-&gt;layout) procure o seguinte termo:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;reference name="top.links"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;block type="checkout/links" name="checkout_cart_link"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;action method="addCartLink"&gt;&lt;/action&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;action method="addCheckoutLink"&gt;&lt;/action&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/block&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/reference&gt;Comente a tag&nbsp;action method="addCartLink", deixando o código assim:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;reference name="top.links"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;block type="checkout/links" name="checkout_cart_link"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!--&lt;action method="addCartLink"&gt;&lt;/action&gt;--&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;action method="addCheckoutLink"&gt;&lt;/action&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/block&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/reference&gt;O resultado será o seguinte:





Para finalizar, quero deixar bem claro que o estilo(css)&nbsp;depende muito do seu tema&nbsp;e que esse tutorial foi testado no default!