pb-sxp-ui 1.20.18 → 1.20.20

package/lib/materials/sxp/popup/AddToCart/settingRender.js

@@ -0,0 +1,279 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: 'Shopify配置',
+        child: [
+            {
+                type: 'Input',
+                label: 'Shopify域名',
+                name: ['props', 'shopifyDomain'],
+                placeholder: 'your-store.myshopify.com'
+            },
+            {
+                type: 'Input',
+                label: 'Storefront Token',
+                name: ['props', 'storefrontAccessToken'],
+                placeholder: 'Storefront Access Token'
+            }
+        ]
+    },
+    {
+        title: '弹窗背景',
+        child: [
+            {
+                type: 'Number',
+                label: '左右边距',
+                name: ['props', 'popupBg', 'horizontalMargin']
+            },
+            {
+                type: 'Number',
+                label: '下边距',
+                name: ['props', 'popupBg', 'bottomMargin']
+            }
+        ]
+    },
+    {
+        title: '商品信息样式',
+        child: [
+            {
+                name: ['props', 'variantStyles'],
+                type: 'SelectLinkage',
+                child: [
+                    {
+                        label: '字段',
+                        type: 'Select',
+                        options: [
+                            {
+                                label: '商品标题',
+                                value: 'title'
+                            },
+                            {
+                                label: '价格',
+                                value: 'price'
+                            },
+                            {
+                                label: '规格选项',
+                                value: 'option'
+                            },
+                            {
+                                label: '已选规格',
+                                value: 'selectedOption'
+                            }
+                        ],
+                        name: ['props', 'variantStyles', 'field'],
+                        initialValue: 'title'
+                    },
+                    {
+                        type: 'Group',
+                        child: [
+                            {
+                                label: '上边距',
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['marginTop']
+                            },
+                            {
+                                label: '下边距',
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['marginBottom']
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '字体',
+                        child: [
+                            {
+                                type: 'Select',
+                                name: ['fontFamily-cn'],
+                                bottomText: '中文字体'
+                            },
+                            {
+                                type: 'Select',
+                                name: ['fontFamily-en'],
+                                bottomText: '英文/其他字体'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
+                            },
+                            {
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['fontSize']
+                            }
+                        ]
+                    },
+                    {
+                        label: '样式',
+                        type: 'TextStyle'
+                    },
+                    {
+                        label: '对齐',
+                        type: 'TextAlign'
+                    },
+                    {
+                        label: '间距',
+                        type: 'TextSpace'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        title: '加购按钮样式',
+        child: [
+            {
+                label: '英文大小写',
+                type: 'Select',
+                name: ['props', 'buttonStyle', 'textTransform'],
+                options: [
+                    {
+                        label: '默认',
+                        value: 'unset'
+                    },
+                    {
+                        label: '小写',
+                        value: 'lowercase'
+                    },
+                    {
+                        label: '大写',
+                        value: 'uppercase'
+                    }
+                ]
+            },
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['props', 'buttonStyle', 'backgroundColor'],
+                initialValue: '#000'
+            },
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'TextMargin',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color'],
+                        initialValue: '#fff'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'fontSize'],
+                        addonAfter: 'px'
+                    }
+                ]
+            },
+            {
+                type: 'TextStyle',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'TextAlign',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                label: '间距',
+                type: 'TextSpace',
+                name: ['props', 'buttonStyle']
+            }
+        ]
+    },
+    {
+        title: '文案配置',
+        child: [
+            {
+                type: 'Input',
+                label: '加购按钮文案',
+                name: ['props', 'texts', 'addToCart'],
+                placeholder: 'Add to Cart'
+            },
+            {
+                type: 'Input',
+                label: '选择规格提示',
+                name: ['props', 'texts', 'selectOptions'],
+                placeholder: 'Please select options'
+            },
+            {
+                type: 'Input',
+                label: '加载文案',
+                name: ['props', 'texts', 'loading'],
+                placeholder: 'Loading...'
+            },
+            {
+                type: 'Input',
+                label: '错误文案',
+                name: ['props', 'texts', 'error'],
+                placeholder: 'Failed to load product'
+            }
+        ]
+    },
+    {
+        title: '数量选择器',
+        child: [
+            {
+                type: 'Number',
+                label: '按钮间距',
+                name: ['props', 'quantityStyle', 'gap'],
+                addonAfter: 'px',
+                initialValue: 12
+            }
+        ]
+    }
+];

package/lib/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -53,6 +53,8 @@ export interface ICommodityDetailProps {
     isTel?: boolean;
     iframeBgColor?: string;
     isActive?: boolean;
+    enableAddToCart?: boolean;
+    addToCartPopupId?: string;
 }
 declare const _default: React.NamedExoticComponent<ICommodityDetailProps>;
 export default _default;

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -17,8 +17,8 @@ const materials_1 = require("../../../../core/utils/materials");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
-    const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent } = (0, hooks_1.useSxpDataSource)();
+    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true, enableAddToCart = false, addToCartPopupId = '' } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive", "enableAddToCart", "addToCartPopupId"]);
+    const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
     const curTimeRef = (0, react_1.useRef)(null);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
@@ -39,6 +39,27 @@ const CommodityDetail = (_a) => {
         cta = p === null || p === void 0 ? void 0 : p.bindCta;
     }
     const handleLink = (e) => {
+        if (enableAddToCart && addToCartPopupId) {
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, data), { index: position }));
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ClickCTA',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                data,
+                position,
+                cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                cta_action_type: 'open_internal_popup',
+                target_content_id: product === null || product === void 0 ? void 0 : product.itemId
+            });
+            console.log('[CommodityDetail] 打开加购弹窗:', addToCartPopupId);
+            if (typeof window !== 'undefined' && window.sxpPopup) {
+                window.sxpPopup(addToCartPopupId);
+            }
+            else {
+                console.warn('[CommodityDetail] sxpPopup 方法不存在');
+            }
+            return;
+        }
         if (product === null || product === void 0 ? void 0 : product.link) {
             jumpToWeb(e, data, product, cta, position);
             if (!isPost) {
@@ -63,6 +84,13 @@ const CommodityDetail = (_a) => {
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
+        else {
+            console.warn('[CommodityDetail] 商品未配置跳转链接，且未启用加购功能', {
+                productId: product === null || product === void 0 ? void 0 : product.itemId,
+                enableAddToCart,
+                addToCartPopupId
+            });
+        }
     };
     (0, react_1.useEffect)(() => {
         var _a, _b;

package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -270,5 +270,18 @@ declare const _default: ({
         addonAfter: string;
         initialValue?: undefined;
     })[];
+} | {
+    title: string;
+    child: ({
+        label: string;
+        type: string;
+        name: string[];
+        placeholder?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        placeholder: string;
+    })[];
 })[];
 export default _default;

package/lib/materials/sxp/popup/CommodityDetail/settingRender.js

@@ -398,5 +398,21 @@ exports.default = [
                 name: ['props', 'enableFixedCloseButton']
             }
         ]
+    },
+    {
+        title: '加购功能',
+        child: [
+            {
+                label: '启用加购弹窗',
+                type: 'Switch',
+                name: ['props', 'enableAddToCart']
+            },
+            {
+                label: '加购弹窗ID',
+                type: 'Input',
+                name: ['props', 'addToCartPopupId'],
+                placeholder: '请输入加购弹窗的ID'
+            }
+        ]
     }
 ];

package/lib/materials/sxp/popup/index.d.ts

@@ -5,3 +5,4 @@ export * from './CommodityDetailDiroNew/material';
 export * from './CommodityList/material';
 export * from './Iframe/material';
 export * from './ConsentDetail/material';
+export * from './AddToCart/material';

package/lib/materials/sxp/popup/index.js

@@ -8,3 +8,4 @@ tslib_1.__exportStar(require("./CommodityDetailDiroNew/material"), exports);
 tslib_1.__exportStar(require("./CommodityList/material"), exports);
 tslib_1.__exportStar(require("./Iframe/material"), exports);
 tslib_1.__exportStar(require("./ConsentDetail/material"), exports);
+tslib_1.__exportStar(require("./AddToCart/material"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.20.18",
+  "version": "1.20.20",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",