Cart Drawer

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: (v24).

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 diretorio 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 free_shipping_value = 00001 %}
    
    {% load_banners position: 'frete-gratis' %}
    {% for banner in loaded_banners %}
    {% if banner.title != blank %}
        {% assign free_shipping_value = banner.subtitle | plus: 0 %}
    {% endif %}
    {% endfor %}

    <div id="component-cart-drawer-root"></div>

    <script>
    window.cartDrawerSettings = {
        script: "{{ 'cart-drawer.v20.js' | component_path }}",
        styles: "{{ 'cart-drawer.v20.css' | component_path }}",
        freeShippingValue: {{ free_shipping_value }},
        instance: false
    }
    </script>

No codigo acima é importante notar que foi utilizado um banner na posição frete-grátis para fornecer os dados de frete grátis para o componente.

Além disso, os templates contam com os arquivos cardDrawer.js (assets > javascripts > common) e _cart_drawer.scss (assets > sass > common). O arquivo scss é resposá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 cardDrawer.js é resposável por iniciar o componente, atribuir valores aos parametros e manipular os seus metodos. Dentro da função setCartDrawer o componente é instanciado e são atribuidos 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',
    disableShippingCalculation: true,
    freeShipping
  });

Já as outras funções do arquivo cardDrawer.js são responsáveis por lidar com o carregamento do componente e associar os seus metodos a eventos disparados pelo frontend da loja. No exemplo a seguir, a função show utiliza o metodo 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âmentros 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 parametros disponiveis, 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.

Metodos do Cart Drawer

O Cart Drawer possui três metodos responsáveis pelo controle de abertura e fechamento do componente durante a navegação. Esses metodos 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 no BasicTemplate.

export function setCartDrawer() {
  window.addEventListener('load', () => {

    // Seleciona o elemento
    const root = document.querySelector('#component-cart-drawer-root');

    // Inicia o componente
    const componentCartDrawer = new Vnda.Component.CartDrawer({
      version: 'v16',
      display: 'list',
      startOpen: false,
      anchor: 'right',
      freeShipping: false,
      disableShippingCalculation: true,
    });

    // Renderiza o componente
    componentCartDrawer.render(root);

    // Adiciona o evento de abertura
    let open = document.querySelector('[data-toggle-cart]');
    if (open) open.addEventListener('click', componentCartDrawer.toggle);

    // Adiciona o componente ao escopo global
    window.componentCartDrawer = componentCartDrawer;

  });
}

Exemplo de implementação

Confira como o Cart Drawer é usado no nosso Template1 acessando os arquivos:

• _cart_drawer.liquid,
• cartDrawer.js,
• _cart_drawer.scss.