Adding an item to the cart with Ajax
If you want to allow customers to add a subscription product to the cart from a page other than the product page, you must use an Ajax add-to-cart function to add a variant and subscription properties to the Shopify cart. This guide provides a reference for your developer on how this can be implemented on your Shopify store.
- Recharge Checkout on Shopify
- Shopify Checkout Integration
Before you start
subscription_id property.- This feature will require advanced coding knowledge. This is not part of Recharge's standard turnkey solution.
- This feature is not supported by Recharge as per the design and integration policy since it requires custom coding on your end.
- This documentation is meant to be used as a reference in order for you, your team, or a recommended third-party developer to carry out.
General implementation
Recharge Checkout on Shopify
If you installed Recharge before November 2nd, 2020 and your cart directs to the Recharge Checkout on Shopify, you will need to specify the variant_id, quantity, interval unit, and interval frequency.
Add a listener
- Add a listener to the "add to cart" link button.
- Within the listener, call the addItemToCart function, and specify parameters for:
- variant_id
- quantity
- interval unit (e.g. Months)
- interval frequency (number, set as string)
Recharge will read the specified properties once the order has been processed and create the customer and order info in the Recharge back-end.
Identify parameters
For the variant_id, it is recommended to use the variant ID of the original product, not the hidden auto-renew product that is created by Recharge. However, if the price is different you will need to use the hidden, auto-renew product. Use the following Liquid code:{{ variant.metafields.subscriptions.discount_variant_id }}
You can then call the function addItemToCart and pass the variant ID of the product you're adding, the frequency, and the unit type.
See example code
<script>
$('#add-to-cart-button').click(function(){
addItemToCart(949931647, 1, "1", "Months")
});
</script>
<script>
function addItemToCart(variant_id, qty, frequency, unit_type) {
data = {
"id": variant_id,
"quantity": qty,
"properties": {
"shipping_interval_frequency": frequency,
"shipping_interval_unit_type": unit_type
}
}
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
window.location.href = '/cart';
}
});
window.location = '/checkout';
}
</script>
Shopify Checkout Integration
If you installed Recharge after November 2nd, 2020 and your cart directs to the Shopify Checkout Integration, you can add an item to the cart with Ajax by specifying the variant_id, quantity, and selling_plan.
Add a listener
- Add a listener to the "add to cart" link button.
- Within the listener, call the addItemToCart function, and specify parameters for:
- variant_id
- quantity
- selling_plan
Identify parameters
- To identify the variant_id, refer to Shopify's guide to find a variant ID.
- If a Shopify product only has one subscription interval option, you can use liquid code to get the first selling plan ID associated with the subscription:
{{product.selling_plan_groups[0].selling_plans[0].id}} - If a product has multiple interval options, you will have to loop through the selling_plan_groups and then the selling_plans parameter to get the relevant ID for the given interval option.
See example code
<input type="button" id="add-to-cart-button" value="ADD TO CART" onClick="addItemToCart(36807328039071, 1, {{product.selling_plan_groups[0].selling_plans[0].id}})">
<script>
function addItemToCart(variant_id, qty, selling_plan) {
data = {
"id": variant_id,
"quantity": qty,
"selling_plan": selling_plan
}
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
window.location.href = '/cart';
}
});
}
</script>
Add multiple products
Previously, Shopify had limitations on how many products you could create at a time. However, they now allow you to submit multiple products.
For more information on Shopify's suggested method for doing this, visit Shopify's Ajax API guide.
Add a product from an external site
If you want to add a product from an external site, you still need to have a Shopify page that contains the Ajax code and performs a redirect to the cart page. You cannot call the Shopify Ajax code from an external site, it must be hosted on your Shopify site.
Combining different prepaid intervals into one product page
Note: This section only applies to Shopify merchants using the Recharge Checkout on Shopify.
You may have a prepaid product that you would like to offer at varying frequencies and prices. For example, customers can sign up for a 3-month, 6-month, or 12-month prepaid.
Due to limitations with how Shopify handles pricing, each prepaid option must be its own product with a unique subscription rule in Recharge. As a result, each product will have its own product page on your website.
You can use custom code to consolidate all frequency options for a prepaid product on a single page. You would need to specify the dynamic variables in an Ajax call, such as the properties and variant ID).
For example, if the customer clicks on the 3-Month option, you have to change the value to the following:
- properties[charge_interval_frequency] = 3
- properties[charge_interval_unit_type] = Months
The variant ID needs to be changed based on which option is selected. From the example in the image, this would be 1-month, 3-months, or 6-months prepaid options. Each product should have its own subscription rule, and with the appropriate variant ID the respective product is selected. This is especially important for prices of these separate products.
