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:

 <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

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

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