pb-sxp-ui 1.20.64 → 1.20.65

package/dist/index.cjs

@@ -1733,8 +1733,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             contentFormat = 'image';
         }
         const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
+        // 收窄到 ProductInfoType，以访问 SKU 特有字段
+        const productInfo = product;
+        const variantId = productInfo === null || productInfo === void 0 ? void 0 : productInfo.variantId;
+        const variantOption = productInfo === null || productInfo === void 0 ? void 0 : productInfo.variantOption;
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat })
+            eventInfo: Object.assign(Object.assign(Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat }), (variantId && { variantId })), (variantOption && { variantOption }))
         });
     }, [bffEventReport, isFromHashtag]);
     const h5EnterLink = React.useCallback(() => {
@@ -2269,7 +2273,7 @@ function useEventReport() {
             contentFormat = 'image';
         }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', sceneId: (_2 = (_1 = (_0 = data === null || data === void 0 ? void 0 : data.video) === null || _0 === void 0 ? void 0 : _0.scene) === null || _1 === void 0 ? void 0 : _1.sceneId) !== null && _2 !== void 0 ? _2 : '', ctatId: (_3 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _3 !== void 0 ? _3 : '', traceInfo: (_16 = (_13 = (_11 = (_7 = (_4 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProduct) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.video) === null || _8 === void 0 ? void 0 : _8.bindProducts) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : (_12 = data === null || data === void 0 ? void 0 : data.product) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : (_15 = (_14 = data === null || data === void 0 ? void 0 : data.video) === null || _14 === void 0 ? void 0 : _14.bindCta) === null || _15 === void 0 ? void 0 : _15.traceInfo) !== null && _16 !== void 0 ? _16 : '' }, (contentFormat && { contentFormat }))
+            eventInfo: Object.assign(Object.assign(Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', sceneId: (_2 = (_1 = (_0 = data === null || data === void 0 ? void 0 : data.video) === null || _0 === void 0 ? void 0 : _0.scene) === null || _1 === void 0 ? void 0 : _1.sceneId) !== null && _2 !== void 0 ? _2 : '', ctatId: (_3 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _3 !== void 0 ? _3 : '', traceInfo: (_16 = (_13 = (_11 = (_7 = (_4 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProduct) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.video) === null || _8 === void 0 ? void 0 : _8.bindProducts) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : (_12 = data === null || data === void 0 ? void 0 : data.product) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : (_15 = (_14 = data === null || data === void 0 ? void 0 : data.video) === null || _14 === void 0 ? void 0 : _14.bindCta) === null || _15 === void 0 ? void 0 : _15.traceInfo) !== null && _16 !== void 0 ? _16 : '' }, (contentFormat && { contentFormat })), ((product === null || product === void 0 ? void 0 : product.variantId) && { variantId: product.variantId })), ((product === null || product === void 0 ? void 0 : product.variantOption) && { variantOption: product.variantOption }))
         });
     }, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
     const productView = React.useCallback((data, product, cta, viewTime, position) => {
@@ -2282,23 +2286,7 @@ function useEventReport() {
             fromKName = 'productPage';
         }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                productId: product === null || product === void 0 ? void 0 : product.itemId,
-                productName: product === null || product === void 0 ? void 0 : product.title,
-                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                productCollection: product === null || product === void 0 ? void 0 : product.collection,
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
-                position: (position !== null && position !== void 0 ? position : 0) + '',
-                contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
-                ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
-                traceInfo: (_s = (_q = (_l = (_h = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _h !== void 0 ? _h : (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.video) === null || _m === void 0 ? void 0 : _m.bindProducts) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_r = data === null || data === void 0 ? void 0 : data.product) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : '',
-                timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
-                eventSubject: 'productView',
-                eventDescription: 'User browsed the product'
-            }
+            eventInfo: Object.assign(Object.assign({ productId: product === null || product === void 0 ? void 0 : product.itemId, productName: product === null || product === void 0 ? void 0 : product.title, price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: product === null || product === void 0 ? void 0 : product.collection, fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags), position: (position !== null && position !== void 0 ? position : 0) + '', contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId, sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '', ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId, traceInfo: (_s = (_q = (_l = (_h = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _h !== void 0 ? _h : (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.video) === null || _m === void 0 ? void 0 : _m.bindProducts) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_r = data === null || data === void 0 ? void 0 : data.product) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : '', timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '', eventSubject: 'productView', eventDescription: 'User browsed the product' }, ((product === null || product === void 0 ? void 0 : product.variantId) && { variantId: product.variantId })), ((product === null || product === void 0 ? void 0 : product.variantOption) && { variantOption: product.variantOption }))
         });
     }, [bffEventReport, popupDetailData]);
     const backMainFeed = React.useCallback((lastFeed, selectTag, themeTag, hashTag) => {
@@ -11382,7 +11370,7 @@ const CommodityDetail$1 = (_a) => {
                 return;
             }
         }
-        // 默认行为：跳转到商品链接
+        // 默认行为：跳转到商品链接（外链跳转）
         if (product === null || product === void 0 ? void 0 : product.link) {
             jumpToWeb(e, data, product, cta, position);
             if (!isPost) {
@@ -11404,8 +11392,10 @@ const CommodityDetail$1 = (_a) => {
                     target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
                     target_url: product.link
                 });
-                // feed 流 post 跳转外链时也需要上报 productView
-                productView(data, product, cta, viewTime || curTimeRef.current, position);
+                // feed 流 post 跳转外链时上报 productView（Shopify 加购模式不上报）
+                if (!enableAddToCart) {
+                    productView(data, product, cta, viewTime || curTimeRef.current, position);
+                }
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
@@ -11457,8 +11447,10 @@ const CommodityDetail$1 = (_a) => {
                 content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
             });
         };
-        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
-        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        const handleShow = () => onShow();
+        const handleHide = () => onHide();
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, handleShow);
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, handleHide);
         return () => {
             var _a;
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
@@ -11471,8 +11463,8 @@ const CommodityDetail$1 = (_a) => {
                 contentType: 'product',
                 view_time: new Date() - curTimeRef.current
             });
-            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW);
-            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, handleShow);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, handleHide);
         };
     }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
     React.useEffect(() => {
@@ -12350,7 +12342,7 @@ var settingRender$d = [
     }
 ];
 
-const AddToCartPopup$1 = ({ isActive = true }) => {
+const AddToCartPopup$1 = ({ isActive = true, defaultVariantId }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { popupDetailData, globalConfig, bffFbReport, bffEventReport, popupCurTimeRef, shopifyConfig: contextShopifyConfig } = useSxpDataSource();
     const [productData, setProductData] = React.useState(null);
@@ -12474,6 +12466,23 @@ const AddToCartPopup$1 = ({ isActive = true }) => {
             fetchProductData();
         }
     }, [isActive, fetchProductData]);
+    // 当 productData 加载完成后，若有 defaultVariantId 则自动预选对应规格
+    React.useEffect(() => {
+        if (!productData || !defaultVariantId)
+            return;
+        const normalizedDefault = defaultVariantId.startsWith('gid://')
+            ? defaultVariantId
+            : `gid://shopify/ProductVariant/${defaultVariantId}`;
+        const variants = productData.variants.edges.map(edge => edge.node);
+        const targetVariant = variants.find(v => v.id === normalizedDefault);
+        if (!targetVariant)
+            return;
+        const defaultOptions = {};
+        targetVariant.selectedOptions.forEach(opt => {
+            defaultOptions[opt.name] = opt.value;
+        });
+        setSelectedOptions(defaultOptions);
+    }, [productData, defaultVariantId]);
     // 根据选中的规格匹配 variant
     React.useEffect(() => {
         if (!productData)
@@ -12740,6 +12749,7 @@ const CommodityDetailDiroNew$1 = (_a) => {
     const curTimeRef = React.useRef(null);
     const [show3DModal, setShow3DModal] = React.useState(false);
     const [showAddToCart, setShowAddToCart] = React.useState(false);
+    const [addToCartVariantId, setAddToCartVariantId] = React.useState(undefined);
     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);
@@ -12755,16 +12765,33 @@ const CommodityDetailDiroNew$1 = (_a) => {
         product = p;
         cta = p === null || p === void 0 ? void 0 : p.bindCta;
     }
+    // 是否为 SKU 层绑定（variantId 和 variantOption 同时存在时）
+    const isSkuLevel = !!(product === null || product === void 0 ? void 0 : product.variantId) && !!(product === null || product === void 0 ? void 0 : product.variantOption);
+    const handleOpenAddToCart = (variantId) => {
+        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);
+        }
+        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({ eventSubject: 'clickShopifyPopup', eventDescription: 'User clicked to open Shopify popup' }, data, product, position);
+        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 }));
+        setAddToCartVariantId(variantId);
+        setShowAddToCart(true);
+    };
     const handleLink = (e) => {
         e.preventDefault();
-        // 问题3：只有 Shopify 商品（有 shopifyId）才打开加购弹窗
         if (!(product === null || product === void 0 ? void 0 : product.shopifyId)) {
-            console.warn('[CommodityDetailDiroNew] 非 Shopify 商品，跳转到外链');
-            // 上报点击事件
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'clickCta',
-                eventDescription: 'User clicked the CTA'
-            }, data, product, position);
+            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,
@@ -12776,42 +12803,21 @@ const CommodityDetailDiroNew$1 = (_a) => {
                 target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
                 target_url: product === null || product === void 0 ? void 0 : product.link
             });
-            // 跳转外链时无论 isPost 是否为 true 都需要上报 productView
             productView(data, product, cta, viewTime || curTimeRef.current, position);
-            // 跳转到商品链接
             if (product === null || product === void 0 ? void 0 : product.link) {
                 window.location.href = window.getJointUtmLink(product.link);
             }
             return;
         }
-        // Shopify 商品：上报点击事件
-        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
-        });
-        // 打开加购弹窗时无论 isPost 是否为 true 都需要上报 productView
-        productView(data, product, cta, viewTime || curTimeRef.current, position);
-        // 上报 clickShopifyPopup 事件（打开购物车弹窗时上报，无论是 feed 流 post 还是商品详情弹窗内）
-        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-            eventSubject: 'clickShopifyPopup',
-            eventDescription: 'User clicked to open Shopify popup'
-        }, data, product, 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);
+        // SKU 层绑定：直接传入 variantId 预选该 SKU
+        handleOpenAddToCart(isSkuLevel ? product === null || product === void 0 ? void 0 : product.variantId : undefined);
     };
+    // popup 模式下，若为 SKU 层绑定，直接自动打开加购弹窗
+    React.useEffect(() => {
+        if (!isActive || isPost || !isSkuLevel)
+            return;
+        handleOpenAddToCart(product === null || product === void 0 ? void 0 : product.variantId);
+    }, [isActive, isPost, isSkuLevel]);
     React.useEffect(() => {
         var _a, _b;
         if (!isActive)
@@ -12851,8 +12857,10 @@ const CommodityDetailDiroNew$1 = (_a) => {
                 content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
             });
         };
-        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
-        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        const handleShow = () => onShow();
+        const handleHide = () => onHide();
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, handleShow);
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, handleHide);
         return () => {
             var _a;
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
@@ -12865,8 +12873,8 @@ const CommodityDetailDiroNew$1 = (_a) => {
                 contentType: 'product',
                 view_time: new Date() - curTimeRef.current
             });
-            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW);
-            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, handleShow);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, handleHide);
         };
     }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
     React.useEffect(() => {
@@ -13090,7 +13098,7 @@ Made in Italy` })));
                         border: 'none'
                     } }))),
         showAddToCart && (React.createElement(Modal$1, { visible: showAddToCart, padding: 0, isFullScreen: false, onClose: () => setShowAddToCart(false) },
-            React.createElement(AddToCartPopup$1, { isActive: true })))));
+            React.createElement(AddToCartPopup$1, { isActive: true, defaultVariantId: addToCartVariantId })))));
 };
 var CommodityDetailDiroNewComponent = React.memo(CommodityDetailDiroNew$1);
 
@@ -24676,9 +24684,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
         viewTime.current = new Date();
     };
     const handleReportProductView = (item, position) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
-            productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, position !== null && position !== void 0 ? position : activeIndex);
+            // Shopify 加购模式下，点击 Shop Now 打开购物车不上报 productView，只有跳外链才上报
+            const isEnableAddToCart = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.some((v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.item) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.enableAddToCart; });
+            if (isEnableAddToCart)
+                return;
+            productView(item, item.product, (_d = item === null || item === void 0 ? void 0 : item.product) === null || _d === void 0 ? void 0 : _d.bindCta, viewTime.current, position !== null && position !== void 0 ? position : activeIndex);
         }
     };
     React.useEffect(() => {