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 componente

Visualize 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

display

Determina como o Cart Drawer é exibido na tela.

grid ou list

gird

Não

anchor

Determina em que posição o Cart Drawer fica na tela.

leftou right

right

Não

startOpen

Determina se ao acessar a loja, o Cart Drawer já é carregado.

true ou false

false

Não

disableShippingCalculation

Desabilita o cálculo de frete no Cart Drawer.

true ou false

false

Não

enableSamples

Habilita a exibição de amostras grátis no Cart Drawer .

true ou false

false

Não

showFreeShippingBar

Habilita a exibição da barra de carregamento para frete grátis (valor restante para conseguir a gratuidade).

true ou false

false

Não

showCashBackBar

Habilita a exibição da barra de cashback.

true ou false

false

Não

suggestedProductsTags

Habilita a seção de Sugestão de produtos. Ao habilitar, você deve informar quais

categorias (tags)

de produtos você quer vincular à essa seção. Máximo de seis tags e seis produtos por tag.

Do tipo array de string.

[]

Não

sampleSectionTitle

Define a label (título) da seção de amostras grátis.

Do tipo string

Escolha sua amostra

Não

sampleNameMaxLength

Limita a quantidade de caracteres que os nomes das amostras grátis podem ter.

Do tipo integer


Não

showSamplesAdded

Habilita a visualização de amostras grátis no Cart Drawer.

true ou false

false

Não

showSamplesAddedList

Habilita a visualização de amostras grátis no carrinho.

true ou false

false

Não

showSamplesQtd

Habilita os botões de incremento de quantidade - e + no Cart Drawer.

true ou false

false

Não

positionSamples

Determina a posição da lista de amostra grátis no Cart Drawer.

bottom ou top

bottom

Não

titleCart

Define a label (nome) do título do carrinho.

Do tipo string

Carrinho

Não

titleSuggested

Define a label (título) do carrossel de produtos sugeridos.

Do tipo string

Sugeridos

Não

widthItemSuggested

Determina o tamanho (percentual) que um produto ocupa dentro do carrossel de produtos sugeridos no Cart Drawer.

Preencha com um número natural.

25

Não

nameItemSuggested

Determina a forma que

variantes

de um produto sugerido são apresentadas: nome da variante (name) ou o nome das propriedades (properties). Saiba mais o que são nomes e propriedades de variante no artigo

Como preencher planilha de produtos

.

name ou properties

name

Não

shippingCalculationStartOpen

Define se a seção de cálculo de frete deve iniciar aberta ou não.

true OU false

false

Não

suggestedCustomizationName

Define nome da personalização que será inclusa em produtos personalizados ao adicionar

Do tipo string


Não

suggestedCustomizationValue

Define valor da personalização que será inclusa em produtos personalizados ao adicionar

Do tipo string


Não

suggestedCustomizationPrice

Define preço da personalização que será exibido em produtos personalizados

Do tipo float

0

Não

suggestedCustomizationRedirect

Define se produtos personalizados vão ou não redirecionar para página interna ao clicar

true ou false

false

Não

suggestedCustomizationAddQuantity

Define quantidade que será aplicada em produtos personalizados ao adicionar

Do tipo integer

1

Não

suggestedCarouselSpace

Define margem entre slides do carrossel de sugeridos

Do tipo integer

8

Não

suggestedCarouselSlides

Define quantidade de slides por vez do carrossel de sugeridos

Do tipo float

3.5

Não

couponInitialOpen

Determina se o campo de cupom deve iniciar aberto.

true ou false

false

Não

continueBuyingLink

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.

string

null

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: