Shopify Hydrogen：如何在onLineAdd提示框中展示商品信息及图片？

问题描述 #

我已实现用户将商品添加至购物车时触发onLineAdd提示通知，但无法在提示框中展示商品信息及图片。期望onLineAdd触发的通知显示「XXX（含图片）已添加至购物车」，请问这是否可行？我的代码如下：

const open = useCallback(() => {
    console.log("Opening product added popup, with image and title.")
}, []);

<ShopifyCartProvider
    onLineAdd={open}
    onCreate={open}>
    {children}
</ShopifyCartProvider>

官方Shopify Hydrogen商店已实现该功能。

解决方案 #

当然可行，核心是利用onLineAdd回调传入的新增商品行数据，提取标题、图片等信息后渲染到提示组件中，具体步骤如下：

1. 接收回调参数
   ShopifyCartProvider的onLineAdd回调会自动传入一个包含新增商品详情的对象，其中lineItem字段包含了商品的标题、图片、变体等关键信息。

2. 提取商品信息
   从参数的lineItem中取出所需数据：

• 商品标题：lineItem.title
• 商品图片：优先取变体图lineItem.variant.image，没有则用商品主图lineItem.product.image

3. 渲染提示组件
   用提取到的数据构建带图片和标题的提示框，可自定义组件样式或使用第三方UI库的弹窗/Toast组件。

修改后的完整代码示例 #

import { useCallback, useState } from 'react';

// 自定义添加成功提示组件
const ProductAddedNotification = ({ product, onClose }) => {
  if (!product) return null;
  return (
    <div style={{ 
      position: 'fixed', 
      bottom: '20px', 
      right: '20px', 
      padding: '16px', 
      backgroundColor: '#fff', 
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)', 
      borderRadius: '8px', 
      display: 'flex', 
      gap: '12px', 
      alignItems: 'center',
      zIndex: 1000
    }}>
      <img 
        src={product.image.url} 
        alt={product.image.altText || product.title} 
        width="60" 
        height="60" 
        style={{ objectFit: 'cover', borderRadius: '4px' }} 
      />
      <p style={{ margin: 0 }}>{product.title} 已添加至购物车</p>
      <button 
        onClick={onClose} 
        style={{ border: 'none', backgroundColor: '#f5f5f5', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer' }}
      >
        ×
      </button>
    </div>
  );
};

const AppCartProvider = ({ children }) => {
  const [addedProduct, setAddedProduct] = useState(null);

  const handleProductAdded = useCallback(({ lineItem }) => {
    // 提取商品核心信息
    const productInfo = {
      title: lineItem.title,
      image: lineItem.variant.image || lineItem.product.image,
    };
    setAddedProduct(productInfo);
    // 3秒后自动关闭通知
    setTimeout(() => setAddedProduct(null), 3000);
  }, []);

  return (
    <>
      <ShopifyCartProvider 
        onLineAdd={handleProductAdded} 
        onCreate={handleProductAdded}
      >
        {children}
      </ShopifyCartProvider>
      <ProductAddedNotification 
        product={addedProduct} 
        onClose={() => setAddedProduct(null)} 
      />
    </>
  );
};

说明 #

• 代码中自定义了一个固定在右下角的通知组件，你可以根据需求调整样式或替换成模态框、Toast组件等；
• 通过setAddedProduct控制通知的显示/隐藏，配合定时器实现自动关闭；
• 官方Hydrogen商店也是基于相同逻辑，通过onLineAdd获取新增商品数据来展示带图通知。

内容的提问来源于stack exchange，提问作者haveman