Skip to main content

RewardsEarnPointsCartWidget

This widget displays the number of points a customer can earn when purchasing items currently in their cart, based on the Place order rule settings.

Activating the widget​

To enable this widget:

  1. Go to Growave admin -> Rewards -> Settings.
  2. 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".
  3. Ensure the Place order rule is enabled under Rewards -> Points -> Ways to earn.

Behavior​

Points Calculation

This widget calculates points using the Place order rule only. It does not factor in points modifiers such as boost campaigns or other points modifiers, or bonus points.

The attribute value passed to this widget must be in cents, not standard currency units. This is because the component divides the value by 100 before applying the purchase rule multiplier. For example, if your cart total is $569.99, the value passed should be 56999, not 569.99. This behavior ensures compatibility with how Shopify exposes {{ cart.total_price }} in Liquid. If you're using this component outside of Shopify, make sure to manually convert the cart total into cents by multiplying it by 100 (even if your currency doesn't use subunits).

Widget example​

Widget example

Code Examples​

Using Shopify cart variable​

<div
    class="gw-rd-earn-points-cart-widget-placeholder"
    data-gw-cart-total-price="{{ cart.total_price }}"
    data-gw-widget-shadow-root-enabled="true"
    style="display: block"
></div>

Using custom value​

<div
    class="gw-rd-earn-points-cart-widget-placeholder"
    data-gw-cart-total-price="2999"
    data-gw-widget-shadow-root-enabled="true"
    style="display: block"
></div>

Attributes​

Attributes
data-gw-cart-total-pricerequired
Specifies the total cart amount in cents 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.

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.