quarta-feira, 17 de outubro de 2012

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, 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 - 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: 18 Free Ecommerce Icon Sets Tutorial que 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->frontend->default->SeuTema->images


2º Passo - Criar o arquivo para a exibição do carrinho no header:
Em app->design->frontend->default->SeuTema->template->checkout->cart crie um arquivo chamado header.cart.phtml com o seguinte conteúdo:

        <?php $_cartQty = $this->getSummaryCount() ?>
        <?php if ($_cartQty == 0): ?>
            <?php echo $this->__('<a href="%s" id="ico-cart"><img src='.$this->getSkinUrl('images/carrinho-vazio.png').' /><br />Vazio</a>', $this->getUrl('checkout/cart')) ?>
        <?php elseif ($_cartQty == 1): ?>
            <?php echo $this->__('<a href="%s" id="ico-cart"><img src='.$this->getSkinUrl('images/carrinho-cheio.png').' /><br />1 item</a>', $this->getUrl('checkout/cart')) ?>
        <?php else: ?>
        <?php echo $this->__('<a href="%s" id="ico-cart"><img src='.$this->getSkinUrl('images/carrinho-cheio.png').' /><br />%s itens</a>', $this->getUrl('checkout/cart'), $_cartQty) ?>
        <?php endif ?>


Substituindo carrinho-vazio.png e carrinho-cheio.png pelos ícones salvos anteriormente.

3º Passo - Adicionar a chamada do bloco no header do page.xml:
Abra o arquivo page.xml (app->design->frontend->default->SeuTema->layout) e procure o seguinte trecho:

            <block type="page/html_header" name="header" as="header">

Logo abaixo dele, insira o seguinte código:

            <block type="checkout/cart_sidebar" name="headerCart" as="headerCart" template="checkout/cart/header.cart.phtml"/>

4º Passo - Chamar o bloco no header do template:
Abra o arquivo header.phtml (app->design->frontend->default->SeuTema->template->page->html) e procure o seguinte:

         <?php echo $this->getChildHtml('topLinks') ?>

Logo acima, insira o seguinte código:

        <?php echo $this->getChildHtml('headerCart') ?>

5º Passo - Editar o css para que  carrinho fique alinhado:
No arquivo styles.css (skin->frontend->default->SeuTema->css) insira o seguinte, logo no ínício:

a#ico-cart { float:right; text-align:center; color:#ebbc58;   }

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 - Comentar a chamada do top-link "Meu Carrinho":
No arquivo checkout.xml (app->design->frontend->default->SeuTema->layout) procure o seguinte termo:

        <reference name="top.links">
            <block type="checkout/links" name="checkout_cart_link">
                <action method="addCartLink"></action>
                <action method="addCheckoutLink"></action>
            </block>
        </reference>


Comente a tag action method="addCartLink", deixando o código assim:

        <reference name="top.links">
            <block type="checkout/links" name="checkout_cart_link">
                <!--<action method="addCartLink"></action>-->
                <action method="addCheckoutLink"></action>
            </block>
        </reference>


O resultado será o seguinte:



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

Então é isso! Fique à vontade para dar sugestões, tirar dúvidas ou corrigir algo, deixando um comentário!
=)

24 comentários:

  1. Boa tarde. eu segui seu tutorial porém o alinhamento não ficou como no exemplo.
    www.alrcartucharia.com.br.
    Tem como alterar para que fique centralizado a imagem do carrinho com os links ?

    ResponderExcluir
    Respostas
    1. Respondido no fórum da Comunidade Magento:
      http://www.comunidademagento.com.br/forum-magento-brasil/25-design--templates--xhtml--css--webstandards--tableless/16698-alinhar-links-com-a-imagem-do-carrinho-no-header

      Excluir
    2. Este link esta fora do ar... teria algum outro? esta acontecendo a mesma coisa comigo, o carrinho aparece la em toplinks, quando ele precisava aparecer abaixo entre o toplinks e o topmenu? obrigado.

      Excluir
    3. Olá Roy!
      O alinhamento depende do seu tema. Para que eu possa te ajudar melhor, você poderia postar a sua dúvida no Fórum da Comunidade Magento?

      Excluir
  2. Olá como faço pra abrir o arquivo xml, baixei o dreamweaver mas quando vou no botão direito abrir aquivo local ele abre no navegador o que tenho que fazer?

    ResponderExcluir
    Respostas
    1. Olá! Faça o download do arquivo xml para seu computador. Clique com o botão direito nele, procure a opção 'Abrir com' e selecione(ou busque) o programa que você vai utilizar para editar o arquivo. Aconselho utilizar um editor de texto! Em seguida, faça o download do arquivo alterado para o seu servidor, colocando no local certo. =)

      Excluir
  3. Boa Tarde segui corretamente mais não apareceu o carrinho !!!
    www.dpacar.com.br

    ResponderExcluir
    Respostas
    1. Olá Bruno!
      Você desfez as alterações?
      Tem certeza que tinha seguido todas as orientações igual ao tutorial?
      Os arquivos alterados e o arquivo criado estavam dentro do seu tema?

      Excluir
    2. Deu Certo !! só que ele esta bem no topo
      como faz para alinhar com o template?

      Excluir
    3. No header.phtml (4º Passo), tenta inserir o código depois do responsável pelos top links e não antes.

      Excluir
  4. Não deu certo !!! mexi também no CSS só que quando o carrinho abaixa o template desce também
    Tem alguma ideia do que seja ?
    obrigado pela atenção

    ResponderExcluir
    Respostas
    1. Pelo que parece, seu tema constrói o header diferente do tema default. Fica difícil saber exatamente no que mexer sem ter acesso aos arquivos.
      =(

      Excluir
  5. ola, aparece o item no carrinho mas ao clicar nele fica a pagina em branco onde deveria aparecer os dados da compra, o q poderia ser?

    ResponderExcluir
    Respostas
    1. Olá Val!
      Poderia passar o link da sua loja para eu verificar?

      Excluir
    2. Boa noite.

      Porque no meu caso ficaram 2 carrinhos?

      http://ellosartes.com.br/

      ATT,
      Rafa

      Excluir
    3. Olá Rafaello!
      Não consegui visualizar o seu problema, mas se você seguir todos os passos corretamente, apenas um carrinho irá aparecer.

      =)

      Excluir
  6. Ficou otimo, parabéns pelo tutorial!

    ResponderExcluir
  7. Olá!
    Segui cuidadosamente todos os passo e funcionou perfeitamente. Muito obrigado.
    Agora, eu gostaria de saber se é possível fazer algo parecido também com os demais links do top links. Colocar um ícone em cada link...
    Estou tentando de diversas maneiras aqui mas, por falta de conhecimento, não estou conseguindo.
    Desde já, muito obrigado.

    ResponderExcluir
    Respostas
    1. Olá Thiago!
      Fico feliz em saber que o tutorial tenha te ajudado! =D

      Muito interessante a sua questão! Para colocar ícones em cada top link, acho mais fácil inserir a imagem direto no xml, já que ela seria estática. Você também pode criar uma classe para cada top link e inserir a imagem no css.
      Aqui estão alguns links que poderão te ajudar nessa tarefa:
      http://www.magefront.com.br/atributos-personalizados-nos-top-links-utilizando-xml/
      http://mariosam.com.br/magento/editar-toplinks/

      Vou fazer um teste também e, qualquer coisa, comento aqui!

      Excluir
  8. Olá!
    Estou passando para agradecer, novamente, as dicas.
    Enfim, ainda não consegui o que queria. Estou quase lá, mas ainda não fiquei satisfeito.
    O que eu quero, é colocar um ícone acima de cada link, como fica o exemplo do carrinho que você fez.
    Pelo CSS, eu até conseguir colocar o ícone, porém, ele ficou funcionando apenas como imagem (não é "clicável"). E para fazê-lo funcionar como link pelo CSS, eu tive que colocar o ícone ao lado do link.
    Não que seja ruim. Mas o efeito visual não é o mesmo, e o ícone tem que ser bem pequeno.
    Colocando uma class para cada link pelo xml também deu o mesmo resultado. Funciona, mas deu na mesma.
    O meu grande problema mesmo, eu acho, é que não entendo patavinas de xml ainda. Mas eu ainda chego lá.
    Uma dica para quem estiver tentando a mesma coisa:
    Baixe um tema grátis que tenha os ícones nos links (ou qualquer outra coisa que você deseje) e estude os seus arquivos para entender como aquilo foi feito.
    Não seria mais fácil então eu já pegar esse tema pronto e usar?
    Sim, seria!
    Mas aí eu não aprenderia nada e ficaria dependendo eternamente de terceiros.
    Um abraço!

    ResponderExcluir
    Respostas
    1. Olá Thiago!
      Acho muito legal o seu conceito de que é melhor tentar fazer e aprender, do que depender dos outros.
      Nesse tutorial mesmo, eu fiquei procurando algo que pudesse me ajudar e acabei desistindo por um tempo. Na época, não entendia muita coisa sobre o Magento (e ainda falta muuuita coisa para eu aprender!), mas acabei voltando ao assunto por causa de um usuário que eu estava ajudando no fórum e, depois de muitos testes, consegui fazer o que eu queria!
      Uma dica é participar dos fóruns, seja ajudando os outros ou fazendo perguntas. Aprendi muito ajudando (ou tentando ajudar) as outras pessoas. Escrever no blog também me ajuda a guardar as coisas e buscar novos conhecimentos. Além disso, ler muito e testar os excelentes tutoriais que os desenvolvedores postam também me ensinou bastante.
      Se você quiser uma ajuda a mais nessa sua dúvida sobre os ícones nos top links, pode postar no fórum:
      http://magentodicas.com.br/
      Fica mais fácil para postar os códigos e os outros usuários poderão te ajudar também!

      :)

      Excluir
  9. Olá boa tarde! Eu consigo fazer isso com algum icone de cabide (esses de pendurar roupa)????

    ResponderExcluir