• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Merchant Labs

Helping online merchants succeed is what we do best!

  • About
  • Contact
  • My Account

Shopify, Shopify Ajax-cart / February 12, 2017

Ajax-cart for Shopify Installation Instructions (current)

Ajax-cart for Shopify is a custom installed Shopify App. Since the integration of Ajax-cart into a Shopify store can be drastically different from one store to another we've decided to include a basic installation for the one time price of the app. As long as you have the app the service will be included, so there are no monthly fees typically associated with other Shopify apps. Pay once and enjoy from then on.

AJAX-CART ADMIN

  • Add a record to the Stores DB specifying its store_name and setting enabled to 1.
{ screenshot goes here }

SHOPIFY ADMIN

Go to: https://merchantlabs.com/ajax-cart/install/ and enter the name of your store. This step will trigger the Shopify app installation screens where you'll need to accept the requested permissions of the app. This step takes care of letting the Ajax-cart app that you are installed and sets the required oAuth Token in the DB so the app can communicate with Shopify as needed as well as Shopify communicating with the app when any updates to the checkout happen.

THEME INTEGRATION

BACKUP THEME FILES

I personally like using ThemeKit since it lets me use the files on my computer and it goes back to Shopify in order to make it happen.
  • settings_schema.json
  • layout/theme.liquid
  • the cart template/code aka the file that displays the cart being upgraded. It could be any of these file names:
    • templates/cart.liquid
    • snippets/cart.liquid
    • sections/cart.liquid
    • or something similar to one of the above names.

Enable CartJS Binding

Before we start modifying theme files, you need to understand that you'll need to add this code to a parent container wherever you need CartJS to auto update information.

There are typically three places where this needs to happen, but depending on the store there could be more or less.

  1. The loop of cart items on the cart page.
  2. The subtotal field on the cart page.
  3. The item count in the cart link if there is one in the header.

The code:

  • data-cart-view="data-cart-view"

Example:

  • <form id="ac-basket-form" action="/cart" method="post" novalidate class="cart" data-cart-view="data-cart-view">

Example places to add this code

  • theme.liquid or header.liquid ~ if you need to update a cart item count like in the header of the Ajax-cart demo.
  • cart.liquid ~ so the cart loop updates
  • cart.liquid ~ so the subtotal updates

MODIFY THEME FILES

ThemeKit again for this step too
  • settings_schema.json
  • layout/theme.liquid
  • the cart template/code aka the file that displays the cart being upgraded

MODIFY FILE: config/settings_schema.json

At the end of the file you'll see these two lines:

}
]

Replace them with this:

},
{
"name": "Ajax-cart",
"settings": [
{
"type": "paragraph",
"content": "Ajax-cart is an advanced upgrade to the default Shopify cart page. It gives you options to control cart item quantities via ajax requests as well as adding a discount\/coupon field with discount calculation updates via ajax."
},
{
"type": "checkbox",
"id": "show_ajax_cart_for_shopify",
"label": "Enable Ajax-cart for Shopify",
"default": false,
"info": "This checkbox controls whether Shopify runs the Ajax-cart code or the original cart code."
},
{
"type": "text",
"id": "ajax_cart_for_shopify_location",
"label": "Ajax-cart location",
"info": "Use \"cart\" for the cart screen or \"page\/{page-handle}\" like page\/temp-cart for a page called \"Temp Cart\" ({template} or {template}\/{handle})."
},
{
"type": "text",
"id": "ajax_cart_for_shopify_pre_discount_title",
"label": "Discount pre-text",
"info": "If you want the discount line to read \"Coupon (XYZ)\" then \"Coupon (\" would be your pre-text.",
"default": "Coupon: "
},
{
"type": "text",
"id": "ajax_cart_for_shopify_post_discount_title",
"label": "Discount post-text",
"info": "If you want the discount line to read \"Coupon (XYZ)\" then \")\" would be your post-text.",
"default": " <a class=\"ac_remove_discount\" href=\"#\"><img src=\"\/\/merchantlabs.com\/ajax-cart\/assets\/clear-dark.svg\"><\/a><\/i>"
},
{
"type": "text",
"id": "ajax_cart_for_shopify_pre_subtotal_title",
"label": "Subtotal Title",
"info": "Use \"cart\" for the cart screen or \"page\/{page-handle}\" like page\/temp-cart for a page called \"Temp Cart\" ({template} or {template}\/{handle}).",
"default": "New Total"
},
{
"type": "header",
"content": "Auto-discount"
},
{
"type": "text",
"id": "ajax_cart_for_shopify_auto_discount_rule1",
"label": "Auto Discount Rule 1",
"info": "code|weight or amount or product|lt or gt or eq|value"
},
{
"type": "text",
"id": "ajax_cart_for_shopify_auto_discount_rule2",
"label": "Auto Discount Rule 2",
"info": "code|weight or amount or product|lt or gt or eq|value"
},
{
"type": "text",
"id": "ajax_cart_for_shopify_auto_discount_rule3",
"label": "Auto Discount Rule 3",
"info": "code|weight or amount or product|lt or gt or eq|value"
},
{
"type": "header",
"content": "Discount from URL"
},
{
"type": "text",
"id": "ajax_cart_for_shopify_url_discount_code",
"label": "URL discount code parameter",
"default": "promo",
"info": "Your link will look like: my-shop.myshopify.com?promo=DISCOUNTCODE. In this example, \"promo\" would be the discount code parameter"
},
{
"type": "header",
"content": "Popups"
},
{
"type": "select",
"id": "ajax_cart_for_shopify_popup_style",
"label": "Popup Style",
"default": "two",
"options": [
{
"value": "one",
"label": "One"
},
{
"value": "two",
"label": "Two"
},
{
"value": "three",
"label": "Three"
},
{
"value": "four",
"label": "Four"
},
{
"value": "five",
"label": "Five"
},
{
"value": "six",
"label": "Six"
},
{
"value": "seven",
"label": "Seven"
}
]
},
{
"type": "checkbox",
"id": "show_ajax_cart_for_shopify_freecoupon_popup",
"label": "Enable free coupon popup",
"default": false
},
{
"type": "checkbox",
"id": "show_ajax_cart_for_shopify_urlcoupon_popup",
"label": "Enable URL coupon popup",
"default": false
},
{
"type": "checkbox",
"id": "show_ajax_cart_for_shopify_goodcoupon_popup",
"label": "Enable good coupon popup",
"default": false
},
{
"type": "checkbox",
"id": "show_ajax_cart_for_shopify_goodcouponnosavings_popup",
"label": "Enable good coupon but no savings popup",
"default": false
},
{
"type": "checkbox",
"id": "show_ajax_cart_for_shopify_yourcouponwasbad_popup",
"label": "Enable bad coupon popup",
"default": false
},
{
"type": "header",
"content": "Discount Field"
},
{
"type": "radio",
"id": "show_ajax_cart_discount_elements",
"label": "Show Discount Field and Apply Button",
"options": [
{
"value": "never",
"label": "Never"
},
{
"value": "nodiscount",
"label": "Only on No Discount"
},
{
"value": "always",
"label": "Always"
}
],
"default": "always"
}
]
}
]

MODIFY FILE: layout/theme.liquid

Above closing HEAD tag and after jQuery

<!-- START AJAX-CART HEAD CODE -->
{% if settings.show_ajax_cart_for_shopify %}

{% comment %} RESOURCES {% endcomment %}
<link href="//merchantlabs.com/ajax-cart/assets/ajax-cart.css" rel="stylesheet" type="text/css" media="all">
<script src="//merchantlabs.com/ajax-cart/assets/jquery-1.8.3.min.js"></script>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script src="//merchantlabs.com/ajax-cart/assets/rivets-cart-compatibility.min.js"></script>
<script src="//merchantlabs.com/ajax-cart/assets/js.cookie-2.1.3.min.js"></script>
<script>
var ajaxCartJquery = jQuery.noConflict(true); // lets put jQuery back to whatever it was and just use our own.
var ajax_cart_global = {
'shop': '{{ shop.permanent_domain }}',
'query_string': getQueryString(),
'url_discount_param': '{{ settings.ajax_cart_for_shopify_url_discount_code }}',
'service_url': 'https://merchantlabs.com/ajax-cart/connect/ajax/?shop={{ shop.permanent_domain }}&',
'show_discount_elements': '{{ settings.show_ajax_cart_discount_elements }}',
'discount_subtotal_pretitle': '{{ settings.ajax_cart_for_shopify_pre_discount_title }}',
'discount_subtotal_posttitle': '{{ settings.ajax_cart_for_shopify_post_discount_title }}',
'amount_subtotal_pretitle': '{{ settings.ajax_cart_for_shopify_pre_subtotal_title }}',
'freecoupon_popup': {{ settings.show_ajax_cart_for_shopify_freecoupon_popup }},
'urlcoupon_popup': {{ settings.show_ajax_cart_for_shopify_urlcoupon_popup }},
'goodcoupon_popup': {{ settings.show_ajax_cart_for_shopify_goodcoupon_popup }},
'goodcouponnosavings_popup': {{ settings.show_ajax_cart_for_shopify_goodcouponnosavings_popup }},
'yourcouponwasbad_popup': {{ settings.show_ajax_cart_for_shopify_yourcouponwasbad_popup }},
'popup_style': '{{ settings.ajax_cart_for_shopify_popup_style }}'
};

// if coupon in URL
if (ajax_cart_global.query_string[ajax_cart_global.url_discount_param]) {
Cookies.set('ac_pre_cart', ajax_cart_global.query_string[ajax_cart_global.url_discount_param], {expires: 7});
}

ajaxCartJquery(document).ready(function() {
CartJS.init({{ cart | json }}, {
"moneyFormat": "{{ shop.money_format }}",
"moneyWithCurrencyFormat": "{{ shop.money_with_currency_format }}"
});
});

function getQueryString() { var query_string = {}; var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); /* If first entry with this name */ if (typeof query_string[pair[0]] === "undefined") { query_string[pair[0]] = decodeURIComponent(pair[1]); /* If second entry with this name */ } else if (typeof query_string[pair[0]] === "string") { var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ]; query_string[pair[0]] = arr; /* If third or later entry with this name */} else { query_string[pair[0]].push(decodeURIComponent(pair[1])); } } return query_string; };

</script>
{% comment %} find out where we are {% endcomment %}
{% if handle != blank %}
{% assign settings_location_check = template | append: '/' | append: handle %}
{% else %}
{% assign settings_location_check = template %}
{% endif %}
<!-- {{ settings_location_check }} -->
{% comment %} only run this code at the designated location {% endcomment %}
{% if (settings.ajax_cart_for_shopify_location != blank) and (settings_location_check == settings.ajax_cart_for_shopify_location) %}
<script src="//merchantlabs.com/ajax-cart/assets/hmac-sha256.js"></script>
<script src="//merchantlabs.com/ajax-cart/assets/enc-base64-min.js"></script>
<script src="/apps/ajax-cart/" type="text/javascript"></script>
<script src="//merchantlabs.com/ajax-cart/assets/javascript.php"></script>
{% endif %}
{% endif %}
<!-- END AJAX-CART HEAD CODE -->

Enable popup and give it somewhere to live

add the "ajax-cart-page-content" class name to content element to move back during popup animation

The code:

  • class="ac_page_content"

Example:

  • <div class="page-container ac_page_content" id="PageContainer">

Cart Item Count

Some themes show the number of items in the basket in the header somewhere. If so you can add rv code to make sure it shows the updated number during CartJS cart item updates (this might also be in a snippet/header.liquid, section/header.liquid file)

{ screenshot }

The code:

  • rv-text="cart.item_count"

Example:

  • <span rv-text="cart.item_count">{{ cart.item_count }}</span>

MODIFY FILE: the cart template/code

Initial cart template cleanup

A good way to remove items is to wrap them in an {% if %} block like so:

{% if settings.show_ajax_cart_for_shopify %}
Shows your new content
{% else %}
Shows your original content
{% endif %}

or you can use this to do the opposite:

{% unless settings.show_ajax_cart_for_shopify %}
Hides your old content
{% endunless %}

Lets start by removing (hiding) these items below using a couple {% unless %} blocks.

  • Remove Update button all together and just leave the Checkout button - cut html out of template
  • Remove additional checkout buttons - cut html out of template

Insert Discount

Add below cart total

Duplicate whatever the cart total DIV looks like and tweak it like the one below. Important bits are bold

<!-- START AJAX-CART DISCOUNT CODE -->
{% if settings.show_ajax_cart_for_shopify %}
<p class="ac-animated-coupon">Recalculating discount <img src="//merchantlabs.com/ajax-cart/assets/ajax-loader.gif" height="11"></p>
<div id="ajax-cart-view">
<p class="ac-processed-discount">
<span class="cart__subtotal-title"></span>
<span class="cart__subtotal"></span>
</p>
<p class="ac-processed-amount">
<span class="cart__subtotal-title"></span>
<span class="cart__subtotal"></span>
</p>
<p class="ac-coupon-field">Coupon Code: <input id="discount_input" type="text" name="discount"></p>
</div>
{% endif %}
<!-- END AJAX-CART DISCOUNT CODE -->

Important IDs and Classes

Display Selectors

.ac_discount_amount

.ac_discount_amount_title

.ac_discount_amount_title_code (just for styling purposes)

.ac_new_subtotal

.ac_new_subtotal_title

.ac_hide_me

.ac_update_message

Discount Field Selectors

.ac_discount_field

.ac_apply_discount

.ac_remove_discount

Line Item Selectors

All of these rely on an attribute of "item-id" also being present on the element. All must be class names as well.

.ac_item_decrease (requires item-id and item-qty)

.ac_item_increase (requires item-id and item-qty)

.ac_item_quantity_select (requires item-id and a numeric number for the new quantity)

.ac_item_quantity_text (requires item-id and a numeric number for the new quantity)

.ac_item_quantity (shows the current quantity)

.ac_item_remove (requires rv-item-id)

Utility Selectors

.ac_page_content

.ac_basket_form

.ac_cart_empty_block

Filed Under: Shopify, Shopify Ajax-cart Tagged With: Coding, Documentation

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Footer

Shopify Partner

Let Merchant Labs, with over 15 years experience in ecommerce, help you SUCCEED online! From …

Read More about Shopify Development Services

  • Twitter
  • YouTube

Ajax-Cart Coming Soon

What is Ajax-cart for Shopify? Ajax-cart for Shopify is a big project to bring some of the most wanted features to the Shopify cart page. This page is also known as the basket screen. Its …

more about Ajax-Cart for Shopify

Tags

Apps Script Coding Documentation Javascript MySQL PHP Shopify Liquid

Contact Us

Merchant Labs
Los Angeles, California

P: 424-236-0372
E: mngr@merchantlabs.com

Proud Partners For

Copyright © 2023 · Digital Pro on Genesis Framework · WordPress · Log in