Adicionar ao carrinho sem sair da página

Snippet para adicionar o produto ao carrinho sem sair da página. O artigo tem por objetivo mostrar a utilização da API do carrinho para adição do produto.

Modelo 1 - Simples

Caso o produto possua variação, ao clicar em comprar é redirecionado para a página interna do produto.

HTML

{#
 # Snippets com botão de Comprar
 # elements/snippets/add-cart.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

Modelo 2 - Completo

Essas funções não suportam campos adicionais. Produtos com campos adicionais serão adicionados sem os devidos valores desses respectivos campos.

Também não é recomendado utilizar esse modelo quando o cliente tem a opção de B2B ativa na loja.

HTML

{% if product.available and (product.stock > 0 or settings.without_stock_sale) and not product.upon_request %}
    <div class="variants">

        {% set productVar = product.Variants|length ? product.Variants :  product.variants %}
        {% set listVariants = [] %}
        {% set listVariantsSecond = [] %}
        {% set variants = [] %}
        {% set variantName = '' %}
        {% set variantSecondName = '' %}

        {% for variant in productVar %}

            {% if loop.index == 1 %}

                {% if variant.Sku[1] %}
                    {% set variantSecondName = variant.Sku[1].type %}
                {% endif %}
                {% set variantName = variant.Sku[0].type %}

            {% endif %}

            {% set stock = variant.stock %}

            {% if variant.id|length == '0' %}

                {% set variants = '' %}

            {% elseif variant.Sku[1] %}

                {% set variants = variants|merge([{ "price": {"price": variant.price_offer != 0 ? variant.price_offer : variant.price, "payment": variant.payment_option }, "id": variant.id, "stock": stock, "option": variant.Sku[0].value, "option2": variant.Sku[1].value }]) %}

                {% set valueSecond = variant.Sku[1].value %}
                {% if not (valueSecond in listVariantsSecond) %}
                    {% set listVariantsSecond = listVariantsSecond|merge([valueSecond]) %}
                {% endif %}

            {% else %}

                {% set variants = variants|merge([{ "price": {"price": variant.price_offer != 0 ? variant.price_offer : variant.price, "payment": variant.payment_option }, "id": variant.id, "stock": stock, "option": variant.Sku[0].value }]) %}

            {% endif %}

            {% set value = variant.Sku[0].value %}
            {% if not (value in listVariants) %}
                {% set listVariants = listVariants|merge([value]) %}
            {% endif %}

        {% endfor %}

        <form class="list-variants" data-id="{{ product.id }}" data-variants='{{ variants ? variants|json_encode : "" }}' data-api-cart="1">

            {% if variantName %}
            <label>
                <span>{{ variantName }}</span>
                <select class="first" required>
                    <option value="" hidden>Selecione</option>
                    {% for value in listVariants %}
                        <option value="{{ value }}" data-price="{{ price }}">{{ value }}</option>
                    {% endfor %}
                </select>
            </label>
            {% endif %}

            {% if variantSecondName %}
            <label>
                <span>{{ variantSecondName }}</span>
                <select class="second" required>
                    <option value="" hidden>Selecione</option>
                    {% for value in listVariantsSecond %}
                        <option value="{{ value }}" data-price="{{ price }}">{{ value }}</option>
                    {% endfor %}
                </select>
            </label>
            {% endif %}

            <div class="flex add-cart">
                <input required type="number" value="1" class="hidden">
                <button class="action">Adicionar ao carrinho</button>
            </div>

        </form>

    </div>
{% endif %} 

Javascript

Como usar

Copie o código HTML e crie um arquivo separado, exemplo: elements/snippets/add-cart.html

Faça a chamada desse arquivo onde desejar:

{% element 'snippets/add-cart' {"product": product} %} 

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