Botão Comprar Utilizando Api

O seguinte artigo tem por objetivo mostrar a utilização da api de carrinho para adição do produto.

Snippet para o botão de Comprar

HTML


  {#
   # Snippets com botão de Comprar
   # elements/snippets/addCart.html
   #}

  {% if product.available %}
    {% if product.stock > 0 %}
      <div class="addcart" id="variants">
        {% if product.has_variation %}
          <a href="{{ product.link }}"><input type="button" class="addCart" value="Comprar"/></a>
        {% else %}
          <input type="button" class="addCart" value="Comprar" onclick="addCart({{ product.id }})" />
        {% endif %}
      </div>
    {% else %}
      <span> Produto não Disponivel</span>
    {% endif %}
  {% else %}
    <span> Produto não Disponivel</span>
  {% endif %}

    

Javascript



  function addCart(dataProductId){
      var dataSession = $("html").attr("data-session");
    $.ajax({
      method: "POST",
      url: "/web_api/cart/",
      contentType: "application/json; charset=utf-8",
      data: '{"Cart":{"session_id":"'+dataSession+'","product_id":"'+dataProductId+'","quantity":"1"}}'
    }).done(function( response, textStatus, jqXHR ) {
      console.log(response);
      var qtdCart = parseInt($("span[data-cart=amount]").html());
      $("span[data-cart=amount]").html(qtdCart + 1);
    }).fail(function( jqXHR, status, errorThrown ){
      var response = $.parseJSON( jqXHR.responseText );
      console.log(response);
    });
  }

Exemplo

Como usar

Copie o código HTML e crie um arquivo separado, ex: elements/snippets/addCart.html

Insira o bloco de código Javascript em seu arquivo JS

Faça a chamada desse arquivo onde desejar:

   {% element 'snippets/addCart' {"product": product} %}