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