Add selling plans

You can show the available selling plans for a product on the product page. You should also show any selected selling plans to customers on the cart page and customer order page.

Show available selling plans on the product page

Selling plan groups and individual selling plans have a similar structure to products and variants. You can view selling plan groups like products, where there are multiple options available to comprise an individual selling plan, similar to variant options to comprise an individual variant.

You can access the available selling plan options through the selling_plan_groups attribute of the product object. For each selling_plan_group, you should output each of its options inside the product form.

To track the ID of the selected selling plan, you need to include an input with an attribute of name="selling_plan" whose value will be the ID. If there’s no selected selling plan, the value should be empty.

For example:

Update selling plan information

There are two storefront interactions to consider around selling plans:

Variant selection

When a customer selects a variant, the selling plan options might need to be updated based on the newly selected variant. As such, you need to detect this change, and update which selling plan options are displayed.

To intercept a variant selection event, you can add a change event listener to the general product form. You can access the selected variant ID through the form input with an attribute of name="id", and the general product object can be saved for access in JavaScript with the JSON filter. The above example has done this through a data attribute on the selling plan option selector container.

With the selected variant ID and the product object, you can access the selected variant object, and therefore any associated selling_plan_allocation objects to update your selling plan option display.

For example:

Selling plan option selection

When a customer selects a selling plan option, it also changes the selected selling plan, which means that you need to update the selling plan input. This input has an attribute of name="selling_plan", and it’s value is the selling plan ID.

In order to find the selling plan ID of the selected selling plan, you need to compare the selected selling plan options with the available selling plans on the selected variant.

You can access the selected variant ID through the form input with an attribute of name="id". and the product object can be saved for access in JavaScript with the JSON filter. The above example has done this through a data attribute on the selling plan option selector container.

With access to the selected variant ID and the product data, you can find the selected variant object and its available selling plans. This allows you to compare the selected selling plan options against the available selling plans to find the selected selling plan ID.

For example:

Show selected selling plans to customers

When a customer selects a selling plan, they should see the name of that selection in two places:

  • In the cart
  • On the customer order page

The selected selling plan, if there is one, is accessible through the selling_plan_allocation attribute of the line_item object.

For example: