pb-sxp-ui 1.20.18 → 1.20.20

package/dist/pb-ui.js

@@ -2781,7 +2781,7 @@
         StructurePage: StructurePage
     });
 
-    var interactionRender$h = [
+    var interactionRender$i = [
         {
             title: '点击事件',
             child: [
@@ -2801,7 +2801,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\settingRender.tsx
      *
      */
-    var settingRender$f = [
+    var settingRender$g = [
         {
             title: '弹窗背景',
             child: [
@@ -3238,9 +3238,9 @@
         category: 'popup',
         type: 'AppointForm',
         related: {
-            settingRender: settingRender$f,
+            settingRender: settingRender$g,
             bindableProps: [],
-            interactionRender: interactionRender$h
+            interactionRender: interactionRender$i
         },
         defaulSetting: {
             name: '表单',
@@ -3263,7 +3263,7 @@
         sort: 2
     });
 
-    var settingRender$e = [
+    var settingRender$f = [
         {
             title: '弹窗背景',
             child: [
@@ -3661,6 +3661,22 @@
                     name: ['props', 'enableFixedCloseButton']
                 }
             ]
+        },
+        {
+            title: '加购功能',
+            child: [
+                {
+                    label: '启用加购弹窗',
+                    type: 'Switch',
+                    name: ['props', 'enableAddToCart']
+                },
+                {
+                    label: '加购弹窗ID',
+                    type: 'Input',
+                    name: ['props', 'addToCartPopupId'],
+                    placeholder: '请输入加购弹窗的ID'
+                }
+            ]
         }
     ];
 
@@ -3680,7 +3696,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$g = [
+    var interactionRender$h = [
         {
             title: '滑动事件',
             child: [
@@ -11658,8 +11674,8 @@
 
     const CommodityDetail$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-        var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
-        const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
+        var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true, enableAddToCart = false, addToCartPopupId = '' } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive", "enableAddToCart", "addToCartPopupId"]);
+        const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
         const { jumpToWeb, productView } = useEventReport();
         const curTimeRef = React.useRef(null);
         const [showModal, setShowModal] = React.useState(false);
@@ -11680,6 +11696,32 @@
             cta = p === null || p === void 0 ? void 0 : p.bindCta;
         }
         const handleLink = (e) => {
+            // 如果启用了加购功能且配置了加购弹窗ID，则打开加购弹窗
+            if (enableAddToCart && addToCartPopupId) {
+                // 设置弹窗数据
+                setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { index: position }));
+                // 上报点击事件
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ClickCTA',
+                    product: product ? [product] : undefined,
+                    contentType: 'product',
+                    data,
+                    position,
+                    cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                    cta_action_type: 'open_internal_popup',
+                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId
+                });
+                console.log('[CommodityDetail] 打开加购弹窗:', addToCartPopupId);
+                // 打开加购弹窗
+                if (typeof window !== 'undefined' && window.sxpPopup) {
+                    window.sxpPopup(addToCartPopupId);
+                }
+                else {
+                    console.warn('[CommodityDetail] sxpPopup 方法不存在');
+                }
+                return;
+            }
+            // 默认行为：跳转到商品链接
             if (product === null || product === void 0 ? void 0 : product.link) {
                 jumpToWeb(e, data, product, cta, position);
                 if (!isPost) {
@@ -11704,6 +11746,14 @@
                 }
                 window.location.href = window.getJointUtmLink(product.link);
             }
+            else {
+                // 如果没有配置链接也没有启用加购功能，给出提示
+                console.warn('[CommodityDetail] 商品未配置跳转链接，且未启用加购功能', {
+                    productId: product === null || product === void 0 ? void 0 : product.itemId,
+                    enableAddToCart,
+                    addToCartPopupId
+                });
+            }
         };
         React.useEffect(() => {
             var _a, _b;
@@ -11951,8 +12001,8 @@
         category: 'popup',
         type: 'CommodityDetail',
         related: {
-            settingRender: settingRender$e,
-            interactionRender: interactionRender$g
+            settingRender: settingRender$f,
+            interactionRender: interactionRender$h
         },
         defaulSetting: {
             props: {
@@ -12007,7 +12057,7 @@
         sort: 1
     });
 
-    var interactionRender$f = [
+    var interactionRender$g = [
         {
             title: '点击事件',
             child: [
@@ -12027,7 +12077,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
      *
      */
-    var settingRender$d = [
+    var settingRender$e = [
         {
             title: '弹窗背景',
             child: [
@@ -12207,9 +12257,9 @@
         category: 'popup',
         type: 'Prompt',
         related: {
-            settingRender: settingRender$d,
+            settingRender: settingRender$e,
             bindableProps: [],
-            interactionRender: interactionRender$f
+            interactionRender: interactionRender$g
         },
         defaulSetting: {
             props: {
@@ -12232,7 +12282,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
-    var settingRender$c = [
+    var settingRender$d = [
         {
             title: '弹窗背景',
             child: [
@@ -12965,7 +13015,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$e = [
+    var interactionRender$f = [
         {
             title: '滑动事件',
             child: [
@@ -12992,8 +13042,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityDetailDiroNew',
         related: {
-            settingRender: settingRender$c,
-            interactionRender: interactionRender$e
+            settingRender: settingRender$d,
+            interactionRender: interactionRender$f
         },
         defaulSetting: {
             props: {
@@ -13057,7 +13107,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityList\settingRender.tsx
      *
      */
-    var settingRender$b = [
+    var settingRender$c = [
         {
             title: '弹窗背景',
             child: [
@@ -13482,7 +13532,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$d = [
+    var interactionRender$e = [
         {
             title: '点击事件',
             child: [
@@ -13509,8 +13559,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityList',
         related: {
-            settingRender: settingRender$b,
-            interactionRender: interactionRender$d
+            settingRender: settingRender$c,
+            interactionRender: interactionRender$e
         },
         defaulSetting: {
             props: {
@@ -13558,7 +13608,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Iframe\settingRender.tsx
      *
      */
-    var settingRender$a = [
+    var settingRender$b = [
         {
             title: '背景样式',
             child: [
@@ -13592,7 +13642,7 @@ Made in Italy` })));
         category: 'popup',
         type: 'Iframe',
         related: {
-            settingRender: settingRender$a,
+            settingRender: settingRender$b,
             bindableProps: []
         },
         defaulSetting: {
@@ -13612,7 +13662,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\ConsentDetail\settingRender.tsx
      *
      */
-    var settingRender$9 = [
+    var settingRender$a = [
         {
             title: '弹窗文本',
             child: [
@@ -13641,7 +13691,7 @@ Made in Italy` })));
         category: 'popup',
         type: 'ConsentDetail',
         related: {
-            settingRender: settingRender$9,
+            settingRender: settingRender$a,
             bindableProps: []
         },
         defaulSetting: {
@@ -13653,6 +13703,666 @@ Made in Italy` })));
         sort: 7
     });
 
+    var settingRender$9 = [
+        {
+            title: 'Shopify配置',
+            child: [
+                {
+                    type: 'Input',
+                    label: 'Shopify域名',
+                    name: ['props', 'shopifyDomain'],
+                    placeholder: 'your-store.myshopify.com'
+                },
+                {
+                    type: 'Input',
+                    label: 'Storefront Token',
+                    name: ['props', 'storefrontAccessToken'],
+                    placeholder: 'Storefront Access Token'
+                }
+            ]
+        },
+        {
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
+        {
+            title: '商品信息样式',
+            child: [
+                {
+                    name: ['props', 'variantStyles'],
+                    type: 'SelectLinkage',
+                    child: [
+                        {
+                            label: '字段',
+                            type: 'Select',
+                            options: [
+                                {
+                                    label: '商品标题',
+                                    value: 'title'
+                                },
+                                {
+                                    label: '价格',
+                                    value: 'price'
+                                },
+                                {
+                                    label: '规格选项',
+                                    value: 'option'
+                                },
+                                {
+                                    label: '已选规格',
+                                    value: 'selectedOption'
+                                }
+                            ],
+                            name: ['props', 'variantStyles', 'field'],
+                            initialValue: 'title'
+                        },
+                        {
+                            type: 'Group',
+                            child: [
+                                {
+                                    label: '上边距',
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['marginTop']
+                                },
+                                {
+                                    label: '下边距',
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['marginBottom']
+                                }
+                            ]
+                        },
+                        {
+                            type: 'Group',
+                            label: '字体',
+                            child: [
+                                {
+                                    type: 'Select',
+                                    name: ['fontFamily-cn'],
+                                    bottomText: '中文字体'
+                                },
+                                {
+                                    type: 'Select',
+                                    name: ['fontFamily-en'],
+                                    bottomText: '英文/其他字体'
+                                }
+                            ]
+                        },
+                        {
+                            type: 'Group',
+                            label: '',
+                            child: [
+                                {
+                                    type: 'Color',
+                                    name: ['color']
+                                },
+                                {
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['fontSize']
+                                }
+                            ]
+                        },
+                        {
+                            label: '样式',
+                            type: 'TextStyle'
+                        },
+                        {
+                            label: '对齐',
+                            type: 'TextAlign'
+                        },
+                        {
+                            label: '间距',
+                            type: 'TextSpace'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            title: '加购按钮样式',
+            child: [
+                {
+                    label: '英文大小写',
+                    type: 'Select',
+                    name: ['props', 'buttonStyle', 'textTransform'],
+                    options: [
+                        {
+                            label: '默认',
+                            value: 'unset'
+                        },
+                        {
+                            label: '小写',
+                            value: 'lowercase'
+                        },
+                        {
+                            label: '大写',
+                            value: 'uppercase'
+                        }
+                    ]
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'buttonStyle', 'backgroundColor'],
+                    initialValue: '#000'
+                },
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonStyle', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'buttonStyle', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonStyle', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'TextMargin',
+                    name: ['props', 'buttonStyle']
+                },
+                {
+                    type: 'Group',
+                    label: '字体',
+                    child: [
+                        {
+                            type: 'Select',
+                            name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                            bottomText: '中文字体'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'buttonStyle', 'fontFamily-en'],
+                            bottomText: '英文/其他字体'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'buttonStyle', 'color'],
+                            initialValue: '#fff'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonStyle', 'fontSize'],
+                            addonAfter: 'px'
+                        }
+                    ]
+                },
+                {
+                    type: 'TextStyle',
+                    name: ['props', 'buttonStyle']
+                },
+                {
+                    type: 'TextAlign',
+                    name: ['props', 'buttonStyle']
+                },
+                {
+                    label: '间距',
+                    type: 'TextSpace',
+                    name: ['props', 'buttonStyle']
+                }
+            ]
+        },
+        {
+            title: '文案配置',
+            child: [
+                {
+                    type: 'Input',
+                    label: '加购按钮文案',
+                    name: ['props', 'texts', 'addToCart'],
+                    placeholder: 'Add to Cart'
+                },
+                {
+                    type: 'Input',
+                    label: '选择规格提示',
+                    name: ['props', 'texts', 'selectOptions'],
+                    placeholder: 'Please select options'
+                },
+                {
+                    type: 'Input',
+                    label: '加载文案',
+                    name: ['props', 'texts', 'loading'],
+                    placeholder: 'Loading...'
+                },
+                {
+                    type: 'Input',
+                    label: '错误文案',
+                    name: ['props', 'texts', 'error'],
+                    placeholder: 'Failed to load product'
+                }
+            ]
+        },
+        {
+            title: '数量选择器',
+            child: [
+                {
+                    type: 'Number',
+                    label: '按钮间距',
+                    name: ['props', 'quantityStyle', 'gap'],
+                    addonAfter: 'px',
+                    initialValue: 12
+                }
+            ]
+        }
+    ];
+
+    /*
+     * @Author: tao
+     * @Date: 2026-01-12
+     * @Description: Add to Cart 交互配置
+     */
+    var interactionRender$d = () => {
+        return (React.createElement("div", { style: { padding: '20px', color: '#666' } },
+            React.createElement("p", null, "\u52A0\u8D2D\u5546\u54C1\u5F39\u7A97\u4EA4\u4E92\u8BF4\u660E\uFF1A"),
+            React.createElement("ul", { style: { paddingLeft: '20px', lineHeight: '1.8' } },
+                React.createElement("li", null, "\u70B9\u51FB\u5546\u54C1\u8BE6\u60C5\u5F39\u7A97\u7684\"Shop Now\"\u6309\u94AE\u540E\u81EA\u52A8\u5C55\u793A"),
+                React.createElement("li", null, "\u901A\u8FC7Shopify Storefront API\u83B7\u53D6\u5546\u54C1\u89C4\u683C\u548C\u5E93\u5B58\u4FE1\u606F"),
+                React.createElement("li", null, "\u7528\u6237\u9009\u62E9\u89C4\u683C\u540E\u5B9E\u65F6\u663E\u793A\u5BF9\u5E94SKU\u7684\u4EF7\u683C\u548C\u5E93\u5B58"),
+                React.createElement("li", null, "\u70B9\u51FB\"Add to Cart\"\u6309\u94AE\u540E\u8DF3\u8F6C\u81F3Shopify\u8D2D\u7269\u8F66\u9875\u9762"),
+                React.createElement("li", null, "\u65E0\u5E93\u5B58\u6216\u4E0D\u53EF\u552E\u5356\u7684\u89C4\u683C\u81EA\u52A8\u7F6E\u7070\u4E0D\u53EF\u9009"))));
+    };
+
+    const AddToCartPopup$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var { style, isActive = true, index, shopifyDomain = '', storefrontAccessToken = '', variantStyles = {}, buttonStyle = {}, quantityStyle = {}, texts = {}, popupBg = {} } = _a, props = __rest(_a, ["style", "isActive", "index", "shopifyDomain", "storefrontAccessToken", "variantStyles", "buttonStyle", "quantityStyle", "texts", "popupBg"]);
+        const { sxpParameter, popupDetailData, isPreview, bffFbReport, globalConfig } = useSxpDataSource();
+        useEventReport();
+        const curTimeRef = React.useRef(null);
+        const [productData, setProductData] = React.useState(null);
+        const [selectedOptions, setSelectedOptions] = React.useState({});
+        const [selectedVariant, setSelectedVariant] = React.useState(null);
+        const [quantity, setQuantity] = React.useState(1);
+        const [loading, setLoading] = React.useState(true);
+        const [error, setError] = React.useState(null);
+        // 获取当前弹窗商品数据（自动从 popupDetailData 获取）
+        const data = popupDetailData;
+        const product = (_c = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct) !== null && _c !== void 0 ? _c : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProducts) === null || _e === void 0 ? void 0 : _e[0];
+        product === null || product === void 0 ? void 0 : product.bindCta;
+        const position = (_g = (_f = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index) !== null && _f !== void 0 ? _f : index) !== null && _g !== void 0 ? _g : 0;
+        // Shopify配置 - 优先级：props > globalConfig > 默认值
+        const finalShopifyDomain = shopifyDomain || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopifyDomain) || 'dev-store-749237498237498636.myshopify.com';
+        const finalStorefrontToken = storefrontAccessToken || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.storefrontAccessToken) || '77d894c490f79430ce7bd0a7efdff6b7';
+        // 自动从商品数据获取 Shopify Product ID
+        const productId = (product === null || product === void 0 ? void 0 : product.itemId) || '';
+        // 文案
+        const finalTexts = {
+            addToCart: texts.addToCart || 'Add to Cart',
+            selectOptions: texts.selectOptions || 'Please select options',
+            loading: texts.loading || 'Loading...',
+            error: texts.error || 'Failed to load product',
+            color: texts.color || 'Color',
+            size: texts.size || 'Size',
+            material: texts.material || 'Material',
+            style: texts.style || 'Style'
+        };
+        // 查询Shopify商品数据
+        const fetchProductData = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+            var _m;
+            if (!productId || !finalShopifyDomain || !finalStorefrontToken) {
+                console.log('[AddToCartPopup] 缺少必要配置:', {
+                    productId,
+                    shopifyDomain: finalShopifyDomain,
+                    hasToken: !!finalStorefrontToken
+                });
+                setLoading(false);
+                return;
+            }
+            console.log('[AddToCartPopup] 开始加载商品数据:', {
+                productId,
+                shopifyDomain: finalShopifyDomain
+            });
+            setLoading(true);
+            setError(null);
+            try {
+                const query = `
+        query getProduct($id: ID!) {
+          product(id: $id) {
+            id
+            title
+            images(first: 10) {
+              edges {
+                node {
+                  url
+                }
+              }
+            }
+            options {
+              name
+              values
+            }
+            variants(first: 100) {
+              edges {
+                node {
+                  id
+                  title
+                  availableForSale
+                  quantityAvailable
+                  price {
+                    amount
+                    currencyCode
+                  }
+                  image {
+                    url
+                  }
+                  selectedOptions {
+                    name
+                    value
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
+                // 确保 Product ID 格式正确
+                const formattedProductId = productId.startsWith('gid://')
+                    ? productId
+                    : `gid://shopify/Product/${productId}`;
+                console.log('[AddToCartPopup] 使用的 Product ID:', formattedProductId);
+                const response = yield fetch(`https://${finalShopifyDomain}/api/2024-01/graphql.json`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Shopify-Storefront-Access-Token': finalStorefrontToken
+                    },
+                    body: JSON.stringify({
+                        query,
+                        variables: { id: formattedProductId }
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                const result = yield response.json();
+                if (result.errors) {
+                    console.error('[AddToCartPopup] GraphQL 错误:', result.errors);
+                    throw new Error(result.errors[0].message);
+                }
+                if (!((_m = result.data) === null || _m === void 0 ? void 0 : _m.product)) {
+                    console.error('[AddToCartPopup] 未找到商品');
+                    throw new Error('Product not found');
+                }
+                console.log('[AddToCartPopup] 商品数据加载成功:', result.data.product.title);
+                setProductData(result.data.product);
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : finalTexts.error;
+                setError(errorMessage);
+                console.error('[AddToCartPopup] 加载失败:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        }), [productId, finalShopifyDomain, finalStorefrontToken, finalTexts.error]);
+        React.useEffect(() => {
+            if (isActive) {
+                fetchProductData();
+            }
+        }, [isActive, fetchProductData]);
+        // 根据选中的规格匹配variant
+        React.useEffect(() => {
+            if (!productData)
+                return;
+            const variants = productData.variants.edges.map(edge => edge.node);
+            const optionsCount = productData.options.length;
+            const selectedCount = Object.keys(selectedOptions).length;
+            if (selectedCount === 0 || selectedCount < optionsCount) {
+                setSelectedVariant(null);
+                return;
+            }
+            const matchedVariant = variants.find(variant => {
+                return variant.selectedOptions.every(option => selectedOptions[option.name] === option.value);
+            });
+            setSelectedVariant(matchedVariant || null);
+            setQuantity(1);
+        }, [selectedOptions, productData]);
+        // 处理规格选择
+        const handleOptionSelect = React.useCallback((optionName, value) => {
+            setSelectedOptions(prev => {
+                const newOptions = Object.assign({}, prev);
+                if (newOptions[optionName] === value) {
+                    delete newOptions[optionName];
+                }
+                else {
+                    newOptions[optionName] = value;
+                }
+                return newOptions;
+            });
+        }, []);
+        // 处理数量变化
+        const handleQuantityChange = React.useCallback((delta) => {
+            setQuantity(prev => {
+                var _a;
+                const newQuantity = prev + delta;
+                const maxQuantity = (_a = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.quantityAvailable) !== null && _a !== void 0 ? _a : 999;
+                return Math.max(1, Math.min(newQuantity, maxQuantity));
+            });
+        }, [selectedVariant]);
+        // 检查某个规格值是否可用
+        const isOptionValueAvailable = React.useCallback((optionName, value) => {
+            if (!productData)
+                return false;
+            const variants = productData.variants.edges.map(edge => edge.node);
+            const tempOptions = Object.assign(Object.assign({}, selectedOptions), { [optionName]: value });
+            return variants.some(variant => {
+                const matches = variant.selectedOptions.every(option => !tempOptions[option.name] || tempOptions[option.name] === option.value);
+                const hasStock = variant.quantityAvailable === null || variant.quantityAvailable > 0;
+                return matches && variant.availableForSale && hasStock;
+            });
+        }, [productData, selectedOptions]);
+        // 处理加购
+        const handleAddToCart = React.useCallback(() => {
+            var _a;
+            if (!selectedVariant || quantity === 0)
+                return;
+            const variantId = selectedVariant.id.split('/').pop();
+            const cartUrl = `https://${finalShopifyDomain}/cart/add?id=${variantId}&quantity=${quantity}`;
+            console.log('[AddToCartPopup] 加购:', {
+                variantId,
+                quantity,
+                cartUrl
+            });
+            // 上报事件
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'AddToCart',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                data,
+                position,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
+                value: parseFloat(selectedVariant.price.amount) * quantity,
+                currency: selectedVariant.price.currencyCode,
+                contents: [{
+                        id: variantId,
+                        quantity
+                    }]
+            });
+            // 跳转到Shopify购物车页面
+            window.location.href = cartUrl;
+        }, [selectedVariant, quantity, finalShopifyDomain, bffFbReport, product, data, position]);
+        // 计算总价
+        const totalPrice = React.useMemo(() => {
+            if (!selectedVariant)
+                return null;
+            const price = parseFloat(selectedVariant.price.amount);
+            const total = price * quantity;
+            return total.toFixed(2);
+        }, [selectedVariant, quantity]);
+        // 初始化时间
+        React.useEffect(() => {
+            const initTime = () => {
+                curTimeRef.current = new Date();
+            };
+            initTime();
+            window.addEventListener('pageshow', initTime);
+            return () => {
+                window.removeEventListener('pageshow', initTime);
+            };
+        }, []);
+        // 加载中
+        if (loading) {
+            return (React.createElement("div", { className: "add-to-cart-popup-loading", style: style },
+                React.createElement("div", null, finalTexts.loading)));
+        }
+        // 错误状态
+        if (error || !productData) {
+            return (React.createElement("div", { className: "add-to-cart-popup-error", style: style },
+                React.createElement("div", null,
+                    finalTexts.error,
+                    ": ",
+                    error || 'Product not found')));
+        }
+        const mainImage = ((_h = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.image) === null || _h === void 0 ? void 0 : _h.url) || ((_j = productData.images.edges[0]) === null || _j === void 0 ? void 0 : _j.node.url) || ((_k = product === null || product === void 0 ? void 0 : product.homePage) === null || _k === void 0 ? void 0 : _k[0]) || '';
+        const hasAllOptionsSelected = productData.options.length === Object.keys(selectedOptions).length;
+        const isAddToCartDisabled = !selectedVariant || quantity === 0;
+        return (React.createElement("div", Object.assign({ className: "add-to-cart-popup-container", style: style }, props),
+            React.createElement("div", { className: "variant-detail-section" },
+                React.createElement("div", { className: "variant-image-wrapper" },
+                    React.createElement("img", { src: mainImage, alt: productData.title, className: "variant-image" })),
+                React.createElement("div", { className: "variant-info-wrapper" },
+                    React.createElement("h2", { className: "product-title-text", style: variantStyles.title, dangerouslySetInnerHTML: {
+                            __html: setFontForText(productData.title, variantStyles.title)
+                        } }),
+                    selectedVariant && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "selected-options-tags" }, selectedVariant.selectedOptions.map(option => (React.createElement("span", { key: option.name, className: "option-tag", style: variantStyles.selectedOption },
+                            option.name,
+                            ": ",
+                            option.value)))),
+                        React.createElement("div", { className: "price-display" },
+                            React.createElement("span", { className: "price-value", style: variantStyles.price, dangerouslySetInnerHTML: {
+                                    __html: setFontForText(`${selectedVariant.price.currencyCode} $${totalPrice}`, variantStyles.price)
+                                } })),
+                        React.createElement("div", { className: "quantity-selector-wrapper", style: quantityStyle },
+                            React.createElement("button", { className: "quantity-btn quantity-decrease", onClick: () => handleQuantityChange(-1), disabled: quantity <= 1, "aria-label": "Decrease quantity" }, "-"),
+                            React.createElement("input", { type: "number", value: quantity, readOnly: true, className: "quantity-input-field", "aria-label": "Quantity" }),
+                            React.createElement("button", { className: "quantity-btn quantity-increase", onClick: () => handleQuantityChange(1), disabled: quantity >= ((_l = selectedVariant.quantityAvailable) !== null && _l !== void 0 ? _l : 999), "aria-label": "Increase quantity" }, "+")))),
+                    !hasAllOptionsSelected && (React.createElement("div", { className: "no-selection-hint", style: variantStyles.option }, finalTexts.selectOptions)))),
+            React.createElement("div", { className: "variant-options-section" }, productData.options.map(option => (React.createElement("div", { key: option.name, className: "option-group-wrapper" },
+                React.createElement("h3", { className: "option-group-name", style: variantStyles.option, dangerouslySetInnerHTML: {
+                        __html: setFontForText(option.name, variantStyles.option)
+                    } }),
+                React.createElement("div", { className: "option-values-grid" }, option.values.map(value => {
+                    const isSelected = selectedOptions[option.name] === value;
+                    const isAvailable = isOptionValueAvailable(option.name, value);
+                    return (React.createElement("button", { key: value, className: `option-value-button ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`, onClick: () => isAvailable && handleOptionSelect(option.name, value), disabled: !isAvailable, "aria-label": `${option.name}: ${value}`, "aria-pressed": isSelected }, value));
+                })))))),
+            React.createElement("button", { className: `add-to-cart-button ${isAddToCartDisabled ? 'disabled' : ''}`, style: buttonStyle, onClick: handleAddToCart, disabled: isAddToCartDisabled, "aria-label": finalTexts.addToCart },
+                React.createElement("span", { dangerouslySetInnerHTML: {
+                        __html: setFontForText(finalTexts.addToCart, buttonStyle)
+                    } }))));
+    };
+
+    /*
+     * @Author: tao
+     * @Date: 2026-01-12
+     * @Description: Add to Cart 弹窗组件物料配置
+     */
+    const AddToCartPopup = createMaterial(AddToCartPopup$1, {
+        displayName: '加购商品',
+        icon: '',
+        category: 'popup',
+        type: 'AddToCartPopup',
+        related: {
+            settingRender: settingRender$9,
+            interactionRender: interactionRender$d
+        },
+        defaulSetting: {
+            props: {
+                shopifyDomain: '',
+                storefrontAccessToken: '',
+                variantStyles: {
+                    title: {
+                        color: '#000',
+                        fontSize: 20,
+                        fontWeight: 600,
+                        marginBottom: 12
+                    },
+                    price: {
+                        color: '#000',
+                        fontSize: 24,
+                        fontWeight: 700,
+                        marginBottom: 16
+                    },
+                    option: {
+                        color: '#111',
+                        fontSize: 16,
+                        fontWeight: 600,
+                        marginBottom: 12
+                    },
+                    selectedOption: {
+                        fontSize: 14,
+                        color: '#374151'
+                    }
+                },
+                buttonStyle: {
+                    backgroundColor: '#000',
+                    color: '#fff',
+                    fontSize: 16,
+                    height: 52,
+                    fontWeight: 600,
+                    textAlign: 'center',
+                    textTransform: 'uppercase'
+                },
+                quantityStyle: {
+                    gap: 12
+                },
+                texts: {
+                    addToCart: 'Add to Cart',
+                    selectOptions: 'Please select options',
+                    loading: 'Loading...',
+                    error: 'Failed to load product',
+                    color: 'Color',
+                    size: 'Size',
+                    material: 'Material',
+                    style: 'Style'
+                },
+                popupBg: {
+                    horizontalMargin: 0,
+                    bottomMargin: 0
+                }
+            },
+            style: {}
+        },
+        w: 100,
+        h: 40,
+        sort: 7
+    });
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
@@ -19144,6 +19854,7 @@ Made in Italy` })));
 
     var _materials_ = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        AddToCartPopup: AddToCartPopup,
         AniLink: AniLink,
         AniLinkPopup: AniLinkPopup,
         Appoint: Appoint,