ajax-cart-shopify-es6.js

import {formatMoney} from '@shopify/theme-currency/currency';
import {Power3, TweenMax} from 'gsap/TweenMax';
import $ from 'jquery';

const defaults = {
    cartModal: '.js-ajax-cart-modal', // classname
    cartModalClose: '.js-ajax-cart-modal-close', // classname
    cartDrawer: '.js-ajax-cart-drawer', // classname
    cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
    cartDrawerClose: '.js-ajax-cart-drawer-close', // classname
    cartDrawerTrigger: '.js-ajax-cart-drawer-trigger', // classname
    cartOverlay: '.js-ajax-cart-overlay', // classname
    cartCounter: '.js-ajax-cart-counter', // classname
    addToCart: '.js-ajax-add-to-cart', // classname
    removeFromCart: '.js-ajax-remove-from-cart', // classname
    removeFromCartNoDot: 'js-ajax-remove-from-cart', // classname
    checkoutButton: '.js-ajax-checkout-button', // classname
    bodyClass: 'is-overlay-opened', // classname
    mainContent: '.js-main-content', // classname
};

const cartModal = document.querySelector(defaults.cartModal);
const cartModalClose = document.querySelector(defaults.cartModalClose);
const cartDrawer = document.querySelector(defaults.cartDrawer);
const cartDrawerContent = document.querySelector(defaults.cartDrawerContent);
const cartDrawerClose = document.querySelector(defaults.cartDrawerClose);
const cartDrawerTrigger = document.querySelector(defaults.cartDrawerTrigger);
const cartOverlay = document.querySelector(defaults.cartOverlay);
const cartCounter = document.querySelector(defaults.cartCounter);
const addToCart = document.querySelectorAll(defaults.addToCart);
let removeFromCart = document.querySelectorAll(defaults.removeFromCart);
const checkoutButton = document.querySelector(defaults.checkoutButton);
const htmlSelector = document.documentElement;
const mainContent = document.querySelector(defaults.mainContent);

/**
 *
 * @param {function} callback
 */
function fetchCart(callback) {
    $.ajax({
        type: 'GET',
        url: '/cart.js',
        dataType: 'json',
        success(cart) {
            onCartUpdate(cart);
            currentCartItemNumber(cart);

            if (cart.item_count === 0) {
                renderBlankCart();
                checkoutButton.classList.add('is-hidden');
            } else {
                renderCart(cart);
                checkoutButton.classList.remove('is-hidden');

                if (typeof callback === 'function') {
                    callback();
                }

            }

        },
        error(error) {
            console.log(error);
            ajaxRequestFail();
        },

    });
}

/**
 *
 * @param formID
 * @param callback
 */
function addProductToCart(formID, callback) {
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        dataType: 'json',
        data: $(`#${formID}`)
            .serialize(),
        success(cart) {
            if ((typeof callback) === 'function') {
                callback(cart);
            } else {
                addToCartOk();
            }
        },
        error: ajaxRequestFail,
    });
}

/**
 *
 * @param line
 * @param callback
 */
function changeItem(line, callback) {
    const quantity = 0;
    $.ajax({
        type: 'POST',
        url: '/cart/change.js',
        data: `quantity=${quantity}&line=${line}`,
        dataType: 'json',
        success(cart) {
            if ((typeof callback) === 'function') {
                callback(cart);
            } else {
                fetchCart();
            }
        },
        error: ajaxRequestFail,
    });
}

/**
 *
 */
addToCart.forEach((item) => {

    item.addEventListener('click', function(event) {

        event.preventDefault();
        const formID = this.parentNode.getAttribute('id');
        console.log(formID);

        addProductToCart(formID);

    });

});

/**
 *
 * @param cart
 */
function onCartUpdate(cart) {
    console.log('items in the cart?', cart.item_count);
}

/**
 *
 * @param cart
 */
function currentCartItemNumber(cart) {
    cartCounter.innerHTML = cart.item_count;
}

/**
 *
 */
function addToCartOk() {
    fetchAndOpenCart();
}

/**
 *
 */
function fetchAndOpenCart() {

    fetchCart(() => {
        openCartDrawer();
        openCartOverlay();
    });

}

/**
 *
 */
function ajaxRequestFail() {
    openFailModal();
    openCartOverlay();
}

/**
 *
 * @param cart
 */
function renderCart(cart) {

    console.log(cart);

    clearCartDrawer();

    cart.items.forEach((item, index) => {

        const productTitle = `<a href="${item.url}" class="ajax-cart-item__title u-b2 link--underline">${item.product_title}</a>`;
        const productVariant = `<div class="ajax-cart-item__variant u-b2">${item.variant_title}</div>`;
        const productImage = `<div class="ajax-cart-item__image" style="background-image: url(${item.image});"></div>`;
        const productPrice = `<div class="ajax-cart-item__price u-b2 u-b2--medium">${formatMoney(item.line_price)}</div>`;
        const productQuantity = `<div class="ajax-cart-item__quantity u-b2">Quantity: ${item.quantity}</div>`;
        const productRemove = `<a class="ajax-cart-item__remove u-b2 link--underline ${defaults.removeFromCartNoDot}">Remove</a>`;

        const concatProductInfo = `<div class="ajax-cart-item__single" data-line="${Number(index + 1)}"><div class="ajax-cart-item__info-wrapper">${productImage}<div class="ajax-cart-item__info">${productTitle}${productVariant}${productQuantity}</div></div>${productPrice}${productRemove}</div>`;

        cartDrawerContent.innerHTML += concatProductInfo;

    });

    const cartSubTotal = `<div class="ajax-cart-drawer__subtotal"><span class="u-b2 u-b2--medium">Subtotal: </span><span class="ajax-cart-drawer__subtotal-price u-b2 u-b2--medium">${formatMoney(cart.total_price)}</span></div>`;

    cartDrawerContent.innerHTML += cartSubTotal;

    removeFromCart = document.querySelectorAll(defaults.removeFromCart);

    for (let i = 0; i < removeFromCart.length; i++) {
        removeFromCart[i].addEventListener('click', function() {
            const line = this.parentNode.getAttribute('data-line');
            console.log(line);
            changeItem(line);
        });
    }

}

function renderBlankCart() {

    console.log('Blank Cart');

    clearCartDrawer();

    const blankCartContent = '<div class="ajax-cart__empty u-a7 u-uppercase">Your Cart is currenty empty!</div>';

    cartDrawerContent.innerHTML = blankCartContent;

}

/**
 *
 */
function openCartDrawer() {

    TweenMax.to(cartDrawer, 0.5, {
        x: -480,
        ease: Power3.easeInOut,
    });

    // TweenMax.to(mainContent, 0.5, {
    //     x: -50,
    //     ease: Power3.easeInOut,
    // });

}

/**
 *
 */
function closeCartDrawer() {

    TweenMax.to(cartDrawer, 0.5, {
        x: 0,
        ease: Power3.easeInOut,
    });

    // TweenMax.to(mainContent, 0.5, {
    //     x: 0,
    //     ease: Power3.easeInOut,
    // });

}

/**
 *
 */
function clearCartDrawer() {
    cartDrawerContent.innerHTML = '';
}

/**
 *
 */
function openFailModal() {

    TweenMax.to(cartModal, 0.4, {
        autoAlpha: 1,
        ease: Power3.easeOut,
    });

}

/**
 *
 */
function closeFailModal() {

    TweenMax.to(cartModal, 0.2, {
        autoAlpha: 0,
        ease: Power3.easeOut,
    });

}

/**
 *
 */
function openCartOverlay() {

    htmlSelector.classList.add(defaults.bodyClass);

    TweenMax.to(cartOverlay, 0.5, {
        autoAlpha: 1,
        ease: Power3.easeInOut,
    });

}

/**
 *
 */
function closeCartOverlay() {

    htmlSelector.classList.remove(defaults.bodyClass);

    TweenMax.to(cartOverlay, 0.5, {
        autoAlpha: 0,
        ease: Power3.easeInOut,
    });

}

/**
 *
 */
cartOverlay.addEventListener('click', () => {
    closeFailModal();
    closeCartDrawer();
    closeCartOverlay();
});

/**
 *
 */
cartDrawerClose.addEventListener('click', () => {
    closeCartDrawer();
    closeCartOverlay();
});

/**
 *
 */
cartDrawerTrigger.addEventListener('click', (event) => {
    event.preventDefault();
    openCartDrawer();
    openCartOverlay();
});

/**
 *
 */
cartModalClose.addEventListener('click', () => {
    closeFailModal();
    closeCartDrawer();
    closeCartOverlay();
});

/**
 *
 */
document.addEventListener('DOMContentLoaded', () => {
    fetchCart();
});