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.
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
- 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.
- The loop of cart items on the cart page.
- The subtotal field on the cart page.
- 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
- 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
<p class="ac-animated-coupon">Recalculating discount <img src="//merchantlabs.com/ajax-cart/assets/ajax-loader.gif" height="11"></p>
<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>
<!-- 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
Leave a Reply
You must be logged in to post a comment.