Add 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.

Before you start

🚧

Note

Shopify has new requirements for submitting cart properties, and we no longer require the 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

🚧

Note

Ensure that you are implementing the correct Ajax code for your version of Recharge. Using the wrong version or implementing both versions may cause the cart/checkout to break.

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

1. 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.

🚧

Note

It is recommended that you run an Ajax cart/clear before calling the Ajax add-to-cart function.

Identify parameters

For thevariant_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.

<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

1. Add a listener to the "add to cart" link button.
2. Within the listener, call the addItemToCart function, and specify parameters for:

• variant_id
• quantity
• selling_plan

🚧

Note

It is recommended that you run an Ajax cart/clear before calling the Ajax add-to-cart function.

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.

<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 pre-paid intervals into one product page

🚧

Note

This section only applies to Shopify merchants using the Recharge Checkout on Shopify.

You may have a pre-paid 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 pre-paid.Ajax.jpg

Due to limitations with how Shopify handles pricing, each pre-paid 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 pre-paid 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 pre-paid 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.

🚧

Note

The unit type must be consistent between charge and shipping frequencies. For example, if the charge frequency is set to Months, the shipping frequency also must be set to Months.