@gem-sdk/components 2.1.43 → 2.2.0-staging.28

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

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EcomsendBackInStockAlert = require('../configs/EcomsendBackInStockAlert.js');
+
+const config = {
+    tag: EcomsendBackInStockAlert.default.tag,
+    label: EcomsendBackInStockAlert.default.label,
+    icon: '<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/d4d2bcc6f71dda4f30b09bd429b37065/icon/CLeo2LeKhIsDEAE=.png">',
+    editorConfigs: {
+        placeholder: {
+            flowTag: [
+                'Product'
+            ]
+        },
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: EcomsendBackInStockAlert.default.id,
+            name: {
+                en: EcomsendBackInStockAlert.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/d4d2bcc6f71dda4f30b09bd429b37065/icon/CLeo2LeKhIsDEAE=.png">
+        <span class="preset-item-title">EcomSend Back in Stock Alert</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: EcomsendBackInStockAlert.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Product Restore Email',
+                            value: 'product-restore-email'
+                        }
+                    ],
+                    default: 'product-restore-email'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/email-1?utm_source=gempages',
+                    appName: EcomsendBackInStockAlert.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: '',
+                    appName: EcomsendBackInStockAlert.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: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -116,6 +116,8 @@ var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
 var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
 var EcoboostifyShoppableReelUgc = require('./EcoboostifyShoppableReelUgc.js');
+var EcomsendBackInStockAlert = require('./EcomsendBackInStockAlert.js');
+var AppstleBundlesDiscounts = require('./AppstleBundlesDiscounts.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
@@ -231,7 +233,9 @@ var index = {
     BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
     AlsoBoughtCbb: AlsoBoughtCbb.default,
     HextomFreeShippingBar: HextomFreeShippingBar.default,
-    EcoboostifyShoppableReelUgc: EcoboostifyShoppableReelUgc.default
+    EcoboostifyShoppableReelUgc: EcoboostifyShoppableReelUgc.default,
+    EcomsendBackInStockAlert: EcomsendBackInStockAlert.default,
+    AppstleBundlesDiscounts: AppstleBundlesDiscounts.default
 };
 
 exports.default = index;

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/builder.js

@@ -120,6 +120,8 @@ import BfSizeChartSizeGuide from './third-party/components/BfSizeChartSizeGuide.
 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 EcomsendBackInStockAlert from './third-party/components/EcomsendBackInStockAlert.js';
+import AppstleBundlesDiscounts from './third-party/components/AppstleBundlesDiscounts.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -254,6 +256,8 @@ import PostPurchaseCountdownTimer from './post-purchase/countdown-timer/componen
 import Text$1 from './post-purchase/text/Text.js';
 
 var builder = {
+    AppstleBundlesDiscounts,
+    EcomsendBackInStockAlert,
     EstimatedDeliveryDatePlus,
     OkendoReviewsLoyalty,
     EssentialAnnouncementBar,

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/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/carousel/components/plugins/AutoPlayPlugin.js

@@ -2,41 +2,15 @@ const AutoPlayPlugin = (slider)=>{
     let autoplay = slider.options.autoplay ?? {};
     let timeout;
     let mouseOver = false;
-    let inViewport = false;
-    let observer = null;
-    // Thêm sự kiện cho dot nếu có
-    const $dots = slider?.container?.closest('[data-component-type="component"]')?.querySelector('.carousel-dots');
-    // Callback của IntersectionObserver
-    function handleIntersection(entries) {
-        entries.forEach((entry)=>{
-            // Với threshold 0, chỉ cần một phần bất kỳ hiển thị sẽ đánh dấu isIntersecting
-            inViewport = entry.isIntersecting;
-            if (inViewport) {
-                nextTimeout();
-            } else {
-                clearNextTimeout();
-            }
-        });
-    }
-    function initIntersectionObserver() {
-        // Nếu đã có observer hoặc không có container thì không khởi tạo lại
-        if (observer || !slider.container) return;
-        observer = new IntersectionObserver(handleIntersection, {
-            root: null,
-            threshold: 0
-        });
-        observer.observe(slider.container);
-    }
     function clearNextTimeout() {
         clearTimeout(timeout);
     }
     function nextTimeout() {
-        clearNextTimeout();
+        clearTimeout(timeout);
         timeout = setTimeout(()=>{
-            // Nếu đang hover, autoplay bị tắt hoặc slider không trong viewport thì không chuyển slide
-            if (mouseOver || !autoplay.enable || !inViewport) return;
+            if (mouseOver || !autoplay.enable) return;
             slider.next();
-        }, autoplay.delay ?? 2000);
+        }, autoplay?.delay ?? 2000);
     }
     function onMouseOver() {
         mouseOver = true;
@@ -47,15 +21,11 @@ const AutoPlayPlugin = (slider)=>{
         nextTimeout();
     }
     slider.on('created', ()=>{
-        $dots?.addEventListener('mouseover', onMouseOver);
-        $dots?.addEventListener('mouseout', onMouseOut);
-        // Nếu tùy chọn pauseOnHover bật thì thêm sự kiện hover cho container slider
-        if (autoplay.pauseOnHover && slider.container) {
+        if (autoplay.pauseOnHover) {
             slider.container.addEventListener('mouseover', onMouseOver);
             slider.container.addEventListener('mouseout', onMouseOut);
         }
-        if (autoplay.enable) {
-            initIntersectionObserver();
+        if (slider.options.autoplay?.enable) {
             nextTimeout();
         }
     });
@@ -63,40 +33,29 @@ const AutoPlayPlugin = (slider)=>{
     slider.on('animationEnded', nextTimeout);
     slider.on('updated', (newOptions)=>{
         autoplay = newOptions.options?.autoplay ?? {};
-        if (autoplay.enable) {
-            initIntersectionObserver();
-            nextTimeout();
-        }
+        nextTimeout();
+    });
+    slider.on('destroyed', ()=>{
+        slider.container.removeEventListener('mouseover', onMouseOver);
+        slider.container.removeEventListener('mouseout', onMouseOut);
     });
     slider.on('optionsChanged', (newOptions)=>{
-        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover && slider.container) {
+        const $dots = slider?.container?.closest('[data-component-type="component"]')?.querySelector('.carousel-dots');
+        $dots?.addEventListener('mouseover', onMouseOver);
+        $dots?.addEventListener('mouseout', onMouseOut);
+        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover) {
             if (newOptions.options.autoplay?.pauseOnHover) {
                 slider.container.addEventListener('mouseover', onMouseOver);
                 slider.container.addEventListener('mouseout', onMouseOut);
-            } else {
+            }
+            if (!newOptions.options.autoplay?.pauseOnHover) {
                 slider.container.removeEventListener('mouseover', onMouseOver);
                 slider.container.removeEventListener('mouseout', onMouseOut);
                 mouseOver = false;
             }
         }
+        nextTimeout();
         autoplay = newOptions.options.autoplay ?? {};
-        if (autoplay.enable) {
-            initIntersectionObserver();
-            nextTimeout();
-        }
-    });
-    slider.on('destroyed', ()=>{
-        if (slider.container) {
-            slider.container.removeEventListener('mouseover', onMouseOver);
-            slider.container.removeEventListener('mouseout', onMouseOut);
-        }
-        $dots?.removeEventListener('mouseover', onMouseOver);
-        $dots?.removeEventListener('mouseout', onMouseOut);
-        clearNextTimeout();
-        if (observer) {
-            observer.disconnect();
-            observer = null;
-        }
     });
 };
 

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

@@ -56,6 +56,10 @@ const getStaticLocale = (tag, key)=>{
 const getSettingPreloadData = (disabledValue, enabledValue)=>{
     return `{% if section.settings.section_preload == "false" %}${disabledValue} ${enabledValue ? `{% else %}${enabledValue}` : ''}{% endif %}`;
 };
+const getHttpUrl = (link)=>{
+    if (!link) return '';
+    return link.match(/^https?:\/\//i) ? link : `http://${link}`;
+};
 const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
     const URL_START_WITH = [
         '#',
@@ -68,7 +72,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
     const isHyperlink = setting?.link !== undefined && setting.link !== '';
     let urlHref = setting?.link ?? '';
     const isHomePageHref = urlHref === '/';
-    const regexHttp = new RegExp(/^https?:\/\//i);
+    const regexHttp = new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i);
     const regexPageType = new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart)\/?/i);
     const isShopifyDomain = isHyperlink && !regexHttp.test(urlHref) && regexPageType.test(urlHref);
     const isDomain = isHyperlink && regexHttp.test(urlHref);
@@ -79,6 +83,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
             urlHref = "{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}" + urlHref;
         }
     }
+    if (isDomain) urlHref = getHttpUrl(urlHref);
     const isLink = ()=>{
         if (URL_START_WITH.find((el)=>urlHref.startsWith(el))) return true;
         if (URL_INCLUDES.find((el)=>urlHref.includes(el))) return true;

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
@@ -8,6 +8,7 @@ import { composeAspectRatio } from './helpers.js';
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
+    useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -82,7 +83,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
+                        className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,