ajax cart full new

ajax-cart.js

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

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
    removeFromCart: '.js-ajax-remove-from-cart', //classname
    removeFromCartNoDot: 'js-ajax-remove-from-cart', //classname,
    checkoutButton: '.js-ajax-checkout-button',
};

const cartModal = document.querySelector(defaults.cartModal);
const cartModalContent = document.querySelector(defaults.cartModalContent);
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;

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

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

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

        addProductToCart(formID);

    });

}

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

function fetchCart() {
    $.ajax({
        type: 'GET',
        url: '/cart.js',
        dataType: 'json',
        success: function(cart) {
            onCartUpdate(cart);

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

        },
    });
}

function changeItem(line, callback) {
    const quantity = 0;
    $.ajax({
        type: 'POST',
        url: '/cart/change.js',
        data: 'quantity=' + quantity + '&line=' + line,
        dataType: 'json',
        success: function(cart) {
            if ((typeof callback) === 'function') {
                callback(cart);
            } else {
                onCartUpdate(cart);
                fetchCart();
                removeProductFromCart();
            }
        },
    });
}

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

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

function removeProductFromCart() {
    cartCounter.innerHTML = Number(cartCounter.innerHTML) - 1;
}

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, index) {

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

        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 = cartDrawerContent.innerHTML + concatProductInfo;

    });

    // document.querySelectorAll('.js-ajax-remove-from-cart')
    //     .forEach((element) => {
    //         element.addEventListener('click', function() {
    //             const lineID = this.parentNode.getAttribute('data-line');
    //             console.log('aa');
    //         });
    //     });

    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 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();
});
// cart is empty stanje
cartOverlay.addEventListener('click', function() {
    closeAddModal();
    closeCartDrawer();
    closeCartOverlay();
});

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

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

ajax-cart.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-wrapper">

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

        </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="/checkout/" class="button button--black button--full-width js-button js-ajax-checkout-button">
                <span>Proceed to checkout</span>
            </a>

            <div class="ajax-cart-drawer__cart-button">

                <a href="/cart/" class="link--underline u-b2 u-b2--medium">
                    View bag
                </a>

            </div>

        </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-->

ajax-cart.scss

$ajax-cart-header-height: 79px;
$ajax-cart-footer-height: 155px;

.ajax-cart {

    &__modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 40;
        max-width: 575px;
        background: getColor('white', 'default');
        border: 1px solid getColor('light-gray', 'secondary');
        padding: 50px 65px;
        opacity: 0;
        visibility: hidden;
        will-change: opacity, visibility;

        &.is-open {
            opacity: 1;
            visibility: visible;
        }

    }

    &__overlay {
        position: fixed;
        z-index: 30;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: getColor('black-40', 'variations');
        opacity: 0;
        visibility: hidden;
        will-change: opacity, visibility;

        &.is-open {
            opacity: 1;
            visibility: visible;
        }

    }

    &__drawer {
        transition: getTransition();
        position: fixed;
        z-index: 40;
        right: -480px;
        top: 0;
        width: 480px;
        height: 100%;
        background: getColor('white', 'default');
        will-change: transform;
        border-left: 1px solid getColor('light-gray', 'secondary');

        &.is-open {
            transform: translateX(-100%);
        }

    }

}

.ajax-cart-modal {
    position: relative;

    &__close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    &__content {
        padding: 20px;
    }

}

.ajax-cart-drawer {
    position: relative;
    height: 100%;

    &__close-wrapper {
        width: 100%;
        height: $ajax-cart-header-height;
    }

    &__close {
        position: absolute;
        right: 30px;
        top: 30px;
        cursor: pointer;
        line-height: 0;
        font-size: 17px;
    }

    &__content {
        padding: 0 30px;
        overflow: hidden;
        overflow-y: scroll;
        height: calc(100% - #{$ajax-cart-footer-height} - #{$ajax-cart-header-height});
    }

    &__subtotal {
        position: relative;
        margin-top: 25px;
        padding-left: 120px;
        line-height: 0;
    }

    &__subtotal-price {
        position: absolute;
        right: 10px;
    }

    &__buttons {
        width: 100%;
        height: $ajax-cart-footer-height;
        background: getColor('white', 'default');
        padding: 20px 20px 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    &__cart-button {
        text-align: center;
    }

}

.ajax-cart-item {

    &__single {
        position: relative;
        padding: 15px 0;
        border-bottom: 1px solid getColor('silver', 'secondary');

        &:first-child {
            border-top: 1px solid getColor('silver', 'secondary');
        }

    }

    &__info-wrapper {
        display: flex;
        position: relative;
    }

    &__info {
        padding: 10px 10px 10px 30px;
        max-width: 270px;
    }

    &__image {
        width: 90px;
        height: 110px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    &__title {
        vertical-align: top;
    }

    &__quantity {
        position: absolute;
        bottom: 10px;
    }

    &__price {
        position: absolute;
        bottom: 25px;
        right: 10px;
    }

    &__remove {
        position: absolute;
        right: 10px;
        top: 25px;
        cursor: pointer;
        letter-spacing: 0.2px;
    }

}

in which files we have to over ride these ajax files

@Motwani21
https://github.com/bornfight/goCart.js
check this repo