@gem-sdk/components 2.6.0-staging.28 → 2.6.0-staging.30

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, pageContext })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title, isGoToSalesPage } = setting ?? {};
     const { urlData } = helpers.getLinkDataConfigs({
         defaultWrap: '',
@@ -137,7 +137,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 && pageContext?.enableLazyLoadImage;
     const renderInnerHeroBanner = ()=>{
         return core.template /* liquid */ `
       <div
@@ -187,7 +187,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage,
+            pageContext,
             fallBackImg: common.fallBackImg
         })}
         <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
@@ -231,7 +231,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
+                pageContext
             }));
         }).join('') : ''}
             </div></div>

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

@@ -6,11 +6,12 @@ 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, fallBackImg, ...props })=>{
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, pageContext, fallBackImg, ...props })=>{
     const fallBackImage = fallBackImg || '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;
     const srcMobile = (getSrcSet.getImageSrc(srcSet?.mobile, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.tablet, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;
+    const { enableLazyLoadImage } = pageContext ?? {};
     return core.template`
   <picture style="border-radius: inherit" class="${core.cls(pictureClass)}">
   ${core.RenderIf(priority, core.template`
@@ -31,16 +32,16 @@ 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
     })}"
-        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.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, pageContext })=>{
     const { imageLink, isNotLazyload, isGoToSalesPage } = setting ?? {};
     const { Wrap: WrapLink, urlData, shouldRenderLink } = helpers.getLinkDataConfigs({
         defaultWrap: 'div',
@@ -32,6 +32,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     const imageWidth = core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape));
     const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
     const imageFlexGrowClass = core.getFlexGrowClassByShapeGlobalSize(shape);
+    const testCLass = pageContext?.enableLazyLoadImage ? 'has_class' : 'do_not_have_class';
     return core.template`<div
     ${{
         ...builderAttrs
@@ -45,6 +46,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         ...style,
         ...core.makeStyleResponsive('ta', styles?.align)
     }}"
+    data-class="${testCLass}"
     >
       <${WrapLink}
         class="pointer-events-auto gp-h-full gp-flex"
@@ -82,7 +84,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: core.getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyloadImage
+        pageContext
     }) : NextImage_liquid.default({
         ...setting?.image,
         priority: setting?.priority,
@@ -111,7 +113,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        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, pageContext, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getSrcSet.getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getSrcSet.getImageSrc({
@@ -17,6 +17,7 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
         storage
     });
     const srcSetImg = srcIsLiquidCode ? src : getSrcSet.getSrcSet(newBackupFilekey ?? '', storage ?? 'THEME', src);
+    const { enableLazyLoadImage } = pageContext ?? {};
     const getObjectFit = ()=>{
         if (isDisableObjectFit) return {};
         return core.makeStyleResponsive('objf', layout);
@@ -97,12 +98,12 @@ 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
     })}"
       ${{
         '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

@@ -271,7 +271,8 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        pageContext
     })}
       ${NextImage_liquid.default({
         customAttrs: {
@@ -287,7 +288,8 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        pageContext
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

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, pageContext, ...setting })=>{
     const ftAspectRatio = common.getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return common.getDisplayStyle((device)=>![
@@ -158,7 +158,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
+            pageContext
         })}`;
     };
     const renderNoImage = ()=>{
@@ -176,7 +176,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
+            pageContext
         })}`;
     };
     const getValueFromValueContainUnit = (value)=>{
@@ -403,7 +403,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyloadImage
+                pageContext
             })}
           {%- endif -%}
         `

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

@@ -10,7 +10,7 @@ var common = require('../common/common.js');
 var productGallery = require('../common/productGallery.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, pageContext, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = core.getResponsiveValueByScreen(position, device);
@@ -90,7 +90,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
+            pageContext
         })}`;
     };
     const aspectRatioToPaddingBottom = ()=>{

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

@@ -12,7 +12,7 @@ var Modal3d_liquid = require('../../../../image/components/Modal3d.liquid.js');
 var Video_liquid = require('../../../../image/components/Video.liquid.js');
 var HTML5Embed_liquid = require('../../../../video/components/HTML5Embed.liquid.js');
 
-const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
+const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, pageContext, ...setting })=>{
     const getGridDisplay = ()=>{
         const isDisplayGrid = (type, position, device)=>{
             const layout = core.getResponsiveValueByScreen(position, device);
@@ -101,7 +101,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            pageContext
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${core.cls('zoom-element !gp-max-w-none', productFeaturedImage.getZoomImageClass())}">
           ${NextImage_liquid.default({
@@ -115,7 +115,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full',
             customLazyload: false,
-            enableLazyloadImage
+            pageContext
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -298,7 +298,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            pageContext
         })}`;
     };
     return core.template`

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

@@ -11,7 +11,7 @@ var helpers = require('../../../../helpers.js');
 var productGallery = require('../common/productGallery.js');
 
 const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
+    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -116,7 +116,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyloadImage
+        pageContext
     })}
         ${common.shouldSkipLiquidRenderForSingleImage(settings?.position, core.template`
             <div
@@ -132,7 +132,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel_liquid.default({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyloadImage
+        pageContext
     })}
             </div>
             ${ProductGalleryGrid_liquid.default({
@@ -142,7 +142,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyloadImage
+        pageContext
     })}
           `)}
       </div>

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -7,6 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const HTML5Embed = (props)=>{
+    const { pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -23,7 +24,8 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            pageContext
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {

package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js

@@ -7,7 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload } = props;
+    const { style, lazy, preload, pageContext } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -42,7 +42,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...core.makeStyleResponsive('bgi', {
-            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload || !pageContext?.enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -52,7 +52,8 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        pageContext
     })}
         <button
           type="button"

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

@@ -10,7 +10,7 @@ import NextImage from '../../../image/components/NextImage.liquid.js';
 import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
 import { createBlurDataURL } from '../../../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, pageContext })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title, isGoToSalesPage } = setting ?? {};
     const { urlData } = getLinkDataConfigs({
         defaultWrap: '',
@@ -133,7 +133,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: 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 && pageContext?.enableLazyLoadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -183,7 +183,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage,
+            pageContext,
             fallBackImg
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
@@ -227,7 +227,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
+                pageContext
             }));
         }).join('') : ''}
             </div></div>

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

@@ -2,11 +2,12 @@ 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, fallBackImg, ...props })=>{
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, pageContext, fallBackImg, ...props })=>{
     const fallBackImage = fallBackImg || '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;
     const srcMobile = (getImageSrc(srcSet?.mobile, 'mobile') ?? getImageSrc(srcSet?.tablet, 'mobile') ?? getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;
+    const { enableLazyLoadImage } = pageContext ?? {};
     return template`
   <picture style="border-radius: inherit" class="${cls(pictureClass)}">
   ${RenderIf(priority, template`
@@ -27,16 +28,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_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.liquid.js

@@ -3,7 +3,7 @@ import AdaptiveImage from './AdaptiveImage.liquid.js';
 import NextImage from './NextImage.liquid.js';
 import { getLinkDataConfigs } from '../../helpers.js';
 
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, pageContext })=>{
     const { imageLink, isNotLazyload, isGoToSalesPage } = setting ?? {};
     const { Wrap: WrapLink, urlData, shouldRenderLink } = getLinkDataConfigs({
         defaultWrap: 'div',
@@ -28,6 +28,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     const imageWidth = makeStyleResponsive('w', getWidthByShapeGlobalSize(shape));
     const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
     const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
+    const testCLass = pageContext?.enableLazyLoadImage ? 'has_class' : 'do_not_have_class';
     return template`<div
     ${{
         ...builderAttrs
@@ -41,6 +42,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         ...style,
         ...makeStyleResponsive('ta', styles?.align)
     }}"
+    data-class="${testCLass}"
     >
       <${WrapLink}
         class="pointer-events-auto gp-h-full gp-flex"
@@ -78,7 +80,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyloadImage
+        pageContext
     }) : NextImage({
         ...setting?.image,
         priority: setting?.priority,
@@ -107,7 +109,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyloadImage
+        pageContext
     })}
       </${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, 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, pageContext, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -13,6 +13,7 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
         storage
     });
     const srcSetImg = srcIsLiquidCode ? src : getSrcSet(newBackupFilekey ?? '', storage ?? 'THEME', src);
+    const { enableLazyLoadImage } = pageContext ?? {};
     const getObjectFit = ()=>{
         if (isDisableObjectFit) return {};
         return makeStyleResponsive('objf', layout);
@@ -93,12 +94,12 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${cls(className, {
-        gp_lazyload: !customLazyload && enableLazyloadImage
+        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

@@ -267,7 +267,8 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        pageContext
     })}
       ${NextImage({
         customAttrs: {
@@ -283,7 +284,8 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        pageContext
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

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, pageContext, ...setting })=>{
     const ftAspectRatio = getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return getDisplayStyle((device)=>![
@@ -154,7 +154,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
+            pageContext
         })}`;
     };
     const renderNoImage = ()=>{
@@ -172,7 +172,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
+            pageContext
         })}`;
     };
     const getValueFromValueContainUnit = (value)=>{
@@ -399,7 +399,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyloadImage
+                pageContext
             })}
           {%- endif -%}
         `

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, pageContext, ...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
+            pageContext
         })}`;
     };
     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, pageContext, ...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
+            pageContext
         })}
       ${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
+            pageContext
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            pageContext
         })}`;
     };
     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 } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyloadImage
+        pageContext
     })}
         ${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
             <div
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyloadImage
+        pageContext
     })}
             </div>
             ${ProductGalleryGrid({
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyloadImage
+        pageContext
     })}
           `)}
       </div>

package/dist/esm/video/components/HTML5Embed.liquid.js

@@ -3,6 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../helpers.js';
 
 const HTML5Embed = (props)=>{
+    const { pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -19,7 +20,8 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            pageContext
         })}
     ${RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {

package/dist/esm/video/components/LiteYouTubeEmbed.liquid.js

@@ -3,7 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../helpers.js';
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload } = props;
+    const { style, lazy, preload, pageContext } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -38,7 +38,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...makeStyleResponsive('bgi', {
-            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload || !pageContext?.enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -48,7 +48,8 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        pageContext
     })}
         <button
           type="button"

package/dist/types/index.d.ts

@@ -5817,7 +5817,6 @@ type PropTypes = ProductImagesProps$1 & React.ComponentPropsWithoutRef<'div'> &
     children?: any;
 } & {
     pageContext?: PageContext;
-    enableLazyloadImage?: boolean;
 };
 declare const ProductImages: (productImageProps: PropTypes) => string;
 
@@ -6316,7 +6315,7 @@ type CountdownLiquidProps = BaseProps<{
 };
 declare const Countdown: ({ builderProps, setting, styles, advanced, pageContext, }: CountdownLiquidProps) => string;
 
-declare const Image: ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage, }: {
+declare const Image: ({ styles, className, setting, builderAttrs, builderProps, style, advanced, pageContext, }: {
     className?: string | undefined;
     children?: React.ReactNode;
     onClick?: React.MouseEventHandler<any> | undefined;
@@ -6378,7 +6377,7 @@ declare const Image: ({ styles, className, setting, builderAttrs, builderProps,
 } & {
     advanced?: any;
 } & {
-    enableLazyloadImage?: boolean | undefined;
+    pageContext?: PageContext | undefined;
 }) => string;
 
 type VideoProps = {} & BasePropsWrap<{
@@ -6443,7 +6442,7 @@ declare const TabItem: ({ children, builderAttrs, style, className, parentUid }:
     parentUid?: string | undefined;
 }) => string;
 
-declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage, }: _gem_sdk_core.BaseProps<{
+declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, pageContext, }: _gem_sdk_core.BaseProps<{
     link?: {
         link?: string | undefined;
         target?: string | undefined;
@@ -6509,7 +6508,7 @@ declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style,
 } & {
     rawChildren?: any[] | undefined;
     advanced?: any;
-    enableLazyloadImage?: boolean | undefined;
+    pageContext?: PageContext | undefined;
 }) => string;
 
 declare const CSSCode: ({ setting, style, advanced, builderAttrs, builderProps }: CSSCodeProps) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.6.0-staging.28",
+  "version": "2.6.0-staging.30",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.6.0-staging.26",
+    "@gem-sdk/core": "2.6.0-staging.29",
     "@gem-sdk/styles": "2.6.0-staging.13",
     "@types/react-transition-group": "^4.4.5"
   },