useWishlist
Read and change the customer's wishlist, shared across every component on the page.
Use useWishlist for a heart button, a wishlist counter or any "is this saved?" check. Every component that calls it sees the same list.
Example
import { useWishlist } from '@salla.sa/twilight-theme-engine/hooks/useWishlist';
export function WishlistButton({ productId }: { productId: number }) {
const { has, toggle, loading } = useWishlist();
return (
<button onClick={() => toggle(productId)} disabled={loading} aria-pressed={has(productId)}>
{has(productId) ? 'Remove from wishlist' : 'Add to wishlist'}
</button>
);
}API
function useWishlist(): UseWishlistResult;| Prop | Type | Description |
|---|---|---|
ids | number[] | Product ids currently in the wishlist. |
count | number | Number of ids. |
has | (id: number) => boolean | Whether a product is in the wishlist. |
add | (id: number) => Promise<boolean> | Adds a product through the Salla SDK. Resolves true on success, false on failure. |
remove | (id: number) => Promise<boolean> | Removes a product. Resolves true on success, false on failure. |
toggle | (id: number) => Promise<boolean> | Removes the product if it is in the list, otherwise adds it. |
loading | boolean | true while an add or remove is running. |
error | string | null | Message of the last failure, or null. |
Gotchas
- On the server and during hydration
idsis empty, so a "saved" state appears only after the page loads in the browser. - All components share one store. The SDK listeners are registered once, and every
useWishlist()updates together, including when the SDK adds or removes an item elsewhere. - The list is kept in the browser's storage under
salla::wishlist. add,removeandtogglecallSalla.wishlist. Without the SDK, the id is still tracked locally.- For a guest, Salla shows its own "log in" notice and saves nothing:
addandtoggleresolvefalse, anderrorholds the SDK's message.
Next
ProductCardalready includes a wishlist button.- React to cart events shows how to listen to SDK events.
- Salla SDK and events