Some Shopify themes use an AJAX cart to add products to the cart page. This allows customers to remain on the storefront rather than getting redirected to the cart page. Though this is convenient for customers, this type of cart does not work with the standard ReCharge code. As a result, you may need to create a redirect from an AJAX cart to ensure that the subscription properties are included and the customer is directed to the ReCharge checkout.
Before you start
This is an advanced customization guide that requires knowledge of the Shopify liquid, javascript, and HTML.
Step 1 - Access the subscription-theme-footer.liquid file
In order to perform the redirect to ReCharge checkout from an AJAX cart, you will need to access the Shopify Theme Editor. Once you have the Theme Editor open, search for the subscription-theme-footer.liquid file.
Step 2 - Insert new code
Click on the subscription-theme-footer.liquid file. Scroll down to approximately Line 65 or search for "reChargeSaveCartNoteAndRedirectToCart();".
Locate and delete the following two lines of code:
Replace the two lines of code with the following block of code:
var paramCart = '&cart_token=' + (document.cookie.match('(^|; )cart=([^;]*)')||0)[2];
$.ajax({
type: 'GET',
url: '/cart.js',
dataType: 'text',
success: function(data) {
if (data.indexOf("subscription_id") > -1) {
var paramDomain = 'myshopify_domain={{ shop.permanent_domain }}';
try {
var paramLinker = "&" + ga.getAll()[0].get('linkerParam');
} catch (err) {
var paramLinker = '';
}
var paramCustomer = '{% if customer %}&customer_id={{ customer.id }}&customer_email={{ customer.email }}{% endif %}';
window.location = "https://checkout.rechargeapps.com/r/checkout?" + paramDomain + paramCart + paramLinker + paramCustomer;
} else {
window.location = '/checkout';
}
}
});
The end result will look like the following:
