Cart Drawer

{% 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,
    showBundleItemsDetails: true,
    showBundleItemsShortName: true,
    suggestedTags: '{{ suggested_tags }}',
    titleSuggested: '{{ suggested_name }}',
    instance: false
  }
</script>

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,
  showBundleItemsDetails: settings.showBundleItemsDetails,
  showBundleItemsShortName: settings.showBundleItemsShortName
});

  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()
    }
  },

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;

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);
});