Add an Item to Cart with AJAX

Warning: 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 our design 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.

If you want to allow customers to add a subscription product to the cart from a page other than the product page, then you must use an AJAX add-to-cart function to add a variant and subscription properties to the Shopify cart.

1
Add a listener to the add to cart link button.
2

Within the listener, call the addItemToCart function, and specify params for:

  • quantity
  • variant_id
  • interval unit (e.g. Months)
  • interval frequency (number, set as string )
  • subscription_id (last digits of the URL when on the subscription ruleset page)

The subscription_id mentioned above can be found by going to Rulesets and selecting the specific rule, then flip the toggle to show Advanced Settings. You'll find the subscription_id at the bottom. 

We'll read the above-listed properties once the order is created and create the customer and/or order info in our backend within a few minutes.

Example:

<script>
$('#add-to-cart-button').click(function(){
     addItemToCart(949931647 , 1, "1", "Months", "491")
})
</script>
<script>
function addItemToCart (variant_id, quantity, shipping_interval_frequency, shipping_interval_unit_type, subscription_id) {
  data = {
      "quantity": quantity,
      "id": variant_id,
      "properties[shipping_interval_frequency]": shipping_interval_frequency, 
	"properties[shipping_interval_unit_type]": shipping_interval_unit_type,            
	"properties[subscription_id]": subscription_id
    }
  jQuery.ajax({
      type: 'POST',
      url: '/cart/add.js',
      data: data,
      dataType: 'json',
      success: function() { 
          window.location.href = '/cart'; 
      }
  });
}
</script>

The subscription_id tells our back end which subscription the product is associated to . From the ReCharge Dashboard by going to Rulesets and choosing the ruleset you've created. Select to Open Advanced Settings and you will see the subscription_id at the bottom.

For the variant_id it is recommended that you use the variant id of the original product, not the hidden auto-renew product that ReCharge creates. However if the price is different you will need to use the hidden auto renew one. Use the following:
{ { variant . metafields . subscriptions . discount_variant_id } }

Then you call the function addItemToCart  you need to pass the variant id of the product you're adding, the frequency, and the subscription id.

Adding from an External Site

If you want to use this AJAX code from an external site, you should create a page on Shopify that just has the AJAX code and then does a redirect afterwards. This is because you cannot call the Shopify AJAX code from an external site, it must be on your Shopify site.

Warning: If you have a different price between the original and auto-renew products, you will need to add the hidden auto-renew version you use in the liquid code here: { { variant . metafields . subscriptions . discount_variant_id } }

If you are using subscription-only, you will not need this.

Warning: Adding multiple products simultaneously

In Shopify, each AJAX call needs to add the items one at a time. You can loop through them and do multiple AJAX calls to add a bunch of items at once. Note that Shopify does require that the AJAX calls happen sequentially rather than simultaneously, or else the result will be inconsistent.

Shopify recommends building a queue, as mentioned in the article below: 

https://help.shopify.com/themes/development/getting-started/using-ajax-api#youre-building-a-quick-order-form-beware