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]) }); })
Comentários