shopify ajax add to cart

shopify-ajax-add-to-cart.liquid

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

    <script>
    var cartCount = {{ cart.item_count }};

        $(document)
            .ready(function() {

                {% if cart.item_count != 0 %}

                $('#cart-number')
                    .replaceWith('<a href="/cart" id="cart-number">View cart(' + cartCount + ')</a>');

                {% endif %}

                $('.modal--overlay')
                    .on('click', function() {
                        var overlay = $('.modal--overlay');
                        closeModal(overlay);
                    });
            });

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

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

        function addToCartOk(product) {
            cartCount++;
            $('.modal')
                .html('<span class="close" id="close">✕</span>' + product.title + ' was added to the cart!');
            $('#cart-number')
                .replaceWith('<a href="/cart" id="cart-number">View cart(' + cartCount + ')</a>');
            openModal();
        }

        function addToCartFail(obj, status) {
            $('.modal')
                .html('<span class="close" id="close">✕</span> The product you are trying to add is out of stock.');
            openModal();
        }

        //Modal Actions
        //center modal based on window size
        function centerModal() {
            var modal = $('.modal.open');
            var mWidth = modal.outerWidth();
            var mHeight = modal.outerHeight();
            var width = $(window)
                .width();
            var height = $(window)
                .height();
            if ((width % 1) != 0) {
                width = Math.round(width);
            }
            if ((height % 1) != 0) {
                height = Math.round(height);
            }
            var topPos = (height / 2) - (mHeight / 2);
            var leftPos = (width / 2) - (mWidth / 2);
            modal.css({top: topPos, left: leftPos});

        }

        //open modal and overlay
        function openModal() {
            $('.modal')
                .removeClass('hidden')
                .addClass('open');
            $('.modal--overlay')
                .removeClass('hidden')
                .addClass('open');
            $('body')
                .css('overflow', 'hidden');
            centerModal();
        }

        //close modal and overlay
        function closeModal(overlay) {
            $(overlay)
                .addClass('hidden')
                .removeClass('open');
            $('.modal.open')
                .addClass('hidden')
                .removeClass('open');
            $('body')
                .css('overflow', 'auto');
        }
    </script>

    <style>
        .modal {
            max-width: 575px;
            background: white;
            border: 5px solid #111;
            padding: 50px 65px;
            position: fixed;
            z-index: 1000;
        }

        .modal .close {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 20px;
            cursor: pointer;
        }

        .modal--overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .hidden {
            display: none;
        }
    </style>
    
    
    <a id="cart-number" href="/cart"></a>

<div class="modal hidden" id="download-modal"></div>
<div class="modal--overlay hidden"></div>

<!--product form-->
            <form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-{{ product.handle }}">

                <!--product add to cart-->
                <button
                        class="single-product__add-to-cart u-b6"
                        type="submit"
                        name="add"
                        data-add-to-cart
                        {% unless current_variant.available %}disabled="disabled"{% endunless %}
                        onclick="addItem('add-to-cart-{{ product.handle }}'); return false;">

                    <span data-add-to-cart-text>
                        {% if current_variant.available %}
                            {{ 'products.product.add_to_cart' | t }}
                        {% else %}
                            {{ 'products.product.sold_out' | t }}
                        {% endif %}
                    </span>

                </button>
                <!--end product add to cart-->

            </form>
            <!--end product form-->