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

package/dist/esm/collection/setting/CollectionDescription.js

@@ -35,6 +35,59 @@ const config = {
                         }
                     ]
                 },
+                {
+                    id: 'hasLineClamp',
+                    label: 'Enable View More',
+                    type: 'toggle',
+                    devices: {
+                        desktop: {
+                            default: true
+                        }
+                    }
+                },
+                {
+                    id: 'lineClamp',
+                    label: 'Maximum Row(s) To Show',
+                    type: 'input:number',
+                    min: 1,
+                    hide: true,
+                    devices: {
+                        desktop: {
+                            default: 12
+                        }
+                    }
+                },
+                {
+                    id: 'viewMoreText',
+                    label: 'View More Text',
+                    type: 'input',
+                    default: 'Show more',
+                    hide: true
+                },
+                {
+                    id: 'showMoreColor',
+                    type: 'colorpicker',
+                    default: 'text-1'
+                },
+                {
+                    id: 'viewLessText',
+                    label: 'View Less Text',
+                    type: 'input',
+                    default: 'Show less',
+                    hide: true
+                },
+                {
+                    id: 'enableViewMoreIcon',
+                    label: 'Enable Icon',
+                    type: 'toggle',
+                    default: true,
+                    hide: true
+                },
+                {
+                    id: 'translate',
+                    type: 'input',
+                    default: 'viewLessText,viewMoreText'
+                },
                 {
                     id: 'textAlign',
                     label: 'Align',
@@ -70,11 +123,86 @@ const config = {
                             default: 'center'
                         }
                     }
+                },
+                {
+                    id: 'color',
+                    type: 'colorpicker',
+                    default: 'text-1'
                 }
             ]
         }
     ],
     ui: [
+        {
+            type: 'group',
+            label: {
+                en: ''
+            },
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more'
+                    },
+                    options: {
+                        label: 'large'
+                    },
+                    setting: {
+                        id: 'hasLineClamp'
+                    }
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Text color'
+                    },
+                    setting: {
+                        id: 'showMoreColor'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Max lines'
+                    },
+                    setting: {
+                        id: 'lineClamp'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more label'
+                    },
+                    setting: {
+                        id: 'viewMoreText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show less label'
+                    },
+                    setting: {
+                        id: 'viewLessText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Icon'
+                    },
+                    setting: {
+                        id: 'enableViewMoreIcon'
+                    },
+                    condition: 'hasLineClamp == true'
+                }
+            ]
+        },
         {
             label: {
                 en: 'Text'

package/dist/esm/form/components/textarea/TextArea.liquid.js

@@ -2,10 +2,10 @@ import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyC
 import { getDynamicSourceLocales } from '../../../helpers.js';
 
 const FormTextarea = ({ setting, builderProps, className, builderAttrs, advanced, pageContext })=>{
-    const { text, name, placeholder, required, width, fullWidth, typography } = setting ?? {};
+    const { text, name, placeholder, required, width, fullWidth, typography, translate } = setting ?? {};
     const textAreaWidth = makeStyleResponsive('w', makeWidth(width, fullWidth));
     const defaultName = name === '' || name === undefined ? 'contact[note]' : name;
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding, translate } = advanced ?? {};
+    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
     const spacingSetting = advanced?.['spacing-setting'];
     const inputStyle = composeAdvanceStyle({
         border,

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

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

@@ -91,7 +91,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                 style: {
                     ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
                     borderRadius: 'inherit',
-                    overflow: 'hidden',
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [

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

@@ -3,7 +3,7 @@ import AdaptiveImage from './AdaptiveImage.liquid.js';
 import NextImage from './NextImage.liquid.js';
 import { getInsertLinkData } from '../../helpers.js';
 
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
     const { imageLink, isNotLazyload } = setting ?? {};
     const { shape } = styles ?? {};
     const { Wrap: WrapLink, urlData } = getInsertLinkData('div', imageLink);
@@ -30,7 +30,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
+    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
     style="${{
         ...style,
         ...makeStyleResponsive('ta', styles?.align)
@@ -46,7 +46,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         style="${{
         ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
         'border-radius': 'inherit',
-        overflow: 'hidden',
         ...makeStyleResponsive('jc', styles?.align)
     }}"
       >
@@ -73,7 +72,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyloadImage
+        enableLazyLoadImage,
+        pageContext
     }) : NextImage({
         ...setting?.image,
         priority: setting?.priority,
@@ -102,7 +102,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyloadImage
+        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, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -93,12 +93,13 @@ 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,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyloadImage ? imagePlaceholder : srcImage,
+        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,

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

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

package/dist/esm/index.js

@@ -205,8 +205,18 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.js';
 export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.js';
 export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.js';
 export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.js';
 export { default as thirdPartyInstantSetting } from './third-party-instant/setting/index.js';
 export { default as InstantJudgemeReviews } from './third-party-instant/components/InstantJudgemeReviews.js';
 export { default as InstantLooxReviews } from './third-party-instant/components/InstantLooxReviews.js';

package/dist/esm/index.liquid.js

@@ -159,9 +159,19 @@ export { default as SeoantTrustBadgesIcon } from './third-party/components/Seoan
 export { default as TrustreviewsProductReviews } from './third-party/components/TrustreviewsProductReviews.liquid.js';
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.liquid.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.liquid.js';
+export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.liquid.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.liquid.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.liquid.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.liquid.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.liquid.js';
 export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.liquid.js';
 export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.liquid.js';
-export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.liquid.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.liquid.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.liquid.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.liquid.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.liquid.js';
 export { default as ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
 export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';
 export { default as Sticky } from './sticky/components/Sticky.liquid.js';

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

@@ -42,7 +42,6 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
     };
     return template`
    <div
-     
       style="${containerStyle()}"
       class="rfm-marquee-container"
     >
@@ -51,35 +50,17 @@ const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover =
         style="${marqueeStyle()}"
       >
         <div class="rfm-initial-child-container">
-
-        ${template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-        ${template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
-        </div>
-         <div class="rfm-child-placeholder">
-
-        ${template`
-                 <div style="${childStyle()}" class="${`rfm-child`}">
-                 ${children}
-              </div>
-                `}
+          ${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/esm/product/components/Product.liquid.js

@@ -5,6 +5,7 @@ import { getStaticLocale, getSettingPreloadData } from '../../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 })=>{
@@ -20,8 +21,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 template /* liquid */ `
-    
     {%- assign gpBkProduct = product -%}
     ${productStatus !== DYNAMIC_PRODUCT_STATUS ? `
         {%- liquid
@@ -96,7 +97,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/esm/product/components/ProductBadge/index.liquid.js

@@ -6,11 +6,12 @@ import { getAlignShape, getSize, getShapeBorderStyle, getFilterDropShadow, conve
 import { getShapePosition } from './utils/getShapePosition.js';
 import { composeShapeStyleByPosition, composeTextStyleByPosition } from './utils/getRotateShape.js';
 import { getStyleAdvanced } from './utils/getStyleAdvanced.js';
-import { getSettingPreloadData } from '../../../helpers.js';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../../helpers.js';
 import { renderBadgeInFirstTime } from './utils/renderBadgeLiquid.js';
 import { getWhiteSpaceStyle } from './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 = getShape(setting?.shape);
     const shapeAlignClass = getAlignShape(styles?.align, isInsideProductImage);
@@ -30,17 +31,25 @@ const ProductBadge = ({ styles, builderProps, isInsideProductImage, builderAttrs
     const paddingShape = getShapeWrapperPadding(shape?.ratio);
     const composeGlobalSize = makeGlobalSize(badgeSize);
     const isDropOutsideProductImage = setting?.positionWithImage === 'outside';
-    const isDiscountContent = checkDiscountContentProductBadge(setting?.displayContent);
+    const isDiscountContent = checkDiscountContentProductBadge(displayContent);
+    const displayContentVal = getDynamicSourceLocales({
+        val: displayContent?.trim(),
+        uid: builderProps?.uid,
+        settingId: 'displayContent',
+        isLiquid: true,
+        pageContext,
+        translate
+    });
     return template`
     {% if product %}
-      ${generateBadgeContent(setting?.displayContent)}
+      ${generateBadgeContent(displayContent, pageContext.isPreviewing)}
       ${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='${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/esm/product/components/ProductBadge/utils/generateLiquidContent.js

@@ -1,6 +1,6 @@
-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/esm/product/components/ProductDescription.liquid.js

@@ -1,5 +1,5 @@
 import { composeTypographyClassName, composeTypographyStyle, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
-import { getSettingPreloadData } from '../../helpers.js';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
 
 const devices = [
     'desktop',
@@ -16,8 +16,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 = composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
     const defaultStyle = {
@@ -41,13 +41,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 = getDynamicSourceLocales({
+        val: viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate
+    });
+    const viewLessTextDisplay = getDynamicSourceLocales({
+        val: viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate
+    });
     return 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,
@@ -81,7 +97,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/esm/product/components/ProductImagesV2/jsx/ProductImages.js

@@ -38,7 +38,6 @@ const ProductImagesV2 = (productImageProps)=>{
     const extraClass = advanced?.cssClass;
     // State
     const [openLightBox, setOpenLightBox] = useState(false);
-    const [hasVariantAvailable, setHasVariantAvailable] = useState(true);
     const getFirstVideo = (product)=>{
         return product?.medias?.edges.find((item)=>[
                 'VIDEO',
@@ -53,24 +52,19 @@ const ProductImagesV2 = (productImageProps)=>{
     };
     const priorityFeatureImage = 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);
@@ -137,7 +131,7 @@ const ProductImagesV2 = (productImageProps)=>{
         }
     };
     useEffect(()=>{
-        if (currentVariant && hasVariantAvailable) {
+        if (currentVariant) {
             const index = galleryIndex[currentVariant?.mediaId];
             if (index !== undefined) {
                 const fImage = gallery[index] ?? product?.featuredImage;
@@ -151,8 +145,7 @@ const ProductImagesV2 = (productImageProps)=>{
         galleryIndex,
         gallery,
         product?.featuredImage,
-        setProductFeaturedImage,
-        hasVariantAvailable
+        setProductFeaturedImage
     ]);
     const isRenderLightBox = useMemo(()=>{
         const isRender = getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);

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

@@ -6,7 +6,7 @@ import { getAspectRatio } from '../../common/common.js';
 import { checkRenderFeaturedCarousel, getDotSettingByLayout } from '../../common/productFeaturedImage.js';
 import { handleMouseMove, handleMouseOut } from '../../common/hoverAction.js';
 import ProductFeaturedImageOnly from './ProductFeaturedImageOnly.js';
-import { memo, useMemo, useCallback, useEffect, createRef } from 'react';
+import { memo, useCallback, useState, useEffect, useMemo, createRef } from 'react';
 import { handleSetSrcForFeatureProductImage } from '../../../../../image/helpers/getSrcSet.js';
 
 const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, onClickArrow, onHandleLoaded, onHandleUpdateActiveIndex, builderPropUID, builderPropsClass, children, parentUid, ...setting })=>{
@@ -16,12 +16,20 @@ const ProductFeaturedImageCarousel = ({ productImages, imgRef, onHandleClick, on
     const { onListener, ref } = useInteraction();
     let delayTimeout;
     const mode = useEditorMode();
-    const imageActiveIndex = useMemo(()=>{
+    const getImageActiveIndex = useCallback(()=>{
         const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index;
+        return index ?? 0;
     }, [
-        productImages,
-        featuredImageGlobal
+        featuredImageGlobal?.id,
+        productImages
+    ]);
+    const [imageActiveIndex, setImageActiveIndex] = useState(getImageActiveIndex());
+    useEffect(()=>{
+        setImageActiveIndex(getImageActiveIndex());
+    }, [
+        featuredImageGlobal,
+        getImageActiveIndex,
+        productImages
     ]);
     const imageActive = useMemo(()=>{
         if (productImages?.length) return featuredImageGlobal || productImages?.[0];