@appmate/wishlist-hydrogen
v2.2.0
Published
Wishlist King SDK for Shopify Hydrogen
Downloads
1,053
Readme
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} />