Show selling plan on template and adding it to cart

Technical Q&A
1

I am trying to render a selling plan on my development store template but found that it can’t render. I have checked using graphQL to my store and the selling plan group exists and it contains the product, the variant, and the selling plan.

The code I used in the template can be found here: https://shopify.dev/tutorials/customize-theme-showing-selling-plan-groups-and-selling-plans.

{% form 'product', product %}
{% for group in product.selling_plan_groups %}

{% endfor %}
{% endform %}

In addition, I also cannot add it to cart using cart/add.js with the following payload (I hardcoded the variant id and the selling plan that is registered on the website)

let formData = {
 'items': [{
  'id': 12312312312312,
  'quantity': 1,
  'selling_plan': 123123123,
  }]
};

fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});

Are there any insights on how I might add a selling plan to cart or show it on the product-templates.liquid page? Thank you

2 Likes
2

Selling Plan API is SOOOOO NEW there’s hardly any documentation on it. For example, take this error:

Cart Error: Variant can only be purchased with a selling plan.

I got this error when trying to add a subscription-only product and when I searched the exact text online, I got only 2 results. Yes, TWO results from the entire world wide web - and they didn’t help! What’s worse is that the app managing the selling plan system called “Recurring Billing by ReCharge” doesn’t actually inject the necessary code for showing the subscriptions, and it has such poor documentation on their new Shopify Checkout implementation (also they explicitly refuse to support with code editing help AND they paywalled their chat support). This made it even harder to first of all figure out what the dam problem is, and then even to figure out what the dam solution is!

While I started just like you with the same first code, it is so poorly written that I had to heavily modify it. I think the second code has a lot more features and a different look, but I didn’t bother to try as I was in a rush to finish the job (but I did adopt the “one-time purchase” option from it). Honestly I don’t even know why the documentation is so poor they are confusing us with two codes with slightly different ways of rendering the subscription options, and don’t even explain what the difference is.

Anyway these are my modifications (for anyone who wants to fast track their selling plan implementation):


  {% for group in product.selling_plan_groups %}
  
  {% endfor %}
6 Likes
3

Which code section did you place this in to fix the error?

4

The code should be placed inside the cart form tag (usually or {% form %}) in the desired location where you want it to display the options near the Add to Cart button.

5

A quick update:

If you use an app called “Dynamic Product Options”** and your selling plans are not working (you get the checkout error message), then you need to add an extra bit of code in the app’s Settings, under “Global Extra Javascript”:

** (for similar apps: see the technical summary and note below)

jQuery(window).on('dpo_before_form_submit', function (e, form) {
    jQuery(form).append(jQuery('[name="selling_plan"]'));
});

Arundas_0-1615904483390.png
Arundas_0-1615904483390.png699×523 16.9 KB

Technical Summary: The code is necessary because apps like DPO intercept the submission of your product’s “add to cart” form, then create their own dummy form and submit that to the cart instead. Older apps that are unaware of the new Selling Plan API may not include the new input fields for selling plans when creating the dummy form, thus cause the checkout to fail when a selling plan ID is expected by Shopify checkout. The custom code above fixes the problem by forcing the addition of selling plan ID to the dummy form.

Note: If you’re using a different app that causes the same problem, you need to contact that app’s support, show them this post and ask them how to achieve the same. The above code will only work with the DPO app.

6

Another quick update:

The code in the last post is no longer necessary! DPO app developer(s) added the correction directly in their base JavaScript. Just be sure to clear your cache to force reloading their JavaScript code.

7

I am also facing the same problem I am not able to view any selling plan into the product details though I have created selling plan group and added products into that.

1 Like
8

I don’t know how to solve the problem and i’m going to put “subscription only” without the “one time” option

9

The codes work but don’t render nicely; the radio button, and the text not aligning. Any suggestion to load them a nicer way.

mahbub182004_0-1625712243845.png
mahbub182004_0-1625712243845.png259×380 5.34 KB

Update - never mind - I managed to make it work with some inline CSS.

10

This works great thanks! Do you know how to display the adjusted price and discount percentage? I’ve attempted using liquid below, but none are working.

{{ selling_plan_allocation.price_adjustments[0].price | money }}
{{ selling_plan.price_adjustments[0].price | money }}
{{ selling_plan.price | money }}
11

Try this solution to add a selling plan to the cart drawer by embedding a button anywhere:

I added this directly to the theme by using the custom liquid option.

The first value is the variant ID
Second is Quantity
Third if the selling plan ID

To add a selling plan from any page/button directly to the cart:

Get more info from:
https://support.rechargepayments.com/hc/en-us/articles/360008683774-Adding-an-item-to-the-cart-with-…

How to find the selling plan ID:
https://community.shopify.com/c/technical-q-a/how-to-find-subscription-product-selling-plan-id/m-p/1…

Add to cart drawer:
https://stackoverflow.com/questions/75725480/shopify-refresh-cart-drawer-when-adding-new-items-to-ca…

12

Try this

{% if product.selected_or_first_available_selling_plan_allocation %}
  
{% endif %}
1 Like