@gem-sdk/components 2.1.13-staging.1 → 2.1.13-staging.10

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

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OkendoReviewsLoyalty = require('../configs/OkendoReviewsLoyalty.js');
+
+const config = {
+    tag: OkendoReviewsLoyalty.default.tag,
+    label: OkendoReviewsLoyalty.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/fe55626671bd5da73785c606c2b0752f/icon/CNKRrIWatfoCEAE=.png">',
+    editorConfigs: {
+        placeholder: {
+            flowTag: [
+                'Product'
+            ]
+        },
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: OkendoReviewsLoyalty.default.id,
+            name: {
+                en: OkendoReviewsLoyalty.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/fe55626671bd5da73785c606c2b0752f/icon/CNKRrIWatfoCEAE=.png">
+        <span class="preset-item-title">Okendo: Reviews & Loyalty</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: OkendoReviewsLoyalty.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'productHandle',
+                    type: 'product-handle',
+                    hide: true
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Reviews Widget',
+                            value: 'reviews-widget'
+                        },
+                        {
+                            label: 'Reviews Badge',
+                            value: 'reviews-badge'
+                        },
+                        {
+                            label: 'Media Carousel',
+                            value: 'media-carousel'
+                        },
+                        {
+                            label: 'Media Grid',
+                            value: 'media-grid'
+                        },
+                        {
+                            label: 'Reviews Carousel',
+                            value: 'reviews-carousel'
+                        },
+                        {
+                            label: 'Star Rating',
+                            value: 'star-rating'
+                        },
+                        {
+                            label: 'Questions Widget',
+                            value: 'questions-widget'
+                        }
+                    ],
+                    default: 'reviews-widget'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/okendo-reviews?utm_source=gempages',
+                    appName: OkendoReviewsLoyalty.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/okendo-reviews',
+                    appName: OkendoReviewsLoyalty.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',
+            label: {
+                en: 'Choose Widget'
+            },
+            setting: {
+                id: 'widgetType'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var StellarDeliveryDatePickup = require('../configs/StellarDeliveryDatePickup.js');
+
+const config = {
+    tag: StellarDeliveryDatePickup.default.tag,
+    label: StellarDeliveryDatePickup.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/568eee7424b5f70382db5178dd815f6a/icon/CMTw3rn0lu8CEAE=.jpg">',
+    editorConfigs: {
+        placeholder: {
+            flowPage: 'GP_PRODUCT'
+        },
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: StellarDeliveryDatePickup.default.id,
+            name: {
+                en: StellarDeliveryDatePickup.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/568eee7424b5f70382db5178dd815f6a/icon/CMTw3rn0lu8CEAE=.jpg">
+        <span class="preset-item-title">Stellar Delivery Date & Pickup</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: StellarDeliveryDatePickup.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/order-delivery-date-by-identixweb?utm_source=gempages',
+                    appName: StellarDeliveryDatePickup.default.label
+                },
+                {
+                    id: 'guideId',
+                    type: 'group'
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/order-delivery-date-by-identixweb',
+                    appName: StellarDeliveryDatePickup.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',
+            info: {
+                en: '<span>To make this element work, copy the class <strong>.gp-integration-stellar-delivery__position</strong> and paste it into the Selector input field in the Run Wizard settings. For more details, check the instructions on<a style="text-decoration: none; color: #8AA4FF" href="https://www.identixweb.com/helpdesk/order-delivery-date/general-settings/setup-wizard/" target="_blank"> how to set up the Run Wizard.</a></span>'
+            },
+            setting: {
+                id: 'guideId'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TrustedsiteTrustBadges = require('../configs/TrustedsiteTrustBadges.js');
+
+const config = {
+    tag: TrustedsiteTrustBadges.default.tag,
+    label: TrustedsiteTrustBadges.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/38fdc008d044b95511d73b59ae0cc83f/icon/CIX8yLf0lu8CEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: TrustedsiteTrustBadges.default.id,
+            name: {
+                en: TrustedsiteTrustBadges.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/38fdc008d044b95511d73b59ae0cc83f/icon/CIX8yLf0lu8CEAE=.png">
+        <span class="preset-item-title">TrustedSite ‑ Trust Badges</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: TrustedsiteTrustBadges.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Engagement',
+                            value: 'engagement'
+                        }
+                    ],
+                    default: 'engagement'
+                },
+                {
+                    id: 'trustId',
+                    label: 'Trustmark Type',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Certified Secure',
+                            value: '202'
+                        },
+                        {
+                            label: 'Secure Form',
+                            value: '211'
+                        },
+                        {
+                            label: 'Secure Checkout',
+                            value: '212'
+                        },
+                        {
+                            label: 'Secure Login',
+                            value: '213'
+                        },
+                        {
+                            label: 'Issue-Free Orders',
+                            value: '214'
+                        },
+                        {
+                            label: 'Spam-Free',
+                            value: '216'
+                        },
+                        {
+                            label: 'Banner',
+                            value: '1001'
+                        },
+                        {
+                            label: 'Testimonial',
+                            value: '1002'
+                        }
+                    ],
+                    default: '202'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/mcafee-secure?utm_source=gempages',
+                    appName: TrustedsiteTrustBadges.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://www.trustedsite.com/',
+                    appName: TrustedsiteTrustBadges.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: 'trustId'
+            },
+            label: {
+                en: 'Trustmark Type'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -103,11 +103,26 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
 var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
 var HulkProductOptions = require('./HulkProductOptions.js');
 var TrustshopProductReviews = require('./TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
+    EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
+    OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
+    EssentialAnnouncementBar: EssentialAnnouncementBar.default,
+    EssentialCountdownTimerBar: EssentialCountdownTimerBar.default,
+    StellarDeliveryDatePickup: StellarDeliveryDatePickup.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -209,7 +224,12 @@ var index = {
     RequestQuoteHidePrice: RequestQuoteHidePrice.default,
     BirdChime: BirdChime.default,
     FordeerProductLabels: FordeerProductLabels.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    TrustBadgesBear: TrustBadgesBear.default,
+    TrustedsiteTrustBadges: TrustedsiteTrustBadges.default,
+    GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
+    BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
+    AlsoBoughtCbb: AlsoBoughtCbb.default,
+    HextomFreeShippingBar: HextomFreeShippingBar.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;
@@ -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/ArticleList.liquid.js

@@ -52,8 +52,12 @@ const ArticleList = ({ setting, styles, className, children, advanced, builderPr
                 assign all_articles = all_articles | concat: articleByHandle
               endfor
             else
-              assign all_articles = blogs['${blogHandle}'].articles | limit: limit | sort: "${articleOrderBy.replace('_REVERSE', '').toLowerCase()}" ${articleOrderBy.includes('_REVERSE') ? '| reverse' : ''}
-              assign blogTitle = blogs['${blogHandle}'].title
+              assign current_blog_handle = blogs['${blogHandle}']
+              if gp_enable_custom_dynamic_blog == true
+                assign current_blog_handle = blogs[blog.handle]
+              endif
+              assign all_articles = current_blog_handle.articles | limit: limit | sort: "${articleOrderBy.replace('_REVERSE', '').toLowerCase()}" ${articleOrderBy.includes('_REVERSE') ? '| reverse' : ''}
+              assign blogTitle = current_blog_handle.title
             endif
             
         %} 

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;
@@ -130,6 +130,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 renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -179,7 +180,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
@@ -193,9 +194,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             'clip-path': getClipPath(borderBg?.width, cornerBg)
         }}"
             > 
-            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
+            'gp-transition-transform': hoverEffect,
+            gp_lazybg: enableLazyLoad
         })}"
               style="${{
             ...getStyleBackgroundByDevice(background, {
@@ -204,15 +206,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
             ...makeStyleResponsive('pos', getAttachmentDevice()),
             ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
         }}"
+              ${embed()}
             >
             ${!setting?.preload ? DEVICES.map((device)=>{
             return RenderIf(getEnableBgImageByDevice(device), NextImage({
@@ -220,11 +223,10 @@ 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>  
-            ${embed()} </div>
+            </div></div>
           </div>
           ${RenderIf(overlayEnable, template`<div
               aria-label="Overlay"