Magento

Personalizar input quantidade com select e jquery

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.

Veja aqui o exemplo

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, clique aqui e 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.

<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.

Veja aqui o exemplo

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    5 respostas para Personalizar input quantidade com select e jquery

    1. Carlos escreveu em 9 de março de 2015

      bacana esse tutorial!

    2. Qcabeca escreveu em 16 de março de 2015

      Obrigado Carlos, sucesso ae. Abrs

    3. escreveu em 22 de outubro de 2015

      Não funfa no MAGANENTO 1.9

    4. escreveu em 22 de outubro de 2015

      funciona sim, é so editar o js, muito obrigado :)

    5. Qcabeca escreveu em 22 de outubro de 2015

      Que bom que deu certo Zé. Sucesso. Abs

    Envie seu comentário.

    Seu email não será publicado