Show selling plan on template and adding it to cart

wtekimam
Visitor
1 0 2

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

Replies 11 (11)

Arundas
Shopify Partner
72 3 96

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? Email me!
Nobaked2012
Visitor
1 0 0

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

Arundas
Shopify Partner
72 3 96

@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? Email me!
Arundas
Shopify Partner
72 3 96

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

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.

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? Email me!
Arundas
Shopify Partner
72 3 96

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.

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? Email me!
leoparme
Visitor
1 0 0

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

mahbub182004
Visitor
1 0 0

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

 

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

 

GraphicPass
Shopify Partner
6 0 1

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 }}

 

ITG
Visitor
2 0 0

Try this

 

{% if product.selected_or_first_available_selling_plan_allocation %}
  <select name="selling_plan" id="selling_plan">
    {% for variant in product.variants %}
      {% for allocation in variant.selling_plan_allocations %}
        <option
          data-plan-name="{{ allocation.selling_plan.name }}"
          value="{{ allocation.selling_plan.id }}"
          price="{{ allocation.price }}"
        >
          {{ allocation.selling_plan.name }}
        </option>
      {% endfor %}
    {% endfor %}
  </select>
{% endif %}

 

Someone2021
Visitor
1 0 1

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.

Sierra3
Visitor
3 0 0

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.

 

<input type="button" id="add-to-cart-button" value="ADD TO CART" style="background-color: #ffffff; color: #000000; width: 100%; padding-top: 15px; padding-bottom: 15px;" onClick="addItemToCart(VARIANT_ID, 1, SELLING_PLAN_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(carthtml) {
$('cart-drawer').html($(carthtml).find('cart-drawer').html());
}
});
}
</script>

 

 


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:

 

<input type="button" id="add-to-cart-button" value="ADD TO CART" style="background-color: #ffffff; color: #000000; width: 100%; padding-top: 15px; padding-bottom: 15px;" onClick="addItemToCart(VARIANT_ID, 1, SELLING_PLAN_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>

 

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