Show selling plan on template and adding it to cart

wtekimam
New Member
1 0 0

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 %}
<fieldset>
<legend>{{ group.name}}</legend>
{% for selling_plan in group.selling_plans %}
<input type="radio" name="selling_plan" value="{{ selling_plan.id }}">
{{ selling_plan.name }}
{% endfor %}
</fieldset>
{% 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

0 Likes

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):

<div>
  {% for group in product.selling_plan_groups %}
  <fieldset>
    <legend {%- if hidelegend %} style="display: none;"{% endif %}>Pick a subscription</legend>
    {% unless product.requires_selling_plan %}
      <input type="radio" name="selling_plan" value="" id="selling_plan_onetime"> <label for="selling_plan_onetime">One-time purchase</label><br>
    {% endunless %}
    {% for selling_plan in group.selling_plans %}
    <input type="radio" {%- if forloop.first %} checked="checked"{% endif %} name="selling_plan" value="{{ selling_plan.id }}" id="selling_plan_{{ selling_plan.id }}">
    <label for="selling_plan_{{ selling_plan.id }}">{{ selling_plan.name }}</label><br>
    {% endfor %}
  </fieldset>
  {% endfor %}
</div>
If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Check out my Fiverr gig.
0 Likes
Nobaked2012
New Member
1 0 0

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

0 Likes

@Nobaked2012 wrote:

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


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

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Check out my Fiverr gig.
0 Likes