@anker-in/headless-ui 1.3.60 → 1.3.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +25 -0
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.d.ts +7 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.js +2 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.js.map +7 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.d.ts +8 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +2 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map +7 -0
- package/dist/cjs/biz-components/SwiperBox/index.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/cjs/biz-components/SwiperBox/types.d.ts +6 -0
- package/dist/cjs/biz-components/SwiperBox/types.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/types.js.map +1 -1
- package/dist/cjs/biz-components/index.d.ts +3 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +25 -0
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.d.ts +7 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.js +2 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.js.map +7 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.d.ts +8 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +2 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map +7 -0
- package/dist/esm/biz-components/SwiperBox/index.js +1 -1
- package/dist/esm/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/esm/biz-components/SwiperBox/types.d.ts +6 -0
- package/dist/esm/biz-components/SwiperBox/types.js.map +1 -1
- package/dist/esm/biz-components/index.d.ts +3 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/tokens/anker.css +2 -1
- package/dist/tokens/base.css +2 -1
- package/dist/tokens/eufy.css +2 -1
- package/dist/tokens/eufyMake.css +2 -1
- package/dist/tokens/oneAnker.css +4 -2
- package/dist/tokens/solix.css +2 -1
- package/dist/tokens/soundcore.css +4 -2
- package/package.json +1 -1
- package/style.css +105 -9
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const isView = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n const getItems = (currentData: ShelfDisplayItem[], flag: boolean): ShelfDisplayItem[] => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => ({ ...item, isShowRecommended: true }))\n return newCurrentData?.length ? newCurrentData : []\n }\n if (!Array.isArray(currentData)) return []\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n return newCurrentData?.length ? (newCurrentData as ShelfDisplayItem[]) : []\n }\n\n const safeInstanceId = sanitizeCssSelector(instanceId)\n\n const renderSwiperBox = (items: ShelfDisplayItem[], tabValue?: string) => {\n const isOnce = items.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && items.length <= 2 && isDisplayGudgments\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? items.length : 4\n case 1024:\n return isShowGudgments ? items.length : 3\n default:\n return isShowGudgments ? items.length : 2.3\n }\n }\n const swiperInstanceId = tabValue ? `${safeInstanceId}-${sanitizeCssSelector(tabValue)}` : safeInstanceId\n\n return (\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: items,\n configuration: {\n ...other,\n event,\n isShowTag,\n isShowOriginalPrice,\n target,\n metafields,\n itemLength: items.length,\n isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: { spaceBetween: 12, freeMode: false, slidesPerView: 1 },\n 374: { spaceBetween: 12, freeMode: false, slidesPerView: isOnce ? 1 : 1.2 },\n 768: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength() },\n 1024: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1024) },\n 1440: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1440) },\n }\n }\n />\n )\n }\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n {isShowTab && productsTab?.length > 0 ? (\n <Tabs\n defaultValue={productsTab?.[0]?.tab}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (!currentTab) return\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n {productsTab.map(tab => (\n <TabsContent key={tab?.id || tab?.tab} value={tab?.tab}>\n {renderSwiperBox(getItems(tab?.data || [], tab?.isShowRecommendedTab), tab?.tab)}\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n renderSwiperBox(getItems(productsCard, isShowRecommendedCard))\n )}\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useId", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "isView", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "isOnce", "isShowGudgments", "showItemLength", "size", "swiperInstanceId", "currentTab", "tab", "ShelfDisplay_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useId, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n isTile = false,\n tileMaxRows,\n tileExpandText = 'Show more',\n tileCollapseText = 'Show less',\n ...other\n } = data\n\n const isView = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const [mounted, setMounted] = useState(false)\n useEffect(() => {\n setMounted(true)\n }, [])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px)' })\n const isDesktop = useMediaQuery({ query: '(min-width: 1440px)' })\n const [tileExpanded, setTileExpanded] = useState(false)\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n const getItems = (currentData: ShelfDisplayItem[], flag: boolean): ShelfDisplayItem[] => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => ({ ...item, isShowRecommended: true }))\n return newCurrentData?.length ? newCurrentData : []\n }\n if (!Array.isArray(currentData)) return []\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n return newCurrentData?.length ? (newCurrentData as ShelfDisplayItem[]) : []\n }\n\n const safeInstanceId = sanitizeCssSelector(instanceId)\n\n const renderSwiperBox = (items: ShelfDisplayItem[], tabValue?: string) => {\n const configuration = {\n ...other,\n event,\n isShowTag,\n isShowOriginalPrice,\n target,\n metafields,\n itemLength: items.length,\n isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n }\n\n if (isTile && mounted && isLaptop) {\n // \u5E73\u94FA\u5E03\u5C40\uFF1AtileMaxRows \u8BBE\u7F6E\u540E\uFF0C\u8D85\u8FC7\u884C\u6570\u6298\u53E0\u6536\u8D77\n const colsPerRow = isDesktop ? 4 : 3\n const hasRowLimit = typeof tileMaxRows === 'number' && tileMaxRows > 0\n const maxVisibleItems = hasRowLimit ? tileMaxRows * colsPerRow : items.length\n const shouldCollapse = hasRowLimit && items.length > maxVisibleItems\n const visibleItems = shouldCollapse && !tileExpanded ? items.slice(0, maxVisibleItems) : items\n\n return (\n <div>\n <div\n className={cn('shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4', isShowTab ? 'mt-6' : '')}\n >\n {visibleItems.map((item, index) => (\n <ShelfDisplayWrapItem\n key={item?.id || item?.handle || index}\n data={item}\n configuration={{ ...configuration, index }}\n />\n ))}\n </div>\n {shouldCollapse && (\n <div className=\"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center\">\n <button className=\"laptop:text-base text-sm font-bold\" onClick={() => setTileExpanded(prev => !prev)}>\n {tileExpanded ? tileCollapseText : tileExpandText}\n </button>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('laptop:size-5 size-4', tileExpanded && 'rotate-180')}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n )}\n </div>\n )\n }\n\n const isOnce = items.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && items.length <= 2 && isDisplayGudgments\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? items.length : 4\n case 1025:\n return isShowGudgments ? items.length : 3\n default:\n return isShowGudgments ? items.length : 2.3\n }\n }\n const swiperInstanceId = tabValue ? `${safeInstanceId}-${sanitizeCssSelector(tabValue)}` : safeInstanceId\n\n return (\n <SwiperBox\n key={swiperInstanceId}\n data={{ list: items, configuration }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n showNavigation\n navigationPrevClassName=\"left-4 desktop:left-6\"\n navigationNextClassName=\"right-4 desktop:right-6\"\n breakpoints={\n breakpoints || {\n 0: { spaceBetween: 12, freeMode: false, slidesPerView: 1 },\n 374: { spaceBetween: 12, freeMode: false, slidesPerView: isOnce ? 1 : 1.2 },\n 768: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength() },\n 1024: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1024) },\n 1440: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1440) },\n }\n }\n />\n )\n }\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n {isShowTab && productsTab?.length > 0 ? (\n <Tabs\n defaultValue={productsTab?.[0]?.tab}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (!currentTab) return\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n {productsTab.map(tab => (\n <TabsContent key={tab?.id || tab?.tab} value={tab?.tab}>\n {renderSwiperBox(getItems(tab?.data || [], tab?.isShowRecommendedTab), tab?.tab)}\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n renderSwiperBox(getItems(productsCard, isShowRecommendedCard))\n )}\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useId", "useState", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "isTile", "tileMaxRows", "tileExpandText", "tileCollapseText", "other", "isView", "innerRef", "instanceId", "mounted", "setMounted", "isMobile", "isLaptop", "isDesktop", "tileExpanded", "setTileExpanded", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "configuration", "colsPerRow", "hasRowLimit", "maxVisibleItems", "shouldCollapse", "visibleItems", "prev", "isOnce", "isShowGudgments", "showItemLength", "size", "swiperInstanceId", "currentTab", "tab", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -57,6 +57,12 @@ export interface ShelfDisplayItem {
|
|
|
57
57
|
custom_theme?: string;
|
|
58
58
|
custom_bg_image?: string;
|
|
59
59
|
}
|
|
60
|
+
export interface SocialEndorsementItem {
|
|
61
|
+
/** 图标:图片 URL 字符串,或 SVG React 节点 */
|
|
62
|
+
icon: string | React.ReactNode;
|
|
63
|
+
/** 无障碍标签 */
|
|
64
|
+
label?: string;
|
|
65
|
+
}
|
|
60
66
|
export type ShelfDisplayType = {
|
|
61
67
|
title?: string;
|
|
62
68
|
isShowTab?: boolean;
|
|
@@ -81,6 +87,24 @@ export type ShelfDisplayType = {
|
|
|
81
87
|
secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
|
|
82
88
|
theme?: 'light' | 'dark';
|
|
83
89
|
containerProps?: ContainerProps;
|
|
90
|
+
/** 是否平铺网格布局(≥1025px 生效,一行 3 个,≥1440px 一行 4 个,≤1024px 仍为轮播) */
|
|
91
|
+
isTile?: boolean;
|
|
92
|
+
/** 平铺布局下最多展示的行数,超过该行数时折叠收起,需点击「展开」查看更多。未设置则不折叠 */
|
|
93
|
+
tileMaxRows?: number;
|
|
94
|
+
/** 平铺布局折叠时「展开」按钮文案,默认 'Show more' */
|
|
95
|
+
tileExpandText?: string;
|
|
96
|
+
/** 平铺布局展开后「收起」按钮文案,默认 'Show less' */
|
|
97
|
+
tileCollapseText?: string;
|
|
98
|
+
/** shelf-prices-tag(折扣价格标签)是否显示,默认 false。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
99
|
+
isShowPricesTag?: boolean;
|
|
100
|
+
/** shelf-prices-tag 文案颜色,建议使用 Design Token CSS 变量,如 var(--info-primary-color)。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
101
|
+
pricesTagTextColor?: string;
|
|
102
|
+
/** shelf-prices-tag 背景颜色,设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
103
|
+
pricesTagBgColor?: string;
|
|
104
|
+
/** shelf-items-tag(自定义标签)文案颜色。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
105
|
+
itemsTagTextColor?: string;
|
|
106
|
+
/** shelf-items-tag 背景颜色,设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
107
|
+
itemsTagBgColor?: string;
|
|
84
108
|
};
|
|
85
109
|
export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
86
110
|
data: ShelfDisplayType;
|
|
@@ -103,6 +127,7 @@ export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
103
127
|
slidesPerView: number;
|
|
104
128
|
};
|
|
105
129
|
};
|
|
130
|
+
/** 元数据:折扣文案(discounts.off / discountsCopy.off)及社媒背书图标(socialEndorsements: SocialEndorsementItem[]) */
|
|
106
131
|
metafields?: any;
|
|
107
132
|
isDisplayGudgments?: boolean;
|
|
108
133
|
isDisplayBackImage?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import h from"decimal.js";import{PRICE_SYMBOL as
|
|
1
|
+
import h from"decimal.js";import{PRICE_SYMBOL as l,formatPrice as p,languageTerritory as D}from"../../helpers/index.js";function x({amount:t,baseAmount:n,currencyCode:a,currencyDisplay:o,locale:e,maximumFractionDigits:g,minimumFractionDigits:y,removeTrailingZeros:d,customFormatPrice:i}){if(typeof Intl>"u")return{price:`${l[e]}${t}`,basePrice:`${l[e]}${n}`,discount:`${l[e]}${n-t||0}`};const s=n>t;let c=null;const u=D(e);if(u){const r=new Intl.NumberFormat(u,{style:"percent"});c=s?r.format((n-t)/n):null}let m;if(s){const r=new h(n).sub(t||0).toNumber();m=i?i({amount:r,locale:e}):p({amount:r,currencyDisplay:o,currencyCode:a||"USD",locale:e,maximumFractionDigits:2})}const f=i?i({amount:t,locale:e}):p({amount:t,currencyCode:a,currencyDisplay:o,locale:e,removeTrailingZeros:d}),b=s?i?i({amount:n,locale:e}):p({amount:n,currencyCode:a,currencyDisplay:o,locale:e,maximumFractionDigits:g,minimumFractionDigits:y,removeTrailingZeros:d}):void 0;return{price:f,basePrice:b,discount:c,discountAmount:m}}export{x as formatVariantPrice};
|
|
2
2
|
//# sourceMappingURL=shelfDisplay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
|
|
4
|
-
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n amount: number\n isDigits?: boolean\n withOutSymbol?: boolean\n locale?: string\n forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n customFormatPrice,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n customFormatPrice?: FormattedPriceFunc\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = customFormatPrice\n ? customFormatPrice({ amount: savePriceAmount, locale })\n : formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = customFormatPrice\n ? customFormatPrice({ amount, locale })\n : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? customFormatPrice\n ? customFormatPrice({ amount: baseAmount, locale })\n : formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n custom_bg_image?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /**\n * \u6309\u94AE\u4E8B\u4EF6\n * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n */\n event?: EventType\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n\n /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n formatPrice?: FormattedPriceFunc\n /**\n * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n */\n renderOriginalPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n }\n ) => React.ReactNode\n /**\n * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n */\n renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n /**\n * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n */\n renderPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n variant: any\n coupon: any\n isSoldOut: boolean\n }\n ) => React.ReactNode\n}\n"],
|
|
4
|
+
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n amount: number\n isDigits?: boolean\n withOutSymbol?: boolean\n locale?: string\n forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n customFormatPrice,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n customFormatPrice?: FormattedPriceFunc\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = customFormatPrice\n ? customFormatPrice({ amount: savePriceAmount, locale })\n : formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = customFormatPrice\n ? customFormatPrice({ amount, locale })\n : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? customFormatPrice\n ? customFormatPrice({ amount: baseAmount, locale })\n : formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n custom_bg_image?: string\n}\n\nexport interface SocialEndorsementItem {\n /** \u56FE\u6807\uFF1A\u56FE\u7247 URL \u5B57\u7B26\u4E32\uFF0C\u6216 SVG React \u8282\u70B9 */\n icon: string | React.ReactNode\n /** \u65E0\u969C\u788D\u6807\u7B7E */\n label?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n /** \u662F\u5426\u5E73\u94FA\u7F51\u683C\u5E03\u5C40\uFF08\u22651025px \u751F\u6548\uFF0C\u4E00\u884C 3 \u4E2A\uFF0C\u22651440px \u4E00\u884C 4 \u4E2A\uFF0C\u22641024px \u4ECD\u4E3A\u8F6E\u64AD\uFF09 */\n isTile?: boolean\n /** \u5E73\u94FA\u5E03\u5C40\u4E0B\u6700\u591A\u5C55\u793A\u7684\u884C\u6570\uFF0C\u8D85\u8FC7\u8BE5\u884C\u6570\u65F6\u6298\u53E0\u6536\u8D77\uFF0C\u9700\u70B9\u51FB\u300C\u5C55\u5F00\u300D\u67E5\u770B\u66F4\u591A\u3002\u672A\u8BBE\u7F6E\u5219\u4E0D\u6298\u53E0 */\n tileMaxRows?: number\n /** \u5E73\u94FA\u5E03\u5C40\u6298\u53E0\u65F6\u300C\u5C55\u5F00\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show more' */\n tileExpandText?: string\n /** \u5E73\u94FA\u5E03\u5C40\u5C55\u5F00\u540E\u300C\u6536\u8D77\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show less' */\n tileCollapseText?: string\n /** shelf-prices-tag\uFF08\u6298\u6263\u4EF7\u683C\u6807\u7B7E\uFF09\u662F\u5426\u663E\u793A\uFF0C\u9ED8\u8BA4 false\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n isShowPricesTag?: boolean\n /** shelf-prices-tag \u6587\u6848\u989C\u8272\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Design Token CSS \u53D8\u91CF\uFF0C\u5982 var(--info-primary-color)\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n pricesTagTextColor?: string\n /** shelf-prices-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n pricesTagBgColor?: string\n /** shelf-items-tag\uFF08\u81EA\u5B9A\u4E49\u6807\u7B7E\uFF09\u6587\u6848\u989C\u8272\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n itemsTagTextColor?: string\n /** shelf-items-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n itemsTagBgColor?: string\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /**\n * \u6309\u94AE\u4E8B\u4EF6\n * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n */\n event?: EventType\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n /** \u5143\u6570\u636E\uFF1A\u6298\u6263\u6587\u6848\uFF08discounts.off / discountsCopy.off\uFF09\u53CA\u793E\u5A92\u80CC\u4E66\u56FE\u6807\uFF08socialEndorsements: SocialEndorsementItem[]\uFF09 */\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n\n /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n formatPrice?: FormattedPriceFunc\n /**\n * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n */\n renderOriginalPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n }\n ) => React.ReactNode\n /**\n * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n */\n renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n /**\n * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n */\n renderPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n variant: any\n coupon: any\n isSoldOut: boolean\n }\n ) => React.ReactNode\n}\n"],
|
|
5
5
|
"mappings": "AAAA,OAAOA,MAAa,aAGpB,OAAS,gBAAAC,EAAc,eAAAC,EAAa,qBAAAC,MAAyB,yBAUtD,SAASC,EAAmB,CACjC,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,EACA,kBAAAC,CACF,EAUG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGZ,EAAaQ,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAGJ,EAAaQ,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAGL,EAAaQ,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcR,EAAaD,EACjC,IAAIU,EAAW,KACf,MAAMC,EAAgBb,EAAkBM,CAAM,EAC9C,GAAIO,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQX,EAAaD,GAAUC,CAAU,EAAI,IACvF,CAEA,IAAIY,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAInB,EAAQM,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1Ea,EAAiBL,EACbA,EAAkB,CAAE,OAAQM,EAAiB,OAAAV,CAAO,CAAC,EACrDP,EAAY,CACV,OAAQiB,EACR,gBAAAX,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACP,CAEA,MAAMW,EAAQP,EACVA,EAAkB,CAAE,OAAAR,EAAQ,OAAAI,CAAO,CAAC,EACpCP,EAAY,CAAE,OAAAG,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAChFS,EAAYP,EACdD,EACEA,EAAkB,CAAE,OAAQP,EAAY,OAAAG,CAAO,CAAC,EAChDP,EAAY,CACV,OAAQI,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACH,OAEJ,MAAO,CAAE,MAAAQ,EAAO,UAAAC,EAAW,SAAAN,EAAU,eAAAG,CAAe,CACtD",
|
|
6
6
|
"names": ["Decimal", "PRICE_SYMBOL", "formatPrice", "languageTerritory", "formatVariantPrice", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "customFormatPrice", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as ge,jsx as i,jsxs as b}from"react/jsx-runtime";import{useAiuiContext as ve}from"../AiuiProvider/index.js";import{formatVariantPrice as be}from"./shelfDisplay.js";import he from"../../components/picture.js";import xe from"../../components/badge.js";import{cn as v}from"../../helpers/utils.js";import{Text as ke}from"../../components/text.js";import ie from"../../components/button.js";import{gaTrack as we}from"../../shared/track.js";import{trackUrlRef as _e}from"../../shared/trackUrlRef.js";import{Heading as Se}from"../../components/heading.js";import{useExposure as Ne}from"../../hooks/useExposure.js";import{useRef as Te,useEffect as Be,useMemo as oe,useState as B}from"react";const ne="image",le="product_shelf",ae=999999999e-2,Ce=e=>{const t=e?.sku,C=e?.variants,P=C?.find(L=>L?.sku===t),W=P?.image?.url||C?.[0]?.image?.url||"",U=P?.image?.altText||C?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:W,altText:U}},ze=({data:e,configuration:t})=>{const{isDisplayBackImage:C=!1,itemShape:P,metafields:W,isTopTag:U=!1,isShowTag:L,isShowOriginalPrice:Q,isShowShortTitle:ce=!1,formatPrice:$,renderOriginalPrice:z,renderPriceLabel:X,renderPrice:y}=t||{},{locale:_="es",copyWriting:me,currencyDisplay:Y}=ve(),{discounts:Z,discountsCopy:H}=W||{},E=Te(null),[R,ee]=B([]),[V,pe]=B(""),[te,c]=B(!1),[q,se]=B(!1),D=(s,r,o,l)=>{const{primaryFun:p,onAddCart:d,onBuyNow:g,onLearnMore:K,event:ye}=t||{};if(p){if(p==="AddCart"&&d)return d(s,r+1,o,l);if(p==="BuyNow"&&g)return g(s,r+1,o,l);if(p==="LearnMore"&&K)return K(s,r+1,o,l)}ye?.primaryButton?.(s,r+1,o,l)},de=(s,r,o,l)=>{const{secondaryFun:p,onAddCart:d,onBuyNow:g,onLearnMore:K,event:ye}=t||{};if(p){if(p==="AddCart"&&d)return d(s,r+1,o,l);if(p==="BuyNow"&&g)return g(s,r+1,o,l);if(p==="LearnMore"&&K)return K(s,r+1,o,l)}ye?.secondaryButton?.(s,r+1,o,l)},m=oe(()=>{const s=e?.variants||[];if(s.length)return e?.sku?s?.find?.(r=>r?.sku===e?.sku)||s[0]:s?.[0]},[e?.sku,e?.variants]),u=m?.id?.split?.("/")||[],G=u?.[u?.length-1],S=!m?.availableForSale||m?.price?.amount===ae||m?.price===ae,h=m?.coupons?.[0],N=!!(Q&&h),T=e?.price?.currencyCode||"USD",k=oe(()=>be({locale:_,amount:N?h?.variant_price4wscode:m?.price,baseAmount:N?m?.price:0,currencyCode:T,currencyDisplay:Y,customFormatPrice:$}),[T,_,N,h?.variant_price4wscode,m,$]),{price:x,basePrice:I,discount:w,discountAmount:f}=k,{imageUrl:A,altText:F}=Ce(e),M=e?.custom_name||e?.title,J=ce&&m?.metafields?.infos?.page_short_title||M,j=e?.custom_description||e?.description,ue=()=>{if(h?.value_type==="fixed_amount"){const s=f||"",r=s.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,o,l,p]=r;let d=l;return l.endsWith(".00")?d=l.replace(/\.00$/,""):l.endsWith(",00")&&(d=l.replace(/,00$/,"")),`${o}${d}${p}`}return s}return w||""};Be(()=>{let s=[];if(w||f){const o=`${ue()} ${Z?.off||H?.off||""}`;pe(o),s.push(o)}const r=e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,w?1:2)||[];ee(s.concat(r))},[e?.tags,w,f,Z?.off,H?.off]),Ne(E,{componentType:ne,componentName:le,componentTitle:M,componentDescription:j,position:t?.index+1});const fe=async()=>{if(!te&&!e?.custom_primary_link){c(!0);try{await D(e,t?.index,t,h)}finally{c(!1)}}},O=async()=>{if(!q&&!e?.custom_secondary_link){se(!0);try{await de(e,t?.index,t,h)}finally{se(!1)}}},re=()=>b(ge,{children:[L&&R?.length>0?i("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:R?.map?.((s,r)=>i(xe,{className:"shelf-items-tag",variant:"fill",children:s},r))}):null,J?i(Se,{as:"h3",title:J||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary line-clamp-2 h-12",html:J||""}):null,i(ke,{size:2,className:"lg-desktop:text-lg desktop:h-[24px] lg-desktop:h-[28px] desktop:text-base shelf-display-product-description text-info-primary line-clamp-1 h-[20px] text-sm",html:j||""}),i("div",{className:"mb-2 mt-4 flex items-center",children:y?y(e,{price:x,basePrice:I,discount:w,discountAmount:f,variant:m,coupon:h,isSoldOut:S}):S?i("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:me?.soldOutText}):b(ge,{children:[i("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:m?.availableForSale&&x||""}),z?z(e,{price:x,basePrice:I,discount:w,discountAmount:f}):I&&i("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:m?.availableForSale&&I||""})]})}),!y&&X?.(e,m),b("div",{className:v("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?i(ie,{disabled:S&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:O,loading:q,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?i(ie,{disabled:S&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:fe,loading:te,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]}),n=e?.custom_bg_image,a=e?.custom_theme;return i("div",{ref:E,className:v("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item",n?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":a==="dark"}),style:n?{backgroundImage:`url(${n})`}:void 0,children:C?i("div",{className:"absolute inset-0 box-border overflow-hidden",children:b("div",{className:"relative inset-0 size-full",children:[i(he,{source:A,alt:F,className:v("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":n})}),i("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:re()})]})}):b("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[V&&U&&i(xe,{className:"shelf-prices-tag absolute left-4 top-4 z-10",variant:"fill",children:V||""}),i("div",{className:v("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden",{"opacity-0":n}),children:i("a",{"aria-label":M,target:t?.target,href:_e(`${_==="us"||!_?"":`/${_}`}/products/${e?.handle}?variant=${G}`,`${ne}_${le}`),onClick:()=>{we({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||m?.sku,item_name:e?.name,item_variant:m?.name,price:m?.price,index:t?.index+1}]}})},children:i(he,{source:A,alt:F,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),re()]})},e?.id||e?.handle)},He=({data:e,configuration:t})=>{const{itemShape:C,itemLength:P,metafields:W,isShowShortTitle:U,formatPrice:L,renderOriginalPrice:Q,renderPriceLabel:ce,renderPrice:$}=t||{},{discounts:z,discountsCopy:X}=W||{},{locale:y="us",copyWriting:_,currencyDisplay:me}=ve(),[Y,Z]=B([]),H=Te(null),[E,R]=B(!1),[ee,V]=B(!1),pe=(n,a,s,r)=>{const{primaryFun:o,onAddCart:l,onBuyNow:p,onLearnMore:d,event:g}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,s,r);if(o==="BuyNow"&&p)return p(n,a+1,s,r);if(o==="LearnMore"&&d)return d(n,a+1,s,r)}g?.primaryButton?.(n,a+1,s,r)},te=(n,a,s,r)=>{const{secondaryFun:o,onAddCart:l,onBuyNow:p,onLearnMore:d,event:g}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,s,r);if(o==="BuyNow"&&p)return p(n,a+1,s,r);if(o==="LearnMore"&&d)return d(n,a+1,s,r)}g?.secondaryButton?.(n,a+1,s,r)},c=oe(()=>{const n=e?.variants||[];if(n.length)return e?.sku&&n.find(a=>a?.sku===e?.sku)||n[0]},[e?.sku,e?.variants]),q=c?.id?.split?.("/")||[],se=q?.[q?.length-1],D=!c?.availableForSale||c?.price?.amount===ae||c?.price===ae,de=t?.isShowTag,m=t?.isShowOriginalPrice,u=c?.coupons?.[0],G=!!(m&&u),S=e?.price?.currencyCode||"USD",h=oe(()=>be({locale:y,amount:G?u?.variant_price4wscode:c?.price,baseAmount:G?c?.price:0,currencyCode:S,currencyDisplay:me,customFormatPrice:L}),[S,y,G,u?.variant_price4wscode,c,L]),{price:N,basePrice:T,discount:k,discountAmount:x}=h,{imageUrl:I,altText:w}=Ce(e),f=e?.custom_name||e?.title,A=U&&c?.metafields?.infos?.page_short_title||f,F=e?.custom_description||e?.description;Ne(H,{componentType:ne,componentName:le,componentTitle:f,componentDescription:F,position:t?.index+1});const M=async()=>{if(!E&&!e?.custom_primary_link){R(!0);try{await pe(e,t?.index,t,u)}finally{R(!1)}}},J=async()=>{if(!ee&&!e?.custom_secondary_link){V(!0);try{await te(e,t?.index,t,u)}finally{V(!1)}}},j=()=>P>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>P>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",fe=()=>{if(u?.value_type==="fixed_amount"){const n=x||"",a=n.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(a){const[,s,r,o]=a;let l=r;return r.endsWith(".00")?l=r.replace(/\.00$/,""):r.endsWith(",00")&&(l=r.replace(/,00$/,"")),`${s}${l}${o}`}return n}return k||""};Be(()=>{let n=[];if(k||x){const s=`${fe()} ${z?.off||X?.off||""}`;n.push(s)}const a=e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,k?1:2)||[];Z(n.concat(a))},[e?.tags,k,x,z?.off,X?.off]);const O=e?.custom_bg_image,re=e?.custom_theme;return i("div",{ref:H,className:v(j().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",O?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":re==="dark"}),style:O?{backgroundImage:`url(${O})`}:void 0,children:b("div",{className:v(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[i("div",{className:v(j().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":O}),children:i("a",{"aria-label":f,target:t?.target,href:_e(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${se}`,`${ne}_${le}`),onClick:()=>{we({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||c?.sku,item_name:e?.name,item_variant:c?.name,price:c?.price,index:t?.index+1}]}})},children:i(he,{source:I,alt:w,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b("div",{className:v("flex flex-col items-start justify-center",j().boxItem),children:[de&&i("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:Y?.length>0&&Y?.map?.((n,a)=>i(xe,{className:"shelf-items-tag",variant:"fill",children:n},a))}),A?i(Se,{as:"h3",title:A||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:A||""}):null,F?i(ke,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:F||""}):null,i("div",{className:"mb-2 mt-5 flex items-center",children:$?$(e,{price:N,basePrice:T,discount:k,discountAmount:x,variant:c,coupon:u,isSoldOut:D}):D?i("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:_?.soldOutText}):b(ge,{children:[i("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:c?.availableForSale&&N||""}),Q?Q(e,{price:N,basePrice:T,discount:k,discountAmount:x}):T&&i("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:c?.availableForSale&&T||""})]})}),!$&&ce?.(e,c),b("div",{className:v("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?i(ie,{disabled:D&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:J,loading:ee,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?i(ie,{disabled:D&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:M,loading:E,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{He as ShelfDisplayHorizontalItem,ze as ShelfDisplayWrapItem,Ce as getProductImage};
|
|
1
|
+
import{Fragment as Ae,jsx as s,jsxs as f}from"react/jsx-runtime";import{useAiuiContext as Ne}from"../AiuiProvider/index.js";import{formatVariantPrice as Ce}from"./shelfDisplay.js";import _e from"../../components/picture.js";import Se from"../../components/badge.js";import{cn as w}from"../../helpers/utils.js";import{Text as Te}from"../../components/text.js";import fe from"../../components/button.js";import{gaTrack as Be}from"../../shared/track.js";import{trackUrlRef as Pe}from"../../shared/trackUrlRef.js";import{Heading as Le}from"../../components/heading.js";import{useExposure as $e}from"../../hooks/useExposure.js";import{useRef as De,useEffect as Ie,useMemo as ye,useState as F}from"react";const ge="image",he="product_shelf",xe=999999999e-2,ze=e=>{const t=e?.sku,_=e?.variants,M=_?.find(j=>j?.sku===t),G=M?.image?.url||_?.[0]?.image?.url||"",te=M?.image?.altText||_?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:G,altText:te}},Fe=({items:e})=>e?.length?s("div",{className:"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.map((t,_)=>typeof t.icon=="string"?s("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},_):s(Te,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},_))}):null,Ke=({data:e,configuration:t})=>{const{isDisplayBackImage:_=!1,itemShape:M,metafields:G,isTopTag:te=!1,isShowTag:j,isShowOriginalPrice:se,isShowShortTitle:ve=!1,isShowPricesTag:$=!1,pricesTagTextColor:E,pricesTagBgColor:O,itemsTagTextColor:v,itemsTagBgColor:J,formatPrice:re,renderOriginalPrice:K,renderPriceLabel:be,renderPrice:W}=t||{},{locale:T="es",copyWriting:ie,currencyDisplay:Q}=Ne(),{discounts:X,discountsCopy:oe}=G||{},le=De(null),[n,ne]=F([]),[ae,D]=F(""),[ce,pe]=F(!1),[b,H]=F(!1),me=(i,p,m,d)=>{const{primaryFun:x,onAddCart:S,onBuyNow:Z,onLearnMore:ee,event:we}=t||{};if(x){if(x==="AddCart"&&S)return S(i,p+1,m,d);if(x==="BuyNow"&&Z)return Z(i,p+1,m,d);if(x==="LearnMore"&&ee)return ee(i,p+1,m,d)}we?.primaryButton?.(i,p+1,m,d)},ke=(i,p,m,d)=>{const{secondaryFun:x,onAddCart:S,onBuyNow:Z,onLearnMore:ee,event:we}=t||{};if(x){if(x==="AddCart"&&S)return S(i,p+1,m,d);if(x==="BuyNow"&&Z)return Z(i,p+1,m,d);if(x==="LearnMore"&&ee)return ee(i,p+1,m,d)}we?.secondaryButton?.(i,p+1,m,d)},o=ye(()=>{const i=e?.variants||[];if(i.length)return e?.sku?i?.find?.(p=>p?.sku===e?.sku)||i[0]:i?.[0]},[e?.sku,e?.variants]),I=o?.id?.split?.("/")||[],N=I?.[I?.length-1],y=!o?.availableForSale||o?.price?.amount===xe||o?.price===xe,k=o?.coupons?.[0],de=e?.price?.currencyCode||"USD",U=ye(()=>Ce({locale:T,amount:k?k?.variant_price4wscode:o?.price,baseAmount:k?o?.price:0,currencyCode:de,currencyDisplay:Q,customFormatPrice:re}),[de,T,k,Q,o,re]),{price:z,basePrice:C,discount:B,discountAmount:A}=U,{imageUrl:R,altText:ue}=ze(e),q=e?.custom_name||e?.title,P=ve&&o?.metafields?.infos?.page_short_title||q,Y=e?.custom_description||e?.description,r=()=>{if(k?.value_type==="fixed_amount"){const i=A||"",p=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(p){const[,m,d,x]=p;let S=d;return d.endsWith(".00")?S=d.replace(/\.00$/,""):d.endsWith(",00")&&(S=d.replace(/,00$/,"")),`${m}${S}${x}`}return i}return B||""};Ie(()=>{let i=[];if(B||A){const m=`${r()} ${X?.off||oe?.off||""}`;D(m)}const p=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,B&&$?1:2)||[];ne(i.concat(p))},[e?.tags,B,A,$,X?.off,oe?.off]),$e(le,{componentType:ge,componentName:he,componentTitle:q,componentDescription:Y,position:t?.index+1});const l=async()=>{if(!ce&&!e?.custom_primary_link){pe(!0);try{await me(e,t?.index,t,k)}finally{pe(!1)}}},a=async()=>{if(!b&&!e?.custom_secondary_link){H(!0);try{await ke(e,t?.index,t,k)}finally{H(!1)}}},c=()=>f("div",{className:"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4",children:[f("div",{className:"shelf-display-product-content-title-desc",children:[P?s(Le,{as:"h3",title:P||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:P||""}):null,s(Te,{size:2,className:w("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:Y||""})]}),f("div",{className:"shelf-display-product-content-price-button",children:[s("div",{className:"mb-2 flex items-center",children:W?W(e,{price:z,basePrice:C,discount:B,discountAmount:A,variant:o,coupon:k,isSoldOut:y}):y?s("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:ie?.soldOutText}):f(Ae,{children:[s("div",{className:"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]",children:o?.availableForSale&&z||""}),K?K(e,{price:z,basePrice:C,discount:B,discountAmount:A}):C&&se&&s("div",{className:"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through",children:o?.availableForSale&&C||""})]})}),!W&&be?.(e,o),f("div",{className:w("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!y?s(fe,{disabled:y&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:a,loading:b,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(fe,{disabled:y&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:l,loading:ce,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),u={...E?{color:E}:{},...O?{backgroundColor:O,backgroundImage:"none"}:{},...E||O?{outline:"none"}:{}},g={...v?{color:v}:{},...J?{backgroundColor:J,backgroundImage:"none"}:{},...v||J?{outlineColor:v}:{}},L=()=>f("div",{className:"lg-desktop:h-[28px] lg-desktop:flex-[28] box-border flex h-6 flex-[24] flex-wrap gap-1 overflow-hidden",children:[$&&ae&&s(Se,{className:"shelf-prices-tag",variant:"fill",style:u,children:ae||""}),j&&n?.length>0&&n?.map?.((i,p)=>s(Se,{className:"shelf-items-tag",variant:"outline",style:g,children:i},p))]}),h=e?.custom_bg_image,V=e?.custom_theme;return s("div",{ref:le,className:w("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]","laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative","md-tablet:h-[422px] shelf-display-item",h?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":V==="dark","aiui-light":V==="light"}),style:h?{backgroundImage:`url(${h})`}:void 0,children:_?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:f("div",{className:"relative inset-0 size-full",children:[s(L,{}),s(_e,{source:R,alt:ue,className:w("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":h})}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:c()})]})}):f("div",{className:"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4",children:[s(L,{}),f("div",{className:w("shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden",{"opacity-0":h}),children:[s("a",{"aria-label":q,target:t?.target,href:Pe(`${T==="us"||!T?"":`/${T}`}/products/${e?.handle}?variant=${N}`,`${ge}_${he}`),onClick:()=>{Be({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},children:s(_e,{source:R,alt:ue,className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),s(Fe,{items:e?.socialEndorsements})]}),c()]})},e?.id||e?.handle)},Qe=({data:e,configuration:t})=>{const{itemShape:_,itemLength:M,metafields:G,isShowShortTitle:te,formatPrice:j,renderOriginalPrice:se,renderPriceLabel:ve,renderPrice:$}=t||{},{discounts:E,discountsCopy:O}=G||{},{locale:v="us",copyWriting:J,currencyDisplay:re}=Ne(),[K,be]=F([]),W=De(null),[T,ie]=F(!1),[Q,X]=F(!1),oe=(r,l,a,c)=>{const{primaryFun:u,onAddCart:g,onBuyNow:L,onLearnMore:h,event:V}=t||{};if(u){if(u==="AddCart"&&g)return g(r,l+1,a,c);if(u==="BuyNow"&&L)return L(r,l+1,a,c);if(u==="LearnMore"&&h)return h(r,l+1,a,c)}V?.primaryButton?.(r,l+1,a,c)},le=(r,l,a,c)=>{const{secondaryFun:u,onAddCart:g,onBuyNow:L,onLearnMore:h,event:V}=t||{};if(u){if(u==="AddCart"&&g)return g(r,l+1,a,c);if(u==="BuyNow"&&L)return L(r,l+1,a,c);if(u==="LearnMore"&&h)return h(r,l+1,a,c)}V?.secondaryButton?.(r,l+1,a,c)},n=ye(()=>{const r=e?.variants||[];if(r.length)return e?.sku&&r.find(l=>l?.sku===e?.sku)||r[0]},[e?.sku,e?.variants]),ne=n?.id?.split?.("/")||[],ae=ne?.[ne?.length-1],D=!n?.availableForSale||n?.price?.amount===xe||n?.price===xe,ce=t?.isShowTag,pe=t?.isShowOriginalPrice,b=n?.coupons?.[0],H=!!(pe&&b),me=e?.price?.currencyCode||"USD",ke=ye(()=>Ce({locale:v,amount:H?b?.variant_price4wscode:n?.price,baseAmount:H?n?.price:0,currencyCode:me,currencyDisplay:re,customFormatPrice:j}),[me,v,H,b?.variant_price4wscode,n,j]),{price:o,basePrice:I,discount:N,discountAmount:y}=ke,{imageUrl:k,altText:de}=ze(e),U=e?.custom_name||e?.title,z=te&&n?.metafields?.infos?.page_short_title||U,C=e?.custom_description||e?.description;$e(W,{componentType:ge,componentName:he,componentTitle:U,componentDescription:C,position:t?.index+1});const B=async()=>{if(!T&&!e?.custom_primary_link){ie(!0);try{await oe(e,t?.index,t,b)}finally{ie(!1)}}},A=async()=>{if(!Q&&!e?.custom_secondary_link){X(!0);try{await le(e,t?.index,t,b)}finally{X(!1)}}},R=()=>M>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},ue=()=>M>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",q=()=>{if(b?.value_type==="fixed_amount"){const r=y||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,c,u]=l;let g=c;return c.endsWith(".00")?g=c.replace(/\.00$/,""):c.endsWith(",00")&&(g=c.replace(/,00$/,"")),`${a}${g}${u}`}return r}return N||""};Ie(()=>{let r=[];if(N||y){const a=`${q()} ${E?.off||O?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,N?1:2)||[];be(r.concat(l))},[e?.tags,N,y,E?.off,O?.off]);const P=e?.custom_bg_image,Y=e?.custom_theme;return s("div",{ref:W,className:w(R().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",P?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":Y==="dark","aiui-light":Y==="light"}),style:P?{backgroundImage:`url(${P})`}:void 0,children:f("div",{className:w(ue(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:w(R().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":P}),children:s("a",{"aria-label":U,target:t?.target,href:Pe(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${ae}`,`${ge}_${he}`),onClick:()=>{Be({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(_e,{source:k,alt:de,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),f("div",{className:w("flex flex-col items-start justify-center",R().boxItem),children:[ce&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:K?.length>0&&K?.map?.((r,l)=>s(Se,{className:"shelf-items-tag",variant:"fill",children:r},l))}),z?s(Le,{as:"h3",title:z||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:z||""}):null,C?s(Te,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:C||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:$?$(e,{price:o,basePrice:I,discount:N,discountAmount:y,variant:n,coupon:b,isSoldOut:D}):D?s("div",{className:"lg-desktop:text-2xl text-info-primary text-xl font-bold",children:J?.soldOutText}):f(Ae,{children:[s("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:n?.availableForSale&&o||""}),se?se(e,{price:o,basePrice:I,discount:N,discountAmount:y}):I&&s("div",{className:"origin-price tablet:text-xl text-info-quaternary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&I||""})]})}),!$&&ve?.(e,n),f("div",{className:w("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton&&!D?s(fe,{disabled:D&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:A,loading:Q,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(fe,{disabled:D&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:B,loading:T,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Qe as ShelfDisplayHorizontalItem,Ke as ShelfDisplayWrapItem,ze as getProductImage};
|
|
2
2
|
//# sourceMappingURL=shelfDisplayItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n isShowShortTitle = false,\n formatPrice,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n } = configuration || {}\n const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n const [primaryLoading, setPrimaryLoading] = useState(false)\n const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n if (primaryFun) {\n if (primaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (primaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (primaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.primaryButton?.(params, index + 1, data, coupon)\n }\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n if (secondaryFun) {\n if (secondaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.secondaryButton?.(params, index + 1, data, coupon)\n }\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n customFormatPrice: formatPrice,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant, formatPrice]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags =\n data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2) || []\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const handlePrimaryClick = async () => {\n if (primaryLoading) return\n if (data?.custom_primary_link) return\n setPrimaryLoading(true)\n try {\n await onPrimaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setPrimaryLoading(false)\n }\n }\n\n const handleSecondaryClick = async () => {\n if (secondaryLoading) return\n if (data?.custom_secondary_link) return\n setSecondaryLoading(true)\n try {\n await onSecondaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setSecondaryLoading(false)\n }\n }\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\" variant=\"fill\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] text-info-primary line-clamp-2 h-12\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:h-[24px] lg-desktop:h-[28px] desktop:text-base shelf-display-product-description text-info-primary line-clamp-1 h-[20px] text-sm\"\n html={displayDescription || ''}\n />\n <div className=\"mb-2 mt-4 flex items-center\">\n {renderPrice ? (\n renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n ) : isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n {renderOriginalPrice\n ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n : basePrice && (\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n )}\n </>\n )}\n </div>\n {!renderPrice && renderPriceLabel?.(data, variant)}\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n variant=\"secondary\"\n href={data?.custom_secondary_link}\n as={data?.custom_secondary_link ? 'a' : 'button'}\n onClick={handleSecondaryClick}\n loading={secondaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n variant=\"primary\"\n href={data?.custom_primary_link}\n as={data?.custom_primary_link ? 'a' : 'button'}\n onClick={handlePrimaryClick}\n loading={primaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n const custom_bg_image = data?.custom_bg_image\n const custom_theme = data?.custom_theme\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'box-border w-full cursor-pointer overflow-hidden duration-300',\n 'rounded-box',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item',\n custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-background tablet:hover:bg-info-white',\n { 'aiui-dark': custom_theme === 'dark' }\n )}\n style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className={cn('flex h-full justify-center object-cover [&_img]:w-auto', {\n 'opacity-0': custom_bg_image,\n })}\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\" variant=\"fill\">\n {currentPriceTag || ''}\n </Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden',\n { 'opacity-0': custom_bg_image }\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n itemShape,\n itemLength,\n metafields,\n isShowShortTitle,\n formatPrice,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n const [primaryLoading, setPrimaryLoading] = useState(false)\n const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n if (primaryFun) {\n if (primaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (primaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (primaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.primaryButton?.(params, index + 1, data, coupon)\n }\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n if (secondaryFun) {\n if (secondaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.secondaryButton?.(params, index + 1, data, coupon)\n }\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n customFormatPrice: formatPrice,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant, formatPrice]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const handlePrimaryClick = async () => {\n if (primaryLoading) return\n if (data?.custom_primary_link) return\n setPrimaryLoading(true)\n try {\n await onPrimaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setPrimaryLoading(false)\n }\n }\n\n const handleSecondaryClick = async () => {\n if (secondaryLoading) return\n if (data?.custom_secondary_link) return\n setSecondaryLoading(true)\n try {\n await onSecondaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setSecondaryLoading(false)\n }\n }\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags =\n data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2) || []\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n const custom_bg_image = data?.custom_bg_image\n const custom_theme = data?.custom_theme\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n 'rounded-box',\n 'shelf-display-item',\n 'duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden',\n custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-container-secondary-1 tablet:hover:bg-info-white',\n { 'aiui-dark': custom_theme === 'dark' }\n )}\n style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div\n className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden', {\n 'opacity-0': custom_bg_image,\n })}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.length > 0 &&\n showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\" variant=\"fill\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {renderPrice ? (\n renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n ) : isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n {renderOriginalPrice\n ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n : basePrice && (\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n )}\n </>\n )}\n </div>\n {!renderPrice && renderPriceLabel?.(data, variant)}\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n variant=\"secondary\"\n href={data?.custom_secondary_link}\n as={data?.custom_secondary_link ? 'a' : 'button'}\n onClick={handleSecondaryClick}\n loading={secondaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n variant=\"primary\"\n href={data?.custom_primary_link}\n as={data?.custom_primary_link ? 'a' : 'button'}\n onClick={handlePrimaryClick}\n loading={primaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "isShowShortTitle", "formatPrice", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "onPrimaryButton", "params", "
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType, SocialEndorsementItem } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState, type CSSProperties } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nconst ShelfDisplaySocialEndorsements = ({ items }: { items?: SocialEndorsementItem[] }) => {\n if (!items?.length) {\n return null\n }\n return (\n <div className=\"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1\">\n {items.map((item, index) =>\n typeof item.icon === 'string' ? (\n <img\n key={index}\n src={item.icon}\n alt={item.label || ''}\n loading=\"lazy\"\n className=\"desktop:size-10 lg-desktop:size-12 size-8 object-contain\"\n />\n ) : (\n <Text\n key={index}\n aria-label={item.label}\n className=\"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full\"\n >\n {item.icon}\n </Text>\n )\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n isShowShortTitle = false,\n isShowPricesTag = false,\n pricesTagTextColor,\n pricesTagBgColor,\n itemsTagTextColor,\n itemsTagBgColor,\n formatPrice,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n } = configuration || {}\n const { locale = 'es', copyWriting, currencyDisplay } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n const [primaryLoading, setPrimaryLoading] = useState(false)\n const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n if (primaryFun) {\n if (primaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (primaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (primaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.primaryButton?.(params, index + 1, data, coupon)\n }\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n if (secondaryFun) {\n if (secondaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.secondaryButton?.(params, index + 1, data, coupon)\n }\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: coupon ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: coupon ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n customFormatPrice: formatPrice,\n }),\n [currencyCode, locale, coupon, currencyDisplay, variant, formatPrice]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n // handleTags.push(discountTag)\n }\n const newTags =\n data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount && isShowPricesTag ? 1 : 2) || []\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, isShowPricesTag, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const handlePrimaryClick = async () => {\n if (primaryLoading) return\n if (data?.custom_primary_link) return\n setPrimaryLoading(true)\n try {\n await onPrimaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setPrimaryLoading(false)\n }\n }\n\n const handleSecondaryClick = async () => {\n if (secondaryLoading) return\n if (data?.custom_secondary_link) return\n setSecondaryLoading(true)\n try {\n await onSecondaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setSecondaryLoading(false)\n }\n }\n\n const bottomContent = () => {\n return (\n <div className=\"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4\">\n <div className=\"shelf-display-product-content-title-desc\">\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title text-info-primary mb-1 line-clamp-2\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n <Text\n size={2}\n className={cn(\n 'lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]'\n )}\n html={displayDescription || ''}\n />\n </div>\n <div className=\"shelf-display-product-content-price-button\">\n <div className=\"mb-2 flex items-center\">\n {renderPrice ? (\n renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n ) : isSoldOut ? (\n <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n {renderOriginalPrice\n ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n : basePrice &&\n isShowOriginalPrice && (\n <div className=\"origin-price lg-desktop:text-2xl text-info-quaternary ml-1 text-xl font-bold !leading-[1.2] line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n )}\n </>\n )}\n </div>\n {!renderPrice && renderPriceLabel?.(data, variant)}\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton && !isSoldOut ? (\n <Button\n disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n variant=\"secondary\"\n href={data?.custom_secondary_link}\n as={data?.custom_secondary_link ? 'a' : 'button'}\n onClick={handleSecondaryClick}\n loading={secondaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n variant=\"primary\"\n href={data?.custom_primary_link}\n as={data?.custom_primary_link ? 'a' : 'button'}\n onClick={handlePrimaryClick}\n loading={primaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n }\n\n const pricesTagStyle: CSSProperties = {\n ...(pricesTagTextColor ? { color: pricesTagTextColor } : {}),\n ...(pricesTagBgColor ? { backgroundColor: pricesTagBgColor, backgroundImage: 'none' } : {}),\n ...(pricesTagTextColor || pricesTagBgColor ? { outline: 'none' } : {}),\n }\n const itemsTagStyle: CSSProperties = {\n ...(itemsTagTextColor ? { color: itemsTagTextColor } : {}),\n ...(itemsTagBgColor ? { backgroundColor: itemsTagBgColor, backgroundImage: 'none' } : {}),\n ...(itemsTagTextColor || itemsTagBgColor ? { outlineColor: itemsTagTextColor } : {}),\n }\n\n const TagsComp = () => {\n return (\n <div className=\"lg-desktop:h-[28px] lg-desktop:flex-[28] box-border flex h-6 flex-[24] flex-wrap gap-1 overflow-hidden\">\n {isShowPricesTag && currentPriceTag && (\n <Badge className=\"shelf-prices-tag\" variant=\"fill\" style={pricesTagStyle}>\n {currentPriceTag || ''}\n </Badge>\n )}\n {isShowTag &&\n showTags?.length > 0 &&\n showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\" variant=\"outline\" style={itemsTagStyle}>\n {item}\n </Badge>\n ))}\n </div>\n )\n }\n\n const custom_bg_image = data?.custom_bg_image\n const custom_theme = data?.custom_theme\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'box-border w-full cursor-pointer overflow-hidden duration-300',\n 'rounded-box',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative',\n 'md-tablet:h-[422px] shelf-display-item',\n custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-background tablet:hover:bg-info-white',\n { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n )}\n style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <TagsComp />\n <Picture\n source={imageUrl}\n alt={altText}\n className={cn('flex h-full justify-center object-cover [&_img]:w-auto', {\n 'opacity-0': custom_bg_image,\n })}\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4\">\n {/* {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\" variant=\"fill\">\n {currentPriceTag || ''}\n </Badge>\n )} */}\n <TagsComp />\n <div\n className={cn(\n 'shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden',\n {\n 'opacity-0': custom_bg_image,\n }\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n <ShelfDisplaySocialEndorsements items={data?.socialEndorsements} />\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n itemShape,\n itemLength,\n metafields,\n isShowShortTitle,\n formatPrice,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n const [primaryLoading, setPrimaryLoading] = useState(false)\n const [secondaryLoading, setSecondaryLoading] = useState(false)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { primaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E primaryFun \u503C\uFF09\n if (primaryFun) {\n if (primaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (primaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (primaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.primaryButton?.(params, index + 1, data, coupon)\n }\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => {\n const { secondaryFun, onAddCart, onBuyNow, onLearnMore, event } = configuration || {}\n\n // \u4F18\u5148\u4F7F\u7528 function props\uFF08\u6839\u636E secondaryFun \u503C\uFF09\n if (secondaryFun) {\n if (secondaryFun === 'AddCart' && onAddCart) {\n return onAddCart(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'BuyNow' && onBuyNow) {\n return onBuyNow(params, index + 1, data, coupon)\n }\n if (secondaryFun === 'LearnMore' && onLearnMore) {\n return onLearnMore(params, index + 1, data, coupon)\n }\n }\n\n // \u517C\u5BB9\u65E7\u7684 event \u903B\u8F91\n event?.secondaryButton?.(params, index + 1, data, coupon)\n }\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n currencyDisplay,\n customFormatPrice: formatPrice,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant, formatPrice]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const currentDisplayTitle = isShowShortTitle\n ? variant?.metafields?.infos?.page_short_title || displayTitle\n : displayTitle\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const handlePrimaryClick = async () => {\n if (primaryLoading) return\n if (data?.custom_primary_link) return\n setPrimaryLoading(true)\n try {\n await onPrimaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setPrimaryLoading(false)\n }\n }\n\n const handleSecondaryClick = async () => {\n if (secondaryLoading) return\n if (data?.custom_secondary_link) return\n setSecondaryLoading(true)\n try {\n await onSecondaryButton(data, configuration?.index, configuration, coupon)\n } finally {\n setSecondaryLoading(false)\n }\n }\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()} ${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags =\n data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2) || []\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n const custom_bg_image = data?.custom_bg_image\n const custom_theme = data?.custom_theme\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n 'rounded-box',\n 'shelf-display-item',\n 'duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden',\n custom_bg_image ? 'bg-cover bg-center bg-no-repeat' : 'bg-container-secondary-1 tablet:hover:bg-info-white',\n { 'aiui-dark': custom_theme === 'dark', 'aiui-light': custom_theme === 'light' }\n )}\n style={custom_bg_image ? { backgroundImage: `url(${custom_bg_image})` } : undefined}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div\n className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden', {\n 'opacity-0': custom_bg_image,\n })}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.length > 0 &&\n showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\" variant=\"fill\">\n {item}\n </Badge>\n ))}\n </div>\n )}\n {currentDisplayTitle ? (\n <Heading\n as=\"h3\"\n title={currentDisplayTitle || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]\"\n html={currentDisplayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {renderPrice ? (\n renderPrice(data, { price, basePrice, discount, discountAmount, variant, coupon, isSoldOut })\n ) : isSoldOut ? (\n <div className=\"lg-desktop:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n {renderOriginalPrice\n ? renderOriginalPrice(data, { price, basePrice, discount, discountAmount })\n : basePrice && (\n <div className=\"origin-price tablet:text-xl text-info-quaternary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n )}\n </>\n )}\n </div>\n {!renderPrice && renderPriceLabel?.(data, variant)}\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton && !isSoldOut ? (\n <Button\n disabled={isSoldOut && configuration?.secondaryFun !== 'LearnMore'}\n variant=\"secondary\"\n href={data?.custom_secondary_link}\n as={data?.custom_secondary_link ? 'a' : 'button'}\n onClick={handleSecondaryClick}\n loading={secondaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n disabled={isSoldOut && configuration?.primaryFun !== 'LearnMore'}\n variant=\"primary\"\n href={data?.custom_primary_link}\n as={data?.custom_primary_link ? 'a' : 'button'}\n onClick={handlePrimaryClick}\n loading={primaryLoading}\n className={configuration.direction === 'vertical' ? 'w-full' : ''}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAyCU,OAkOI,YAAAA,GAlOJ,OAAAC,EAyMF,QAAAC,MAzME,oBAzCV,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,sBAAAC,OAA0B,oBACnC,OAAOC,OAAa,8BACpB,OAAOC,OAAW,4BAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,OAAY,2BACrB,OAAOC,OAAY,6BACnB,OAAS,WAAAC,OAAe,wBACxB,OAAS,eAAAC,OAAmB,8BAC5B,OAAS,WAAAC,OAAe,8BAExB,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,UAAAC,GAAQ,aAAAC,GAAW,WAAAC,GAAS,YAAAC,MAAoC,QAEzE,MAAMC,GAAgB,QAChBC,GAAgB,gBAEhBC,GAAiB,aAGVC,GAAmBC,GAAc,CAC5C,MAAMC,EAAMD,GAAM,IACZE,EAAWF,GAAM,SACjBG,EAAUD,GAAU,KAAME,GAAcA,GAAM,MAAQH,CAAG,EACzDI,EAAWF,GAAS,OAAO,KAAOD,IAAW,CAAC,GAAG,OAAO,KAAO,GAC/DI,GAAUH,GAAS,OAAO,SAAWD,IAAW,CAAC,GAAG,OAAO,SAAWF,GAAM,aAAeA,GAAM,OAAS,GAEhH,MAAO,CACL,SAAAK,EACA,QAAAC,EACF,CACF,EAEMC,GAAiC,CAAC,CAAE,MAAAC,CAAM,IACzCA,GAAO,OAIV7B,EAAC,OAAI,UAAU,+GACZ,SAAA6B,EAAM,IAAI,CAACJ,EAAMK,IAChB,OAAOL,EAAK,MAAS,SACnBzB,EAAC,OAEC,IAAKyB,EAAK,KACV,IAAKA,EAAK,OAAS,GACnB,QAAQ,OACR,UAAU,4DAJLK,CAKP,EAEA9B,EAACO,GAAA,CAEC,aAAYkB,EAAK,MACjB,UAAU,gFAET,SAAAA,EAAK,MAJDK,CAKP,CAEJ,EACF,EAvBO,KA2BEC,GAAuB,CAAC,CAAE,KAAAV,EAAM,cAAAW,CAAc,IAA0C,CACnG,KAAM,CACJ,mBAAAC,EAAqB,GACrB,UAAAC,EACA,WAAAC,EACA,SAAAC,GAAW,GACX,UAAAC,EACA,oBAAAC,GACA,iBAAAC,GAAmB,GACnB,gBAAAC,EAAkB,GAClB,mBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,YAAAC,GACA,oBAAAC,EACA,iBAAAC,GACA,YAAAC,CACF,EAAIhB,GAAiB,CAAC,EAChB,CAAE,OAAAiB,EAAS,KAAM,YAAAC,GAAa,gBAAAC,CAAgB,EAAIjD,GAAe,EACjE,CAAE,UAAAkD,EAAW,cAAAC,EAAc,EAAIlB,GAAc,CAAC,EAC9CmB,GAAMzC,GAAuB,IAAI,EACjC,CAAC0C,EAAUC,EAAW,EAAIxC,EAAmB,CAAC,CAAC,EAC/C,CAACyC,GAAiBC,CAAkB,EAAI1C,EAAiB,EAAE,EAC3D,CAAC2C,GAAgBC,EAAiB,EAAI5C,EAAS,EAAK,EACpD,CAAC6C,EAAkBC,CAAmB,EAAI9C,EAAS,EAAK,EAExD+C,GAAkB,CAACC,EAA0BlC,EAAeT,EAAwB4C,IAAgB,CACxG,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,SAAAC,EAAU,YAAAC,GAAa,MAAAC,EAAM,EAAItC,GAAiB,CAAC,EAGlF,GAAIkC,EAAY,CACd,GAAIA,IAAe,WAAaC,EAC9B,OAAOA,EAAUH,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAElD,GAAIC,IAAe,UAAYE,EAC7B,OAAOA,EAASJ,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAEjD,GAAIC,IAAe,aAAeG,GAChC,OAAOA,GAAYL,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CAEtD,CAGAK,IAAO,gBAAgBN,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CACxD,EAEMM,GAAoB,CAACP,EAA0BlC,EAAeT,EAAwB4C,IAAgB,CAC1G,KAAM,CAAE,aAAAO,EAAc,UAAAL,EAAW,SAAAC,EAAU,YAAAC,GAAa,MAAAC,EAAM,EAAItC,GAAiB,CAAC,EAGpF,GAAIwC,EAAc,CAChB,GAAIA,IAAiB,WAAaL,EAChC,OAAOA,EAAUH,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAElD,GAAIO,IAAiB,UAAYJ,EAC/B,OAAOA,EAASJ,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAEjD,GAAIO,IAAiB,aAAeH,GAClC,OAAOA,GAAYL,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CAEtD,CAGAK,IAAO,kBAAkBN,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CAC1D,EAEMQ,EAAU1D,GAAQ,IAAM,CAC5B,MAAM2D,EAAWrD,GAAM,UAAY,CAAC,EACpC,GAAKqD,EAAS,OAGd,OAAKrD,GAAM,IAGJqD,GAAU,OAAQjD,GAAcA,GAAM,MAAQJ,GAAM,GAAG,GAAKqD,EAAS,CAAC,EAFpEA,IAAW,CAAC,CAGvB,EAAG,CAACrD,GAAM,IAAKA,GAAM,QAAQ,CAAC,EAExBsD,EAAaF,GAAS,IAAI,QAAQ,GAAG,GAAK,CAAC,EAC3CG,EAAYD,IAAaA,GAAY,OAAS,CAAC,EAE/CE,EACJ,CAACJ,GAAS,kBAAoBA,GAAS,OAAO,SAAWtD,IAAkBsD,GAAS,QAAUtD,GAG1F8C,EAASQ,GAAS,UAAU,CAAC,EAE7BK,GAAezD,GAAM,OAAO,cAAgB,MAE5C0D,EAAYhE,GAChB,IACEZ,GAAmB,CACjB,OAAA8C,EACA,OAAQgB,EAASA,GAAQ,qBAAuBQ,GAAS,MACzD,WAAYR,EAASQ,GAAS,MAAQ,EACtC,aAAAK,GACA,gBAAA3B,EACA,kBAAmBN,EACrB,CAAC,EACH,CAACiC,GAAc7B,EAAQgB,EAAQd,EAAiBsB,EAAS5B,EAAW,CACtE,EAEM,CAAE,MAAAmC,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,CAAe,EAAIJ,EAEjD,CAAE,SAAArD,EAAU,QAAAC,EAAQ,EAAIP,GAAgBC,CAAI,EAE5C+D,EAAe/D,GAAM,aAAeA,GAAM,MAC1CgE,EAAsB9C,IACxBkC,GAAS,YAAY,OAAO,kBAAoBW,EAE9CE,EAAqBjE,GAAM,oBAAsBA,GAAM,YAEvDkE,EAAY,IAAM,CACtB,GAAItB,GAAQ,aAAe,eAAgB,CACzC,MAAMuB,EAAYL,GAAkB,GAC9BM,EAAQD,EAAU,MAAM,wBAAwB,EACtD,GAAIC,EAAO,CACT,KAAM,CAAC,CAAEC,EAAQC,EAASC,CAAM,EAAIH,EACpC,IAAII,EAAiBF,EACrB,OAAIA,EAAQ,SAAS,KAAK,EACxBE,EAAiBF,EAAQ,QAAQ,QAAS,EAAE,EACnCA,EAAQ,SAAS,KAAK,IAC/BE,EAAiBF,EAAQ,QAAQ,OAAQ,EAAE,GAEtC,GAAGD,CAAM,GAAGG,CAAc,GAAGD,CAAM,EAC5C,CACA,OAAOJ,CACT,CACA,OAAON,GAAY,EACrB,EAGApE,GAAU,IAAM,CACd,IAAIgF,EAAuB,CAAC,EAC5B,GAAIZ,GAAYC,EAAgB,CAC9B,MAAMY,EAAc,GAAGR,EAAU,CAAC,IAAInC,GAAW,KAAOC,IAAe,KAAO,EAAE,GAChFK,EAAmBqC,CAAW,CAEhC,CACA,MAAMC,EACJ3E,GAAM,MACF,SAAUI,GAAiBA,GAAM,aAAa,OAAO,CAAC,GACtD,MAAOA,GAAiBA,GAAM,UAAU,SAAU,EAAE,CAAC,GACrD,QAAQ,EAAGyD,GAAY1C,EAAkB,EAAI,CAAC,GAAK,CAAC,EAC1DgB,GAAYsC,EAAW,OAAOE,CAAO,CAAC,CACxC,EAAG,CAAC3E,GAAM,KAAM6D,EAAUC,EAAgB3C,EAAiBY,GAAW,IAAKC,IAAe,GAAG,CAAC,EAE9FzC,GAAY0C,GAAK,CACf,cAAArC,GACA,cAAAC,GACA,eAAgBkE,EAChB,qBAAsBE,EACtB,SAAUtD,GAAe,MAAQ,CACnC,CAAC,EAED,MAAMiE,EAAqB,SAAY,CACrC,GAAI,CAAAtC,IACA,CAAAtC,GAAM,oBACV,CAAAuC,GAAkB,EAAI,EACtB,GAAI,CACF,MAAMG,GAAgB1C,EAAMW,GAAe,MAAOA,EAAeiC,CAAM,CACzE,QAAE,CACAL,GAAkB,EAAK,CACzB,EACF,EAEMsC,EAAuB,SAAY,CACvC,GAAI,CAAArC,GACA,CAAAxC,GAAM,sBACV,CAAAyC,EAAoB,EAAI,EACxB,GAAI,CACF,MAAMS,GAAkBlD,EAAMW,GAAe,MAAOA,EAAeiC,CAAM,CAC3E,QAAE,CACAH,EAAoB,EAAK,CAC3B,EACF,EAEMqC,EAAgB,IAElBlG,EAAC,OAAI,UAAU,sIACb,UAAAA,EAAC,OAAI,UAAU,2CACZ,UAAAoF,EACCrF,EAACW,GAAA,CACC,GAAG,KACH,MAAO0E,GAAuB,GAC9B,KAAM,EACN,UAAU,kEACV,KAAMA,GAAuB,GAC/B,EACE,KACJrF,EAACO,GAAA,CACC,KAAM,EACN,UAAWD,EACT,8HACF,EACA,KAAMgF,GAAsB,GAC9B,GACF,EACArF,EAAC,OAAI,UAAU,6CACb,UAAAD,EAAC,OAAI,UAAU,yBACZ,SAAAgD,EACCA,EAAY3B,EAAM,CAAE,MAAA2D,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,EAAgB,QAAAV,EAAS,OAAAR,EAAQ,UAAAY,CAAU,CAAC,EAC1FA,EACF7E,EAAC,OAAI,UAAU,0DAA2D,SAAAkD,IAAa,YAAY,EAEnGjD,EAAAF,GAAA,CACE,UAAAC,EAAC,OAAI,UAAU,qFACZ,SAAAyE,GAAS,kBAAmBO,GAAS,GACxC,EACClC,EACGA,EAAoBzB,EAAM,CAAE,MAAA2D,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,CAAe,CAAC,EACxEF,GACA3C,IACEtC,EAAC,OAAI,UAAU,2GACZ,SAAAyE,GAAS,kBAAmBQ,GAAa,GAC5C,GAER,EAEJ,EACC,CAACjC,GAAeD,KAAmB1B,EAAMoD,CAAO,EAEjDxE,EAAC,OACC,UAAWK,EACT,0BACA,2CACA0B,EAAc,YAAc,WAAa,WAAa,EACxD,EAEC,UAAAA,GAAe,iBAAmB,CAAC6C,EAClC7E,EAACQ,GAAA,CACC,SAAUqE,GAAa7C,GAAe,eAAiB,YACvD,QAAQ,YACR,KAAMX,GAAM,sBACZ,GAAIA,GAAM,sBAAwB,IAAM,SACxC,QAAS6E,EACT,QAASrC,EACT,UAAW7B,EAAc,YAAc,WAAa,SAAW,GAE9D,SAAAA,GAAe,iBAAmB,GACrC,EACE,KACHA,GAAe,cACdhC,EAACQ,GAAA,CACC,SAAUqE,GAAa7C,GAAe,aAAe,YACrD,QAAQ,UACR,KAAMX,GAAM,oBACZ,GAAIA,GAAM,oBAAsB,IAAM,SACtC,QAAS4E,EACT,QAAStC,GACT,UAAW3B,EAAc,YAAc,WAAa,SAAW,GAE9D,SAAAA,GAAe,eAAiB,GACnC,EACE,MACN,GACF,GACF,EAIEoE,EAAgC,CACpC,GAAI3D,EAAqB,CAAE,MAAOA,CAAmB,EAAI,CAAC,EAC1D,GAAIC,EAAmB,CAAE,gBAAiBA,EAAkB,gBAAiB,MAAO,EAAI,CAAC,EACzF,GAAID,GAAsBC,EAAmB,CAAE,QAAS,MAAO,EAAI,CAAC,CACtE,EACM2D,EAA+B,CACnC,GAAI1D,EAAoB,CAAE,MAAOA,CAAkB,EAAI,CAAC,EACxD,GAAIC,EAAkB,CAAE,gBAAiBA,EAAiB,gBAAiB,MAAO,EAAI,CAAC,EACvF,GAAID,GAAqBC,EAAkB,CAAE,aAAcD,CAAkB,EAAI,CAAC,CACpF,EAEM2D,EAAW,IAEbrG,EAAC,OAAI,UAAU,yGACZ,UAAAuC,GAAmBiB,IAClBzD,EAACK,GAAA,CAAM,UAAU,mBAAmB,QAAQ,OAAO,MAAO+F,EACvD,SAAA3C,IAAmB,GACtB,EAEDpB,GACCkB,GAAU,OAAS,GACnBA,GAAU,MAAM,CAAC9B,EAAWK,IAC1B9B,EAACK,GAAA,CAAkB,UAAU,kBAAkB,QAAQ,UAAU,MAAOgG,EACrE,SAAA5E,GADSK,CAEZ,CACD,GACL,EAIEyE,EAAkBlF,GAAM,gBACxBmF,EAAenF,GAAM,aAE3B,OACErB,EAAC,OACC,IAAKsD,GAEL,UAAWhD,EACT,gEACA,cACA,oGACA,qFACA,yCACAiG,EAAkB,kCAAoC,2CACtD,CAAE,YAAaC,IAAiB,OAAQ,aAAcA,IAAiB,OAAQ,CACjF,EACA,MAAOD,EAAkB,CAAE,gBAAiB,OAAOA,CAAe,GAAI,EAAI,OAEzE,SAAAtE,EACCjC,EAAC,OAAI,UAAU,8CACb,SAAAC,EAAC,OAAI,UAAU,6BACb,UAAAD,EAACsG,EAAA,EAAS,EACVtG,EAACI,GAAA,CACC,OAAQsB,EACR,IAAKC,GACL,UAAWrB,EAAG,yDAA0D,CACtE,YAAaiG,CACf,CAAC,EACH,EACAvG,EAAC,OAAI,UAAU,yEACZ,SAAAmG,EAAc,EACjB,GACF,EACF,EAEAlG,EAAC,OAAI,UAAU,6HAMb,UAAAD,EAACsG,EAAA,EAAS,EACVrG,EAAC,OACC,UAAWK,EACT,yGACA,CACE,YAAaiG,CACf,CACF,EAEA,UAAAvG,EAAC,KACC,aAAYoF,EACZ,OAAQpD,GAAe,OACvB,KAAMtB,GACJ,GAAGuC,IAAW,MAAQ,CAACA,EAAS,GAAK,IAAIA,CAAM,EAAE,aAAa5B,GAAM,MAAM,YAAYuD,CAAS,GAC/F,GAAG3D,EAAa,IAAIC,EAAa,EACnC,EACA,QAAS,IAAM,CACbT,GAAQ,CACN,MAAO,WACP,WAAY,cACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAO,CACL,CACE,QAASY,GAAM,KAAOoD,GAAS,IAC/B,UAAWpD,GAAM,KACjB,aAAcoD,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOzC,GAAe,MAAQ,CAChC,CACF,CACF,CACF,CAAC,CACH,EAEA,SAAAhC,EAACI,GAAA,CACC,OAAQsB,EACR,IAAKC,GACL,UAAU,yDACZ,EACF,EACA3B,EAAC4B,GAAA,CAA+B,MAAOP,GAAM,mBAAoB,GACnE,EACC8E,EAAc,GACjB,GAhFG9E,GAAM,IAAMA,GAAM,MAkFzB,CAEJ,EAEaoF,GAA6B,CAAC,CAAE,KAAApF,EAAM,cAAAW,CAAc,IAA0C,CACzG,KAAM,CACJ,UAAAE,EACA,WAAAwE,EACA,WAAAvE,EACA,iBAAAI,GACA,YAAAM,EACA,oBAAAC,GACA,iBAAAC,GACA,YAAAC,CACF,EAAIhB,GAAiB,CAAC,EAChB,CAAE,UAAAoB,EAAW,cAAAC,CAAc,EAAIlB,GAAc,CAAC,EAC9C,CAAE,OAAAc,EAAS,KAAM,YAAAC,EAAa,gBAAAC,EAAgB,EAAIjD,GAAe,EACjE,CAACqD,EAAUC,EAAW,EAAIxC,EAAmB,CAAC,CAAC,EAC/CsC,EAAMzC,GAAuB,IAAI,EACjC,CAAC8C,EAAgBC,EAAiB,EAAI5C,EAAS,EAAK,EACpD,CAAC6C,EAAkBC,CAAmB,EAAI9C,EAAS,EAAK,EAExD+C,GAAkB,CAACC,EAA0BlC,EAAeT,EAAwB4C,IAAgB,CACxG,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,MAAAC,CAAM,EAAItC,GAAiB,CAAC,EAGlF,GAAIkC,EAAY,CACd,GAAIA,IAAe,WAAaC,EAC9B,OAAOA,EAAUH,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAElD,GAAIC,IAAe,UAAYE,EAC7B,OAAOA,EAASJ,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAEjD,GAAIC,IAAe,aAAeG,EAChC,OAAOA,EAAYL,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CAEtD,CAGAK,GAAO,gBAAgBN,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CACxD,EAEMM,GAAoB,CAACP,EAA0BlC,EAAeT,EAAwB4C,IAAgB,CAC1G,KAAM,CAAE,aAAAO,EAAc,UAAAL,EAAW,SAAAC,EAAU,YAAAC,EAAa,MAAAC,CAAM,EAAItC,GAAiB,CAAC,EAGpF,GAAIwC,EAAc,CAChB,GAAIA,IAAiB,WAAaL,EAChC,OAAOA,EAAUH,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAElD,GAAIO,IAAiB,UAAYJ,EAC/B,OAAOA,EAASJ,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,EAEjD,GAAIO,IAAiB,aAAeH,EAClC,OAAOA,EAAYL,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CAEtD,CAGAK,GAAO,kBAAkBN,EAAQlC,EAAQ,EAAGT,EAAM4C,CAAM,CAC1D,EAEMQ,EAAU1D,GAAQ,IAAM,CAC5B,MAAM2D,EAAWrD,GAAM,UAAY,CAAC,EACpC,GAAKqD,EAAS,OAGd,OAAKrD,GAAM,KAGJqD,EAAS,KAAMjD,GAAcA,GAAM,MAAQJ,GAAM,GAAG,GAAKqD,EAAS,CAAC,CAC5E,EAAG,CAACrD,GAAM,IAAKA,GAAM,QAAQ,CAAC,EAExBsD,GAAaF,GAAS,IAAI,QAAQ,GAAG,GAAK,CAAC,EAC3CG,GAAYD,KAAaA,IAAY,OAAS,CAAC,EAE/CE,EACJ,CAACJ,GAAS,kBAAoBA,GAAS,OAAO,SAAWtD,IAAkBsD,GAAS,QAAUtD,GAC1FkB,GAAYL,GAAe,UAC3BM,GAAsBN,GAAe,oBAGrCiC,EAASQ,GAAS,UAAU,CAAC,EAE7BkC,EAAuB,GAAQrE,IAAuB2B,GACtDa,GAAezD,GAAM,OAAO,cAAgB,MAE5C0D,GAAYhE,GAChB,IACEZ,GAAmB,CACjB,OAAA8C,EACA,OAAQ0D,EAAuB1C,GAAQ,qBAAuBQ,GAAS,MACvE,WAAYkC,EAAuBlC,GAAS,MAAQ,EACpD,aAAAK,GACA,gBAAA3B,GACA,kBAAmBN,CACrB,CAAC,EACH,CAACiC,GAAc7B,EAAQ0D,EAAsB1C,GAAQ,qBAAsBQ,EAAS5B,CAAW,CACjG,EAEM,CAAE,MAAAmC,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,CAAe,EAAIJ,GAEjD,CAAE,SAAArD,EAAU,QAAAC,EAAQ,EAAIP,GAAgBC,CAAI,EAE5C+D,EAAe/D,GAAM,aAAeA,GAAM,MAC1CgE,EAAsB9C,IACxBkC,GAAS,YAAY,OAAO,kBAAoBW,EAE9CE,EAAqBjE,GAAM,oBAAsBA,GAAM,YAE7DT,GAAY0C,EAAK,CACf,cAAArC,GACA,cAAAC,GACA,eAAgBkE,EAChB,qBAAsBE,EACtB,SAAUtD,GAAe,MAAQ,CACnC,CAAC,EAED,MAAMiE,EAAqB,SAAY,CACrC,GAAI,CAAAtC,GACA,CAAAtC,GAAM,oBACV,CAAAuC,GAAkB,EAAI,EACtB,GAAI,CACF,MAAMG,GAAgB1C,EAAMW,GAAe,MAAOA,EAAeiC,CAAM,CACzE,QAAE,CACAL,GAAkB,EAAK,CACzB,EACF,EAEMsC,EAAuB,SAAY,CACvC,GAAI,CAAArC,GACA,CAAAxC,GAAM,sBACV,CAAAyC,EAAoB,EAAI,EACxB,GAAI,CACF,MAAMS,GAAkBlD,EAAMW,GAAe,MAAOA,EAAeiC,CAAM,CAC3E,QAAE,CACAH,EAAoB,EAAK,CAC3B,EACF,EAEM8C,EAAgB,IAKhBF,GAAc,EACT,CACL,QAAS,4DACT,QACE,4IACF,KAAM,4MACR,EAEK,CACL,QAAS,oFACT,QACE,6IACF,KAAM,8MACR,EAGIG,GAAkB,IAClBH,GAAc,EACT,4GAEF,4DAGHnB,EAAY,IAAM,CACtB,GAAItB,GAAQ,aAAe,eAAgB,CACzC,MAAMuB,EAAYL,GAAkB,GAC9BM,EAAQD,EAAU,MAAM,wBAAwB,EACtD,GAAIC,EAAO,CACT,KAAM,CAAC,CAAEC,EAAQC,EAASC,CAAM,EAAIH,EACpC,IAAII,EAAiBF,EACrB,OAAIA,EAAQ,SAAS,KAAK,EACxBE,EAAiBF,EAAQ,QAAQ,QAAS,EAAE,EACnCA,EAAQ,SAAS,KAAK,IAC/BE,EAAiBF,EAAQ,QAAQ,OAAQ,EAAE,GAEtC,GAAGD,CAAM,GAAGG,CAAc,GAAGD,CAAM,EAC5C,CACA,OAAOJ,CACT,CACA,OAAON,GAAY,EACrB,EAGApE,GAAU,IAAM,CACd,IAAIgF,EAAuB,CAAC,EAC5B,GAAIZ,GAAYC,EAAgB,CAC9B,MAAMY,EAAc,GAAGR,EAAU,CAAC,IAAInC,GAAW,KAAOC,GAAe,KAAO,EAAE,GAChFyC,EAAW,KAAKC,CAAW,CAC7B,CACA,MAAMC,EACJ3E,GAAM,MACF,SAAUI,GAAiBA,GAAM,aAAa,OAAO,CAAC,GACtD,MAAOA,GAAiBA,GAAM,UAAU,SAAU,EAAE,CAAC,GACrD,QAAQ,EAAGyD,EAAW,EAAI,CAAC,GAAK,CAAC,EACvC1B,GAAYsC,EAAW,OAAOE,CAAO,CAAC,CACxC,EAAG,CAAC3E,GAAM,KAAM6D,EAAUC,EAAgB/B,GAAW,IAAKC,GAAe,GAAG,CAAC,EAE7E,MAAMkD,EAAkBlF,GAAM,gBACxBmF,EAAenF,GAAM,aAE3B,OACErB,EAAC,OACC,IAAKsD,EAEL,UAAWhD,EACTsG,EAAc,EAAE,KAChB,cACA,qBACA,eACA,gFACAL,EAAkB,kCAAoC,sDACtD,CAAE,YAAaC,IAAiB,OAAQ,aAAcA,IAAiB,OAAQ,CACjF,EACA,MAAOD,EAAkB,CAAE,gBAAiB,OAAOA,CAAe,GAAI,EAAI,OAE1E,SAAAtG,EAAC,OAAI,UAAWK,EAAGuG,GAAgB,EAAG,6DAA6D,EACjG,UAAA7G,EAAC,OACC,UAAWM,EAAGsG,EAAc,EAAE,QAAS,6CAA8C,CACnF,YAAaL,CACf,CAAC,EAED,SAAAvG,EAAC,KACC,aAAYoF,EACZ,OAAQpD,GAAe,OACvB,KAAMtB,GACJ,GAAGuC,IAAW,MAAQ,CAACA,EAAS,GAAK,IAAIA,CAAM,EAAE,aAAa5B,GAAM,MAAM,YAAYuD,EAAS,GAC/F,GAAG3D,EAAa,IAAIC,EAAa,EACnC,EACA,QAAS,IAAM,CACbT,GAAQ,CACN,MAAO,WACP,WAAY,cACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAO,CACL,CACE,QAASY,GAAM,KAAOoD,GAAS,IAC/B,UAAWpD,GAAM,KACjB,aAAcoD,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOzC,GAAe,MAAQ,CAChC,CACF,CACF,CACF,CAAC,CACH,EAEA,SAAAhC,EAACI,GAAA,CACC,OAAQsB,EACR,IAAKC,GACL,UAAU,yDACZ,EACF,EACF,EACA1B,EAAC,OAAI,UAAWK,EAAG,2CAA4CsG,EAAc,EAAE,OAAO,EACnF,UAAAvE,IACCrC,EAAC,OAAI,UAAU,2DACZ,SAAAuD,GAAU,OAAS,GAClBA,GAAU,MAAM,CAAC9B,EAAWK,IAC1B9B,EAACK,GAAA,CAAkB,UAAU,kBAAkB,QAAQ,OACpD,SAAAoB,GADSK,CAEZ,CACD,EACL,EAEDuD,EACCrF,EAACW,GAAA,CACC,GAAG,KACH,MAAO0E,GAAuB,GAC9B,KAAM,EACN,UAAU,+FACV,KAAMA,GAAuB,GAC/B,EACE,KACHC,EACCtF,EAACO,GAAA,CACC,KAAM,EACN,UAAU,oJACV,KAAM+E,GAAsB,GAC9B,EACE,KACJtF,EAAC,OAAI,UAAU,8BACZ,SAAAgD,EACCA,EAAY3B,EAAM,CAAE,MAAA2D,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,EAAgB,QAAAV,EAAS,OAAAR,EAAQ,UAAAY,CAAU,CAAC,EAC1FA,EACF7E,EAAC,OAAI,UAAU,0DAA2D,SAAAkD,GAAa,YAAY,EAEnGjD,EAAAF,GAAA,CACE,UAAAC,EAAC,OAAI,UAAU,iEACZ,SAAAyE,GAAS,kBAAmBO,GAAS,GACxC,EACClC,GACGA,GAAoBzB,EAAM,CAAE,MAAA2D,EAAO,UAAAC,EAAW,SAAAC,EAAU,eAAAC,CAAe,CAAC,EACxEF,GACEjF,EAAC,OAAI,UAAU,uFACZ,SAAAyE,GAAS,kBAAmBQ,GAAa,GAC5C,GAER,EAEJ,EACC,CAACjC,GAAeD,KAAmB1B,EAAMoD,CAAO,EAEjDxE,EAAC,OACC,UAAWK,EACT,0BACA,2CACA0B,EAAc,YAAc,WAAa,WAAa,EACxD,EAEC,UAAAA,GAAe,iBAAmB,CAAC6C,EAClC7E,EAACQ,GAAA,CACC,SAAUqE,GAAa7C,GAAe,eAAiB,YACvD,QAAQ,YACR,KAAMX,GAAM,sBACZ,GAAIA,GAAM,sBAAwB,IAAM,SACxC,QAAS6E,EACT,QAASrC,EACT,UAAW7B,EAAc,YAAc,WAAa,SAAW,GAE9D,SAAAA,GAAe,iBAAmB,GACrC,EACE,KACHA,GAAe,cACdhC,EAACQ,GAAA,CACC,SAAUqE,GAAa7C,GAAe,aAAe,YACrD,QAAQ,UACR,KAAMX,GAAM,oBACZ,GAAIA,GAAM,oBAAsB,IAAM,SACtC,QAAS4E,EACT,QAAStC,EACT,UAAW3B,EAAc,YAAc,WAAa,SAAW,GAE9D,SAAAA,GAAe,eAAiB,GACnC,EACE,MACN,GACF,GACF,GAxIKX,GAAM,IAAMA,GAAM,MAyIzB,CAEJ",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplaySocialEndorsements", "items", "index", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "isShowShortTitle", "isShowPricesTag", "pricesTagTextColor", "pricesTagBgColor", "itemsTagTextColor", "itemsTagBgColor", "formatPrice", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "locale", "copyWriting", "currencyDisplay", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "onPrimaryButton", "params", "coupon", "primaryFun", "onAddCart", "onBuyNow", "onLearnMore", "event", "onSecondaryButton", "secondaryFun", "variant", "variants", "variantArr", "variantId", "isSoldOut", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "currentDisplayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "handlePrimaryClick", "handleSecondaryClick", "bottomContent", "pricesTagStyle", "itemsTagStyle", "TagsComp", "custom_bg_image", "custom_theme", "ShelfDisplayHorizontalItem", "itemLength", "shouldUseCouponPrice", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js';
|
|
3
|
+
export type ShelfDisplayHorizontalProps = Omit<ShelfDisplayProps, 'isDisplayGudgments'>;
|
|
4
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<ShelfDisplayHorizontalProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & React.RefAttributes<unknown>> & {
|
|
5
|
+
readonly $$typeof: symbol;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{jsx as s,jsxs as f}from"react/jsx-runtime";import ge,{useEffect as z,useRef as H,useImperativeHandle as we,useId as ye,useState as M}from"react";import{cn as w}from"../../helpers/utils.js";import{Tabs as ve,TabsList as _e,TabsTrigger as be,TabsContent as Se}from"../../components/tabs.js";import ke from"../Title/index.js";import B from"../SwiperBox/index.js";import{withLayout as De}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as xe}from"react-responsive";import{useRollout as Te}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as Ce}from"../ShelfDisplay/shelfDisplayItem.js";import{ShelfDisplayHorizontalCardItem as V}from"./shelfDisplayHorizontalItem.js";const Pe="image",Ie="product_shelf",y=o=>o==null?"default":String(o).replace(/[^a-zA-Z0-9_-]/g,"")||"default",$={0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1025:{spaceBetween:16,freeMode:!1,slidesPerView:2}},A=ge.forwardRef((o,v)=>{const{isDisplayGudgments:Ne,...q}=o,{data:u,event:G,buildData:O,breakpoints:_,className:Z="",recommendedData:p,target:j="_self",metafields:Q,isDisplayBackImage:W=!1,renderOriginalPrice:F,renderPriceLabel:J,renderPrice:K,onAddCart:U,onBuyNow:X,onLearnMore:Y,formatPrice:ee,...te}=q,{productsTab:r=[],productsCard:se=[],title:b,isShowTab:m=!0,tabShape:ae="square",isShowTag:ie=!1,isShowOriginalPrice:ne=!0,isShowRecommendedCard:oe=!1,isTile:re=!1,tileMaxRows:h,tileExpandText:le="Show more",tileCollapseText:pe="Show less",...me}=u,S=H(!1),k=H(null),de=ye(),[D,ce]=M(!1);z(()=>{ce(!0)},[]);const x=xe({query:"(min-width: 1025px)"}),[g,fe]=M(!1),[ue,T]=Te({threshold:0});we(v,()=>k.current);const C=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,a)=>{const t=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:a+1}})}})};z(()=>{T&&p?.length&&!S.current&&(S.current=!0,C())},[T,p]);const P=(e,a)=>{if(a){const t=p?.map?.(i=>({...i,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const n=e?.map?.(t=>{const i=O?.products?.find(c=>c?.handle===t?.handle);if(i)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...i}})?.filter(t=>t);return n?.length?n:[]},d=y(de),I=(e,a)=>{const n={...me,event:G,isShowTag:ie,isShowOriginalPrice:ne,target:j,metafields:Q,itemLength:e.length,isDisplayBackImage:W,renderOriginalPrice:F,renderPriceLabel:J,renderPrice:K,onAddCart:U,onBuyNow:X,onLearnMore:Y,formatPrice:ee};if(re&&D&&x){const c=typeof h=="number"&&h>0,N=c?h*2:e.length,L=c&&e.length>N,he=L&&!g?e.slice(0,N):e;return f("div",{children:[s("div",{className:w("shelf-display-horizontal-tile grid grid-cols-2 gap-4",m?"mt-6":""),children:he.map((l,R)=>s(V,{data:l,configuration:{...n,index:R}},l?.id||l?.handle||R))}),L&&f("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[s("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>fe(l=>!l),children:g?pe:le}),s("svg",{xmlns:"http://www.w3.org/2000/svg",className:w("laptop:size-5 size-4",g&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:s("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}if(D&&x){const i=a?`${d}-${y(a)}`:d;return s(B,{data:{list:e,configuration:n},id:i,className:`${m?"mt-6":""} shelf-display-horizontal-swiper-box !overflow-visible`,Slide:V,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:_||$},i)}const t=a?`${d}-${y(a)}`:d;return s(B,{data:{list:e,configuration:n},id:t,className:`${m?"mt-6":""} shelf-display-swiper-box !overflow-visible`,Slide:Ce,showNavigation:!0,navigationPrevClassName:"left-4 desktop:left-6",navigationNextClassName:"right-4 desktop:right-6",breakpoints:_||$},t)};return f("div",{ref:k,...te,className:w("shelf-display-horizontal-wrap text-info-primary w-full",Z,{"aiui-dark":u?.theme==="dark"}),children:[b&&s(ke,{data:{title:b}}),s("div",{ref:ue,className:"tablet:min-h-[393px] laptop:min-h-[320px] desktop:min-h-[300px] lg-desktop:min-h-[309px]",children:m&&r?.length>0?f(ve,{defaultValue:r?.[0]?.tab,onValueChange:e=>{const a=r?.find(n=>n?.tab===e);if(a){if(!a.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Pe,component_name:Ie,component_title:u?.title,component_position:1,navigation:e}});return}C()}},shape:ae==="rounded"?"rounded":"square",children:[s(_e,{children:r.map(e=>s(be,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),r.map(e=>s(Se,{value:e?.tab,children:I(P(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):I(P(se,oe))})]})});A.displayName="ShelfDisplayHorizontal";var Ge=De(A);export{Ge as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|