@gem-sdk/components 2.2.0-staging.32 → 2.2.0

package/dist/esm/carousel/components/plugins/AutoPlayPlugin.js

@@ -2,15 +2,41 @@ const AutoPlayPlugin = (slider)=>{
     let autoplay = slider.options.autoplay ?? {};
     let timeout;
     let mouseOver = false;
+    let inViewport = false;
+    let observer = null;
+    // Thêm sự kiện cho dot nếu có
+    const $dots = slider?.container?.closest('[data-component-type="component"]')?.querySelector('.carousel-dots');
+    // Callback của IntersectionObserver
+    function handleIntersection(entries) {
+        entries.forEach((entry)=>{
+            // Với threshold 0, chỉ cần một phần bất kỳ hiển thị sẽ đánh dấu isIntersecting
+            inViewport = entry.isIntersecting;
+            if (inViewport) {
+                nextTimeout();
+            } else {
+                clearNextTimeout();
+            }
+        });
+    }
+    function initIntersectionObserver() {
+        // Nếu đã có observer hoặc không có container thì không khởi tạo lại
+        if (observer || !slider.container) return;
+        observer = new IntersectionObserver(handleIntersection, {
+            root: null,
+            threshold: 0
+        });
+        observer.observe(slider.container);
+    }
     function clearNextTimeout() {
         clearTimeout(timeout);
     }
     function nextTimeout() {
-        clearTimeout(timeout);
+        clearNextTimeout();
         timeout = setTimeout(()=>{
-            if (mouseOver || !autoplay.enable) return;
+            // Nếu đang hover, autoplay bị tắt hoặc slider không trong viewport thì không chuyển slide
+            if (mouseOver || !autoplay.enable || !inViewport) return;
             slider.next();
-        }, autoplay?.delay ?? 2000);
+        }, autoplay.delay ?? 2000);
     }
     function onMouseOver() {
         mouseOver = true;
@@ -21,11 +47,15 @@ const AutoPlayPlugin = (slider)=>{
         nextTimeout();
     }
     slider.on('created', ()=>{
-        if (autoplay.pauseOnHover) {
+        $dots?.addEventListener('mouseover', onMouseOver);
+        $dots?.addEventListener('mouseout', onMouseOut);
+        // Nếu tùy chọn pauseOnHover bật thì thêm sự kiện hover cho container slider
+        if (autoplay.pauseOnHover && slider.container) {
             slider.container.addEventListener('mouseover', onMouseOver);
             slider.container.addEventListener('mouseout', onMouseOut);
         }
-        if (slider.options.autoplay?.enable) {
+        if (autoplay.enable) {
+            initIntersectionObserver();
             nextTimeout();
         }
     });
@@ -33,29 +63,40 @@ const AutoPlayPlugin = (slider)=>{
     slider.on('animationEnded', nextTimeout);
     slider.on('updated', (newOptions)=>{
         autoplay = newOptions.options?.autoplay ?? {};
-        nextTimeout();
-    });
-    slider.on('destroyed', ()=>{
-        slider.container.removeEventListener('mouseover', onMouseOver);
-        slider.container.removeEventListener('mouseout', onMouseOut);
+        if (autoplay.enable) {
+            initIntersectionObserver();
+            nextTimeout();
+        }
     });
     slider.on('optionsChanged', (newOptions)=>{
-        const $dots = slider?.container?.closest('[data-component-type="component"]')?.querySelector('.carousel-dots');
-        $dots?.addEventListener('mouseover', onMouseOver);
-        $dots?.addEventListener('mouseout', onMouseOut);
-        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover) {
+        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover && slider.container) {
             if (newOptions.options.autoplay?.pauseOnHover) {
                 slider.container.addEventListener('mouseover', onMouseOver);
                 slider.container.addEventListener('mouseout', onMouseOut);
-            }
-            if (!newOptions.options.autoplay?.pauseOnHover) {
+            } else {
                 slider.container.removeEventListener('mouseover', onMouseOver);
                 slider.container.removeEventListener('mouseout', onMouseOut);
                 mouseOver = false;
             }
         }
-        nextTimeout();
         autoplay = newOptions.options.autoplay ?? {};
+        if (autoplay.enable) {
+            initIntersectionObserver();
+            nextTimeout();
+        }
+    });
+    slider.on('destroyed', ()=>{
+        if (slider.container) {
+            slider.container.removeEventListener('mouseover', onMouseOver);
+            slider.container.removeEventListener('mouseout', onMouseOut);
+        }
+        $dots?.removeEventListener('mouseover', onMouseOver);
+        $dots?.removeEventListener('mouseout', onMouseOut);
+        clearNextTimeout();
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
     });
 };
 

package/dist/esm/common/const.js

@@ -1,5 +1,5 @@
 const ELEMENT_Z_INDEX = {
-    STICKY: 1000,
+    STICKY: 100000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

package/dist/esm/grid/setting/Section.js

@@ -256,21 +256,6 @@ const config = {
                         }
                     }
                 },
-                {
-                    id: 'columnGap',
-                    type: 'range',
-                    min: 0,
-                    max: 100,
-                    step: 1,
-                    units: [
-                        '%'
-                    ],
-                    devices: {
-                        desktop: {
-                            default: '0%'
-                        }
-                    }
-                },
                 {
                     id: 'background',
                     type: 'background',
@@ -307,29 +292,14 @@ const config = {
     ],
     ui: [
         {
-            type: 'group',
+            type: 'control',
             label: {
                 en: 'Layout'
             },
-            controls: [
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'layout'
-                    },
-                    layout: 'vertical'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Column gap'
-                    },
-                    setting: {
-                        id: 'columnGap'
-                    },
-                    condition: `!!layout.cols && layout.cols.length > 1 && pageType == "POST_PURCHASE"`
-                }
-            ]
+            setting: {
+                id: 'layout'
+            },
+            layout: 'vertical'
         },
         {
             type: 'group',
@@ -366,7 +336,7 @@ const config = {
                     setting: {
                         id: 'verticalGutter'
                     },
-                    condition: `!!layout.cols && layout.cols.length > 1 && pageType != "POST_PURCHASE"`
+                    condition: `!!layout.cols && layout.cols.length > 1`
                 }
             ]
         },
@@ -375,7 +345,7 @@ const config = {
             label: {
                 en: 'Align'
             },
-            condition: `(layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)) && pageType != "POST_PURCHASE"`,
+            condition: `layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)`,
             controls: [
                 {
                     type: 'control',

package/dist/esm/image/components/AdaptiveImage.liquid.js

@@ -2,7 +2,7 @@ import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
 import { getImageSrc } from '../helpers/getSrcSet.js';
 import { createBlurDataURL } from './helpers.js';
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyLoadImage = true, pageContext, ...props })=>{
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
     const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     const srcDesktop = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getImageSrc(srcSet?.tablet, 'tablet') ?? getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -27,17 +27,16 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
     }}"
       />
     `, template`
-      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
-      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
+      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
+      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
       <img
         ${{
         ...props
     }}
         class="${cls(className, {
-        gp_lazyload: enableLazyLoadImage,
-        gp_force_load: pageContext?.isOptimizePlan
+        gp_lazyload: enableLazyloadImage
     })}"
-        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
+        src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
         data-src="${srcDesktop}"
         width="100%"
         alt="${alt}"

package/dist/esm/image/components/Image.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
@@ -8,7 +8,6 @@ import { composeAspectRatio } from './helpers.js';
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -83,7 +82,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
+                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

package/dist/esm/image/components/Image.liquid.js

@@ -3,7 +3,7 @@ import AdaptiveImage from './AdaptiveImage.liquid.js';
 import NextImage from './NextImage.liquid.js';
 import { getInsertLinkData } from '../../helpers.js';
 
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
     const { imageLink, isNotLazyload } = setting ?? {};
     const { shape } = styles ?? {};
     const { Wrap: WrapLink, urlData } = getInsertLinkData('div', imageLink);
@@ -30,7 +30,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
+    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
     style="${{
         ...style,
         ...makeStyleResponsive('ta', styles?.align)
@@ -72,8 +72,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyLoadImage,
-        pageContext
+        enableLazyloadImage
     }) : NextImage({
         ...setting?.image,
         priority: setting?.priority,
@@ -102,8 +101,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyLoadImage,
-        pageContext
+        enableLazyloadImage
     })}
       </${WrapLink}>
   </div>`;

package/dist/esm/image/components/NextImage.liquid.js

@@ -3,7 +3,7 @@ import { getNewBackupFileKey, getImageSrc, getSrcSet } from '../helpers/getSrcSe
 import { DEVICES } from '../../product/components/ProductVariants/index.js';
 import { createBlurDataURL } from './helpers.js';
 
-const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
+const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyloadImage = true, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -93,13 +93,12 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${cls(className, {
-        gp_lazyload: !customLazyload && enableLazyLoadImage,
-        gp_force_load: pageContext?.isOptimizePlan
+        gp_lazyload: !customLazyload && enableLazyloadImage
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
+        src: enableLazyloadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,

package/dist/esm/image-comparison/components/CompareImage.liquid.js

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 import { styleLazyPlaceholder } from './common/helpers.js';
 
 const CompareImage = (props)=>{
-    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, enableLazyLoadImage, pageContext, translate } = props;
+    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -267,9 +267,7 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        },
-        enableLazyLoadImage,
-        pageContext
+        }
     })}
       ${NextImage({
         customAttrs: {
@@ -285,9 +283,7 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        },
-        enableLazyLoadImage,
-        pageContext
+        }
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/esm/index.js

@@ -218,8 +218,8 @@ export { default as BfSizeChartSizeGuide } from './third-party/components/BfSize
 export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.js';
 export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.js';
 export { default as EcoboostifyShoppableReelUgc } from './third-party/components/EcoboostifyShoppableReelUgc.js';
-export { default as EcomsendBackInStockAlert } from './third-party/components/EcomsendBackInStockAlert.js';
 export { default as AppstleBundlesDiscounts } from './third-party/components/AppstleBundlesDiscounts.js';
+export { default as EcomsendBackInStockAlert } from './third-party/components/EcomsendBackInStockAlert.js';
 export { default as thirdPartyInstantSetting } from './third-party-instant/setting/index.js';
 export { default as InstantJudgemeReviews } from './third-party-instant/components/InstantJudgemeReviews.js';
 export { default as InstantLooxReviews } from './third-party-instant/components/InstantLooxReviews.js';

package/dist/esm/index.liquid.js

@@ -173,8 +173,8 @@ export { default as BfSizeChartSizeGuide } from './third-party/components/BfSize
 export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.liquid.js';
 export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.liquid.js';
 export { default as EcoboostifyShoppableReelUgc } from './third-party/components/EcoboostifyShoppableReelUgc.liquid.js';
-export { default as EcomsendBackInStockAlert } from './third-party/components/EcomsendBackInStockAlert.liquid.js';
 export { default as AppstleBundlesDiscounts } from './third-party/components/AppstleBundlesDiscounts.liquid.js';
+export { default as EcomsendBackInStockAlert } from './third-party/components/EcomsendBackInStockAlert.liquid.js';
 export { default as ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
 export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';
 export { default as Sticky } from './sticky/components/Sticky.liquid.js';

package/dist/esm/marquee/components/Marquee.liquid.js

@@ -69,7 +69,7 @@ const Marquee = ({ children, style, builderAttrs, rawChildren, advanced, ...prop
         const itemMaxWidthValue = getResponsiveValueByScreen(styles?.itemMaxWidth, currentDevice);
         return itemMaxWidthValue?.includes('%');
     };
-    const itemMaxWidthValueByScreen = (device)=>{
+    const getItemMaxWidthValueByScreen = (device)=>{
         let value = getResponsiveValueByScreen(styles?.itemMaxWidth, device);
         const itemWidthTypeValue = getResponsiveValueByScreen(itemWidthType, device);
         if (itemWidthTypeValue === 'FIT_CONTENT') {
@@ -80,22 +80,25 @@ const Marquee = ({ children, style, builderAttrs, rawChildren, advanced, ...prop
         }
         return value;
     };
+    const getMaxWidth = (device)=>{
+        return getItemMaxWidthValueByScreen(device) === 'auto' ? 'unset' : getItemMaxWidthValueByScreen(device);
+    };
     const getWidthForWrapperItem = ()=>{
         return {
             ...makeStyleResponsive('w', {
-                desktop: itemMaxWidthValueByScreen('desktop'),
-                tablet: itemMaxWidthValueByScreen('tablet'),
-                mobile: itemMaxWidthValueByScreen('mobile')
+                desktop: getItemMaxWidthValueByScreen('desktop'),
+                tablet: getItemMaxWidthValueByScreen('tablet'),
+                mobile: getItemMaxWidthValueByScreen('mobile')
             }),
             ...makeStyleResponsive('minw', {
-                desktop: itemMaxWidthValueByScreen('desktop'),
-                tablet: itemMaxWidthValueByScreen('tablet'),
-                mobile: itemMaxWidthValueByScreen('mobile')
+                desktop: getItemMaxWidthValueByScreen('desktop'),
+                tablet: getItemMaxWidthValueByScreen('tablet'),
+                mobile: getItemMaxWidthValueByScreen('mobile')
             }),
             ...makeStyleResponsive('maxw', {
-                desktop: itemMaxWidthValueByScreen('desktop'),
-                tablet: itemMaxWidthValueByScreen('tablet'),
-                mobile: itemMaxWidthValueByScreen('mobile')
+                desktop: getMaxWidth('desktop'),
+                tablet: getMaxWidth('tablet'),
+                mobile: getMaxWidth('mobile')
             })
         };
     };

package/dist/esm/post-purchase/product/components/variants/Dropdown.js

@@ -65,7 +65,7 @@ const DropdownVariant = ({ option, optionPosition, optionNumber, variantGroup, v
                     children: /*#__PURE__*/ jsx("span", {
                         className: "gp-max-w-full",
                         children: /*#__PURE__*/ jsx("span", {
-                            className: "gp-block gp-overflow-hidden gp-truncate",
+                            className: "gp-block gp-overflow-hidden",
                             children: label
                         })
                     })

package/dist/esm/product/components/ProductButton.js

@@ -214,7 +214,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     ]);
     const isInStock = useCurrentVariantInStock();
     const isDisable = !isInStock || createCartLoading || addToCartLoading;
-    const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
+    const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
     if (!isInStock && isCustomOutOfStock) {
         buttonStyles.backgroundColor = {
             normal: oosBackground

package/dist/esm/product/components/ProductButton.liquid.js

@@ -184,22 +184,6 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
-    const labelUnavailableTranslate = getDynamicSourceLocales({
-        val: 'Unavailable',
-        uid: builderProps?.uid,
-        settingId: 'unavailableLabel',
-        isLiquid: true,
-        pageContext,
-        translate: setting?.translate ? 'unavailableLabel' : undefined
-    });
-    const labelOutOfStockTranslate = getDynamicSourceLocales({
-        val: setting?.outOfStockLabel,
-        uid: builderProps?.uid,
-        settingId: 'outOfStockLabel',
-        isLiquid: true,
-        pageContext,
-        translate: setting?.translate ? 'outOfStockLabel' : undefined
-    });
     return template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -207,8 +191,6 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
-      label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
-      label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -286,7 +268,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
+            label: setting?.outOfStockLabel,
+            translate: setting?.translate ? 'outOfStockLabel' : undefined,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -305,8 +288,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice(),
-        isForceValue: true
+        nodePrice: composeNodePrice()
     })}
     </gp-product-button>
     ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js

@@ -9,7 +9,7 @@ import NextImage from '../../../../image/components/NextImage.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const ftAspectRatio = getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return getDisplayStyle((device)=>![
@@ -149,7 +149,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
             },
             priority: setting?.preload,
             className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${className}`,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const renderNoImage = ()=>{
@@ -167,7 +167,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
             },
             priority: setting?.preload,
             className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none`,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const getValueFromValueContainUnit = (value)=>{
@@ -394,11 +394,10 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyLoadImage
+                enableLazyloadImage
             })}
           {%- endif -%}
-        `,
-            ftShapeProductImage: setting?.ftShape
+        `
         })}
     `;
     };

package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js

@@ -6,7 +6,7 @@ import { convertSpacing, getDisplayStyle, getAspectRatio, getSrcImage } from '..
 import { getShapeByLayout, getSettingMinWidthForCarouselItem, getSettingWidthForCarouselItem, getMinHeightByPosition, getSliderPerShowConfig, getAllowDotConfig, getDotStyleConfig, getCarouselVerticalConfigByPosition, checkDisplayGalleryByWidth, getZoomDisplay } from '../common/productGallery.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -86,7 +86,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
             customLazyload: true,
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const aspectRatioToPaddingBottom = ()=>{

package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js

@@ -8,7 +8,7 @@ import Model3d from '../../../../image/components/Modal3d.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import HTML5Embed from '../../../../video/components/HTML5Embed.liquid.js';
 
-const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
     const getGridDisplay = ()=>{
         const isDisplayGrid = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -97,7 +97,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${cls('zoom-element !gp-max-w-none', getZoomImageClass())}">
           ${NextImage({
@@ -111,7 +111,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     return template`

package/dist/esm/product/components/ProductImagesV2/liquid/ProductImages.liquid.js

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../../../helpers.js';
 import { getShapeByLayout, sizeSettingDefaultForNewLayout } from '../common/productGallery.js';
 
 const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyLoadImage } = productImageProps;
+    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
         ${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
             <div
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
             </div>
             ${ProductGalleryGrid({
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
           `)}
       </div>

package/dist/esm/product/components/ProductVariants/variants/combine/index.js

@@ -38,7 +38,7 @@ const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
   `}`;
 };
 const renderBlankOption = (hasPreSelected, blankText)=>{
-    return !hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+    return !hasPreSelected ? `<option value="blank" selected>${blankText ?? getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
 };
 
 export { renderBlankOption, renderCombineVariants };

package/dist/esm/product/setting/ProductList.js

@@ -814,7 +814,7 @@ const config = {
                     options: {
                         tooltip: {
                             icon: 'info-line-16',
-                            content: 'Note: this might not work properly on Safari for iOS versions below 16',
+                            content: 'Note: this might not work properly on Safari for iOS versions below 17',
                             iconClass: 'text-[#757575] hover:text-[#F9F9F9]'
                         }
                     },