Mudar o ícone do seu carrinho de compras para ilustrar quando existem (ou não) itens no seu carrinho é um elemento visual bem interessante para manter seu leiaute atrativo e dinâmico.
Eu desenvolvi duas maneiras de inserir essa funcionalidade no seu template, ambas são simples, então cabe a você decidir qual solução é a mais indicada para o seu projeto. Vamos começar?
Os ícones
Vamos iniciar pelo básico, ou seja, escolha duas imagens que irão compor o visual do seu carrinho de compras (carrinho cheio / carrinho vazio). Eu fiz uma busca pelo google imagens e escolhi as seguintes imagens:
Estas imagens devem ser armazenadas no diretório:
skin > frontend > default > default > images
Ou altere o diretório default/default para o seu template/tema customizado.
O estilo do CSS
O que precisamos fazer agora é carregar essas imagens na exibição do seu leiaute. E o melhor local para aplicar este código é no CSS do seu tema. Então abra o arquivo styles.css (ou equivalente):
skin > frontend > default > default > css > styles.css
Se estiver usando outro tema, obviamente precisa alterar os diretório default/default pelo seu template/tema customizado.
E vamos inserir o seguinte código:
.header .quick-access .top-link-cart { padding-left: 50px; padding-bottom: 50px; background: url(../images/cart-empty.png) no-repeat; }
.header .quick-access .top-link-cart-full { padding-left: 50px; padding-bottom: 50px; background: url(../images/cart-full.png) no-repeat; }
Lembrando que este é um código exemplo, se você é expert em CSS fique a vontade para editar o código acima.
A idéia então é ter dois elementos: “top-link-cart” que possui o ícone “cart-empty.png” e o “top-link-cart-full” com o ícone “cart-full.png“.
Detalhe importante! O class “top-link-cart” é elemento padrão na construção de links do toplinks do Magento. Se você estiver usando um tema muito alterado, esse elemento pode não existir no seu código, sendo necessário uma adaptação de nomes.
Solução 1 – PHP
Por se tratar de um link dinâmico, que apresenta a quantidade de itens armazenados no carrinho, esse controle é feito no Block do template. Infelizmente a equipe de desenvolvimento do Magento optou por inserir junto com o link um elemento class estático, fixo no código.
Então o que faremos aqui é dar continuidade aos trabalhos iniciados pela equipe de desenvolvimento, e fazer o que já deveria ter sido feito por eles. Para isso abra o arquivo Links.php que fica em:
app > code > core > Mage > Checkout > Block > Links.php
Antes de editar esse arquivo faça uma cópia dele para o diretório “local“.
Dentro deste arquivo você vai encontrar a função addCartLink. Olhando o código fica fácil perceber que o link (com o estilo css) é criado na linha:
$parentBlock->addLink($text, 'checkout/cart', $text, true, array(), 50, null, 'class="top-link-cart"');
Vamos reescrever esse pequeno trecho de código inserindo um novo elemento class quando o texto do link for alterado, ficando assim:
$parentBlock->removeLinkByUrl($this->getUrl('checkout/cart'));
if ($count == 1) {
$text = $this->__('My Cart (%s item)', $count);
$parentBlock->addLink($text, 'checkout/cart', $text, true, array(), 50, null, 'class="top-link-cart-full"');
} elseif ($count > 0) {
$text = $this->__('My Cart (%s items)', $count);
$parentBlock->addLink($text, 'checkout/cart', $text, true, array(), 50, null, 'class="top-link-cart-full"');
} else {
$text = $this->__('My Cart');
$parentBlock->addLink($text, 'checkout/cart', $text, true, array(), 50, null, 'class="top-link-cart"');
}
//$parentBlock->removeLinkByUrl($this->getUrl('checkout/cart'));
//$parentBlock->addLink($text, 'checkout/cart', $text, true, array(), 50, null, 'class="top-link-cart"');
O que fizemos foi re-organizar as duas últimas linhas do código para poder alterar o elemento class sempre que o carrinho possuir mais de um item armazenado. Obviamente existem outras formas de alterar o código para chegar ao mesmo resultado, me preocupei em manter o código simples para que todos entendam.
Solução 2 – Javascript
Essa solução é uma alternativa, caso você não queira sobreescrever classes no Magento e nem alterar PHP. Vamos apenas fazer um controle via javascript para verificar qual elemento class deve ser usado no link.
Para isso abra o arquivo links.phtml que fica em:
app > design > frontend > base > default > template > page > template > links.phtml
Faça uma cópia deste arquivo para default/default, ou então para o seu template/tema customizado.
Agora basta adicionar o seguinte javascript ao final do arquivo:
//<![CDATA[
document.observe("dom:loaded", function() {
$$(".top-link-cart").each( function(el) {
if ( el.title != '__('My Cart'); ?>' ) {
el.addClassName('top-link-cart-full');
}
});
});
//]]>
O que estamos fazendo aqui é verificar qual o texto inserindo no link, pois é um texto dinâmico que muda conforme a quantidade de itens adicionados ao carrinho. Então se o texto for diferente do padrão (vazio) nós inserimos o nosso novo elemento “top-link-cart-full” que possui o ícone compatível com a mensagem.
Lembre-se de atualizar o cache do sistema e do seu navegador para ver as alterações do seu tema.
Outras referências
E essa foi a maneira Mario SAM de customizar elementos do leiaute. Talvez não seja a melhor solução para o seu projeto, mas é diferente e expande seu leque de opções.
Você encontra outras formas de inserir ícones dinâmicos no link do carrinho em:
Inserir ícone dinâmico do carrinho de compras no topo da loja – Referência Magento
Adicionar imagem do carrinho dinâmico – MagentoBR
Dúvidas!? Usem o fórum da Escola Magento.
Sucesso!