Skip to main content

Placeholders

Overview​

index.html123456789101112<body> ... <!-- Widget --><divclass="gw-widget"style="display:block"data-gw-id="123"></div> ...</body>mystore.myshopify.com4.8 (128)gw-widgetInjection

Inject a widget on the page by creating an empty div element with the necessary class name. Add style="display:block" to ensure visibility since Shopify hides empty div blocks in embedded mode.

Instructions​

Creating the placeholder​

  1. Create an empty div element.
  2. Add the necessary class name for the widget.
  3. Set the display style to block.
<div class="widget-placeholder-class-name" style="display:block"></div>

Adding data attributes​

Some widgets require data attributes to pass information. Refer to the widget documentation for required attributes.

<div
    class="widget-placeholder-class-name"
    style="display:block"
    data-gw-attribute1="value1"
    data-gw-attribute2="value2"
></div>

Dynamic Data Attributes​

Dynamic data attributes are HTML attributes that can be updated after initial widget rendering to reflect changes in application state or user behavior. These attributes allow Growave widgets to react dynamically without requiring a full page reload.

Common Dynamic Attributes​

Some Growave widgets support dynamic attributes that are automatically observed for changes and marked as (dynamic) in the documentation:

  • data-gw-variant-id (optional, dynamic): Specifies the unique identifier for the product variant whose rewards points will be displayed.
  • data-gw-product-quantity (optional, dynamic): Sets the product quantity for rewards points calculation.

Important Considerations​

Update Responsibility

To ensure widgets display the correct data in their UI, consider updating dynamic data attributes whenever your application state changes.

Updating Dynamic Attributes​

You can update dynamic data attributes using standard JavaScript DOM methods:

function updateProductVariant(newVariantId, newQuantity) {
    // ...some logic

    // Find the widget
    const earnPointsWidget = document.querySelector(
        '.gw-rd-earn-points-product-page-widget-placeholder'
    );

    if (earnPointsWidget) {
        // Update the attributes - widget will automatically re-render
        earnPointsWidget.setAttribute('data-gw-variant-id', newVariantId);
        earnPointsWidget.setAttribute('data-gw-product-quantity', newQuantity);
    }
}

Best Practices​

  1. Always validate data: Ensure the new attribute values are valid before setting them.
  2. Handle errors gracefully: Check if widgets exist before attempting to update them.