Cart Drawer
Como adicionar e gerenciar o componente Cart Drawer na sua loja.
O Cart Drawer é o componente da VNDA que permite a visualização do carrinho de compras na lateral das lojas. A partir deste recurso, os clientes podem visualizar os detalhes de suas compras sem precisar entrar no checkout. Dentre as funcionalidades do carrinho, é possível habilitar a opção de frete grátis, amostras grátis, produtos sugeridos, entre outros. Neste artigo, você encontrará as informações necessárias para implementar o Cart Drawer em sua loja e quais funcionalidades podem ser ativadas.
Demonstração do componenteVisualize como é o componente acessando o Cart Drawer Demo. Recomendamos utilizar a versão mais atualizada do componente: (
v33
).
Implementação
O Cart Drawer, como todos os outros componentes, já vem implementado nos templates da VNDA. Caso você precise fazer esta implementação manualmente, deve-se primeiro criar um arquivo _cart_drawer.liquid
no diretório liquids > partials > common
. Este arquivo deve ser chamado no layout.liquid
junto com o restante dos elementos do site. Deve-se adicionar o seguinte conteúdo ao arquivo _cart_drawer.liquid
para carregar o conteúdo do componente.
Saiba mais sobre a organização dos arquivos citado em assets > sass.
{% assign suggested_name = 'Compre também:' %}
{% assign suggested_tags = '' %}
{% load_banners position: 'sugestoes-carrinho' %}
{% for banner in loaded_banners %}
{% if banner.subtitle != blank %}
{% assign suggested_name = banner.subtitle %}
{% endif %}
{% if banner.description != blank %}
{% assign suggested_tags = banner.description | strip_html | strip_newlines | strip %}
{% endif %}
{% endfor %}
<div id="component-cart-drawer-root"></div>
{% assign component_version = '33' %}
{% if current_shop.settings contains 'component_version_cart_drawer' %}
{% assign settings_version = current_shop.settings.component_version_cart_drawer %}
{% if settings_version != blank %}
{% assign component_version = settings_version %}
{% endif %}
{% endif %}
<script>
window.cartDrawerSettings = {
script: "{{ 'cart-drawer.v[version].js' | replace: '[version]', component_version | component_path }}",
styles: "{{ 'cart-drawer.v[version].css' | replace: '[version]', component_version | component_path }}",
showFreeShippingBar: true,
showCashBackBar: true,
suggestedTags: '{{ suggested_tags }}',
titleSuggested: '{{ suggested_name }}',
instance: false
}
</script>
Os templates contam com os arquivos cartDrawer.js
(assets > javascripts > common
) e _cart_drawer.scss
(assets > sass > common
). O arquivo scss é responsável por adaptar a unidade de medidas "rem" às configurações do projeto, além de adaptar o componente ao estilo da loja.
Já o arquivo cartDrawer.js
é responsável por iniciar o componente, atribuir valores aos parâmetros e manipular os seus métodos. Dentro da função setCartDrawer
o componente é instanciado e são atribuídos os valores ao seus atributos, conforme o exemplo abaixo.
const componentCartDrawer = new Vnda.Component.CartDrawer({
anchor: 'right',
display: 'list',
startOpen: false,
titleCart: 'Carrinho de compras',
titleSuggested: window.cartDrawerSettings.titleSuggested,
suggestedProductsTags: suggestedTags,
disableShippingCalculation: true,
showFreeShippingBar: settings.showFreeShippingBar,
showCashBackBar: settings.showCashBackBar,
});
Já as outras funções do arquivo cartDrawer.js
são responsáveis por lidar com o carregamento do componente e associar os seus métodos a eventos disparados pelo frontend da loja. No exemplo a seguir, a função show
utiliza o método open
para abrir o componente:
show: function (callback) {
const { root } = CartDrawer;
// No mobile, fecha o menu primeiro
if (window.mmenu) window.mmenu.close()
// Instancia o componente, caso ainda não exista
if (!CartDrawer.settings.instance) CartDrawer.loadComponent();
// Observa criação da instância inicial, caso não tenha
if (CartDrawer.settings.instance === false) {
root.addEventListener('vnda:cart-drawer-loaded', () => {
CartDrawer.settings.instance.open()
if (typeof callback === 'function') callback()
})
} else {
// Já possui cart drawer instanciado, retorna abertura
CartDrawer.settings.instance.open();
if (typeof callback === 'function') callback()
}
},
Parâmetros do Cart Drawer
Os parâmetros são responsáveis por configurar o componente e definir quais funcionalidades serão utilizadas. A tabela abaixo lista os parâmetros disponíveis, define as suas aplicações e apresenta o valores aceitos por cada um deles. Note que os parâmetros que possuem valores padrões estão sinalizados na coluna Default, e as opções de entrada que o parâmetro pode receber estão apresentados na coluna Tipos/Opções de entrada.
Parâmetro | Descrição | Tipos/Opções de entrada | Default | Obrigatório |
---|---|---|---|---|
| Determina como o Cart Drawer é exibido na tela. |
|
| Não |
| Determina em que posição o Cart Drawer fica na tela. |
|
| Não |
| Determina se ao acessar a loja, o Cart Drawer já é carregado. |
|
| Não |
| Desabilita o cálculo de frete no Cart Drawer. |
|
| Não |
| Habilita a exibição de amostras grátis no Cart Drawer . |
|
| Não |
| Habilita a exibição da barra de carregamento para frete grátis (valor restante para conseguir a gratuidade). |
|
| Não |
| Habilita a exibição da barra de cashback. |
|
| Não |
| Habilita a seção de Sugestão de produtos. Ao habilitar, você deve informar quais de produtos você quer vincular à essa seção. Máximo de seis tags e seis produtos por tag. | Do tipo array de | [] | Não |
| Define a label (título) da seção de amostras grátis. | Do tipo |
| Não |
| Limita a quantidade de caracteres que os nomes das amostras grátis podem ter. | Do tipo | Não | |
| Habilita a visualização de amostras grátis no Cart Drawer. |
|
| Não |
| Habilita a visualização de amostras grátis no carrinho. |
|
| Não |
| Habilita os botões de incremento de quantidade |
|
| Não |
| Determina a posição da lista de amostra grátis no Cart Drawer. |
|
| Não |
| Define a label (nome) do título do carrinho. | Do tipo |
| Não |
| Define a label (título) do carrossel de produtos sugeridos. | Do tipo |
| Não |
| Determina o tamanho (percentual) que um produto ocupa dentro do carrossel de produtos sugeridos no Cart Drawer. | Preencha com um número natural. |
| Não |
| Determina a forma que de um produto sugerido são apresentadas: nome da variante ( Como preencher planilha de produtos . |
|
| Não |
| Define se a seção de cálculo de frete deve iniciar aberta ou não. |
|
| Não |
| Define nome da personalização que será inclusa em produtos personalizados ao adicionar | Do tipo | Não | |
| Define valor da personalização que será inclusa em produtos personalizados ao adicionar | Do tipo | Não | |
| Define preço da personalização que será exibido em produtos personalizados | Do tipo |
| Não |
| Define se produtos personalizados vão ou não redirecionar para página interna ao clicar |
|
| Não |
| Define quantidade que será aplicada em produtos personalizados ao adicionar | Do tipo |
| Não |
| Define margem entre slides do carrossel de sugeridos | Do tipo |
| Não |
| Define quantidade de slides por vez do carrossel de sugeridos | Do tipo |
| Não |
| Determina se o campo de cupom deve iniciar aberto. |
|
| Não |
| Determina para qual URL o link de "Continuar comprando" redireciona. Se não for passado, o elemento será um botão que vai apenas fechar o carrinho. |
|
| Não |
Métodos do Cart Drawer
O Cart Drawer possui três métodos responsáveis pelo controle de abertura e fechamento do componente durante a navegação. Esses métodos podem ser associados a eventos disparados pelo frontend, como a adição de um produto às compras e o click no botão do carrinho.
open()
: abre o Cart Drawer,close()
: fecha o Cart Drawer,toggle()
: abre o Cart Drawer se ele estiver fechado e o fecha caso ele esteja aberto.
Exemplo no BasicTemplate
O código seguir contém o componente Cart Drawer.
import { addAsset } from '../components/utilities';
const CartDrawer = {
root: document.querySelector('#component-cart-drawer-root'),
buttons: document.querySelectorAll('[data-toggle-cart]'),
countWrapper: document.querySelector('[data-cart-count]'),
settings: window.cartDrawerSettings || false,
setCartDrawer: function () {
const { settings, root } = CartDrawer;
if (!root || !settings) return;
let suggestedTags = [];
if (settings.suggestedTags) {
suggestedTags = settings.suggestedTags.split(",").map(tag => tag.trim())
}
// Inicia o componente
const componentCartDrawer = new Vnda.Component.CartDrawer({
anchor: 'right',
display: 'list',
startOpen: false,
titleCart: 'Carrinho de compras',
titleSuggested: window.cartDrawerSettings.titleSuggested,
suggestedProductsTags: suggestedTags,
disableShippingCalculation: true,
showFreeShippingBar: settings.showFreeShippingBar,
showCashBackBar: settings.showCashBackBar,
});
// Renderiza o componente
componentCartDrawer.render(root);
// Salva instância para acesso global
window.cartDrawerSettings.instance = componentCartDrawer;
CartDrawer.settings = window.cartDrawerSettings;
// dispara evento de carregamento, escutado por CartDrawer.show()
root.dispatchEvent(new Event('vnda:cart-drawer-loaded'));
},
loadComponent: function () {
const { settings } = CartDrawer;
addAsset(settings.script, CartDrawer.setCartDrawer);
addAsset(settings.styles);
},
handleCartButton: function (button) {
// Evita múltiplos cliques caso o carrinho precisa ser instanciado primeiro
if (button.classList.contains('-loading')) {
return;
}
// Abre o cart drawer
button.classList.add('-loading');
CartDrawer.show(() => {
button.classList.remove('-loading');
});
},
show: function (callback) {
const { root } = CartDrawer;
// No mobile, fecha o menu primeiro
if (window.mmenu) window.mmenu.close();
// Instancia o componente, caso ainda não exista
if (!CartDrawer.settings.instance) CartDrawer.loadComponent();
// Observa criação da instância inicial, caso não tenha
if (CartDrawer.settings.instance === false) {
root.addEventListener('vnda:cart-drawer-loaded', () => {
CartDrawer.settings.instance.open();
if (typeof callback === 'function') callback();
});
} else {
// Já possui cart drawer instanciado, retorna abertura
CartDrawer.settings.instance.open();
if (typeof callback === 'function') callback();
}
},
getCartItens: async function () {
try {
const response = await fetch('/carrinho/itens');
const itens = await response.json();
return itens;
} catch (error) {
console.error('Erro ao buscar a quantidade de produtos do carrinho');
console.error(error);
return 0;
}
},
updateCartCount: async function (_itemsCount = null) {
let items = _itemsCount;
if (_itemsCount == null) items = await CartDrawer.getCartItens();
this.countWrapper.innerHTML = items;
},
init: function () {
const _this = this;
const { buttons } = _this;
// Atualiza o contador de itens do carrinho
_this.updateCartCount();
if (buttons.length > 0)
buttons.forEach((button) => {
button.addEventListener('click', () => {
_this.handleCartButton(button);
});
});
},
};
export default CartDrawer;
Frete Grátis
A partir da versão 27, a faixa de frete grátis é exibida dinamicamente, sem a necessidade de cadastrar um banner. Para que a faixa seja exibida, o único requisito é o cadastro de uma promoção no carrinho, com 100% de desconto no frete. Para mais detalhes sobre o cadastro, ver a documentação Frete Grátis.
Cashback
A partir da versão 32, a faixa de cashback é exibida dinamicamente, sem a necessidade de cadastrar um banner. Para que a faixa seja exibida, o único requisito é ativar a função de bônus no painel da loja. Para mais detalhes sobre o cadastro, ver a documentação Cashback.
Eventos
A partir da versão 26, o cart_drawer dispara eventos toda vez que: o carrinho for aberto, o carrinho for fechado, produto for adicionado, produto for excluído, quantidade de algum produto for alterada, cupom for adicionado, cupom for removido e frete for calculado. O trecho abaixo indica os eventos:
window.addEventListener('vnda:cart-drawer-added-item', (event) => {
console.log('Adicionado ->', event.detail);
});
window.addEventListener('vnda:cart-drawer-deleted-item', (event) => {
console.log('Removido ->', event.detail);
});
window.addEventListener('vnda:cart-drawer-updated-item', (event) => {
console.log('Atualizado ->', event.detail);
});
window.addEventListener('vnda:cart-drawer-opened', (event) => {
console.log('Carrinho aberto');
});
window.addEventListener('vnda:cart-drawer-closed', (event) => {
console.log('Carrinho fechado');
});
window.addEventListener('vnda:cart-drawer-coupon-added', (event) => {
console.log('Cupom adicionado ->', event.detail);
});
window.addEventListener('vnda:cart-drawer-coupon-removed', (event) => {
console.log('Cupom removido ->', event.detail);
});
window.addEventListener('vnda:cart-drawer-shipping-calculate', (event) => {
console.log('Frete calculado ->', event.detail);
});
Exemplo de implementação
Confira como o Cart Drawer é usado no nosso Template1 acessando os arquivos:
Updated 8 days ago