Custom Platform and Headless Subscription Implementation

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.

Requirements

Follow the standard tagging instructions for your e-commerce site as outlined in the integration guide. 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)"]
  }
}

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