Shopify Ajax Add to Cart Functionality Integration

This section provides an overview of Shopify Ajax Add to Cart Functionality Integration

Step 1: ajaxify-cart.liquid Snippet Creation

Create a file inside of the snippets folder which name is ajaxify-cart.liquid

Bitbucket Link

Step 2: theme.liquid Template Changes

Open up layout/theme.liquid file and add this code block above the </body> tag.

   {% render 'ajaxify-cart' %}

Step 3: product-loop.liquid Snippet Changes

Open up the snippet file snippets/product-loop.liquid. Place code block which comes from the folder on repo.

<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<form class="product-form" action="/cart/add" data-productid="{{product.id}}" method="post">

    {% if product.variants.size > 1 %}
    <div class="product-options">
        <select name="id" data-productid="{{product.id}}" id="product-select" class="product-select">
            {% for variant in product.variants %}
            <option {% if variant== selectedVariant %} selected="selected" {% endif %} value="{{ variant.id }}">{{
                variant.title }} - {{ variant.price | money }}
            </option>
            {% endfor %}
        </select>
    </div>
    {% else %}
    <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select"
           value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}"/>
    {% endif %}

    <div class="input-wrapper product-quantity">

        <input type="hidden" name="quantity" id="quantity" value="1"/>
    </div>

    <div class="add-to-cart">
        {% if product.available %}
        <div class="product-form-submit-wrap">
            <input type="submit" value="{{ 'products.product.add_to_cart' | t }}"/>
            <div class="add-to-cart-loader"></div>
        </div>
        {% capture cart_link %}
        <a href="/cart">{{ 'products.product.cart_link' | t }}</a>
        {% endcapture %}
        {% capture continue_link %}
        <a href="/collections/all">{{ 'products.product.continue_link' | t }}</a>
        {% endcapture %}
        {% capture checkout_link %}
        <a href="/checkout">{{ 'products.product.checkout_link' | t }}</a>
        {% endcapture %}
        {% capture product_item %}
        <span class='added-product-name'></span>
        {% endcapture %}
        <p class="product-add-success-message"></p>
        <p class="product-add-error-message"></p>
        {% else %}
        <input type="button" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}"/>
        {% endif %}
    </div>

</form>

Step 4: styles.scss Style Changes.

Copy/Paste the style from styles.scss.liquid file to your project assets folder.

/** +++++++++++++++++++++++++++++++ **/

form.product-form {
    width: 100%;
    padding: 10px;
    display: block;

    .product-options {
        margin: 0 48px;

        > select {
            background-color: #ffffff;
            color: #262626;
            border: 1px solid #262626;
            padding: 5px 5px 5px 5px;
            border-radius: 2px;
            width: 100%;
            font-size: 12px;
        }
    }

    .add-to-cart {
        margin: 5px 48px;

        > .product-form-submit-wrap {
            input[type='submit'] {
                padding: 5px 12px;
                background-color: #262626;
                color: #ffffff;
                border: 1px solid #262626;
                width: 100%;
                border-radius: 2px;
                font-size: 15px;

                &:hover {
                    border: 1px solid #03aed9;
                    background-color: #03aed9;
                }
            }
        }

    }
}