Há duas formas de adicionar um produto ao carrinho, a baixo detalhe 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, podesse por exemplo adicionar 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])
            });
          })

Bruna Lourencini

22 de junho de 2020 19:40