# Como adicionar o botão comprar na listagem dos produtos

Há duas formas de adicionar um produto ao carrinho, veja abaixo os detalhes de cada uma delas:

**Link para adicionar produto ao carrinho**

Uma forma simples de adicionar produtos ao carrinho através de um botão na listagem é utilizando o link para o carrinho, abaixo um exemplo:

```html
 <a href="{{ links.cart_add ~ product.id }}" alt="comprar"> Comprar</a>
```

Essa forma funcionará apenas para produtos que não possuam variação, caso o produto tenha variação, o link será direcionado para a pagina de produto, onde o cliente poderá seleciona-la.

Geralmente o produto na listagem é montado através do arquivo elements/snippets/product.html.

**API para Incluir Produto no Carrinho de Compra**

Utilizar essa forma, exige um pouco mais de conhecimento em desenvolvimento web, principalmente em javascript, pois é necessário saber manipular os dados retornados pela API de carrinho.

Inicialmente é necessário adicionar o botão para a exibição no layout, para isso, por exemplo, adicione o código abaixo ao arquivo elements/snippets/product.html&#x20;

```html
<button type="submit" data-app="product.buy-button" data-product ="{{ product.id }}" >    Comprar </button>
```

Após isso é necessário adicionar uma ação ao botão comprar, para isso devemos adicionar uma função javascript para enviar o produto ao carrinho, por exemplo:

```javascript
jQuery('[data-app="product.buy-button"]').on('click', function() {
  var $productId = jQuery(this).attr('data-product');
  var $dataSession = jQuery("html").attr("data-session");
  var self = this;
  jQuery.ajax({
    method: "POST",
    url: "/web_api/cart/",
    contentType: "application/json; charset=utf-8",
    data: '{"Cart":{"session_id":"'+$dataSession+'","product_id":"'+$productId+'","quantity":1}}'
  }).done(function( response, textStatus, jqXHR ) {
    jQuery(self).text("Adicionado!")
   var qtdCart = parseInt(jQuery("[data-cart=amount]").html());
   jQuery("[data-cart=amount]").html(qtdCart + 1);
  }).fail(function( jqXHR, status, errorThrown ){
    var response = jQuery.parseJSON( jqXHR.responseText );
    // Exibe a mensagem de erro (estoque insuficiente, etc)
    alert(response.causes[0])
  });
})
```

Lembrando que esses exemplos funcionam apenas para produtos que não possuam variação.

No primeiro exemplo, caso o produto tenha variação, o link será direcionado para a pagina de produto, onde o cliente poderá seleciona-la. No segundo exemplo será exibido um alerta informando que a variação precisa ser selecionada.

Caso o queira um exemplo mais completo, verificar o artigo [Adicionar ao carrinho sem sair da página](/themes/construindo-seu-template/referencias/componentes/adicionar-ao-carrinho-sem-sair-da-pagina.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/desenvolver/como-adicionar-o-botao-comprar-na-listagem-dos-produtos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.