Add a Subscription to Cart

Each product is tied to a subscription offer which details the different subscription frequencies and discounts that may be applied, amongst other things. Using our components it is possible to retrieve these offers and build your own customized subscription interface.

Defining the og-offer Element

We provide a way to customize how offer information is displayed on the page. The following code will present the default offer for the given product ID:

1
<og-offer product="your-product-id"></og-offer>

Alternatively, you can set the product ID using JavaScript:

1
<og-offer id="my-dynamic-offer"></og-offer>

Location

The location attribute allows different offers to display in different locations (e.g. PDP vs. Cart). The value can be any string.

Note: development work will be required to add the location attribute to the element (i.e. location="X").

Recommended location naming conventions:

• PDP — Product Detail Page offer
• Cart — Shopping Cart offer
• Order Review — Order Review offer
• Confirmation — Confirmation page offer

Main.js

Ordergroove’s main.js must be tagged on every page where an <og-offer> element lives. It loads your offer content and styling. The script should only be tagged once per page and can render multiple offers on the same page.

The script URL is made up of two parts: the frontend static domain and your Merchant ID. Use the correct domain for your environment:

• Staging: https://staging.static.ordergroove.com
• Production: https://static.ordergroove.com

If you need your Merchant ID, please reach out to support.

1
<script type="text/javascript" src="<STATIC_DOMAIN>/<MERCHANT_ID>/main.js"></script>

Writing Custom Offer Content

The <og-offer> element provides 2 slots that can be populated with custom content:

• slot="standard-template"
• slot="iu-template"

standard-template

Use this slot to place content when a standard offer is presented to the user:

1
<og-offer product="your-product-id">
2
  <div slot="standard-template">
3
    This content will appear once a valid offer exists.
4
  </div>
5
</og-offer>

From here you can start creating your custom offer experience using Ordergroove offer web components.

Offer Context

Most web components such as og-optin-button or og-optin-status require a product attribute. However, when these components are wrapped inside an <og-offer> element using its slots, they will inherit the product ID from the parent <og-offer> if their own product attribute is not specified:

1
<!-- specify product using attributes -->
2
<og-optin-button product="my-product-id"></og-optin-button>
3
<og-optin-status product="my-product-id"></og-optin-status>
4
5
<!-- specify product using og-offer context -->
6
<og-offer product="my-product-id">
7
  <og-optin-button></og-optin-button>
8
  <og-optin-status></og-optin-status>
9
</og-offer>

CSS Properties and Scope

A feature of web components and the shadow DOM specification is that styles are scoped — you can’t directly modify most CSS rules within our components. Learn more about shadow DOM.

We have exposed the following CSS custom properties (variables) for styling:

Here is a sample variable declaration:

1
* {
2
  --og-global-font-family: Arial, Helvetica, sans-serif;
3
  --og-global-font-size: 15px;
4
  --og-global-font-color: #bd10e0;
5
  --og-tooltip-font-family: Arial, Helvetica, sans-serif;
6
  --og-tooltip-font-size: 13px;
7
  --og-tooltip-font-color: #298266;
8
  --og-upsell-font-family: Arial, Helvetica, sans-serif;
9
  --og-upsell-font-size: 13px;
10
  --og-upsell-font-color: #298266;
11
  --og-upsell-background-color: #7cf8d1;
12
  --og-modal-button-font-family: inherit;
13
  --og-modal-button-font-size: 12px;
14
  --og-modal-button-color: inherit;
15
  --og-modal-button-background-color: #e6e6e6;
16
  --og-modal-primary-button-color: inherit;
17
  --og-modal-primary-button-background-color: #00449e;
18
}

Ordergroove sets these variables at the global scope through our UI:

1
* {
2
  --og-global-font-color: 12px;
3
  ...
4
}

You can override them for specific sections by defining your own values, which will take precedence over the global ones set by Ordergroove:

1
.my-section {
2
  --og-global-font-color: 10px;
3
  ...
4
}