@appmate/wishlist-hydrogen

Wishlist King SDK for Shopify Hydrogen

Integrate Wishlist King into your Shopify Hydrogen project.

Install package with npm i @appmate/wishlist-hydrogen.

Create Client

Setup a Wishlist King client in server.ts.

// Create a client
const { wishlistKing } = createWishlistClient({
  shopDomain: "your-domain.myshopify.com",
  // Make sure your session stores the customer id.
  customerId: session.get("customerId"),
  cache: caches.open("wishlist-king"),
  request,
  waitUntil,
});

// Add client to request handler
const handleRequest = createRequestHandler({
  build: remixBuild,
  mode: process.env.NODE_ENV,
  getLoadContext: () => ({
    // Keep your current context and add wishlistKing
    wishlistKing,
  }),
});

Add type definition in remix.env.d.ts.

declare module "@shopify/remix-oxygen" {
  export interface AppLoadContext {
    // ...
    wishlistKing: WishlistClient;
  }
}

Add Components

Copy file components/WishlistButton.tsx from examples.

Copy file components/WishlistGrid.tsx from examples.

Copy file components/WishlistLink.tsx from examples.

Add Wishlist Provider

Render your main layout inside the WishlistProvider.

<WishlistProvider>{/* Add your layout here */}</WishlistProvider>

Create Wishlist Route

Copy file routes/($locale).wishlists.$wishlistHandle.tsx from examples.

Render Wishlist Components

Render WishlistLink in header.

<WishlistLink />

Render WishlistButton on product page.

<WishlistButton productId={product.id} variantId={selectedVariant?.id} />