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.