ajax cart complete shopify

ajax-cart-complete.liquid

<!--ajax cart modal-->
<div class="ajax-cart__modal js-ajax-cart-modal">

    <div class="ajax-cart-modal">

        <!--ajax cart modal close-->
        <div class="ajax-cart-modal__close js-ajax-cart-modal-close">
            {% include 'icon-close' %}
        </div>
        <!--end ajax cart modal close-->

        <!--ajax cart modal content-->
        <div class="ajax-cart-modal__content js-ajax-cart-modal-content"></div>
        <!--end ajax cart modal content-->

    </div>

</div>
<!--end ajax cart modal-->

<!--ajax cart drawer-->
<div class="ajax-cart__drawer js-ajax-cart-drawer">

    <div class="ajax-cart-drawer">

        <!--ajax cart drawer close-->
        <div class="ajax-cart-drawer__close js-ajax-cart-drawer-close">
            {% include 'icon-close' %}
        </div>
        <!--end ajax cart drawer close-->

        <!--ajax cart drawer content-->
        <div class="ajax-cart-drawer__content js-ajax-cart-drawer-content"></div>
        <!--end ajax cart drawer content-->

        <!--ajax cart drawer buttons-->
        <div class="ajax-cart-drawer__buttons">

            <a href="/cart/" class="button button--black button--full-width js-button">
                <span>Go to cart</span>
            </a>

            <a href="/checkout/" class="button button--black button--full-width js-button">
                <span>Proceed to checkout</span>
            </a>

        </div>
        <!--end ajax cart drawer buttons-->

    </div>

</div>
<!--end ajax cart drawer-->

<!--ajax cart overlay-->
<div class="ajax-cart__overlay js-ajax-cart-overlay"></div>
<!--end ajax cart overlay-->

<script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>

<script>

    document.addEventListener('DOMContentLoaded', function() {
        fetchCart();
    });

    const defaults = {
        cartModal: '.js-ajax-cart-modal', // classname
        cartModalContent: '.js-ajax-cart-modal-content', // 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
    };

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


    for (let i = 0; i < addToCart.length; i++) {

        addToCart[i].addEventListener('click', function(event) {

            event.preventDefault();
            let form_id = this.parentNode.getAttribute('id');
            console.log(form_id);

            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: $('#' + form_id)
                    .serialize(),
                success: addToCartOk,
                error: addToCartFail
            });

        });

    }


    function fetchCart(callback) {
        fetch('/cart.js', {credentials: 'same-origin'})
            .then(function(r) {
                return r.json();
            })
            .then(function(cart) {
                if (typeof callback === 'function') {
                    callback(cart);
                } else {
                    //onCartUpdate(cart);
                    renderCart(cart);
                }
            });
    }

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

    function addProductToCart(form_id) {
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: $('#' + form_id)
                .serialize(),
            success: addToCartOk,
            error: addToCartFail
        });
    }

    function addToCartOk(product) {
        cartModalContent.innerHTML = product.title + ' was added to the cart!';
        cartCounter.innerHTML = Number(cartCounter.innerHTML) + 1;
        openAddModal();
        openCartOverlay();
        fetchCart();
    }

    function addToCartFail() {
        cartModalContent.innerHTML = 'The product you are trying to add is out of stock.';
        openAddModal();
        openCartOverlay();
    }

    function renderCart(cart) {

        //console.log(cart);

        clearCartDrawer();

        cart.items.forEach(function(item) {

            //console.log(item.title);
            //console.log(item.image);
            //console.log(item.line_price);
            //console.log(item.quantity);

            let productTitle = '<div class="ajax-cart-item__title">' + item.title + '</div>';
            let productImage = '<img class="ajax-cart-item__image" src="' + item.image + '" >';
            let productPrice = '<div class="ajax-cart-item__price">' + item.line_price + '</div>';
            let productQuantity = '<div class="ajax-cart-item__quantity">' + item.quantity + '</div>';

            let concatProductInfo = productTitle + productImage + productPrice + productQuantity;

            cartDrawerContent.innerHTML = cartDrawerContent.innerHTML + concatProductInfo;

        });

    }

    function openCartDrawer() {
        cartDrawer.classList.add('is-open');
    }

    function closeCartDrawer() {
        cartDrawer.classList.remove('is-open');
    }

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

    function openAddModal() {
        cartModal.classList.add('is-open');
    }

    function closeAddModal() {
        cartModal.classList.remove('is-open');
    }

    function openCartOverlay() {
        cartOverlay.classList.add('is-open');
        htmlSelector.classList.add('is-locked');
    }

    function closeCartOverlay() {
        cartOverlay.classList.remove('is-open');
        htmlSelector.classList.remove('is-locked');
    }

    cartModalClose.addEventListener('click', function() {
        closeAddModal();
        closeCartOverlay();
    });

    cartDrawerClose.addEventListener('click', function() {
        closeCartDrawer();
        closeCartOverlay();
    });

    //dodati overflow na body di treba, cart is empty stanje
    cartOverlay.addEventListener('click', function() {
        closeAddModal();
        closeCartDrawer();
        closeCartOverlay();
    });

    cartDrawerTrigger.addEventListener('click', function(event) {
        event.preventDefault();
        fetchCart();
        openCartDrawer();
        openCartOverlay();
    });

</script>