Salve salve internautas, hoje mais um tutorial de Magento fácil e rápido pra vocês, vou ensinar como personalizar input quantidade com select e jQuery na página de produto.
Mas porque você usaria isso na sua loja? Acredito que num primeiro momento se bem planejado, pode ajudar na usabilidade da sua loja e também melhorar o layout do seu e-commerce, então chega de conversa e vamos ao que interessa.
Personalizar input quantidade com jQuery
Passo 1: Adicionando o jQuery
Caso você já esteja chamando o jQuery na sua loja, vá para o passo 2. Caso você ainda não tenha, faça aqui o Download, renomeie o arquivo para jquery.js e faça o upload para a seguinte pasta /js/scriptaculous.
Depois de feito o upload, chegou a hora de incluir o jQuery na loja, No XML do arquivo page.xml, que por padrão fica no caminho /app/design/frontend/nome-do-seu-tema/default/layout/page.xml, procure pela linha abaixo.
XML
<block type="page/html_head" name="head" as="head">
Adicione o código a seguir em qualquer parte, dentro do block head mostrado no parágrafo anterior.
XML
<action method="addJs"><script>scriptaculous/jquery.js</script></action>
Salve o arquivo page.xml e envie novamente para o servidor. É isso, passo 1 concluído.
Passo 2: Editando o arquivo addtocart
Bom, como você já viu no exemplo, pra editar a o input quantidade na página de produto do Magento, você vai precisar alterar o arquivo addtocart.phtml que por padrão fica em /app/design/frontend/nome-do-seu-tema/default/template/catalog/product/view/addtocart.phtml. Mais ou menos na linha 33 você vai visualizar o código abaixo.
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
O código acima corresponde ao input de quantidade (quantity) padrão do Magento, pra você estilizar o input de quantidade com jQuery, você também vai adicionar o HTML de um botão para decrementar -1 e um botão para incrementar +1. Substitua o código acima pelo mostrado a seguir.
<!-- BOTÃO PARA DECREMENTAR -1 -->
<span class="btn-menos">-</span>
<!-- INPUT PARA VISUALIZAR QUANtIDADE -->
<input type="text" name="qty" id="qty-jquery" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<!-- BOTÃO PARA INCREMENTAR +1 -->
<span class="btn-mais">+</span>
Chegou a hora de inserir o script para fazer os botões funcionarem, então borá pro proximo passo.
Passo 3: O script para personalizar input com jQuery
Ainda dentro do arquivo addtocart.phtml, depois da última linha, adicione o script a seguir.
<!-- BOTÃO PARA DECREMENTAR -1 -->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.add-to-box .add-to-cart .btn-menos').live('click', function(){ // verifica o clique no botão menos
if($j(this).siblings('#qty-jquery').val()>1){ // valor do input #qty-jquery
var tmp = $j(this).siblings('#qty-jquery').val(); // cria varável com o valor do input #qty-jquery
var novoValor = parseInt(tmp,10) - 1; // variavel que decrementa -1
$j(this).siblings('#qty-jquery').val(novoValor); // novo valor do #qty-jquery após o clique no .btn-menos
}
});
$j('.add-to-box .add-to-cart .btn-mais').live('click', function(){ // verifica o clique no botão mais
var tmp = $j(this).siblings('#qty-jquery').val(); // cria varável com o valor do input #qty-jquery
var novoValor = parseInt(tmp,10) + 1; // variavel que incrementa +1
$j(this).siblings('#qty-jquery').val(novoValor); // novo valor do #qty-jquery após o clique no .btn-mais
});
});
</script>
O código acima está todo comentado, então não tem muito o que explicar, mas basicamente ele verifica o clique tanto no botão menos quanto no botão mais para decrementar -1 ou incrementar +1 ao input #qty-jquery, simples né?
Passo 4: O CSS
Pra finalizar, vamos alterar o CSS, então baixe o arquivo /skin/frontend/nome-do-seu-tema/default/css/styles.csse adicione o CSS mostrado adiante.
CSS
.btn-mais, .btn-menos {
background: none repeat scroll 0 0 #000;
color: #fff;
cursor: pointer;
display: block;
float: left;
font-size: 19px;
height: 26px;
line-height: 26px;
width: 26px;
}
#qty {
float: left;
height: 20px;
text-align: center;
width: 23px !important;
}
Hey, você acaba de Personalizar input quantidade com jquery, e o que achou?
Personalizar input quantidade com select
Agora de bônus vou mostrar como editar o input de quantidade do Magento com um select, essa maneira é ainda mais fácil do que a anterior.
Passo 1: Editando o arquivo addtocart
Bom, nesse caso também será necessário alterar o arquivo addtocart.phtml que por padrão fica em /app/design/frontend/nome-do-seu-tema/default/template/catalog/product/view/addtocart.phtml. Mais ou menos na linha 33 você vai visualizar o código abaixo.
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
Substitua o HTML acima pelo código abaixo.
<select class="input-text qty" name="qty" id="qty">
<?php $i = 1 // contador inicia em 1?>
<?php do { ?>
<option value="<?php echo $i // imprime o valor do contador como 'value' ?>">
<?php echo $i // imprime o valor do contador como opção?>
<?php $i++ // incrementa 1 ao contador?>
</option>
<?php }
while ($i <= (int)Mage::getModel('cataloginventory/stock_item') // loop do estoque
->loadByProduct($_product)->getQty()) // carrega o estoque do produto
?>
</select>
O código acima está todo comentado, então não tem muito o que explicar, mas basicamente foi criado um dropdown (select) que vai fazer um loop, contar a quantidade de itens que o produto tem em estoque e montar as opções do select com o número de produtos em estoque, ou seja, se o produto tiver 10 unidades disponíveis, no dropdown você vai ter as opções de 1 a 10, simples né?
Agora salve o arquivo e envie novamente pro seu servidor e faça os testes, se tudo correu bem, você acabou de Personalizar input quantidade com select e jQuery no Magento.
