Custom Platform Headless Subscription Implementation

Overview

When using Ordergroove’s offers in a headless environment, 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. 

Note: Some aspects of this article may require technical expertise with coding languages.

If you do not currently have someone on staff or contract that can provide that level of technical assistance, Ordergroove suggests seeking out that level of support before attempting to add or alter any working code relating to your subscriptions or storefront.

Please follow the standard tagging instructions for your e-commerce site as outlined in the integration guide. Please be sure to tag your cart platform as well!

Examples

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");
};

When you write the items from your headless page to where your cart is hosted, you’ll want to be sure to create a local storage object called OG_STATE on your cart page. Make sure to make updates to this object any time a customer makes changes between the headless platform and the cart platform. 

OG STATE Object

OG_STATE:
{
  "sessionId":"(session id)", // generated during initial customer visit and doesn't need to change on page refresh
  "optedin":[ // List of all products that a customer opts into during their visit prior to checkout
    {
       "id":"(product variant id)",
       "frequency":"(every)_(every_period)"
    },
    {
       "id":"(product variant id)",
       "frequency":"(every)_(every_period)"
    }
  ],
  "productOffer":{
    "(product variant id)":["(offer id)"],
    "(product variant id)":["(offer id)"]
  }
} 

Sample with actual data

OG_STATE:
{
  "sessionId":"15fc1b98803211ea8a5abc764e10b970.12345.1596647632",
  "optedin":[
        {
        "id":"17300125089851",
        "frequency":"1_3"
        }
  ],
  "productOffer":{
      "17307510177851":[
        "160f5f5a803211eaaef3bc764e10b970"
      ]
  }
}

Frequency Mapping

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