> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/botoes-quantidade.md).

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

{% tabs %}
{% tab title="HTML" %}

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

{% endtab %}

{% tab title="JavaScript" %}

```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;
    }
  }
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

Copie o código acima e crie um arquivo separado, ex: `elements/snippets/botoes_qty.html`\
\
**Em seu arquivo** `pages/product.html`, faça a chamada desse arquivo onde desejar:

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

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