@gem-sdk/components 2.1.13-staging.3 → 2.1.13-staging.30

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)
@@ -50,7 +50,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         style="${{
         ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
         'border-radius': 'inherit',
-        overflow: 'hidden',
         ...core.makeStyleResponsive('jc', styles?.align)
     }}"
       >
@@ -77,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,
@@ -106,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

@@ -207,8 +207,18 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./third-party/components/StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./third-party/components/EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./third-party/components/EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./third-party/components/OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./third-party/components/EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./third-party/components/TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.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');
@@ -511,8 +521,18 @@ exports.TrustreviewsProductReviews = TrustreviewsProductReviews.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews.default;
 exports.HulkProductOptions = HulkProductOptions.default;
 exports.TrustshopProductReviews = TrustshopProductReviews.default;
+exports.StellarDeliveryDatePickup = StellarDeliveryDatePickup.default;
+exports.EssentialCountdownTimerBar = EssentialCountdownTimerBar.default;
+exports.EssentialAnnouncementBar = EssentialAnnouncementBar.default;
+exports.OkendoReviewsLoyalty = OkendoReviewsLoyalty.default;
+exports.EstimatedDeliveryDatePlus = EstimatedDeliveryDatePlus.default;
 exports.HextomCountdownTimerBar = HextomCountdownTimerBar.default;
 exports.TrustBadgesBear = TrustBadgesBear.default;
+exports.TrustedsiteTrustBadges = TrustedsiteTrustBadges.default;
+exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage.default;
+exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide.default;
+exports.AlsoBoughtCbb = AlsoBoughtCbb.default;
+exports.HextomFreeShippingBar = HextomFreeShippingBar.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -161,9 +161,19 @@ var SeoantTrustBadgesIcon_liquid = require('./third-party/components/SeoantTrust
 var TrustreviewsProductReviews_liquid = require('./third-party/components/TrustreviewsProductReviews.liquid.js');
 var MyappgurusProductReviews_liquid = require('./third-party/components/MyappgurusProductReviews.liquid.js');
 var HulkProductOptions_liquid = require('./third-party/components/HulkProductOptions.liquid.js');
+var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
+var StellarDeliveryDatePickup_liquid = require('./third-party/components/StellarDeliveryDatePickup.liquid.js');
+var EssentialCountdownTimerBar_liquid = require('./third-party/components/EssentialCountdownTimerBar.liquid.js');
+var EssentialAnnouncementBar_liquid = require('./third-party/components/EssentialAnnouncementBar.liquid.js');
+var OkendoReviewsLoyalty_liquid = require('./third-party/components/OkendoReviewsLoyalty.liquid.js');
+var EstimatedDeliveryDatePlus_liquid = require('./third-party/components/EstimatedDeliveryDatePlus.liquid.js');
 var HextomCountdownTimerBar_liquid = require('./third-party/components/HextomCountdownTimerBar.liquid.js');
 var TrustBadgesBear_liquid = require('./third-party/components/TrustBadgesBear.liquid.js');
-var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
+var TrustedsiteTrustBadges_liquid = require('./third-party/components/TrustedsiteTrustBadges.liquid.js');
+var GloColorSwatchvariantImage_liquid = require('./third-party/components/GloColorSwatchvariantImage.liquid.js');
+var BfSizeChartSizeGuide_liquid = require('./third-party/components/BfSizeChartSizeGuide.liquid.js');
+var AlsoBoughtCbb_liquid = require('./third-party/components/AlsoBoughtCbb.liquid.js');
+var HextomFreeShippingBar_liquid = require('./third-party/components/HextomFreeShippingBar.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');
@@ -347,9 +357,19 @@ exports.SeoantTrustBadgesIcon = SeoantTrustBadgesIcon_liquid.default;
 exports.TrustreviewsProductReviews = TrustreviewsProductReviews_liquid.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews_liquid.default;
 exports.HulkProductOptions = HulkProductOptions_liquid.default;
+exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
+exports.StellarDeliveryDatePickup = StellarDeliveryDatePickup_liquid.default;
+exports.EssentialCountdownTimerBar = EssentialCountdownTimerBar_liquid.default;
+exports.EssentialAnnouncementBar = EssentialAnnouncementBar_liquid.default;
+exports.OkendoReviewsLoyalty = OkendoReviewsLoyalty_liquid.default;
+exports.EstimatedDeliveryDatePlus = EstimatedDeliveryDatePlus_liquid.default;
 exports.HextomCountdownTimerBar = HextomCountdownTimerBar_liquid.default;
 exports.TrustBadgesBear = TrustBadgesBear_liquid.default;
-exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
+exports.TrustedsiteTrustBadges = TrustedsiteTrustBadges_liquid.default;
+exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage_liquid.default;
+exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide_liquid.default;
+exports.AlsoBoughtCbb = AlsoBoughtCbb_liquid.default;
+exports.HextomFreeShippingBar = HextomFreeShippingBar_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

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

@@ -46,7 +46,6 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
     };
     return core.template`
    <div
-     
       style="${containerStyle()}"
       class="rfm-marquee-container"
     >
@@ -55,35 +54,17 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
         style="${marqueeStyle()}"
       >
         <div class="rfm-initial-child-container">
-
-        ${core.template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-        ${core.template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-
-        ${core.template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
+          ${core.template`
+            <div style="${childStyle()}" class="${`rfm-child`}">
+              ${children}
+            </div>
+          `}
         </div>
       </div>
-       <div
+      <div
         class="rfm-marquee placeholder-marquee"
         style="${marqueeStyle()}"
-      >
-       
-      </div>
+      ></div>
     </div>
   `;
 };

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

@@ -9,6 +9,7 @@ var helpers = require('../../helpers.js');
 const PRODUCT_ID_LATEST = 'latest';
 const PREFIX_PRODUCT_ID = 'gid://shopify/Product/';
 const PREFIX_PRODUCT_VARIANT_ID = 'gid://shopify/ProductVariant/';
+const PREFIX_PRODUCT_OPTION_VALUE_ID = 'gid://shopify/ProductOptionValue/';
 const STATIC_PRODUCT_STATUS = 'static';
 const DYNAMIC_PRODUCT_STATUS = 'dynamic';
 const Product = ({ children, setting, styles, style, builderProps, rawChildren, advanced })=>{
@@ -24,8 +25,8 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
     const formatProductId = productSetting?.productId?.replace(PREFIX_PRODUCT_ID, '').toLowerCase() || PRODUCT_ID_LATEST;
     const formatVariantId = initVariantId?.replace(PREFIX_PRODUCT_VARIANT_ID, '') || '';
     const productStatus = productSetting?.productStatus ?? STATIC_PRODUCT_STATUS;
+    const preSelectedOptionIds = productSetting?.selectedOptions?.map((option)=>option?.valueBaseID?.replace(PREFIX_PRODUCT_OPTION_VALUE_ID, ''));
     return core.template /* liquid */ `
-    
     {%- assign gpBkProduct = product -%}
     ${productStatus !== DYNAMIC_PRODUCT_STATUS ? `
         {%- liquid
@@ -100,7 +101,7 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
       {%- endif -%}
       <gp-product data-uid="${builderProps?.uid}" data-id="${builderProps?.uid}" style="${{
         ...advancedStyle
-    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
+    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${preSelectedOptionIds}], "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
         gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }}}'>
         <product-form class="product-form">
           {%- form 'product', product, id: product_form_id, class: 'form contents', data-type: 'add-to-cart-form', autocomplete: 'off'  -%}

package/dist/cjs/product/components/ProductBadge/index.liquid.js

@@ -14,7 +14,8 @@ var helpers = require('../../../helpers.js');
 var renderBadgeLiquid = require('./utils/renderBadgeLiquid.js');
 var getWhiteSpace = require('./utils/getWhiteSpace.js');
 
-const ProductBadge = ({ styles, builderProps, isInsideProductImage, builderAttrs, setting, style, imageData, dotData })=>{
+const ProductBadge = ({ styles, builderProps, isInsideProductImage, builderAttrs, setting, style, imageData, dotData, pageContext })=>{
+    const { displayContent, translate } = setting ?? {};
     const isTextBadge = setting?.contentType === 'text';
     const shape$1 = shape.getShape(setting?.shape);
     const shapeAlignClass = common.getAlignShape(styles?.align, isInsideProductImage);
@@ -34,17 +35,25 @@ const ProductBadge = ({ styles, builderProps, isInsideProductImage, builderAttrs
     const paddingShape = common.getShapeWrapperPadding(shape$1?.ratio);
     const composeGlobalSize = core.makeGlobalSize(badgeSize);
     const isDropOutsideProductImage = setting?.positionWithImage === 'outside';
-    const isDiscountContent = common.checkDiscountContentProductBadge(setting?.displayContent);
+    const isDiscountContent = common.checkDiscountContentProductBadge(displayContent);
+    const displayContentVal = helpers.getDynamicSourceLocales({
+        val: displayContent?.trim(),
+        uid: builderProps?.uid,
+        settingId: 'displayContent',
+        isLiquid: true,
+        pageContext,
+        translate
+    });
     return core.template`
     {% if product %}
-      ${generateLiquidContent.generateBadgeContent(setting?.displayContent)}
+      ${generateLiquidContent.generateBadgeContent(displayContent, pageContext.isPreviewing)}
       ${renderBadgeLiquid.renderBadgeInFirstTime(setting?.displayTrigger, isDiscountContent, isTextBadge)}
       <gp-product-badge
       data-id="${builderProps?.uid}"
        class="gp-product-badge !gp-max-w-none gp-shrink-0 ${builderProps?.uid} ${builderProps?.builderData?.advanced?.cssClass || ''} {{className}}"
         id="g-product-badge-${builderProps?.uid}"
         gp-data='${core.dataStringify({
-        displayContent: setting?.displayContent,
+        displayContent: `${pageContext?.isPreviewing ? displayContentVal : `{{${displayContentVal}}}`}`,
         minPrice: '{{ minPriceValue }}',
         variantIDs: '{{  product.variants | map: "id" | json | escape }}',
         variantInventoryQuantities: '{{ product.variants | map: "inventory_quantity" | json | escape }}',

package/dist/cjs/product/components/ProductBadge/utils/generateLiquidContent.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const generateBadgeContent = (content)=>{
+const generateBadgeContent = (content, isPreviewing)=>{
     return `
-    {% assign content = "${content?.trim()}" %}
+    {% assign content = ${isPreviewing ? JSON.stringify(content) : content} %}
 
     {%if content.size > 0 %}
       {% if variant.compare_at_price and variant.compare_at_price > 0 %}

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

@@ -20,8 +20,8 @@ const getDisplayStyle = (fnCondition, defaultValue)=>{
     });
     return result;
 };
-const ProductDescription = ({ setting, advanced, builderProps })=>{
-    const { htmlTag } = setting ?? {};
+const ProductDescription = ({ setting, advanced, builderProps, pageContext })=>{
+    const { htmlTag, translate, viewMoreText, viewLessText } = setting ?? {};
     const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
     const defaultStyle = {
@@ -45,13 +45,29 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
         return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
     };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
+    const viewMoreTextDisplay = helpers.getDynamicSourceLocales({
+        val: viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate
+    });
+    const viewLessTextDisplay = helpers.getDynamicSourceLocales({
+        val: viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate
+    });
     return core.template`
   <gp-product-description  data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-product-description" gp-data='${JSON.stringify({
         setting: {
             lineClamp: setting?.lineClamp,
             hasLineClamp: setting?.hasLineClamp,
-            viewMoreText: setting?.viewMoreText,
-            viewLessText: setting?.viewLessText,
+            viewMoreText: pageContext?.isPreviewing ? viewMoreTextDisplay : `{{${viewMoreTextDisplay}}}`,
+            viewLessText: pageContext?.isPreviewing ? viewLessTextDisplay : `{{${viewLessTextDisplay}}}`,
             enableViewMoreIcon: setting?.enableViewMoreIcon
         },
         defaultStyle,
@@ -85,7 +101,7 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
     }}"
     >
 
-      ${setting?.viewMoreText}
+      ${pageContext?.isPreviewing ? viewMoreTextDisplay : `{{${viewMoreTextDisplay}}}`}
       ${setting?.enableViewMoreIcon ? `<svg
           class="gp-ml-1 gp-inline-block"
           style="display: inline-block; margin-left: 1px;"

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

@@ -42,7 +42,6 @@ const ProductImagesV2 = (productImageProps)=>{
     const extraClass = advanced?.cssClass;
     // State
     const [openLightBox, setOpenLightBox] = React.useState(false);
-    const [hasVariantAvailable, setHasVariantAvailable] = React.useState(true);
     const getFirstVideo = (product)=>{
         return product?.medias?.edges.find((item)=>[
                 'VIDEO',
@@ -57,24 +56,19 @@ const ProductImagesV2 = (productImageProps)=>{
     };
     const priorityFeatureImage = React.useMemo(()=>{
         if (setting?.typeDisplay === 'all-images') {
-            setHasVariantAvailable(true);
             let priorityItem;
             switch(setting?.preDisplay){
                 case '1st-images':
                     priorityItem = getFirstImage(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-3d-mode':
                     priorityItem = getFirst3DModal(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-video':
                     priorityItem = getFirstVideo(product);
-                    setHasVariantAvailable(false);
                     break;
                 case '1st-available-variant':
                     priorityItem = currentVariant?.media;
-                    setHasVariantAvailable(false);
                     break;
             }
             setProductFeaturedImage(priorityItem);
@@ -141,7 +135,7 @@ const ProductImagesV2 = (productImageProps)=>{
         }
     };
     React.useEffect(()=>{
-        if (currentVariant && hasVariantAvailable) {
+        if (currentVariant) {
             const index = galleryIndex[currentVariant?.mediaId];
             if (index !== undefined) {
                 const fImage = gallery[index] ?? product?.featuredImage;
@@ -155,8 +149,7 @@ const ProductImagesV2 = (productImageProps)=>{
         galleryIndex,
         gallery,
         product?.featuredImage,
-        setProductFeaturedImage,
-        hasVariantAvailable
+        setProductFeaturedImage
     ]);
     const isRenderLightBox = React.useMemo(()=>{
         const isRender = core.getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || core.getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);

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

@@ -20,12 +20,20 @@ const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, on
     const { onListener, ref } = core.useInteraction();
     let delayTimeout;
     const mode = core.useEditorMode();
-    const imageActiveIndex = React.useMemo(()=>{
+    const getImageActiveIndex = React.useCallback(()=>{
         const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index;
+        return index ?? 0;
     }, [
-        productImages,
-        featuredImageGlobal
+        featuredImageGlobal?.id,
+        productImages
+    ]);
+    const [imageActiveIndex, setImageActiveIndex] = React.useState(getImageActiveIndex());
+    React.useEffect(()=>{
+        setImageActiveIndex(getImageActiveIndex());
+    }, [
+        featuredImageGlobal,
+        getImageActiveIndex,
+        productImages
     ]);
     const imageActive = React.useMemo(()=>{
         if (productImages?.length) return featuredImageGlobal || productImages?.[0];

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
         })}
     `;
     };

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, enableLazyLoadImage, ...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
+            enableLazyLoadImage
         })}`;
     };
     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, enableLazyLoadImage, ...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
+            enableLazyLoadImage
         })}
       ${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
+            enableLazyLoadImage
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -298,7 +298,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}`;
     };
     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, enableLazyLoadImage } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -116,7 +116,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
         ${common.shouldSkipLiquidRenderForSingleImage(settings?.position, core.template`
             <div
@@ -132,7 +132,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel_liquid.default({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
             </div>
             ${ProductGalleryGrid_liquid.default({
@@ -142,7 +142,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
           `)}
       </div>

package/dist/cjs/product/components/ProductVariants/index.liquid.js

@@ -97,15 +97,9 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
         <div
         option-name="{{option.name | escape}}"
         class="${core.cls('gp-flex variant-inside', {
-            'gp-flex-col': layout?.desktop === 'vertical',
-            'gp-flex-row': layout?.desktop === 'horizontal',
-            'tablet:gp-flex-row': layout?.tablet === 'horizontal',
-            'tablet:gp-flex-col': layout?.tablet === 'vertical',
-            'mobile:gp-flex-row': layout?.mobile === 'horizontal',
-            'mobile:gp-flex-col': layout?.mobile === 'vertical'
-        }, {
+            ...core.getLayoutClasses(layout),
             ..._function.getAlignClasses(layout, align)
-        })} {% if hiddenPresetOptions contains option.name %} gp-hidden {% endif %}"
+        })}"
 
         >
           {% assign showVariantClass = 'variant-display' %}
@@ -137,15 +131,7 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
           <div
               variant-option-name="{{option.name | escape}}"
               class="${core.cls({
-            'gp-justify-start': align?.desktop === 'left',
-            'gp-justify-center': align?.desktop === 'center',
-            'gp-justify-end': align?.desktop === 'right',
-            'tablet:gp-justify-start': align?.tablet === 'left',
-            'tablet:gp-justify-center': align?.tablet === 'center',
-            'tablet:gp-justify-end': align?.tablet === 'right',
-            'mobile:gp-justify-start': align?.mobile === 'left',
-            'mobile:gp-justify-center': align?.mobile === 'center',
-            'mobile:gp-justify-end': align?.mobile === 'right'
+            ...core.getAlignmentClasses(align)
         }, 'gp-flex gp-w-full gp-flex-wrap gp-items-center variant-option-group')}"
               style="${{
             ...core.makeStyle({
@@ -328,6 +314,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
     `;
     };
     return core.template`
+  {%- assign total_combinations = 1 -%}
+  {%- for option in product.options_with_values -%}
+    {%- assign total_combinations = total_combinations | times: option.values.size -%}
+  {%- endfor -%}
   <gp-product-variants
     data-id="${uid}"
     class="${advanced?.cssClass}"
@@ -343,7 +333,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
       "moneyFormat": {{shop.money_format | json | escape}},
       "productId": {{product.id | json | escape}},
       "productUrl": {{product.url | json | escape}},
-      "displayState":${JSON.stringify(advancedDisplay)}
+      "productHandle": {{product.handle | json | escape}},
+      "displayState": ${JSON.stringify(advancedDisplay)},
+      "totalVariantCombinations": {{total_combinations}},
+      "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
     }
   '>
     {%- assign options = product.options_with_values -%}