@gem-sdk/components 2.1.41 → 2.2.0-staging.28

package/dist/cjs/article/components/ArticleImage.js

@@ -29,7 +29,8 @@ const ArticleImage = ({ className, setting = {}, styles = {}, advanced, builderP
             setting: {
                 ...setting,
                 alt: image.alt,
-                image
+                image,
+                disableNoDataState: true
             },
             styles: styles,
             advanced: advanced

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -14,7 +14,7 @@ var NextImage_liquid = require('../../../image/components/NextImage.liquid.js');
 var getSrcSet = require('../../../image/helpers/getSrcSet.js');
 var helpers$1 = require('../../../image/components/helpers.js');
 
-const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
+const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage = true })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
@@ -43,9 +43,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             } else if (data.videoType === 'html5') {
                 delete data.video;
             }
-            if (data.type !== 'image') {
-                delete data.image;
-            }
         }
         return background;
     };
@@ -134,7 +131,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: helpers$1.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
-    const enableLazyLoad = !setting?.preload && enableLazyloadImage;
+    const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
     const renderInnerHeroBanner = ()=>{
         return core.template /* liquid */ `
       <div
@@ -184,7 +181,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
         <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -227,7 +224,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 alt: `lazy image ${device}`,
                 className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
                 isDisableAspectStyle: true,
-                enableLazyloadImage
+                enableLazyLoadImage
             }));
         }).join('') : ''}
             </div></div>

package/dist/cjs/builder.js

@@ -124,6 +124,8 @@ var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuid
 var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var EcoboostifyShoppableReelUgc = require('./third-party/components/EcoboostifyShoppableReelUgc.js');
+var EcomsendBackInStockAlert = require('./third-party/components/EcomsendBackInStockAlert.js');
+var AppstleBundlesDiscounts = require('./third-party/components/AppstleBundlesDiscounts.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -258,6 +260,8 @@ var PostPurchaseCountdownTimer = require('./post-purchase/countdown-timer/compon
 var Text$1 = require('./post-purchase/text/Text.js');
 
 var builder = {
+    AppstleBundlesDiscounts: AppstleBundlesDiscounts.default,
+    EcomsendBackInStockAlert: EcomsendBackInStockAlert.default,
     EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
     OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
     EssentialAnnouncementBar: EssentialAnnouncementBar.default,

package/dist/cjs/button/components/Button.liquid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = core.splitStyle([
@@ -70,7 +70,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = helpers.getDynamicSourceLocales({
+    const labelValDisplay = isForceValue ? label : helpers.getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',
@@ -161,13 +161,14 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       >${iconSvg}</span>`)}
       <span
         data-gp-text
-        class="${`gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
+        class="${`gp-content-product-button gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
         ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
         style="${{
         ...nodePrice && appendTypoStyle,
         '--size': appendTypoStyle['--size'],
         '--size-tablet': appendTypoStyle['--size-tablet'],
-        '--size-mobile': appendTypoStyle['--size-mobile']
+        '--size-mobile': appendTypoStyle['--size-mobile'],
+        ...core.getGlobalColorStateStyle('c', textColor)
     }}"
       >
         ${labelValDisplay}

package/dist/cjs/carousel/components/Carousel.liquid.js

@@ -13,7 +13,7 @@ const DEVICES = [
     'tablet',
     'desktop'
 ];
-const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ...props })=>{
+const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ftShapeProductImage, ...props })=>{
     const setting = arrow.mappingNavigationCarousel(props.setting);
     const styleHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(styles?.sizeSetting));
     const styleWidth = core.makeStyleWithDefault('w', core.getWidthByShapeGlobalSize(styles?.sizeSetting, true), {
@@ -112,7 +112,8 @@ const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId
         setting,
         styles,
         moveToIdx,
-        isHiddenArrowWhenDisabled
+        isHiddenArrowWhenDisabled,
+        ftShapeProductImage
     }).replaceAll("'", ''')}' style="${{
         ...core.makeStyleResponsive('jc', styles?.align),
         ...rootStyles

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

@@ -4,41 +4,15 @@ 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() {
-        clearNextTimeout();
+        clearTimeout(timeout);
         timeout = setTimeout(()=>{
-            // 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;
+            if (mouseOver || !autoplay.enable) return;
             slider.next();
-        }, autoplay.delay ?? 2000);
+        }, autoplay?.delay ?? 2000);
     }
     function onMouseOver() {
         mouseOver = true;
@@ -49,15 +23,11 @@ const AutoPlayPlugin = (slider)=>{
         nextTimeout();
     }
     slider.on('created', ()=>{
-        $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) {
+        if (autoplay.pauseOnHover) {
             slider.container.addEventListener('mouseover', onMouseOver);
             slider.container.addEventListener('mouseout', onMouseOut);
         }
-        if (autoplay.enable) {
-            initIntersectionObserver();
+        if (slider.options.autoplay?.enable) {
             nextTimeout();
         }
     });
@@ -65,40 +35,29 @@ const AutoPlayPlugin = (slider)=>{
     slider.on('animationEnded', nextTimeout);
     slider.on('updated', (newOptions)=>{
         autoplay = newOptions.options?.autoplay ?? {};
-        if (autoplay.enable) {
-            initIntersectionObserver();
-            nextTimeout();
-        }
+        nextTimeout();
+    });
+    slider.on('destroyed', ()=>{
+        slider.container.removeEventListener('mouseover', onMouseOver);
+        slider.container.removeEventListener('mouseout', onMouseOut);
     });
     slider.on('optionsChanged', (newOptions)=>{
-        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover && slider.container) {
+        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) {
                 slider.container.addEventListener('mouseover', onMouseOver);
                 slider.container.addEventListener('mouseout', onMouseOut);
-            } else {
+            }
+            if (!newOptions.options.autoplay?.pauseOnHover) {
                 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/cjs/common/const.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const ELEMENT_Z_INDEX = {
-    STICKY: 100000,
+    STICKY: 1000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

package/dist/cjs/helpers.js

@@ -58,6 +58,10 @@ const getStaticLocale = (tag, key)=>{
 const getSettingPreloadData = (disabledValue, enabledValue)=>{
     return `{% if section.settings.section_preload == "false" %}${disabledValue} ${enabledValue ? `{% else %}${enabledValue}` : ''}{% endif %}`;
 };
+const getHttpUrl = (link)=>{
+    if (!link) return '';
+    return link.match(/^https?:\/\//i) ? link : `http://${link}`;
+};
 const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
     const URL_START_WITH = [
         '#',
@@ -70,7 +74,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
     const isHyperlink = setting?.link !== undefined && setting.link !== '';
     let urlHref = setting?.link ?? '';
     const isHomePageHref = urlHref === '/';
-    const regexHttp = new RegExp(/^https?:\/\//i);
+    const regexHttp = new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i);
     const regexPageType = new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart)\/?/i);
     const isShopifyDomain = isHyperlink && !regexHttp.test(urlHref) && regexPageType.test(urlHref);
     const isDomain = isHyperlink && regexHttp.test(urlHref);
@@ -81,6 +85,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
             urlHref = "{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}" + urlHref;
         }
     }
+    if (isDomain) urlHref = getHttpUrl(urlHref);
     const isLink = ()=>{
         if (URL_START_WITH.find((el)=>urlHref.startsWith(el))) return true;
         if (URL_INCLUDES.find((el)=>urlHref.includes(el))) return true;

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

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

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

@@ -12,6 +12,7 @@ var helpers = require('./helpers.js');
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
+    core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -86,7 +87,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: core.cls(className, 'gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
+                        className: core.cls(className, 'gp-inline-block gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

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

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

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

@@ -7,7 +7,7 @@ var getSrcSet = require('../helpers/getSrcSet.js');
 var index = require('../../product/components/ProductVariants/index.js');
 var helpers = require('./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, 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, pageContext, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getSrcSet.getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getSrcSet.getImageSrc({
@@ -97,12 +97,13 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${core.cls(className, {
-        gp_lazyload: !customLazyload && enableLazyloadImage
+        gp_lazyload: !customLazyload && enableLazyLoadImage,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyloadImage ? imagePlaceholder : srcImage,
+        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,

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

@@ -11,7 +11,7 @@ var helpers$1 = require('../../helpers.js');
 var helpers = require('./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, 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, enableLazyLoadImage, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -271,7 +271,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       ${NextImage_liquid.default({
         customAttrs: {
@@ -287,7 +289,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/cjs/index.js

@@ -220,6 +220,8 @@ var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuid
 var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var EcoboostifyShoppableReelUgc = require('./third-party/components/EcoboostifyShoppableReelUgc.js');
+var EcomsendBackInStockAlert = require('./third-party/components/EcomsendBackInStockAlert.js');
+var AppstleBundlesDiscounts = require('./third-party/components/AppstleBundlesDiscounts.js');
 var index$x = require('./third-party-instant/setting/index.js');
 var InstantJudgemeReviews = require('./third-party-instant/components/InstantJudgemeReviews.js');
 var InstantLooxReviews = require('./third-party-instant/components/InstantLooxReviews.js');
@@ -536,6 +538,8 @@ exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide.default;
 exports.AlsoBoughtCbb = AlsoBoughtCbb.default;
 exports.HextomFreeShippingBar = HextomFreeShippingBar.default;
 exports.EcoboostifyShoppableReelUgc = EcoboostifyShoppableReelUgc.default;
+exports.EcomsendBackInStockAlert = EcomsendBackInStockAlert.default;
+exports.AppstleBundlesDiscounts = AppstleBundlesDiscounts.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -175,6 +175,8 @@ var BfSizeChartSizeGuide_liquid = require('./third-party/components/BfSizeChartS
 var AlsoBoughtCbb_liquid = require('./third-party/components/AlsoBoughtCbb.liquid.js');
 var HextomFreeShippingBar_liquid = require('./third-party/components/HextomFreeShippingBar.liquid.js');
 var EcoboostifyShoppableReelUgc_liquid = require('./third-party/components/EcoboostifyShoppableReelUgc.liquid.js');
+var EcomsendBackInStockAlert_liquid = require('./third-party/components/EcomsendBackInStockAlert.liquid.js');
+var AppstleBundlesDiscounts_liquid = require('./third-party/components/AppstleBundlesDiscounts.liquid.js');
 var ImageComparison_liquid = require('./image-comparison/components/ImageComparison.liquid.js');
 var ThirdPartySlot_liquid = require('./third-party-slot/components/ThirdPartySlot.liquid.js');
 var Sticky_liquid = require('./sticky/components/Sticky.liquid.js');
@@ -372,6 +374,8 @@ exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide_liquid.default;
 exports.AlsoBoughtCbb = AlsoBoughtCbb_liquid.default;
 exports.HextomFreeShippingBar = HextomFreeShippingBar_liquid.default;
 exports.EcoboostifyShoppableReelUgc = EcoboostifyShoppableReelUgc_liquid.default;
+exports.EcomsendBackInStockAlert = EcomsendBackInStockAlert_liquid.default;
+exports.AppstleBundlesDiscounts = AppstleBundlesDiscounts_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

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

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

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

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

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

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

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

@@ -188,6 +188,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
+    const labelUnavailableTranslate = helpers.getDynamicSourceLocales({
+        val: 'Unavailable',
+        uid: builderProps?.uid,
+        settingId: 'unavailableLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'unavailableLabel' : undefined
+    });
+    const labelOutOfStockTranslate = helpers.getDynamicSourceLocales({
+        val: setting?.outOfStockLabel,
+        uid: builderProps?.uid,
+        settingId: 'outOfStockLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'outOfStockLabel' : undefined
+    });
     return core.template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -195,6 +211,8 @@ 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,
@@ -272,8 +290,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: setting?.outOfStockLabel,
-            translate: setting?.translate ? 'outOfStockLabel' : undefined,
+            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -292,7 +309,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice()
+        nodePrice: composeNodePrice(),
+        isForceValue: true
     })}
     </gp-product-button>
     ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

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

@@ -13,7 +13,7 @@ var NextImage_liquid = require('../../../../image/components/NextImage.liquid.js
 var Video_liquid = require('../../../../image/components/Video.liquid.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
+const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
     const ftAspectRatio = common.getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return common.getDisplayStyle((device)=>![
@@ -153,7 +153,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 = ()=>{
@@ -171,7 +171,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)=>{
@@ -398,10 +398,11 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyloadImage
+                enableLazyLoadImage
             })}
           {%- endif -%}
-        `
+        `,
+            ftShapeProductImage: setting?.ftShape
         })}
     `;
     };