Botões Quantidade

Snippet para criar botões de + e - selecionando a quantidade do produto

Caso você utilize o helper productHelper.form() para exibir a quantidade e o botão de compra, basta substitui-lo.

HTML


{#
# Botões de mais e menos para aumentar ou diminuir a quantidade do produto
# elements/snippets/botoes_qty.html
#}
<div data-app="product.quantity" id="quantidade">
  <span id="span_erro_carrinho" class="blocoAlerta" style="display:none;">Selecione uma opção para variação do produto</span>
  <label>Quantidade:</label>      
  <input type="button" id="plus" value='-' onclick="process(-1)" />
  <input id="quant" name="quant" class="text" size="1" type="text" value="1" maxlength="5" />
  <input type="button" id="minus" value='+' onclick="process(1)">
</div>
<button type="submit">Comprar</button>

Javascript

  function process(quant){
    var value = parseInt(document.getElementById("quant").value);
    value+=quant;
    if(value < 1){
      document.getElementById("quant").value = 1;
    }else{
    document.getElementById("quant").value = value;
    }
  }

Exemplo

 

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/botoes_qty.html

Insira o bloco de código Javascript em seu arquivo de funções ou onde desejar

Em seu arquivo pages/product.html, faça a chamada desse arquivo onde desejar:

{% element('snippets/botoes_qty') %}