购买氢的SDK 愿望列表

将愿望列表 K 纳入您的 Shopify 氢项目 .

安装软件包 npm i @appmate/wishlist-hydrogen。 。 。 .

创建客户端

设置一个 Wishlist K 客户端 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,
  }),
});

添加类型定义 remix.env.d.ts。 。 。 .

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

添加组件

复制文件 components/WishlistButton.tsx 从实例.

复制文件 components/WishlistGrid.tsx 从实例.

复制文件 components/WishlistLink.tsx 从实例.

添加愿望列表提供者

将主布局调整到 WishlistProvider。 。 。 .

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

创建愿望列表路由

复制文件 routes/($locale).wishlists.$wishlistHandle.tsx 从实例.

提交愿望列表组件

渲染器 WishlistLink 在标题.

<WishlistLink />

渲染器 WishlistButton 在产品页面.

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