pb-sxp-ui 1.20.17 → 1.20.19

package/es/core/components/SxpPageRender/index.d.ts

@@ -79,6 +79,8 @@ export interface ISxpPageRenderProps {
             expires?: number;
             enable?: boolean;
         };
+        shopifyDomain?: string;
+        storefrontAccessToken?: string;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -12,7 +12,7 @@ export interface IEventTimeType {
     time: Date;
     target: EventTarget;
 }
-export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed';
+export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed' | 'AddToCart';
 export interface ISxpDataSourceContext {
     rtcList: RecItemType[];
     setRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;

package/es/materials/sxp/popup/AddToCart/index.d.ts

@@ -0,0 +1,33 @@
+import { FC, CSSProperties } from 'react';
+import './index.less';
+export interface IAddToCartPopupProps {
+    style?: CSSProperties;
+    isActive?: boolean;
+    index?: number;
+    shopifyDomain?: string;
+    storefrontAccessToken?: string;
+    variantStyles?: {
+        title?: CSSProperties;
+        price?: CSSProperties;
+        option?: CSSProperties;
+        selectedOption?: CSSProperties;
+    };
+    buttonStyle?: CSSProperties;
+    quantityStyle?: CSSProperties;
+    texts?: {
+        addToCart?: string;
+        selectOptions?: string;
+        loading?: string;
+        error?: string;
+        color?: string;
+        size?: string;
+        material?: string;
+        style?: string;
+    };
+    popupBg?: {
+        horizontalMargin?: number;
+        bottomMargin?: number;
+    };
+}
+declare const AddToCartPopup: FC<IAddToCartPopupProps>;
+export default AddToCartPopup;

package/es/materials/sxp/popup/AddToCart/index.js

@@ -0,0 +1,279 @@
+import { __awaiter, __rest } from "tslib";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+import { setFontForText } from '../../../../core/utils/tool';
+import './index.less';
+const AddToCartPopup = (_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();
+    const { jumpToWeb } = useEventReport();
+    const curTimeRef = useRef(null);
+    const [productData, setProductData] = useState(null);
+    const [selectedOptions, setSelectedOptions] = useState({});
+    const [selectedVariant, setSelectedVariant] = useState(null);
+    const [quantity, setQuantity] = useState(1);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    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];
+    const cta = 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;
+    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';
+    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'
+    };
+    const fetchProductData = 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
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
+            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]);
+    useEffect(() => {
+        if (isActive) {
+            fetchProductData();
+        }
+    }, [isActive, fetchProductData]);
+    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 = 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 = 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 = 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 = 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
+                }]
+        });
+        window.location.href = cartUrl;
+    }, [selectedVariant, quantity, finalShopifyDomain, bffFbReport, product, data, position]);
+    const totalPrice = useMemo(() => {
+        if (!selectedVariant)
+            return null;
+        const price = parseFloat(selectedVariant.price.amount);
+        const total = price * quantity;
+        return total.toFixed(2);
+    }, [selectedVariant, quantity]);
+    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)
+                } }))));
+};
+export default AddToCartPopup;

package/es/materials/sxp/popup/AddToCart/interactionRender.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/es/materials/sxp/popup/AddToCart/interactionRender.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export default () => {
+    return (React.createElement("div", { style: { padding: '20px', color: '#666' } },
+        React.createElement("p", null, "\u52A0\u8D2D\u5546\u54C1\u5F39\u7A97\u4EA4\u4E92\u8BF4\u660E\uFF1A"),
+        React.createElement("ul", { style: { paddingLeft: '20px', lineHeight: '1.8' } },
+            React.createElement("li", null, "\u70B9\u51FB\u5546\u54C1\u8BE6\u60C5\u5F39\u7A97\u7684\"Shop Now\"\u6309\u94AE\u540E\u81EA\u52A8\u5C55\u793A"),
+            React.createElement("li", null, "\u901A\u8FC7Shopify Storefront API\u83B7\u53D6\u5546\u54C1\u89C4\u683C\u548C\u5E93\u5B58\u4FE1\u606F"),
+            React.createElement("li", null, "\u7528\u6237\u9009\u62E9\u89C4\u683C\u540E\u5B9E\u65F6\u663E\u793A\u5BF9\u5E94SKU\u7684\u4EF7\u683C\u548C\u5E93\u5B58"),
+            React.createElement("li", null, "\u70B9\u51FB\"Add to Cart\"\u6309\u94AE\u540E\u8DF3\u8F6C\u81F3Shopify\u8D2D\u7269\u8F66\u9875\u9762"),
+            React.createElement("li", null, "\u65E0\u5E93\u5B58\u6216\u4E0D\u53EF\u552E\u5356\u7684\u89C4\u683C\u81EA\u52A8\u7F6E\u7070\u4E0D\u53EF\u9009"))));
+};

package/es/materials/sxp/popup/AddToCart/material.d.ts

@@ -0,0 +1,2 @@
+declare const AddToCartPopup: import("../../../../core/create").MaterialComponet<import(".").IAddToCartPopupProps>;
+export { AddToCartPopup };

package/es/materials/sxp/popup/AddToCart/material.js

@@ -0,0 +1,75 @@
+import settingRender from './settingRender';
+import interactionRender from './interactionRender';
+import AddToCartPopupComponent from '.';
+import { createMaterial } from '../../../../core/create';
+const AddToCartPopup = createMaterial(AddToCartPopupComponent, {
+    displayName: '加购商品',
+    icon: '',
+    category: 'popup',
+    type: 'AddToCartPopup',
+    related: {
+        settingRender,
+        interactionRender
+    },
+    defaulSetting: {
+        props: {
+            shopifyDomain: '',
+            storefrontAccessToken: '',
+            variantStyles: {
+                title: {
+                    color: '#000',
+                    fontSize: 20,
+                    fontWeight: 600,
+                    marginBottom: 12
+                },
+                price: {
+                    color: '#000',
+                    fontSize: 24,
+                    fontWeight: 700,
+                    marginBottom: 16
+                },
+                option: {
+                    color: '#111',
+                    fontSize: 16,
+                    fontWeight: 600,
+                    marginBottom: 12
+                },
+                selectedOption: {
+                    fontSize: 14,
+                    color: '#374151'
+                }
+            },
+            buttonStyle: {
+                backgroundColor: '#000',
+                color: '#fff',
+                fontSize: 16,
+                height: 52,
+                fontWeight: 600,
+                textAlign: 'center',
+                textTransform: 'uppercase'
+            },
+            quantityStyle: {
+                gap: 12
+            },
+            texts: {
+                addToCart: 'Add to Cart',
+                selectOptions: 'Please select options',
+                loading: 'Loading...',
+                error: 'Failed to load product',
+                color: 'Color',
+                size: 'Size',
+                material: 'Material',
+                style: 'Style'
+            },
+            popupBg: {
+                horizontalMargin: 0,
+                bottomMargin: 0
+            }
+        },
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 7
+});
+export { AddToCartPopup };

package/es/materials/sxp/popup/AddToCart/settingRender.d.ts

@@ -0,0 +1,160 @@
+declare const _default: ({
+    title: string;
+    child: {
+        type: string;
+        label: string;
+        name: string[];
+        placeholder: string;
+    }[];
+} | {
+    title: string;
+    child: {
+        name: string[];
+        type: string;
+        child: ({
+            label: string;
+            type: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            name: string[];
+            initialValue: string;
+            child?: undefined;
+        } | {
+            type: string;
+            child: {
+                label: string;
+                type: string;
+                addonAfter: string;
+                name: string[];
+            }[];
+            label?: undefined;
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: {
+                type: string;
+                name: string[];
+                bottomText: string;
+            }[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: ({
+                type: string;
+                name: string[];
+                addonAfter?: undefined;
+            } | {
+                type: string;
+                addonAfter: string;
+                name: string[];
+            })[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            label: string;
+            type: string;
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+            child?: undefined;
+        })[];
+    }[];
+} | {
+    title: string;
+    child: ({
+        label: string;
+        type: string;
+        name: string[];
+        options: {
+            label: string;
+            value: string;
+        }[];
+        initialValue?: undefined;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        initialValue: string;
+        options?: undefined;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            max: number;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            max: number;
+        })[];
+        name?: undefined;
+        options?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        label?: undefined;
+        options?: undefined;
+        initialValue?: undefined;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            bottomText: string;
+        }[];
+        name?: undefined;
+        options?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            initialValue: string;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            initialValue?: undefined;
+        })[];
+        name?: undefined;
+        options?: undefined;
+        initialValue?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        options?: undefined;
+        initialValue?: undefined;
+        child?: undefined;
+    })[];
+} | {
+    title: string;
+    child: {
+        type: string;
+        label: string;
+        name: string[];
+        addonAfter: string;
+        initialValue: number;
+    }[];
+})[];
+export default _default;