import * as React from 'react'; import type { ButtonFunctionType, CopyConfig } from './types.js'; import type { BadgeProps } from '../../components/badge.js'; /** * 语义化类名 */ export type ActiveShelfSemanticName = 'root' | 'title' | 'description' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'stockTrack' | 'stockBar'; /** * 库存展示模式 */ export type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'; /** * 基础产品数据接口(来自外部数据源) */ export interface BaseProductData { sku: string; name: string; image: string; value: string; handle: string; shopify_id: string; custom_name?: string; custom_description?: string; } /** * Shopify 变体数据接口 */ export interface VariantData { /** * 产品描述 */ description?: string; /** * 变体id */ variantId: string; /** * 产品链接, 点击图片的时候跳转到该链接 */ listingLink: string; /** * 原价 */ originalPrice: string; /** * 现价 */ price: string; /** * 价格上面展示的标签文本 */ priceLabel?: string; /** * 总库存 */ totalInventory: number; /** * 可用库存数量 */ quantityAvailable: number; /** * 是否可售 */ availableForSale: boolean; /** * tags 列表(会员价,折扣,new, hot等标签信息) */ tags: Array<{ label: string; variant: BadgeProps['variant']; promotionalType?: BadgeProps['promotionalType']; } | React.ReactNode>; /** * 通用折扣数据,包括折扣title, 类型和值 */ coupon: any; } /** * 完整的产品卡片数据接口 */ export interface ProductCardData extends BaseProductData, VariantData { } /** * 产品卡片组件 Props */ export interface ProductCardProps { /** 产品数据 */ product: ProductCardData; /** 样式类名 */ className?: string; /** 是否展示标签系统 */ showTags?: boolean; /** 库存展示模式 */ stockDisplayMode?: StockDisplayMode; /** 库存阈值(当模式为 below-quantity 或 below-percentage 时使用) */ stockThresholdValue?: number; /** 点击了解更多回调 */ onLearnMore?: (product: ProductCardData) => void; /** 点击立即购买回调 */ onShopNow?: (product: ProductCardData) => void; /** 点击加入购物车回调 */ onAddToCart?: (product: ProductCardData) => void; /** 语义化类名 */ classNames?: Partial>; /** 了解更多按钮文本 */ secondaryButtonText?: string; /** 了解更多按钮功能 */ secondaryButtonFun?: ButtonFunctionType; /** 立即购买按钮文本 */ primaryButtonText?: string; /** 立即购买按钮功能 */ primaryButtonFun?: ButtonFunctionType; /** 是否展示原价(删除线价格) */ showOriginalPrice?: boolean; /** 文案配置 */ copy?: CopyConfig; onProductImageClick?: (product: ProductCardData) => void; } /** * 产品卡片组件 */ declare const ProductCard: React.ForwardRefExoticComponent>; export { ProductCard }; export default ProductCard;