Shopify Headless Subscription Implementation

When using Ordergroove’s offers in a headless environment alongside Ordergroove on Shopify Subscriptions, you’ll need to read the subscription selections the customer is making throughout their purchase journey and set those selections within the cart the customer will be completing checkout through.

Please follow the standard tagging instructions for your e-commerce site as outlined in the integration guide. Details can be found here.
If you are not on Shopify, please be sure to tag your cart pages as well. 

When a customer opts in to a subscription on a page and they then add that item to the cart, you can read the frequency and subscription opt in state by using the following javascript.

const getFrequency = ({ form }) => {
const ogOffer = form.querySelector("og-offer");
if (!ogOffer) {
return null;
}
const subscribed = ogOffer.getAttribute("subscribed");
if (subscribed === null) {
return null;
}

return ogOffer.getAttribute("frequency");
};

Shopify Merchants

For Shopify merchants, you can read this information and then use it to create a selling plan in the cart. The selling plan corresponds to the frequency that the customer has selected. You can find more details on adding selling plans to the Shopify cart by visiting this page.

For more information on selling plans, check out Shopify’s documentation for that here.

Frequency Mapping

Frequency Every: ex: 1,2,3, etc
Frequency Period: ex: 1 = days,  2 = weeks, 3 = months

Please note that the frequency in the offer needs to be mapped to the selling plan with the correct Delivery policy. For example (1_3) mapped to 1 MONTH selling plan delivery policy.