Shopify Cart Drawer

component-cart-drawer.liquid

{% comment %} Globals {% endcomment %}
{%- liquid
  assign country_code = blank

  if request.host contains '.messyweekend.'
    assign country_code = request.host | split: '.' | first
  else
    assign country_code = request.host | split: '.' | last
  endif
-%}

<link
  rel="stylesheet"
  href="{{ 'cart-drawer-new.min.css' | asset_url }}"
  media="print"
  onload="this.media='all'"
>
<noscript>{{ 'cart-drawer-new.min.css' | asset_url | stylesheet_tag }}</noscript>

<div class="cart-drawer js-cart-drawer" data-component="cart-drawer">
  <div class="cart-drawer__wrapper">
    <div class="cart-drawer__header">
      <span class="cart-drawer__title">
        {{ settings.cart_title }}
        {% comment %} {{- 'cart-drawer.title' | t }} {% endcomment %}
        <span class="visually-hidden js-cart-drawer-count">({{ cart.item_count }})</span></span
      >
      <div class="cart-drawer__close js-cart-drawer-close">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>

    {% comment %}
      <div class="free-shipping">
        <p class="free-shipping__text">You're only $85 away from free shipping!</p>
        <div class="free-shipping-bar-outer">
          <div class="free-shipping__bar" style="--width: 0%"></div>
          <p class="free-shipping__amount">€85</p>
        </div>
      </div>
    {% endcomment %}

    {% comment %} Promotion {% endcomment %}
    {% if settings.cart_message != blank %}
      <div class="cart-drawer__promotion">{{ settings.cart_message }}</div>
    {% endif %}

    {% comment %} Cart drawer content {% endcomment %}
    <div class="cart-drawer__items js-cart-drawer-items"></div>

    {% comment %} Footer {% endcomment %}
    <div class="cart-drawer__footer">
      <div class="cart-drawer__summary js-cart-drawer-summary">
        <div class="cart-drawer__discount-code">{{ settings.cart_coupon_message }}</div>

        <div class="cart-drawer__summary-inner">
          <span class="cart-drawer__summary-label">{{ settings.cart_subtotal_text }}</span>
          <span class="cart-drawer__summary-value js-cart-drawer-subtotal"></span>
        </div>
        <div class="cart-drawer__summary-inner">
          <span class="cart-drawer__summary-label">{{ settings.cart_shipping_text }}</span>
          <span class="cart-drawer__summary-value">{{ settings.cart_shipping_price_text }}</span>
        </div>

        {% if country_code == 'dk' %}
          <label class="checkbox" onclick="handleCheckboxClick()">
            <input id="cart-consent" type="checkbox">
            <span class="checkmark"></span>
            <span>{{ settings.cart_consent | remove: '<p>' | remove: '</p>' }}</span>
          </label>

          <button
            id="checkout-button"
            class="button button-checkout"
            aria-label="{{ settings.cart_to_checkout_text }}"
            disabled
            onclick="handleCheckoutClick()"
          >
            {{ settings.cart_to_checkout_text }}
          </button>

          <script>
            document.addEventListener('DOMContentLoaded', function () {
              const checkbox = document.getElementById('cart-consent');
              const checkoutButton = document.getElementById('checkout-button');

              function updateCheckoutButton() {
                checkoutButton.disabled = !checkbox.checked;
              }

              checkbox.addEventListener('change', updateCheckoutButton);

              // Call the update function initially to set the correct disabled state
              updateCheckoutButton();
            });

            function handleCheckoutClick() {
              const checkoutButton = document.getElementById('checkout-button');
              if (!checkoutButton.disabled) {
                window.location.href = '/checkout'; // Redirect to the checkout URL
              }
            }
          </script>

        {% else %}
          <a
            href="/checkout"
            class="button button-checkout"
            aria-label="{{ settings.cart_to_checkout_text }}"
          >
            {{ settings.cart_to_checkout_text }}
          </a>
        {% endif %}

        {% comment %}
          https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-credit-card-icons#edit-the-code-for-your-payment-icons
          options:
          - afterpay - american_express - apple_pay - bitcoin - dankort - diners_club - discover - dogecoin - dwolla - facebook_pay - forbrugsforeningen - google_pay - ideal - jcb - klarna - klarna-pay-later - litecoin - maestro - master - paypal - shopify_pay - sofort - visa
        {% endcomment %}

        {% assign enabled_payment_types = shop.enabled_payment_types %}

        {% if country_code == 'dk' %}
          {% assign enabled_payment_types = 'visa,visaelectron,dankort,maestro,master,viabill,mobilepay,american_express,ideal,jcb,sofort,diners_club'
            | remove: ' '
            | split: ','
          %}
        {% endif %}
        {% comment %}
          {% for type in enabled_payment_types %}
            <div class="paymentOption">
              <img loading="lazy" src="{{ type | payment_type_img_url }}" />
            </div>
          {% endfor %}
        {% endcomment %}

        <ul class="list list-payment list-unstyled" role="list">
          {%- for type in enabled_payment_types -%}
            <li class="list-payment__item">
              {{ type | payment_type_svg_tag: class: 'icon' }}
            </li>
          {%- endfor -%}
        </ul>

        {% comment %}
          {%- if additional_checkout_buttons -%}
            <div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
              {{ content_for_additional_checkout_buttons }}
            </div>
          {%- endif -%}
        {% endcomment %}
      </div>

      {% comment %}
        <div class="cart-drawer__shop-now js-cart-drawer-shop-more">
          <a href="/collections/accesories" class="button button-white"> Googles </a>
          <a href="/collections/cycles" class="button button-black"> Sunglasses </a>
        </div>
      {% endcomment %}
    </div>
  </div>
</div>

{% comment %} Cart overlay {% endcomment %}
<div class="cart-drawer__backdrop js-cart-overlay"></div>

<script src="{{ 'cart-drawer.bundle.js' | asset_url }}" defer></script>

shopify-cart-drawer.js

import { formatMoney } from "@shopify/theme-currency/currency";

class CartDrawer {
  constructor(options) {
    const defaults = {
      cartDrawer: ".js-cart-drawer",
      cartDrawerContent: ".js-cart-drawer-items",
      cartDrawerSubTotal: ".js-cart-drawer-subtotal",
      cartDrawerFooter: ".js-cart-drawer-footer",
      cartDrawerSummary: ".js-cart-drawer-summary",
      cartDrawerShopMore: ".js-cart-drawer-shop-more",
      cartDrawerClose: ".js-cart-drawer-close",
      cartTrigger: ".js-cart-trigger",
      cartOverlay: ".js-cart-overlay",
      cartCount: ".js-cart-counter",
      cartDrawerCount: ".js-cart-drawer-count",
      addToCart: ".js-cart-add-to-cart",
      removeFromCart: ".js-cart-remove-item",
      itemQuantity: ".js-cart-quantity",
      itemQuantityPlus: ".js-cart-quantity-plus",
      itemQuantityMinus: ".js-cart-quantity-minus",
      // eslint-disable-next-line no-template-curly-in-string
      moneyFormat: "${{amount}}",
    };

    this.defaults = Object.assign({}, defaults, options);
    this.cartDrawer = document.querySelector(this.defaults.cartDrawer);
    this.cartDrawerContent = document.querySelector(
      this.defaults.cartDrawerContent
    );
    this.cartDrawerSubTotal = document.querySelector(
      this.defaults.cartDrawerSubTotal
    );
    this.cartDrawerFooter = document.querySelector(
      this.defaults.cartDrawerFooter
    );
    this.cartDrawerSummary = document.querySelector(
      this.defaults.cartDrawerSummary
    );
    this.cartDrawerShopMore = document.querySelector(
      this.defaults.cartDrawerShopMore
    );
    this.cartDrawerClose = document.querySelector(
      this.defaults.cartDrawerClose
    );
    this.cartTrigger = document.querySelector(this.defaults.cartTrigger);
    this.cartOverlay = document.querySelector(this.defaults.cartOverlay);
    this.cartCount = document.querySelector(this.defaults.cartCount);
    this.cartDrawerCount = document.querySelector(
      this.defaults.cartDrawerCount
    );
    this.addToCart = document.querySelectorAll(this.defaults.addToCart);
    this.removeFromCart = this.defaults.removeFromCart;
    this.itemQuantity = this.defaults.itemQuantity;
    this.itemQuantityPlus = this.defaults.itemQuantityPlus;
    this.itemQuantityMinus = this.defaults.itemQuantityMinus;
    this.moneyFormat = this.defaults.moneyFormat;
    this.labelAddedToCart = this.defaults.labelAddedToCart;
    this.labelCartIsEmpty = this.defaults.labelCartIsEmpty;
    this.labelQuantity = this.defaults.labelQuantity;
    this.labelRemove = this.defaults.labelRemove;
    this.init();
  }

  init() {
    this.fetchCart();

    this.addToCart.forEach((item) => {
      item.addEventListener("click", (event) => {
        event.preventDefault();
        const formID = item.parentNode.parentNode.getAttribute("id");
        this.addItemToCart(formID);
      });
    });

    this.cartTrigger.addEventListener("click", () => {
      this.openCartDrawer();
      this.openCartOverlay();
    });

    this.cartOverlay.addEventListener("click", () => {
      this.closeCartDrawer();
      this.closeCartOverlay();
    });

    this.cartDrawerClose.addEventListener("click", () => {
      this.closeCartDrawer();
      this.closeCartOverlay();
    });
  }

  fetchCart(callback) {
    window
      .fetch("/cart.js", {
        credentials: "same-origin",
        method: "GET",
      })
      .then((response) => response.json())
      .then((cart) => this.fetchHandler(cart, callback))
      .catch((error) => {
        this.ajaxRequestFail();
        console.log(error);
        throw new Error(error);
      });
  }

  addItemToCart(btn, pid, qty, e) {
    var iconTick = `<svg xmlns="http://www.w3.org/2000/svg" class="tick" viewBox="0 0 50 50" version="1.1" role="img"><title>Tick</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill="#FFFFFF" fill-rule="nonzero" points="14.6553946 35.392902 5.19935444 25.8272493 0 31.0869305 12.4784711 43.7100827 12.4927896 43.6954946 14.7708631 46 50 10.3619014 44.6998024 5"></polygon></g></svg>`;
    var iconSpinner = `<svg xmlns="http://www.w3.org/2000/svg" class="spinner" width="24" height="24" viewBox="0 0 24 24" role="img"><title>Loading</title><g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path fill="#fff" d="M12 5.25v1.5a5.25 5.25 0 105.246 5.466L17.25 12h1.5a6.75 6.75 0 11-6.987-6.746L12 5.25z"></path></g></svg>`;

    const indicators = `<span class="button_indicators">${iconTick}${iconSpinner}</span>`;
    btn.insertAdjacentHTML("beforeend", indicators);
    var indicatorElem = btn.getElementsByClassName("button_indicators")[0];
    indicatorElem.classList.add("add-success-loading");
    var inventoryQty = btn.getAttribute("data-qty");

    window
      .fetch("/cart/add.js", {
        method: "POST",
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ quantity: qty || 1, id: pid }),
      })
      .then((response) => {
        if (response.ok) {
          indicatorElem.classList.add("add-success-loading");
          return response.json();
        } else {
          return Promise.reject("Failed to add to cart");
        }
      })
      .then((product) => {
        this.fetchAndOpenCart();
        this.openCartOverlay();
        indicatorElem.classList.remove("add-success-loading");
        indicatorElem.classList.add("add-success-added");

        setTimeout(() => {
          indicatorElem.classList.remove("add-success-added");
          indicatorElem.remove();
        }, 500);
      })
      .catch((error) => {
        this.ajaxRequestFail();
        throw new Error(error);
      });
  }

  removeItem(line) {
    const quantity = 0;
    window
      .fetch("/cart/change.js", {
        method: "POST",
        credentials: "same-origin",
        body: JSON.stringify({ quantity, line }),
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then((response) => response.json())
      .then(() => this.fetchCart())
      .catch((error) => {
        this.ajaxRequestFail();
        throw new Error(error);
      });
  }

  changeItemQuantity(line, quantity) {
    window
      .fetch("/cart/change.js", {
        method: "POST",
        credentials: "same-origin",
        body: JSON.stringify({ quantity, line }),
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then((response) => response.json())
      .then(() => this.fetchCart())
      .catch((error) => {
        this.ajaxRequestFail();
        throw new Error(error);
      });
  }

  cartItemCount(cart) {
    this.cartCount.innerHTML = cart.item_count;
  }

  cartDrawerItemCount(cart) {
    this.cartDrawerCount.innerHTML = `(${cart.item_count})`;
  }

  fetchAndOpenCart() {
    this.fetchCart(() => {
      this.openCartDrawer();
    });
  }

  fetchHandler(cart, callback) {
    this.cartItemCount(cart);
    this.cartDrawerItemCount(cart);
    if (cart.item_count === 0) {
      this.renderBlankCartDrawer();
      this.cartDrawerSummary.classList.add("is-invisible");
    } else {
      this.renderDrawerCart(cart);
      this.cartDrawerSummary.classList.remove("is-invisible");
      if (typeof callback === "function") {
        callback(cart);
      }
    }
  }

  addItemToCartHandler(product) {
    return this.fetchAndOpenCart();
  }

  ajaxRequestFail() {
    console.log("Something went wrong");
  }

  renderDrawerCart(cart) {
    this.clearCartDrawer();
    cart.items.forEach((item, index) => {
      let itemVariant = item.variant_title;
      let itemVariantType = item.options_with_values[0].name;
      if (itemVariant === null) {
        itemVariant = "";
      }
      if (itemVariantType === null) {
        itemVariantType = "";
      }

      let minusIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 12H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      `;

      let plusIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 5V19M5 12H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      `;

      let trashIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      `;

      const cartSingleProduct = `
        <div class="cart-item" data-line="${Number(index + 1)}">
            <div class="cart-item__wrapper">
                <img class="cart-item__media" loading="lazy" src="${
                  item.image
                }">
                <div class="cart-item__details">
                    <a href="${item.url}" class="cart-item__title">${
        item.product_title
      }</a>
                    <div class="cart-item__price">${formatMoney(
                      item.line_price,
                      this.moneyFormat
                    )}</div>

                    <div class="cart-item__actions">
                      <div class="cart-item_quantity">
                          <span class="cart-item_quantity-button js-cart-quantity-minus">${minusIcon}</span>
                          <input class="cart-item_quantity-number js-cart-quantity" type="number" value="${
                            item.quantity
                          }" disabled>
                          <span class="cart-item_quantity-button js-cart-quantity-plus">${plusIcon}</span>
                      </div>
                      <a class="cart-item__remove js-cart-remove-item">${trashIcon}</a>
                    </div>

                </div>
            </div>

        </div>
      `;
      this.cartDrawerContent.innerHTML += cartSingleProduct;
    });
    this.cartDrawerSubTotal.innerHTML = formatMoney(
      cart.total_price,
      this.moneyFormat
    );
    this.cartDrawerSubTotal.parentNode.classList.remove("is-invisible");
    const removeFromCart = document.querySelectorAll(this.removeFromCart);
    removeFromCart.forEach((item) => {
      item.addEventListener("click", () => {
        CartDrawer.removeItemAnimation(item.parentNode);
        const line = item.closest(".cart-item").getAttribute("data-line");
        this.removeItem(line);
      });
    });
    const itemQuantityPlus = document.querySelectorAll(this.itemQuantityPlus);
    itemQuantityPlus.forEach((item) => {
      item.addEventListener("click", () => {
        const line = item.closest(".cart-item").getAttribute("data-line");
        const quantity =
          Number(item.parentNode.querySelector(this.itemQuantity).value) + 1;
        this.changeItemQuantity(line, quantity);
      });
    });
    const itemQuantityMinus = document.querySelectorAll(this.itemQuantityMinus);
    itemQuantityMinus.forEach((item) => {
      item.addEventListener("click", () => {
        const line = item.closest(".cart-item").getAttribute("data-line");
        const quantity =
          Number(item.parentNode.querySelector(this.itemQuantity).value) - 1;
        this.changeItemQuantity(line, quantity);
        if (
          Number(item.parentNode.querySelector(this.itemQuantity).value - 1) ===
          0
        ) {
          CartDrawer.removeItemAnimation(
            item.parentNode.parentNode.parentNode.parentNode
          );
        }
      });
    });
  }

  renderBlankCartDrawer() {
    this.cartDrawerSubTotal.parentNode.classList.add("is-invisible");
    this.clearCartDrawer();
    this.cartDrawerContent.innerHTML = `<div class="cart-drawer__empty">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.5 13.75L13.75 3.75" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M32.5 13.75L26.25 3.75" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M31.5634 36.25H8.44338C7.90208 36.2402 7.37995 36.0478 6.9616 35.7042C6.54325 35.3605 6.25316 34.8857 6.13838 34.3567L2.57505 16.8567C2.47965 16.4974 2.46643 16.1213 2.53641 15.7562C2.60638 15.3912 2.75773 15.0466 2.97921 14.7481C3.20068 14.4496 3.4866 14.2049 3.81568 14.0321C4.14476 13.8593 4.50856 13.7628 4.88005 13.75H35.1267C35.4982 13.7628 35.8619 13.8593 36.1911 14.0321C36.5201 14.2049 36.8061 14.4496 37.0276 14.7481C37.2491 15.0466 37.4004 15.3912 37.4704 15.7562C37.5402 16.1213 37.5271 16.4974 37.4317 16.8567L33.8684 34.3567C33.7536 34.8857 33.4636 35.3605 33.0451 35.7042C32.6267 36.0478 32.1047 36.2402 31.5634 36.25Z" fill="#ECECEC" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M15 20.4452C14.6548 20.4452 14.375 20.1653 14.375 19.8202C14.375 19.475 14.6548 19.1952 15 19.1952" stroke="black" stroke-width="2"/>
        <path d="M15 20.4452C15.3452 20.4452 15.625 20.1653 15.625 19.8202C15.625 19.475 15.3452 19.1952 15 19.1952" stroke="black" stroke-width="2"/>
        <path d="M25 20.4452C24.6548 20.4452 24.375 20.1653 24.375 19.8202C24.375 19.475 24.6548 19.1952 25 19.1952" stroke="black" stroke-width="2"/>
        <path d="M25 20.4452C25.3452 20.4452 25.625 20.1653 25.625 19.8202C25.625 19.475 25.3452 19.1952 25 19.1952" stroke="black" stroke-width="2"/>
        <path d="M27.0176 31.248C26.2465 30.0943 25.2028 29.1487 23.9788 28.4945C22.755 27.8405 21.3886 27.4983 20.001 27.4983C18.6133 27.4983 17.2471 27.8405 16.0232 28.4945C14.7993 29.1487 13.7556 30.0943 12.9844 31.248" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>Your cart is empty!</span>
      </div>`;
  }

  clearCartDrawer() {
    this.cartDrawerContent.innerHTML = "";
    if (localStorage.getItem("_cart_mode")) {
      localStorage.removeItem("_cart_mode");
    }
  }

  openCartDrawer() {
    this.cartDrawer.classList.add("is-open");
    document.body.style.overflow = "hidden";

    var gorgiasChatElem = document.getElementById("gorgias-chat-container");

    if (gorgiasChatElem) {
      gorgiasChatElem.style.display = "none";
    }
  }

  closeCartDrawer() {
    this.cartDrawer.classList.remove("is-open");
    document.body.style.overflow = "";
    var gorgiasChatElem = document.getElementById("gorgias-chat-container");

    if (gorgiasChatElem) {
      gorgiasChatElem.style.display = "block";
    }
  }

  openCartOverlay() {
    this.cartOverlay.classList.add("is-open");
  }

  closeCartOverlay() {
    this.cartOverlay.classList.remove("is-open");
  }

  static removeItemAnimation(item) {
    item.classList.add("is-invisible");
  }
}

export default CartDrawer;

theme.js

import CartDrawer from "./modules/cart-drawer";

//  Initialsie cart drawer
const cart = new CartDrawer({
  cartTrigger: ".js-cart-trigger",
  cartCount: ".js-cart-counter",
  addToCart: ".js-add-to-cart",
  moneyFormat: Shopify.currencyFormat,
});

window.cart = cart;