@gem-sdk/components 2.1.27-staging.2 → 2.1.27-staging.21

package/dist/cjs/third-party/setting/EcoboostifyShoppableReelUgc.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EcoboostifyShoppableReelUgc = require('../configs/EcoboostifyShoppableReelUgc.js');
+
+const config = {
+    tag: EcoboostifyShoppableReelUgc.default.tag,
+    label: EcoboostifyShoppableReelUgc.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: EcoboostifyShoppableReelUgc.default.id,
+            name: {
+                en: EcoboostifyShoppableReelUgc.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">
+        <span class="preset-item-title">EcoBoostify Shoppable Reel UGC</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: EcoboostifyShoppableReelUgc.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Reel Playlist',
+                            value: 'reel-playlist'
+                        }
+                    ],
+                    default: 'reel-playlist'
+                },
+                {
+                    id: 'playlistId',
+                    label: 'Playlist ID',
+                    type: 'input'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/ecoboostify?utm_source=gempages',
+                    appName: EcoboostifyShoppableReelUgc.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/ecoboostify',
+                    appName: EcoboostifyShoppableReelUgc.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'playlistId'
+            },
+            label: {
+                en: 'Playlist ID'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

package/dist/cjs/third-party/setting/RechargeSubscriptions.js

@@ -54,8 +54,11 @@ const config = {
                     options: [
                         {
                             label: 'Subscription Widget',
-                            value: 'subscription-widget',
-                            maxOption: 1
+                            value: 'subscription-widget'
+                        },
+                        {
+                            label: 'Subscription Widget 2.0',
+                            value: 'subscription-widget-v2'
                         }
                     ],
                     default: 'subscription-widget'

package/dist/cjs/third-party/setting/Releasit.js

@@ -11,6 +11,11 @@ const config = {
     editorConfigs: {
         component: {
             isThirdParty: true
+        },
+        placeholder: {
+            flowTag: [
+                'Product'
+            ]
         }
     },
     presets: [
@@ -39,6 +44,16 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'productHandle',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -55,6 +70,38 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/releasit-cod-order-form',
                     appName: Releasit.default.label
                 },
+                {
+                    id: 'version',
+                    label: 'Choose version',
+                    type: 'select',
+                    default: 'v1',
+                    options: [
+                        {
+                            label: 'V1',
+                            value: 'v1'
+                        },
+                        {
+                            label: 'V2',
+                            value: 'v2'
+                        }
+                    ]
+                },
+                {
+                    id: 'widgetTypeV2',
+                    label: 'Choose widget',
+                    type: 'select',
+                    default: 'button-app-block',
+                    options: [
+                        {
+                            label: 'Releasit button',
+                            value: 'button-app-block'
+                        },
+                        {
+                            label: 'Releasit embedded form',
+                            value: 'form-app-block'
+                        }
+                    ]
+                },
                 {
                     id: 'align',
                     label: 'Alignment',
@@ -95,12 +142,22 @@ const config = {
         {
             type: 'control',
             label: {
-                en: 'Choose widget'
+                en: 'Choose version'
             },
             setting: {
-                id: 'widgetType'
+                id: 'version'
             }
         },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose widget'
+            },
+            setting: {
+                id: 'widgetTypeV2'
+            },
+            condition: 'version === "v2"'
+        },
         {
             type: 'control',
             setting: {

package/dist/cjs/third-party/setting/index.js

@@ -115,6 +115,7 @@ var GloColorSwatchvariantImage = require('./GloColorSwatchvariantImage.js');
 var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
 var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
+var EcoboostifyShoppableReelUgc = require('./EcoboostifyShoppableReelUgc.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
@@ -229,7 +230,8 @@ var index = {
     GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
     BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
     AlsoBoughtCbb: AlsoBoughtCbb.default,
-    HextomFreeShippingBar: HextomFreeShippingBar.default
+    HextomFreeShippingBar: HextomFreeShippingBar.default,
+    EcoboostifyShoppableReelUgc: EcoboostifyShoppableReelUgc.default
 };
 
 exports.default = index;

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

@@ -10,7 +10,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
     const { articleSetting, numberOfArticle } = setting ?? {};
     const { articleIds, articlePickType } = articleSetting ?? {};
     const articlesQuery = {
-        first: articleIds?.length ?? 50,
+        first: articleIds?.length || 50,
         where: {
             baseIDIn: [
                 ...articleSetting?.articleIds ?? []

package/dist/esm/builder.js

@@ -119,6 +119,7 @@ import GloColorSwatchvariantImage from './third-party/components/GloColorSwatchv
 import BfSizeChartSizeGuide from './third-party/components/BfSizeChartSizeGuide.js';
 import AlsoBoughtCbb from './third-party/components/AlsoBoughtCbb.js';
 import HextomFreeShippingBar from './third-party/components/HextomFreeShippingBar.js';
+import EcoboostifyShoppableReelUgc from './third-party/components/EcoboostifyShoppableReelUgc.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -499,7 +500,8 @@ var builder = {
     GloColorSwatchvariantImage,
     BfSizeChartSizeGuide,
     AlsoBoughtCbb,
-    HextomFreeShippingBar
+    HextomFreeShippingBar,
+    EcoboostifyShoppableReelUgc
 };
 
 export { builder as default };

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

@@ -1,7 +1,7 @@
 import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
 import { getInsertLinkData, getDynamicSourceLocales } from '../../helpers.js';
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = splitStyle([
@@ -66,7 +66,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = getDynamicSourceLocales({
+    const labelValDisplay = isForceValue ? label : getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',
@@ -157,7 +157,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       >${iconSvg}</span>`)}
       <span
         data-gp-text
-        class="${`gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
+        class="${`gp-content-product-button gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
         ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
         style="${{
         ...nodePrice && appendTypoStyle,

package/dist/esm/collection/components/CollectionPaginator.liquid.js

@@ -3,7 +3,7 @@ import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js
 
 const CollectionPaginator = ({ setting, builderProps, pageContext })=>{
     const { layout, previousText, nextText, typographyPaginator, normalColor, activeColor, align, typo, translate } = setting ?? {};
-    const numberOfProductOfProductList = pageContext?.numberOfProductOfProductList || 0;
+    const numberOfProductOfProductList = setting?.numberOfProducts || pageContext?.numberOfProductOfProductList || 0;
     const limit = numberOfProductOfProductList > 0 ? numberOfProductOfProductList : 4;
     const appendTypoClass = composeTypographyClassName(typo, typographyPaginator);
     const appendTypoStyle = composeTypographyStyle(typo, typographyPaginator);

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

@@ -154,6 +154,11 @@ const config = {
                             tooltip: 'Align right'
                         }
                     ]
+                },
+                {
+                    id: 'numberOfProducts',
+                    type: 'input:number',
+                    default: 0
                 }
             ]
         }

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, isReplaceInventoryQuantity })=>{
+const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, 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;
@@ -47,9 +47,6 @@ const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, i
     if (isReplaceInventoryQuantity) {
         locale += ` | replace: '<$quantity$>', inventory_quantity | replace: '&lt;$quantity$&gt;', inventory_quantity`;
     }
-    if (isCapitalize) {
-        locale = `${locale} | downcase`;
-    }
     if (isLiquid) return locale;
     return `{{ ${locale} }}`;
 };
@@ -124,5 +121,28 @@ const replaceLinkData = (text, isTranslate)=>{
     }
     return text;
 };
+const getAllHrefFromString = (htmlString)=>{
+    if (!htmlString) return [];
+    const regex = /href="([^"]*)"/g;
+    const hrefs = [];
+    let match;
+    while((match = regex.exec(htmlString)) !== null){
+        match[1] && hrefs.push(match[1]);
+    }
+    return hrefs;
+};
+const replaceAllHrefFromString = (htmlString, hrefs)=>{
+    if (!htmlString) return '';
+    const regex = /href="([^"]*)"/g;
+    let match;
+    let i = 0;
+    while((match = regex.exec(htmlString)) !== null){
+        if (match[1]) {
+            htmlString = htmlString.replace(match[1], hrefs[i] ?? '');
+            i++;
+        }
+    }
+    return htmlString;
+};
 
-export { getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceLinkData, youtubeShortsRegex };
+export { getAllHrefFromString, getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceAllHrefFromString, replaceLinkData, youtubeShortsRegex };

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

@@ -3,6 +3,7 @@ import Head from 'next/head';
 import Img from './Img.js';
 
 const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
+    const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Head, {
@@ -32,17 +33,17 @@ const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...re
                 children: [
                     !!srcSet?.mobile?.src && /*#__PURE__*/ jsx("source", {
                         media: "(max-width: 767px)",
-                        srcSet: srcSet.mobile.src
+                        srcSet: srcSet.mobile.src || fallBackImage
                     }),
                     !!srcSet?.tablet?.src && /*#__PURE__*/ jsx("source", {
                         media: "(max-width: 1024px)",
-                        srcSet: srcSet?.tablet?.src
+                        srcSet: srcSet?.tablet?.src || fallBackImage
                     }),
                     /*#__PURE__*/ jsx(Img, {
                         ...rest,
                         loading: priority ? 'eager' : 'lazy',
                         image: {
-                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop']
+                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop'] || fallBackImage
                         }
                     })
                 ]

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

@@ -4,13 +4,11 @@ import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
 import { composeAspectRatio } from './helpers.js';
-import NoDataImage from './NoDataImage.js';
-import { useMemo } from 'react';
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    const currentDevice = useCurrentDevice();
+    useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -55,18 +53,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
-    const isShowNoDataState = useMemo(()=>{
-        if (setting?.disableNoDataState) return false;
-        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        return !setting?.srcSet?.desktop?.src;
-    }, [
-        currentDevice,
-        setting?.disableNoDataState,
-        setting?.srcSet?.desktop?.src,
-        setting?.srcSet?.mobile?.src,
-        setting?.srcSet?.tablet?.src
-    ]);
     return /*#__PURE__*/ jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -94,12 +80,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsx(NoDataImage, {
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight
-                        }
-                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
                         className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),

package/dist/esm/image/helpers/getSrcSet.js

@@ -28,7 +28,8 @@ const getSrcSetLiquid = (liquid, storage)=>{
     return `{{ '${liquid}' | asset_img_url: '768x' }} 768w, {{ '${liquid}' | asset_img_url: '1024x' }} 1024w, {{ '${liquid}' | asset_img_url: 'master' }} 1440w`;
 };
 const getSrcSetLink = (link)=>{
-    return `${link} 768w,${link} 1024w,${link} 1440w`;
+    return link; // Since image src didn't change in size so this line of code is pointless
+// return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
     let src = image?.backupFilePath;

package/dist/esm/index.js

@@ -217,6 +217,7 @@ export { default as GloColorSwatchvariantImage } from './third-party/components/
 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 EcoboostifyShoppableReelUgc } from './third-party/components/EcoboostifyShoppableReelUgc.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';
@@ -307,7 +308,7 @@ export { index_liquid as liquidComponents };
 export { default as builderComponent } from './builder.js';
 import 'react/jsx-runtime';
 export { ELEMENT_Z_INDEX } from './common/const.js';
-export { getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceLinkData, youtubeShortsRegex } from './helpers.js';
+export { getAllHrefFromString, getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceAllHrefFromString, replaceLinkData, youtubeShortsRegex } from './helpers.js';
 export { default as postPurchaseTextSetting } from './post-purchase/text/setting/index.js';
 export { default as PostPurchaseText } from './post-purchase/text/Text.js';
 export { convertSizeToWidth, transformHighlighTag, transformNumberTag } from './stock-counter/helpers.js';

package/dist/esm/index.liquid.js

@@ -172,6 +172,7 @@ export { default as GloColorSwatchvariantImage } from './third-party/components/
 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 EcoboostifyShoppableReelUgc } from './third-party/components/EcoboostifyShoppableReelUgc.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/intersection-observer/useInView.js

@@ -44,11 +44,13 @@ function useInView({ triggerOnce, skip, addRootMargin = 0, initialInView, onChan
         // Add listeners for visibility change
         window.addEventListener('scroll', handleVisibilityChange);
         window.addEventListener('resize', handleVisibilityChange);
+        window.addEventListener('trigger-change-in-view', handleVisibilityChange);
         // Initial check
         handleVisibilityChange();
         unobserve.current = ()=>{
             window.removeEventListener('scroll', handleVisibilityChange);
             window.removeEventListener('resize', handleVisibilityChange);
+            window.removeEventListener('trigger-change-in-view', handleVisibilityChange);
             if (frameId.current) cancelAnimationFrame(frameId.current);
             frameId.current = undefined;
         };

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

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

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

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

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

@@ -184,6 +184,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
+    const labelUnavailableTranslate = getDynamicSourceLocales({
+        val: 'Unavailable',
+        uid: builderProps?.uid,
+        settingId: 'unavailableLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'unavailableLabel' : undefined
+    });
+    const labelOutOfStockTranslate = getDynamicSourceLocales({
+        val: setting?.outOfStockLabel,
+        uid: builderProps?.uid,
+        settingId: 'outOfStockLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'outOfStockLabel' : undefined
+    });
     return template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -191,6 +207,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
+      label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -268,8 +286,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: setting?.outOfStockLabel,
-            translate: setting?.translate ? 'outOfStockLabel' : undefined,
+            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -288,7 +305,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice()
+        nodePrice: composeNodePrice(),
+        isForceValue: true
     })}
     </gp-product-button>
     ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/esm/product/components/ProductList.liquid.js

@@ -233,6 +233,7 @@ const ProductList = ({ setting, builderProps, styles, className, children, advan
             endif
             assign arrayRelatedExclude = relatedExclude | split: ","
             assign idSelectedList = ''
+            assign relatedListProduct = null
             for collection in collections
             assign collectionId = collection.id
             assign isInCollection = false
@@ -247,20 +248,15 @@ const ProductList = ({ setting, builderProps, styles, className, children, advan
                      break
                     else
                       assign idSelectedList = idSelectedList | append: "," | append: product.id
+                      assign productSelected = product | sort
+                      assign relatedListProduct = relatedListProduct | concat: productSelected
                     endif
                   endfor
                   endif
                 endunless
               endfor
             endfor
-            for item in allProductsPaginated
-            assign handle = item.handle
-            assign productF = item | sort
-            if idSelectedList contains item.id
-              assign products = products | concat: productF
-            endif
-          endfor
-            assign products = products | uniq
+            assign products = relatedListProduct | uniq
           when 'vendor'
             assign vendorAssignProduct = assignProduct.vendor
             assign productFilter = allProductsPaginated | where: 'vendor', vendorAssignProduct