@gem-sdk/components 2.1.26 → 2.1.27-staging.1

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 -%}

package/dist/cjs/product/components/ProductVariants/variants/Base.liquid.js

@@ -156,6 +156,7 @@ const BaseVariant = ({ optionTransform, optionTypography, optionBgColor, optionT
     option-data="{{option.name | escape}}"
     option-value="{{value | escape}}"
     option-position="{{option.position}}"
+    data-gp-option-available="{{value.available}}"
     option-type="${type || 'rectangle_list'}"
     data-disabled="{%- if option_disabled == true -%} disabled  {%- endif -%}"
     data-hidden='true'

package/dist/cjs/product/components/ProductVariants/variants/Dropdown.liquid.js

@@ -18,6 +18,15 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = core.composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = core.composeTypographyStyle(optionTypo, optionTypography);
+    const composeSelectOptionAttrs = `
+    option-data="{{option.name | escape}}"
+    option-value="{{value | escape}}" 
+    data-gp-option-value-id="{{value.id}}" 
+    data-gp-option-available="{{value.available}}"
+    value="{{value | escape}}" 
+    class="option-value-wrapper" 
+    key="{{value | escape}}"
+  `;
     return core.template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -73,37 +82,42 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
                         option-position="{{option.position}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                       </option>
                     {% else %}
-                        <option disabled option-data="{{option.name | escape}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        <option 
+                        disabled 
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option ${!hasPreSelected ? '' : 'selected'}   
+                      option-position="{{option.position}}" 
+                      ${composeSelectOptionAttrs}>
                       {{value}}
                   </option>
                   {% else %}
-                  <option  option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option
+                      ${composeSelectOptionAttrs}
+                      option-position="{{option.position}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option ${!hasPreSelected ? '' : 'selected'} 
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {% else %}
-              <option  option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {%- endif -%}`}

package/dist/cjs/product/components/ProductVariants/variants/DropdownGroup.liquid.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
-var helpers = require('../../../../helpers.js');
+var index = require('./combine/index.js');
 
-const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
+const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
     const swatchWidthResponsive = core.makeStyleResponsive('w', core.makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return core.makeStyle({
@@ -27,7 +27,6 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
     option-data="{{option.name}}"
     option-type="{{optionType}}"
     class="${core.cls('gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none dropdown-option-item', core.handleConvertClassColor(optionBorder), appendTypoClass, core.getGlobalColorStateClass('text', optionTextColor), core.getGlobalColorStateClass('bg', optionBgColor), 'gp-outline-none', 'gp-shadow-none')}"
- 
     style="${{
         ...core.getStyleShadowState(optionShadow, 'box-shadow', optionHasShadow),
         ...getCustomCSSActiveState(),
@@ -49,40 +48,8 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
         'background-position': 'right 16px center'
     }}"
   >
-  ${!hasPreSelected ? `<option value="blank" selected>${blankText || helpers.getStaticLocale('ProductVariants', 'please_select')}</option>` : ''}
-  ${`{%- for variantItem in variants -%}
-      ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
-              {%- if variantItem.id == variant.id -%}
-                    <option origin-price="{{variantItem.price}}" disabled ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                    </option>
-              {% else %}
-                    <option origin-price="{{variantItem.price}}" disabled value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                    </option>
-              {%- endif -%}
-            {%- else -%} 
-            {%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                </option>
-            {% else %}
-                <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-            {%- endif -%}
-            {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-              {% else %}
-                  <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                  {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                  </option>
-              {%- endif -%}`}
-       
-      {%- endfor -%}
-    `}
+  ${index.renderBlankOption(hasPreSelected, blankText)}
+  ${index.renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
   </select>
     `;
 };

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var helpers = require('../../../../../helpers.js');
+
+const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
+    const hasPrice = enablePrice ? '- {{variantItem.price | money}}' : '';
+    const optionAttrs = 'origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"';
+    return `${`{%- for variantItem in variants -%}
+    ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
+            {%- if variantItem.id == variant.id -%}
+                  <option origin-price="{{variantItem.price}}" disabled ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                  {{variantItem.title}} ${hasPrice} : ''} 
+                  </option>
+            {% else %}
+                  <option ${optionAttrs} disabled>
+                  {{variantItem.title}} ${hasPrice}
+                  </option>
+            {%- endif -%}
+          {%- else -%} 
+          {%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice} 
+              </option>
+          {% else %}
+              <option ${optionAttrs}>
+              {{variantItem.title}} ${hasPrice}
+              </option>
+          {%- endif -%}
+          {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice}
+              </option>
+            {% else %}
+                <option ${optionAttrs}>
+                {{variantItem.title}} ${hasPrice}
+                </option>
+            {%- endif -%}`}
+     
+    {%- endfor -%}
+  `}`;
+};
+const renderBlankOption = (hasPreSelected, blankText)=>{
+    return !hasPreSelected ? `<option value="blank" selected>${blankText || helpers.getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+};
+
+exports.renderBlankOption = renderBlankOption;
+exports.renderCombineVariants = renderCombineVariants;

package/dist/cjs/stock-counter/components/StockCounter.liquid.js

@@ -41,7 +41,8 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps, pageCont
         uid: builderProps?.uid,
         settingId: 'template',
         pageContext,
-        translate
+        translate,
+        isReplaceInventoryQuantity: true
     });
     const outOfStockMessageDisplay = helpers$1.getDynamicSourceLocales({
         val: outOfStockMessage,
@@ -104,10 +105,6 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps, pageCont
     data-id="${builderProps?.uid}"
     data-visible="{{ should_display }}"
     data-policy='{{ variant_policy_list }}'
-    data-template="${templateStringDisplay}"
-    data-out-of-stock-message="${outOfStockMessageDisplay}"
-    data-continue-selling="${continueSellingDisplay}"
-    data-unlimited-quantity-message="${unlimitedQuantityMessageDisplay}"
     gp-setting='${JSON.stringify({
         displayByDefault,
         displayProgressBar,
@@ -147,19 +144,25 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps, pageCont
           >
           ${icon}</div>
             `)}
+            <div class="gp-hidden gp-text-white gp-py-1 gp-px-2 gp-mr-1 gp-inline-block gp-my-[1px] gp-text-g-${mainColor} gp-bg-g-${mainColor}" >
+              <div id="template">${templateStringDisplay}</div>
+              <div id="out-of-stock-message">${outOfStockMessageDisplay}</div>
+              <div id="continue-selling">${continueSellingDisplay}</div>
+              <div id="unlimited-quantity-message">${unlimitedQuantityMessageDisplay}</div>
+            </div>
             <p
               data-slot-type="message"
               class="${appendTypoClass} gp-stock-counter-mark"
               style="${appendTypoStyle}"
             >
               {% if inventory_management == null and inventory_quantity <= 0 %}
-                ${helpers.transformHighlighTag(unlimitedQuantityMessageDisplay ?? helpers$1.getStaticLocale('StockCounter', 'let_buy_now'), mainColor)}
+                ${unlimitedQuantityMessageDisplay}
               {% elsif available == false %}
-                ${helpers.transformHighlighTag(outOfStockMessageDisplay || '', mainColor)}
+                ${outOfStockMessageDisplay}
               {% elsif available and inventory_policy == '${_const.CONTINUE_SELLING_WHEN_OUT_OF_STOCK.toLowerCase()}' and inventory_quantity <= 0 %}
-                ${helpers.transformHighlighTag(continueSellingDisplay || '', mainColor)}
+                ${continueSellingDisplay}
               {% else %}
-                ${helpers.transformHighlighTag(helpers.transformNumberTag(templateStringDisplay || '', mainColor, `{{ inventory_quantity }}`), mainColor)}
+                ${templateStringDisplay}
               {% endif %}
             </p>
           </div>

package/dist/cjs/stock-counter/helpers.js

@@ -28,12 +28,15 @@ const transformNumberTag = (template, stringColor, quantityLeft)=>{
     let quantityTag = '';
     // Is hex color
     if (stringColor.includes('#')) {
-        quantityTag = `<span style='--c: ${stringColor}'>$quantity$</span>`;
+        quantityTag = `<span style='--c: ${stringColor}'><$quantity$></span>`;
     } else {
         // Is global style color
-        quantityTag = `<span class='gp-text-g-${stringColor}'>$quantity$</span>`;
+        quantityTag = `<span class='gp-text-g-${stringColor}'><$quantity$></span>`;
     }
-    return template.replaceAll(_const.DEFAULT_QUANTITY_TEMPLATE, quantityTag.replace('$quantity$', quantityLeft.toString()));
+    if (quantityLeft) {
+        quantityTag = quantityTag.replace('<$quantity$>', quantityLeft.toString());
+    }
+    return template.replaceAll(_const.DEFAULT_QUANTITY_TEMPLATE, quantityTag);
 };
 const convertSizeToWidth = (typographyVar)=>{
     const widthObject = {};

package/dist/cjs/tab/hooks/useTabInteraction.js

@@ -4,19 +4,18 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
+    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = core.useInteraction();
     const mode = core.useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback } = params || {};
-        if (data === undefined && isRollback === undefined) return;
+        const { data, isRollback, element, key } = params || {};
+        if (data === undefined && isRollback) return;
+        const newData = Number(data) + 1;
         if (isRollback) {
-            setActiveKey(previousTab);
-            setPreviousTab(activeTab);
+            setActiveKey(newData);
             return;
         }
-        setPreviousTab(activeTab);
-        setActiveKey(data + 1);
+        saveToElementInteractionData(element, key, String(activeKey));
+        setActiveKey(newData);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -37,11 +36,16 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
             dispatchEventTabActive(activeTab - 1);
         });
         const selector = `[data-id="${componentUid}"]`;
+        const element = findElementIncludingSelf(document, selector);
         const removeListener = onListener({
             event: 'gp:change-open-tab',
             selector
         }, (params)=>{
-            changeOpenTabInteraction(params);
+            changeOpenTabInteraction({
+                ...params,
+                element,
+                key: params?.uniqueStorageKey
+            });
         });
         return ()=>{
             removeListener?.();

package/dist/cjs/text/components/Text.js

@@ -9,7 +9,6 @@ var React = require('react');
 const Text = /*#__PURE__*/ React.forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
     const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
     const composeGlobalSize = core.makeGlobalSize(setting?.globalSize);
-    console.log('Text: ', text);
     const mode = core.useEditorMode();
     const getPlaceHolderWhenContentNone = ()=>{
         let classList = '';

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

@@ -51,14 +51,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {

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 { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -23,7 +24,9 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            enableLazyLoadImage,
+            pageContext
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -72,14 +75,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
+           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-cover"
+            class="gp-w-full gp-h-full gp-object-contain"
             alt="Video Thumbnail"
           ></img>
           <button

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, enableLazyLoadImage, 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 || !enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -52,7 +52,9 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        enableLazyLoadImage,
+        pageContext
     })}
         <button
           type="button"

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

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

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, 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;
@@ -39,9 +39,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;
     };
@@ -130,7 +127,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 && enableLazyLoadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -180,7 +177,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -223,7 +220,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/esm/carousel/components/Carousel.liquid.js

@@ -9,7 +9,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 = mappingNavigationCarousel(props.setting);
     const styleHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(styles?.sizeSetting));
     const styleWidth = makeStyleWithDefault('w', getWidthByShapeGlobalSize(styles?.sizeSetting, true), {
@@ -108,7 +108,8 @@ const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId
         setting,
         styles,
         moveToIdx,
-        isHiddenArrowWhenDisabled
+        isHiddenArrowWhenDisabled,
+        ftShapeProductImage
     }).replaceAll("'", ''')}' style="${{
         ...makeStyleResponsive('jc', styles?.align),
         ...rootStyles

package/dist/esm/common/const.js

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

package/dist/esm/helpers.js

@@ -32,7 +32,7 @@ const isHexTransparent = (hex)=>{
     return Boolean(a);
 };
 const youtubeShortsRegex = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([^"&?/\s]{11})$/i;
-const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, isCapitalize, defaultVal = '', translate, isReplaceLocationOrigin })=>{
+const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, isCapitalize, defaultVal = '', translate, isReplaceLocationOrigin, isReplaceInventoryQuantity })=>{
     const hasLiquidInValue = new RegExp(/\{\{.*?\}\}|\{%.*?%\}/).test(val?.toString() ?? '');
     const translateLimit = pageContext?.isTranslateWithLocale ? 1000 : 5000;
     if (!translate || !val?.toString().trim() || val.toString().length > translateLimit || hasLiquidInValue || pageContext?.isPreviewing) return val ?? defaultVal;
@@ -44,6 +44,9 @@ const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, i
     if (isReplaceLocationOrigin) {
         locale += ` | replace: '$locationOrigin', locationOrigin`;
     }
+    if (isReplaceInventoryQuantity) {
+        locale += ` | replace: '<$quantity$>', inventory_quantity`;
+    }
     if (isCapitalize) {
         locale = `${locale} | downcase`;
     }

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

@@ -2,7 +2,7 @@ import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
 import { getImageSrc } from '../helpers/getSrcSet.js';
 import { createBlurDataURL } from './helpers.js';
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...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 = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getImageSrc(srcSet?.tablet, 'tablet') ?? getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -27,16 +27,17 @@ 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,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
-        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}"