Skip to main content

Storefront SDK Introduction

Growave SDKDReviews DataEEventsMMethodsSStateKitYour WidgetCustomer Reviews4.8128 reviewsJDJohn D.2 days agoVerifiedASAlice S.1 week agoVerifiedMKMike K.3 days agoVerifiedYour Codeslider.js12345678// Get reviewsconst kit = getStateKit();const reviews = kit.query.selectAll();// Render sliderrenderSlider(reviews);

The Growave SDK allows you to interact with Growave features programmatically. With the SDK you can:

  • Listen to events (widget opened, product added to wishlist, etc.)
  • Call methods (open drawers, show modals, authenticate users)
  • Access reactive state for reviews, wishlists, and products

The SDK initializes automatically when Growave loads on your page.

Custom Storefronts

For Hydrogen, headless, or mobile WebView integrations, see Custom Storefront.

Ensuring SDK readiness​

To avoid errors, ensure the SDK is fully loaded before interacting with it. This is achieved by listening for the gwSdkReady event. Using SDK methods before the SDK is ready can result in unexpected behavior and errors.

function onSdkReady() {
    // Your code here
    console.log("SDK is ready");
}

if (window.gw && window.gw.sdk) {
    onSdkReady();
} else {
    document.addEventListener("gwSdkReady", onSdkReady);
}

This code ensures that your application interacts with Growave only after the SDK is fully initialized.

SDK modules​

The Growave SDK is modular, allowing developers to interact with specific Growave applications through dedicated modules. Each module corresponds to a particular Growave app, enabling you to load and use only the features relevant to your storefront.

Benefits of the modular approach:

  • Efficiency: Load only the modules you need, reducing overhead
  • Flexibility: Integrate specific Growave apps without affecting other parts of your storefront
  • Scalability: Add new modules as Growave expands, without disrupting existing integrations

Working with modules​

Each module may require additional readiness checks:

  • Common module: Provides general utilities and constants; available immediately once the SDK is ready.
  • Authentication module: Handles user authentication; available when needed.
  • Reviews, Rewards, and Wishlists modules: Load when their corresponding applications are available and active. Use the runIfModuleReady method to ensure that each module is ready before executing related code.

Module identifiers​

When working with Growave modules, you can check their readiness using the respective identifiers:

  • window.gw.sdk.common.constants.modules.AUTHENTICATION
  • window.gw.sdk.common.constants.modules.REVIEWS
  • window.gw.sdk.common.constants.modules.REWARDS
  • window.gw.sdk.common.constants.modules.WISHLISTS

Example: Checking module readiness​

function onSdkReady() {
    const moduleName = window.gw.sdk.common.constants.modules.REVIEWS;

    window.gw.sdk.runIfModuleReady(moduleName, () => {
        console.log(`${moduleName} module is ready`);
        // Proceed with module-specific logic
    });
}

if (window.gw && window.gw.sdk) {
    onSdkReady();
} else {
    document.addEventListener("gwSdkReady", onSdkReady);
}

This ensures that each Growave module is ready before interaction, preventing issues due to module unavailability.