Adicionar imagem do carrinho dinâmico

magento-imagem-carrinho-dinamico-01

Vou ensinar neste tutorial como adicionar uma imagem dinâmica que será alterada dependendo da quantidade de produtos no carrinho.

O tutorial foi feito no tema base e para funcionar em seu tema faça as devidas alterações no seu tema.

Primeiro vamos criar o arquivo cartdinamico.phtml:

/app/design/frontend/base/default/template/checkout/cart/

<?php $_cartQty = $this&minus;>getSummaryCount() ?>
<?php if ($_cartQty == 0): ?>
<?php echo $this&minus;>__('<a href="%s" id="ico&minus;cart"><img src='.$this&minus;>getSkinUrl('images/empty&minus;cart.png').' />Empty</a>', $this&minus;>getUrl('checkout/cart')) ?>
<?php elseif ($_cartQty == 1): ?>
<?php echo $this&minus;>__('<a href="%s" id="ico&minus;cart"><img src='.$this&minus;>getSkinUrl('images/full&minus;cart.png').' />1 item</a>', $this&minus;>getUrl('checkout/cart')) ?>
<?php else: ?>
<?php echo $this&minus;>__('<a href="%s" id="ico&minus;cart"><img src='.$this&minus;>getSkinUrl('images/full&minus;cart.png').' />%s items</a>', $this&minus;>getUrl('checkout/cart'), $_cartQty) ?>
<?php endif ?>

Agora abra o arquivo:

/app/design/frontend/base/default/template/page/html/header.phtml

Procure por:

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

Antes do código, adicione:

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

Agora abra este aquivo:

/app/design/frontend/base/default/layout/page.xml

Procure por:

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

Logo após o código, adicione:

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

Agora abra o arquivo /app/design/frontend/base/default/layout/checkout.xml e procure por:

<action method="addCartLink"></action>

Comente esta linha, ficando assim:

<!--<action method="addCartLink"></action>-->

Estamos quase lá, precisamos alterar o CSS também, primeiro vamos alterar o arquivo:

/skin/frontend/default/default/css/style.css

Adicione logo ao começo o seguinte código:

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

Ainda no mesmo arquivo procure por:

.header .links { float:right; margin:0 0 6px; }

Altere para:

.header .links { float:right; margin-top:20px; margin-right:20px; }

Por último envie os arquivos abaixo para: /skin/frontend/base/default/images/

magento-imagem-carrinho-dinamico-03

magento-imagem-carrinho-dinamico-02

Ao finalizar, ficará assim:

magento-imagem-carrinho-dinamico-04

magento-imagem-carrinho-dinamico-05

magento-imagem-carrinho-dinamico-06

2017-01-24T20:25:11+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x