pb-sxp-ui 1.20.26 → 1.20.28

package/dist/pb-ui.js

@@ -180,6 +180,14 @@
         }
         return uuid.join('');
     }
+    const getIndexByblockType = (type, index) => {
+        if (type === 'CommodityCarouselBlock' || type === 'CopyBlock') {
+            return 'initial';
+        }
+        else {
+            return index;
+        }
+    };
     const generateRandomString = (length) => {
         let result = '';
         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -239,6 +247,70 @@
         }
         return content;
     };
+    function getBrowserInfo() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return null;
+        if (/edge\/([\d\.]+)/i.exec(userAgent))
+            return `Edge ${(_a = /edge\/([\d\.]+)/i.exec(userAgent)) === null || _a === void 0 ? void 0 : _a[1]}`;
+        if (/edg\/([\d\.]+)/i.exec(userAgent))
+            return `Edge(Chromium) ${(_b = /edge\/([\d\.]+)/i.exec(userAgent)) === null || _b === void 0 ? void 0 : _b[1]}`;
+        if (/msie/i.test(userAgent))
+            return `Internet Explorer ${(_c = /msie ([\d\.]+)/i.exec(userAgent)) === null || _c === void 0 ? void 0 : _c[1]}`;
+        if (/Trident/i.test(userAgent))
+            return `Internet Explorer ${(_d = /rv:([\d\.]+)/i.exec(userAgent)) === null || _d === void 0 ? void 0 : _d[1]}`;
+        if (/chrome/i.test(userAgent))
+            return `Chrome ${(_e = /chrome\/([\d\.]+)/i.exec(userAgent)) === null || _e === void 0 ? void 0 : _e[1]}`;
+        if (/firefox/i.test(userAgent))
+            return `Firefox ${(_f = /firefox\/([\d\.]+)/i.exec(userAgent)) === null || _f === void 0 ? void 0 : _f[1]}`;
+        if (/safari/i.test(userAgent))
+            return `Safari ${(_g = /version\/([\d\.]+)/i.exec(userAgent)) === null || _g === void 0 ? void 0 : _g[1]}`;
+        return null;
+    }
+    function getSystem() {
+        var _a, _b, _c;
+        const userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return null;
+        if (/iphone/i.test(userAgent))
+            return `IOS ${(_a = userAgent.match(/OS\s(.*?)\slike/)) === null || _a === void 0 ? void 0 : _a[1]}`;
+        if (/android/i.test(userAgent))
+            return `Android ${(_b = userAgent.match(/Android\s(.*?)\;/)) === null || _b === void 0 ? void 0 : _b[1]}`;
+        if (/windows/i.test(userAgent))
+            return `Windows ${(_c = userAgent.match(/Windows\s(.*?)\;/)) === null || _c === void 0 ? void 0 : _c[1]}`;
+        if (/mac/i.test(userAgent))
+            return 'Mac OS';
+        return null;
+    }
+    function getDevice$1() {
+        const userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return null;
+        if (/iphone/i.test(userAgent))
+            return 'iPhone';
+        if (/android/i.test(userAgent)) {
+            // var index1 = userAgent.indexOf(';');
+            // var index2 = userAgent.indexOf(';', index1 + 1);
+            // var index3 = userAgent.indexOf(';', index2 + 1);
+            // var index4 = userAgent.indexOf(';', index3 + 1);
+            // if (index2 !== -1 && index3 !== -1) {
+            //   var value1 = userAgent.substring(index3 + 1, index4);
+            //   return `${value1}`;
+            // }
+            const index1 = userAgent.indexOf('(');
+            const index2 = userAgent.indexOf(')');
+            if (index1 !== -1 && index2 !== -1) {
+                const value = userAgent.substring(index1 + 1, index2);
+                return `${value}`;
+            }
+        }
+        if (/windows/i.test(userAgent))
+            return 'Windows';
+        if (/mac/i.test(userAgent))
+            return 'Mac';
+        return null;
+    }
     function getCookie(val) {
         // const expirationDate = new Date();
         // expirationDate.setDate(expirationDate.getDate() + 100);
@@ -300,6 +372,33 @@
         document.cookie = `${name}=; ${expiration}${pathPart}${domainPart}`;
         console.log(`已尝试删除Cookie: ${name}`);
     }
+    function setCookie(name, value, days = 0, path = '/', domain = '', secure = false, sameSite = 'Lax') {
+        let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+        // 设置过期时间
+        if (days) {
+            const date = new Date();
+            date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+            cookieString += `; expires=${date.toUTCString()}`;
+        }
+        // 设置路径
+        if (path) {
+            cookieString += `; path=${path}`;
+        }
+        // 设置域名
+        if (domain) {
+            cookieString += `; domain=${domain}`;
+        }
+        // 设置Secure标志
+        if (secure) {
+            cookieString += '; secure';
+        }
+        // 设置SameSite属性
+        if (sameSite) {
+            cookieString += `; samesite=${sameSite}`;
+        }
+        // 设置Cookie
+        document.cookie = cookieString;
+    }
     function getUrlParamByKey(key) {
         var _a, _b;
         const queryString = location.search.slice(1);
@@ -315,6 +414,24 @@
         return (_b = params[key]) !== null && _b !== void 0 ? _b : '';
     }
 
+    var tool = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        deleteCookie: deleteCookie,
+        generateRandomString: generateRandomString,
+        getBrowserInfo: getBrowserInfo,
+        getCookie: getCookie,
+        getDevice: getDevice$1,
+        getIndexByblockType: getIndexByblockType,
+        getScreenReader: getScreenReader,
+        getSystem: getSystem,
+        getUid: getUid,
+        getUrlParamByKey: getUrlParamByKey,
+        setCookie: setCookie,
+        setFontForText: setFontForText,
+        splitUrlParams: splitUrlParams,
+        uuid: uuid
+    });
+
     function unzip(b64Data) {
         const strData = atob(b64Data);
         const charData = strData.split('').map(function (x) {
@@ -499,6 +616,18 @@
     const getFeSessionId = () => {
         return window.localStorage.getItem(feRealSessionIdKey);
     };
+    // 删除sessionID
+    const removeFeSessionId = () => {
+        window.localStorage.removeItem(feRealSessionIdKey);
+    };
+
+    var sessionStore = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        getFeSessionId: getFeSessionId,
+        refreshFeSessionId: refreshFeSessionId,
+        removeFeSessionId: removeFeSessionId,
+        storeAndLoadFeSessionId: storeAndLoadFeSessionId
+    });
 
     /*
      * @Author: binruan@chatlabs.com
@@ -522,6 +651,9 @@
         }
         return fakeUserId;
     };
+    const removeFeUserId = () => {
+        window.localStorage.removeItem(FAKE_USER_KEY);
+    };
     const getFeUserState = () => {
         const fakeUserState = window.localStorage.getItem(FAKE_USER_STATE);
         if (lodash.isEmpty(fakeUserState)) {
@@ -551,6 +683,24 @@
         window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
     };
 
+    var localStore = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        AGREE_POLICY: AGREE_POLICY,
+        CCONTSENT_STATE: CCONTSENT_STATE,
+        FAKE_USER_KEY: FAKE_USER_KEY,
+        FAKE_USER_STATE: FAKE_USER_STATE,
+        SLIDE_SKIP_STATE: SLIDE_SKIP_STATE,
+        USER_CONSENT_RESULT_KEY: USER_CONSENT_RESULT_KEY,
+        getContsentState: getContsentState,
+        getFeUserState: getFeUserState,
+        getSlideSkipState: getSlideSkipState,
+        getUserConsentResult: getUserConsentResult,
+        removeFeUserId: removeFeUserId,
+        setSlideSkipState: setSlideSkipState,
+        setUserConsentResult: setUserConsentResult,
+        storeAndLoadFeUserId: storeAndLoadFeUserId
+    });
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
@@ -1759,6 +1909,23 @@
         DATA_TYPE["ARRAY_NUMBER"] = "array-number";
     })(DATA_TYPE || (DATA_TYPE = {}));
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-03-20 10:27:31
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-03-20 13:56:49
+     * @FilePath: \pb-sxp-ui\src\core\hooks\index.ts
+     *
+     */
+
+    var index$4 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get DATA_TYPE () { return DATA_TYPE; },
+        useDataSource: useDataSource,
+        useEditor: useEditor,
+        useSxpDataSource: useSxpDataSource
+    });
+
     const DataSourceContext = React.createContext({ $store: {}, options: [], configs: [] });
     const DataSourceProvider = ({ children, isSsr, enable }) => {
         const [options, setOptions] = React.useState([]);
@@ -10538,7 +10705,7 @@
      *
      */
     const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-    const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState }) => {
+    const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState, showCloseButton = true }) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         const { visibleHeight, bottomHeight } = useVisibleHeight();
         const touchRef = React.useRef(null);
@@ -10718,8 +10885,8 @@
                             setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
                         }
                     })), child()),
-                    React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
-                        React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
+                    showCloseButton && (React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
+                        React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' })))))))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -11907,18 +12074,248 @@
         }
     ];
 
+    const AddToCartPopup$1 = ({ isActive = true }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const { popupDetailData, globalConfig } = useSxpDataSource();
+        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);
+        const [showImagePreview, setShowImagePreview] = React.useState(false);
+        const [previewImageUrl, setPreviewImageUrl] = React.useState('');
+        // 获取商品数据
+        const data = popupDetailData;
+        const product = (_e = (_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : data === null || data === void 0 ? void 0 : data.product;
+        // Shopify 配置
+        const shopifyConfig = window.__SHOPIFY_CONFIG__;
+        const shopifyDomain = ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopify) === null || _f === void 0 ? void 0 : _f.domain) || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopifyDomain) || (shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.domain) || 'dev-store-749237498237498636.myshopify.com';
+        const storefrontToken = ((_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.shopify) === null || _g === void 0 ? void 0 : _g.storefrontAccessToken) || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.storefrontAccessToken) || (shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.storefrontAccessToken) || '77d894c490f79430ce7bd0a7efdff6b7';
+        const productId = (product === null || product === void 0 ? void 0 : product.shopifyId) || (product === null || product === void 0 ? void 0 : product.itemId) || '';
+        // 查询 Shopify 商品数据
+        const fetchProductData = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+            var _k;
+            if (!productId || !shopifyDomain || !storefrontToken) {
+                setLoading(false);
+                return;
+            }
+            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
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
+                const fullProductId = productId.startsWith('gid://') ? productId : `gid://shopify/Product/${productId}`;
+                const response = yield fetch(`https://${shopifyDomain}/api/2024-01/graphql.json`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Shopify-Storefront-Access-Token': storefrontToken
+                    },
+                    body: JSON.stringify({
+                        query,
+                        variables: { id: fullProductId }
+                    })
+                });
+                const result = yield response.json();
+                if (result.errors) {
+                    throw new Error(result.errors[0].message);
+                }
+                console.log('[AddToCart] Shopify Product Data:', result.data.product);
+                console.log('[AddToCart] Options:', (_k = result.data.product) === null || _k === void 0 ? void 0 : _k.options);
+                setProductData(result.data.product);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to load product');
+                console.error('[AddToCartPopup] 加载失败:', err);
+            }
+            finally {
+                setLoading(false);
+            }
+        }), [productId, shopifyDomain, storefrontToken]);
+        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 => {
+                    return selectedOptions[option.name] === option.value;
+                });
+            });
+            setSelectedVariant(matchedVariant || null);
+            // 当 variant 改变时，如果有库存数量限制，确保数量不超过库存
+            if ((matchedVariant === null || matchedVariant === void 0 ? void 0 : matchedVariant.quantityAvailable) !== undefined && matchedVariant.quantityAvailable > 0) {
+                setQuantity(prev => Math.min(prev, matchedVariant.quantityAvailable));
+            }
+        }, [selectedOptions, productData]);
+        // 处理规格选择
+        const handleOptionSelect = (optionName, value) => {
+            setSelectedOptions(prev => (Object.assign(Object.assign({}, prev), { [optionName]: value })));
+        };
+        // 处理加购
+        const handleAddToCart = () => {
+            if (!selectedVariant) {
+                alert('Please select all options');
+                return;
+            }
+            // 提取 variant ID（去掉 gid://shopify/ProductVariant/ 前缀）
+            const variantId = selectedVariant.id.replace('gid://shopify/ProductVariant/', '');
+            console.log('[AddToCart] 添加到购物车:', {
+                variantId,
+                quantity,
+                shopifyDomain,
+                selectedVariant
+            });
+            // 使用 Shopify 的 /cart/add 接口，通过查询参数添加商品
+            // 这种方式会跳转到购物车页面而不是结算页面
+            const params = new URLSearchParams({
+                id: variantId,
+                quantity: quantity.toString()
+            });
+            const cartUrl = `https://${shopifyDomain}/cart/add?${params.toString()}`;
+            console.log('[AddToCart] 跳转到购物车 URL:', cartUrl);
+            window.location.href = cartUrl;
+        };
+        // 计算总价
+        const totalPrice = selectedVariant
+            ? (parseFloat(selectedVariant.price.amount) * quantity).toFixed(2)
+            : '0.00';
+        if (loading) {
+            return (React.createElement("div", { className: 'add-to-cart-popup' },
+                React.createElement("div", { className: 'loading' }, "Loading...")));
+        }
+        if (error) {
+            return (React.createElement("div", { className: 'add-to-cart-popup' },
+                React.createElement("div", { className: 'error' }, error)));
+        }
+        if (!productData) {
+            return null;
+        }
+        const mainImage = ((_h = productData.images.edges[0]) === null || _h === void 0 ? void 0 : _h.node.url) || '';
+        const variantImage = ((_j = selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.image) === null || _j === void 0 ? void 0 : _j.url) || mainImage;
+        const maxQuantity = (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.quantityAvailable) || 999; // 如果没有库存数据，默认允许最多 999
+        return (React.createElement("div", { className: 'add-to-cart-popup' },
+            React.createElement("div", { className: 'popup-content' },
+                React.createElement("div", { className: 'product-header' },
+                    React.createElement("div", { className: 'product-title' }, productData.title)),
+                React.createElement("div", { className: 'variant-detail' },
+                    React.createElement("div", { className: 'variant-image-container', onClick: () => {
+                            if (variantImage) {
+                                setPreviewImageUrl(variantImage);
+                                setShowImagePreview(true);
+                            }
+                        }, style: { cursor: 'pointer' } },
+                        React.createElement("img", { src: variantImage, alt: 'Selected variant', className: 'variant-image' })),
+                    React.createElement("div", { className: 'variant-info' },
+                        React.createElement("div", { className: 'variant-specs-row' },
+                            React.createElement("div", { className: 'variant-specs' }, Object.keys(selectedOptions).length > 0 ? (Object.entries(selectedOptions).map(([key, value]) => (React.createElement("span", { key: key, className: 'spec-item' }, value)))) : (React.createElement("span", { className: 'spec-placeholder' }, "Please select options"))),
+                            selectedVariant && selectedVariant.quantityAvailable !== undefined && (React.createElement("div", { className: 'stock-info' },
+                                "Available: ",
+                                selectedVariant.quantityAvailable))),
+                        React.createElement("div", { className: 'variant-price-row' },
+                            React.createElement("div", { className: 'price' },
+                                "$",
+                                totalPrice),
+                            React.createElement("div", { className: 'quantity-selector' },
+                                React.createElement("button", { className: 'qty-btn', onClick: () => setQuantity(Math.max(1, quantity - 1)), disabled: quantity <= 1 }, "\u2212"),
+                                React.createElement("span", { className: 'qty-value' }, quantity),
+                                React.createElement("button", { className: 'qty-btn', onClick: () => setQuantity(quantity + 1), disabled: !selectedVariant || quantity >= maxQuantity }, "+"))))),
+                React.createElement("div", { className: 'variant-options' }, productData.options.map(option => (React.createElement("div", { key: option.name, className: 'option-group' },
+                    React.createElement("div", { className: 'option-label' }, option.name),
+                    React.createElement("div", { className: 'option-values' }, option.values.map(value => {
+                        // 检查这个选项是否可选（availableForSale = true，如果有 quantityAvailable 则还需 > 0）
+                        const isAvailable = productData.variants.edges.some(({ node: variant }) => {
+                            const hasThisOption = variant.selectedOptions.some(opt => opt.name === option.name && opt.value === value);
+                            if (!hasThisOption || !variant.availableForSale)
+                                return false;
+                            // 如果有 quantityAvailable 字段，则需要检查库存
+                            if (variant.quantityAvailable !== undefined) {
+                                return variant.quantityAvailable > 0;
+                            }
+                            // 没有 quantityAvailable 字段时，只要 availableForSale 为 true 就可选
+                            return true;
+                        });
+                        const isSelected = selectedOptions[option.name] === value;
+                        return (React.createElement("button", { key: value, className: `option-btn ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`, onClick: () => isAvailable && handleOptionSelect(option.name, value), disabled: !isAvailable }, value));
+                    }))))))),
+            React.createElement("div", { className: 'popup-footer' },
+                React.createElement("button", { className: 'add-to-cart-btn', onClick: handleAddToCart, disabled: !selectedVariant }, "Add To Cart")),
+            showImagePreview && previewImageUrl && (React.createElement(Modal$1, { visible: showImagePreview, padding: 0, isFullScreen: true, onClose: () => setShowImagePreview(false) },
+                React.createElement("div", { style: {
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.9)'
+                    }, onClick: () => setShowImagePreview(false) },
+                    React.createElement("img", { src: previewImageUrl, alt: 'Preview', style: {
+                            maxWidth: '100%',
+                            maxHeight: '100%',
+                            objectFit: 'contain'
+                        } }))))));
+    };
+
     const CommodityDetailDiroNew$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, _1, _2, _3, _4;
-        var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
-        React.useState(true);
-        const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
-        const { jumpToWeb, productView } = useEventReport();
-        React.useState(false);
-        React.useState(false);
-        React.useState(true);
+        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, _1, _2, _3, _4, _5;
+        var { style, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["style", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "iframeBgColor", "isActive"]);
+        const { sxpParameter, popupCurTimeRef, popupDetailData, setPopupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
+        useEditor();
+        const { productView } = useEventReport();
         const [showModal, setShowModal] = React.useState(false);
         const curTimeRef = React.useRef(null);
         const [show3DModal, setShow3DModal] = React.useState(false);
+        const [showAddToCart, setShowAddToCart] = React.useState(false);
         const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
         const swiperRef = React.useRef();
         const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
@@ -11935,30 +12332,30 @@
             cta = p === null || p === void 0 ? void 0 : p.bindCta;
         }
         const handleLink = (e) => {
-            if (product === null || product === void 0 ? void 0 : product.link) {
-                jumpToWeb(e, data, product, cta, position);
-                if (!isPost) {
-                    productView(data, product, cta, viewTime || curTimeRef.current, position);
-                }
-                else {
-                    ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                        eventSubject: 'clickCta',
-                        eventDescription: 'User clicked the CTA'
-                    }, data, product, 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_external_link',
-                        target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
-                        target_url: product.link
-                    });
-                }
-                window.location.href = window.getJointUtmLink(product.link);
+            e.preventDefault();
+            // 上报点击事件
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, data, product, 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,
+                target_url: product === null || product === void 0 ? void 0 : product.link
+            });
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current, position);
             }
+            // 更新 popupDetailData，确保 AddToCart 组件能获取到商品数据
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { video: Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { bindProduct: product }), index: position }));
+            // 打开 AddToCart 弹窗
+            setShowAddToCart(true);
         };
         React.useEffect(() => {
             var _a, _b;
@@ -11979,7 +12376,7 @@
                 rec: recData,
                 position
             });
-        }, [isActive, bffFbReport, isPost]);
+        }, [isActive, bffFbReport, isPost, data, product, position]);
         React.useEffect(() => {
             if (!isActive || isPost)
                 return;
@@ -12107,13 +12504,13 @@ Made in Italy` })));
                 swiperRef.current.swiper.slideTo(0);
                 swiperRef.current.swiper.autoplay.start();
             }
-        }, []);
+        }, [popupCurTimeRef, checkCommodityIndexRef]);
         const renderCommodityGroup = React.useCallback(() => {
             var _a, _b, _c;
             if (isPost)
                 return;
             return (React.createElement(CommodityGroup$1, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
-        }, [checkCommodityIndex]);
+        }, [checkCommodityIndex, isPost, (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProducts, commodityGroup, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image, bottom_image, handleClick, popupDetailData]);
         const getDotsAlign = React.useMemo(() => {
             const dotsAlignClass = {
                 left: 'commondityDetail-swiper-clickable-left',
@@ -12123,24 +12520,24 @@ Made in Italy` })));
             return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
         }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
         const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
+        const isAlly = React.useMemo(() => getScreenReader(), []);
         const handleMouseEnter = React.useCallback(() => {
             if (swiperRef.current && swiperRef.current.swiper && isAlly) {
                 swiperRef.current.swiper.autoplay.stop();
             }
-        }, []);
+        }, [isAlly]);
         const handleMouseLeave = React.useCallback(() => {
             if (swiperRef.current && swiperRef.current.swiper && isAlly) {
                 swiperRef.current.swiper.autoplay.start();
             }
-        }, []);
+        }, [isAlly]);
         const handleSlideChange = React.useCallback((swiper) => {
             setSwiperActiveIndex(swiper.activeIndex);
         }, []);
-        const isAlly = React.useMemo(() => getScreenReader(), []);
         return (React.createElement("div", { className: 'pb-commondityDiroNew' },
             React.createElement("div", Object.assign({ className: css.css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
                 React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-                    product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
+                    product && ((_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
                             clickable: true,
                             bulletActiveClass: 'swipe-item-active-bullet',
                             clickableClass: getDotsAlign,
@@ -12157,7 +12554,7 @@ Made in Italy` })));
                         : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
                             delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
                         }, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
-                                bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
+                                bottom: (_y = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _y !== void 0 ? _y : 0,
                                 fontSize: '14px'
                             } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
                             '.swiper-pagination-bullet': {
@@ -12169,7 +12566,7 @@ Made in Italy` })));
                                 backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
                                 opacity: 1
                             }
-                        }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
+                        }))) }), (_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.map((src, srcKey) => {
                         var _a;
                         return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                             React.createElement("div", { style: {
@@ -12185,7 +12582,7 @@ Made in Italy` })));
                                         objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                     }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
                     }))),
-                    !((_z = product === null || product === void 0 ? void 0 : product.homePage) === null || _z === void 0 ? void 0 : _z.length) && (React.createElement("div", { className: css.css({
+                    !((_0 = product === null || product === void 0 ? void 0 : product.homePage) === null || _0 === void 0 ? void 0 : _0.length) && (React.createElement("div", { className: css.css({
                             height,
                             width
                         }) },
@@ -12193,7 +12590,7 @@ Made in Italy` })));
                                 objectFit: 'cover',
                                 width: '100%',
                                 height: '100%'
-                            }), src: (_0 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _0 !== void 0 ? _0 : bottom_image, alt: 'pdp image' }))),
+                            }), src: (_1 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _1 !== void 0 ? _1 : bottom_image, alt: 'pdp image' }))),
                     (iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
@@ -12210,7 +12607,7 @@ Made in Italy` })));
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
-                                    __html: setFontForText((_1 = product === null || product === void 0 ? void 0 : product.title) !== null && _1 !== void 0 ? _1 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                                    __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.title) !== null && _2 !== void 0 ? _2 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
                                 } }),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
                                     __html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -12220,11 +12617,11 @@ Made in Italy` })));
                                     __html: priceText !== null && priceText !== void 0 ? priceText : ''
                                 } }),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
-                                    __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
+                                    __html: setFontForText((_3 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _3 !== void 0 ? _3 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                                 } }))),
-                    React.createElement("a", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                    React.createElement("a", { "aria-label": (_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
                         React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: setFontForText((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
+                                __html: setFontForText((_5 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _5 !== void 0 ? _5 : 'Shop now', buttonStyle)
                             } })),
                     productInfoText({ isPost }))),
             React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
@@ -12236,7 +12633,9 @@ Made in Italy` })));
                             height: 'calc(100% - 50px)',
                             marginTop: '50px',
                             border: 'none'
-                        } })))));
+                        } }))),
+            showAddToCart && (React.createElement(Modal$1, { visible: showAddToCart, padding: 0, isFullScreen: false, onClose: () => setShowAddToCart(false) },
+                React.createElement(AddToCartPopup$1, { isActive: true })))));
     };
     var CommodityDetailDiroNewComponent = React.memo(CommodityDetailDiroNew$1);
 
@@ -13238,296 +13637,6 @@ Made in Italy` })));
                 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
@@ -13543,60 +13652,7 @@ Made in Italy` })));
             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
-                }
-            },
+            props: {},
             style: {}
         },
         w: 100,
@@ -19692,7 +19748,7 @@ Made in Italy` })));
                 return res.json();
             })
                 .then((result) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 if (result.code === '0' || result.code === '00000') {
                     // 判断数据结构：CMS 模式和普通模式可能不同
                     let multiCtaData = null;
@@ -19711,6 +19767,14 @@ Made in Italy` })));
                         console.error('[StructurePage] No multiCta data found in response:', result);
                         setError(result.message || 'No multiCta data found');
                     }
+                    // 存储 Shopify 配置信息到 window 对象，供 AddToCart 弹窗使用
+                    if ((_e = result.data) === null || _e === void 0 ? void 0 : _e.shopify) {
+                        window.__SHOPIFY_CONFIG__ = {
+                            domain: result.data.shopify.domain,
+                            storefrontAccessToken: result.data.shopify.storefrontAccessToken
+                        };
+                        console.log('[StructurePage] Shopify config stored:', window.__SHOPIFY_CONFIG__);
+                    }
                 }
                 else {
                     setError(result.message || 'Failed to load data');
@@ -19892,7 +19956,13 @@ Made in Italy` })));
     var index$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         EditorCore: EditorCore,
-        StructurePage: StructurePage
+        Pagebuilder: Pagebuilder,
+        StructurePage: StructurePage,
+        createMaterial: createMaterial,
+        hooks: index$4,
+        localStore: localStore,
+        sessionStore: sessionStore,
+        tool: tool
     });
 
     /*