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.
{#
# 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 %}
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.
{% 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|convert_encoding('UTF-8', 'ISO-8859-1'), "option2": variant.Sku[1].value|convert_encoding('UTF-8', 'ISO-8859-1') }]) %}
{% 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|convert_encoding('UTF-8', 'ISO-8859-1') }]) %}
{% 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 %}
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.
Last updated
Was this helpful?