Skip to main content

RewardsEarnPointsProductPageWidget

This widget displays the points a customer will potentially receive when purchasing a specific product, based on the Place order rule settings.

Activating the widget​

To enable this widget, go to Growave admin -> Rewards -> Settings. In the "Points program status" section, click the "Enable" button next to the "Program is currently" block. Once enabled, this block will display "Program is currently Enabled".

Behavior​

  • If a customer is in a VIP Tier with a points multiplier, the widget displays the adjusted points amount when they are logged in.
  • The widget does not consider Reward amount calculation settings, such as:
    • Excluding discounts and gift cards
    • Including taxes and shipping
  • This widget only works with the Place order rewardable action.

Widget example​

Widget example

Code​

Liquid
<div
    class="gw-rd-earn-points-product-page-widget-placeholder"
    data-gw-product-id="{{ product.id }}"
    data-gw-variant-id="{% if product.selected_or_first_available_variant %}{{ product.selected_or_first_available_variant.id }}{% else %}null{% endif %}"
    data-gw-product-quantity="1"
    data-gw-widget-shadow-root-enabled="true"
    style="display: block; --gw-background-color: #ffffff; --gw-font-color: #000000;"
></div>

Attributes​

Attributes
data-gw-product-idrequired
Specifies the unique identifier for the product whose rewards points will be displayed.
data-gw-variant-id?optional
Specifies the unique identifier for the product variant whose rewards points will be displayed.
data-gw-product-quantity?optional
Sets the product quantity for rewards points calculation.
data-gw-widget-shadow-root-enabled?optional
Enables or disables the use of the Shadow DOM for the widget. Set to "true" to encapsulate the widget's styles and structure within the Shadow DOM, preventing style conflicts with the rest of the page.

CSS variables​

  • --gw-background-color: Sets the background color of the widget.
  • --gw-font-color: Sets the font color of the widget.

Dynamic Updates​

Dynamic Data Attributes

If you have a dynamic cart, a single page app, or anything that changes the DOM containing Growave UI components without a full page reload, make sure to update the relevant dynamic data attributes so the widget displays the correct information. See the Dynamic Data Attributes section for more information.