Defining the Offer Element
The following code will present the default offer for the given product id.
Alternatively you can set the product id by using regular js.
The location will allow the display of different offers in different locations. (i.e. PDP vs. Cart) The value location can be any string.
Note, development work will be required to add the location portion of the node. (i.e. location="X")
Recommended location naming conventions and pages location="X"
- PDP (Product Detail Page)
- Cart (Shopping Cart Page)
- OR (Order Review Page)
- Confirmation (Confirmation Page)
<og-offer product="your-product-id" location="X"></og-offer>
Buy x Subscribe y
If you want to define a product that Ordergroove should create for a subscription that differs from the product tagged as the product within the HTML element, you can define the alternative product directly in the offer.
<og-offer product="x" product-to-subscribe="y"></og-offer>
If you would like to offer subscriptions for a bundle product that can have product components defined for the bundle, you can tag those components directly in the offer as they are added by the customer. Bundle components do not have a quantity attribute, so if a customer wishes to receive more than one of a single component product, it needs to be passed multiple times within the og-offer components tag
<og-offer product="bundle_product_id" product-components="["39458782806076","39458782806076","39406418165820"]"></og-offer>
First Order Place Date
If you would like to define when the customer's first recurring order will place, you can do that directly in the offer.
<og-offer product="your-product-id" first-order-place-date="2022-09-04"></og-offer>
The Ordergroove main.js will need to be tagged on all pages where an og-offer div lives. The main.js will be leveraged to load your offer content and styling. Note, the main.js should only be tagged once per page, and can be leveraged to load multiple offers onto a page. The main.js structure will consist of two elements, the frontend static domain, and your Merchant ID. The below-listed static domain will need to be changed between your staging environments to pull in the respective content promoted from Ordergroove. If you do need to request your Merchant ID, please open a Zendesk ticket.
Other helpful links for styling and customizing your offers
- How to configure and style your subscription enrollment
- Customizing offers with slots and other customizations for offer elements