Wishlist Feature allows your users to add items to their wishlist by simply clicking on the wishlist icon. After clicking on the icon an event will be triggered on the SDK, which will confirm the success or the fail of wishlist operation for the product.

This walkthrough shows how to unlock the wishlist feature in your app.

Storyly emits a wishlist update event to your app; you approve or reject the change after syncing with your own backend. This “acknowledge/deny” handshake mirrors Storyly’s cart update flow in RN, where the SDK provides approve/reject callbacks to finalize UI state.

📘

Before you begin

Make sure the wishlist feature is turned on on the Storyly Dashboard.

onWishlistUpdate

This walkthrough shows you how to handle Wishlist events in your app. Wishlist events provide insight into what is happening on the Storyly SDK related to the products.

private handleWishlistUpdate = (event: any) => {
    event.item.wishlist = !event.item.wishlist;

    // use this line if you want to approve wishlist change
    this.storylyView?.approveWishlistChange?.(event.responseId, event.item);
    // OR
    // use this line if you want to reject wishlist change
    this.storylyView?.rejectWishlistChange(reason?).(event.responseId, event.item);
  };

By using onWishlistUpdate you must approve or reject via callback methods provided approveWishlist and rejectWishlistChange, this way the SDK will be able to update the UI state according to the handshake.

🚧

Callbacks to Acknowledge

• approveWishlistChange() -> call after the match in your backend is "Ok"
• rejectWishlistChange(reason?) → call on validation failure or server error

<Storyly
  style={{ width: '100%', height: 120 }}
  ref={ref => { this.storyly = ref }}
  storylyId=STORYLY_INSTANCE_TOKEN
  onWishlistUpdate={this.handleWishlistUpdate}
...
/>

hydrateWishlist

This function allows you to hydrate your wishlist products. hydrateWishlist tells Storyly which products are already added to the wishlist in your system, so Storyly can render them with the correct “wishlist” state at the moment of story load. Items you send should have wishlist parameter set as true. If a product isn’t in a wishlist in your backend, don’t include it.

<Storyly
  style={{ width: '100%', height: 120 }}
  ref={ref => { this.storyly = ref }}
  storylyId=STORYLY_INSTANCE_TOKEN
  onLoad = {
    event => {
        this.storylyView.hydrateWishlist([{
            productId: "1",
            productGroupId: "1",
            title: "Running Shoes",
            desc: "Lightweight running shoes for everyday training",
            price: 120,
            salesPrice: 99,
            currency: "USD",
            imageUrls: ["https://example.com/shoes1.png"],
            url: "https://example.com/product/running-shoes",
            variants: [{
                    variantId: "v1",
                    name: "Size 42",
                    price: 120
                },
                {
                    variantId: "v2",
                    name: "Size 43",
                    price: 120
                },
            ],
            ctaText: "Buy Now",
            wishlist: true,
        }])
    }
}
...
/>