The Subscription LifecycleEnrollmentAdd a Subscription to Cart

Offer Code Elements

Reference for Ordergroove web component elements and their attributes and slots
View as Markdown

og-frequency-status

This element is aware of the frequency associated with a given opt-in. It contains three slots — one displayed when subscribed, one when not subscribed, and one when subscribed but the frequency does not match the default frequency.

Attributes

AttributeType
default-frequencyFrequency
disabledBoolean
frequencyFrequency
productString
subscribedBoolean

Slots

SlotDefault
frequency-mismatchBy default this slot is empty
not-subscribedBy default this slot is empty
subscribedBy default displays a formatted version of the frequency associated with the opt-in

og-incentive-text

This element displays information from dynamic incentives. By default, the component searches for an ongoing discount class. The initial attribute can be specified to force a search in initial incentives.

Attributes

AttributeDescriptionExample
DiscountAmountShows discount amount in dollars<og-incentive-text from="DiscountAmount"></og-incentive-text>
DiscountPercentShows discount amount in percent<og-incentive-text from="DiscountPercent"></og-incentive-text>
ShippingDiscountPercentShows whether or not shipping is free<og-incentive-text from="ShippingDiscountPercent"></og-incentive-text>
initialCan be applied to discounts to force showing the initial discount<og-incentive-text from="DiscountPercent" initial></og-incentive-text>

og-next-upcoming-order

This element displays the placement date of the customer’s next upcoming order.

og-offer

This element displays a complete offer, allowing one to opt in, opt out, and change the frequency of an opt-in. The product attribute is required except when preview-standard-offer or preview-upsell-offer are true.

If the product is upsell-eligible, the element displays an upsell offer. If the product is not upsell-eligible but is subscription-eligible, it displays an offer for the specified type, or a radio-type offer if type is not specified. Upsell eligibility and subscription eligibility are determined at runtime based on response data for the specified product. If a product is neither upsell-eligible nor subscription-eligible, nothing is displayed.

This element contains two slots. The iu-template slot is displayed when the product is upsell-eligible. The standard-template slot is displayed when the product is subscription-eligible but not upsell-eligible.

Attributes

AttributeType
default-frequencyFrequency
first-order-place-dateString (YYYY-MM-DD)
locationString
preview-standard-offerBoolean
preview-upsell-offerBoolean
productString
product-componentsList of Product Components
product-to-subscribeString
show-tooltipBoolean
typeOffer Type

Slots

SlotDefault
upsellBy default displays an upsell offer comprising a button which, when clicked, shows a modal with the option to opt in
standard-templateBy default displays a radio, select, or toggle offer based on the value of the type attribute

og-optin-button

This element allows a customer to opt in to an offer. It is typically used alongside og-optout-button to enable toggling opt-in status. This element contains two slots — a default slot and a label slot nested within the default slot (displayed only if the default slot has not been overridden).

Attributes

AttributeType
default-frequencyFrequency
frequencyFrequency
optin-button-labelString
productString
subscribed (read-only)—

Slots

SlotDefault
(unnamed)By default displays a radio button to opt in, along with a label showing the value of offerOptInLabel
labelBy default displays the value of offerOptInLabel

og-optin-status

This element is aware of a customer’s opt-in status for a given product. The customer may either be subscribed or not subscribed, corresponding to the subscribed and not-subscribed slots. Two additional slots — frequency-match and frequency-mismatch — can be used when the opt-in frequency either matches or does not match the default frequency.

Attributes

AttributeType
productString
subscribedBoolean

Slots

SlotDefault
frequency-matchBy default this slot is empty
frequency-mismatchBy default this slot is empty
not-subscribedBy default displays the value of optinStatusOptedOutLabel
subscribedBy default displays the value of optinStatusOptedInLabel

og-optin-toggle

This element allows a customer to toggle their opt-in status between subscribed and not subscribed. This element contains one unnamed slot.

Attributes

AttributeType
frequencyFrequency
productString
subscribed (read-only)—

Slots

SlotDefault
(unnamed)By default displays a checkbox to toggle opt-in status, along with a label showing the value of optinStatusOptedInLabel

og-optout-button

This element allows a customer to opt out of an offer. It is typically used alongside og-optin-button to enable toggling opt-in status. This element contains two slots — a default slot and a label slot nested within the default slot (displayed only if the default slot has not been overridden).

Attributes

AttributeType
default-frequencyFrequency
frequencyFrequency
optin-button-labelString
productString
subscribed (read-only)—

Slots

SlotDefault
(unnamed)By default displays a radio button to opt out, along with a label showing the value of offerOptOutLabel
labelBy default displays the value of offerOptOutLabel

og-select-frequency

This element displays a select control that allows a customer to view and modify the frequency of their opt-in.

Attributes

AttributeType
default-frequencyFrequency
disabledBoolean
frequenciesList of Frequencies
frequency (read-only)Frequency
subscribed (read-only)—

Slots

SlotDefault
(unnamed)By default contains the configured frequency as a select option. You can substitute it with your own <option> tags with values such as 2w, 3m, or 10d to represent different frequencies.

og-tooltip

This element displays a tooltip trigger. When a customer hovers over the trigger, a tooltip is displayed.

Slots

SlotDefault
triggerBy default displays the value of offerTooltipTrigger
contentBy default displays the value of offerTooltipContent