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

package/dist/cjs/article/components/ArticleList.liquid.js

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

package/dist/cjs/builder.js

@@ -111,8 +111,6 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
-var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
-var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -481,9 +479,7 @@ var builder = {
     ArticleReadMore: ArticleReadMore.default,
     Marquee: Marquee.default,
     MarqueeItem: MarqueeItem.default,
-    ProductBadge: index$8.default,
-    HextomCountdownTimerBar: HextomCountdownTimerBar.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    ProductBadge: index$8.default
 };
 
 exports.default = builder;

package/dist/cjs/common/const.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const ELEMENT_Z_INDEX = {
-    STICKY: 1000,
+    STICKY: 100000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

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

@@ -8,13 +8,10 @@ var Link = require('../../link/components/Link.js');
 var AdaptiveImage = require('./AdaptiveImage.js');
 var NextImage = require('./NextImage.js');
 var helpers = require('./helpers.js');
-var NoDataImage = require('./NoDataImage.js');
-var React = require('react');
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    const currentDevice = core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -59,18 +56,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
-    const isShowNoDataState = React.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__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -99,15 +84,10 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...core.makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsxRuntime.jsx(NoDataImage.default, {
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight
-                        }
-                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: core.cls(className, 'gp-inline-block gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
+                        className: core.cls(className, 'gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

package/dist/cjs/index.js

@@ -207,8 +207,6 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
-var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
-var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
 var index$x = require('./third-party-instant/setting/index.js');
 var InstantJudgemeReviews = require('./third-party-instant/components/InstantJudgemeReviews.js');
 var InstantLooxReviews = require('./third-party-instant/components/InstantLooxReviews.js');
@@ -511,8 +509,6 @@ exports.TrustreviewsProductReviews = TrustreviewsProductReviews.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews.default;
 exports.HulkProductOptions = HulkProductOptions.default;
 exports.TrustshopProductReviews = TrustshopProductReviews.default;
-exports.HextomCountdownTimerBar = HextomCountdownTimerBar.default;
-exports.TrustBadgesBear = TrustBadgesBear.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -161,8 +161,6 @@ var SeoantTrustBadgesIcon_liquid = require('./third-party/components/SeoantTrust
 var TrustreviewsProductReviews_liquid = require('./third-party/components/TrustreviewsProductReviews.liquid.js');
 var MyappgurusProductReviews_liquid = require('./third-party/components/MyappgurusProductReviews.liquid.js');
 var HulkProductOptions_liquid = require('./third-party/components/HulkProductOptions.liquid.js');
-var HextomCountdownTimerBar_liquid = require('./third-party/components/HextomCountdownTimerBar.liquid.js');
-var TrustBadgesBear_liquid = require('./third-party/components/TrustBadgesBear.liquid.js');
 var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
 var ImageComparison_liquid = require('./image-comparison/components/ImageComparison.liquid.js');
 var ThirdPartySlot_liquid = require('./third-party-slot/components/ThirdPartySlot.liquid.js');
@@ -347,8 +345,6 @@ exports.SeoantTrustBadgesIcon = SeoantTrustBadgesIcon_liquid.default;
 exports.TrustreviewsProductReviews = TrustreviewsProductReviews_liquid.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews_liquid.default;
 exports.HulkProductOptions = HulkProductOptions_liquid.default;
-exports.HextomCountdownTimerBar = HextomCountdownTimerBar_liquid.default;
-exports.TrustBadgesBear = TrustBadgesBear_liquid.default;
 exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;

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

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

package/dist/cjs/third-party/components/BoostAISearchDiscovery.liquid.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
+var thirdParty = require('../helpers/thirdParty.js');
 
 const BoostAISearchDiscovery = ({ setting, advanced })=>{
-    return core.template`
+    const { appBlockId, widgetType, align } = setting ?? {};
+    return widgetType ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block [&_*]:gp-max-w-none`) : core.template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/cjs/third-party/next.js

@@ -410,14 +410,6 @@ const Selleasy = dynamic(()=>Promise.resolve().then(function () { return require
     ssr: false,
     loading: Loading.default
 });
-const HextomCountdownTimerBar = dynamic(()=>Promise.resolve().then(function () { return require('./components/HextomCountdownTimerBar.js'); }), {
-    ssr: false,
-    loading: Loading.default
-});
-const TrustBadgesBear = dynamic(()=>Promise.resolve().then(function () { return require('./components/TrustBadgesBear.js'); }), {
-    ssr: false,
-    loading: Loading.default
-});
 var thirdParty = {
     TrustshopProductReviews,
     HulkProductOptions,
@@ -519,9 +511,7 @@ var thirdParty = {
     Releasit,
     RequestQuoteHidePrice,
     BirdChime,
-    FordeerProductLabels,
-    HextomCountdownTimerBar,
-    TrustBadgesBear
+    FordeerProductLabels
 };
 
 exports.default = thirdParty;

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

@@ -11,9 +11,6 @@ const config = {
     editorConfigs: {
         component: {
             isThirdParty: true
-        },
-        placeholder: {
-            flowPage: 'GP_COLLECTION'
         }
     },
     presets: [
@@ -42,6 +39,11 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -50,6 +52,33 @@ const config = {
                     href: 'https://apps.shopify.com/product-filter-search?utm_source=gempages',
                     appName: BoostAISearchDiscovery.default.label
                 },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    default: 'filter-product-list-ssr',
+                    options: [
+                        {
+                            label: 'Product & Filter',
+                            value: 'filter-product-list-ssr',
+                            hideOnPage: [
+                                'ARTICLE',
+                                'BLOG',
+                                'COLLECTION',
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_PRODUCT',
+                                'GP_INDEX',
+                                'GP_STATIC',
+                                'STATIC'
+                            ]
+                        },
+                        {
+                            label: 'Recommendation',
+                            value: 'recommendation-ssr'
+                        }
+                    ]
+                },
                 {
                     id: 'openApp',
                     type: 'open-link',
@@ -58,6 +87,11 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/product-filter-search',
                     appName: BoostAISearchDiscovery.default.label
                 },
+                {
+                    id: 'widgetID',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'align',
                     label: 'Alignment',
@@ -95,6 +129,25 @@ const config = {
                 id: 'install'
             }
         },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose widget'
+            },
+            setting: {
+                id: 'widgetType'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Widget ID'
+            },
+            setting: {
+                id: 'widgetID'
+            },
+            condition: 'widgetType === "recommendation-ssr"'
+        },
         {
             type: 'control',
             setting: {

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

@@ -103,11 +103,8 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
 var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
 var HulkProductOptions = require('./HulkProductOptions.js');
 var TrustshopProductReviews = require('./TrustshopProductReviews.js');
-var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
-var TrustBadgesBear = require('./TrustBadgesBear.js');
 
 var index = {
-    HextomCountdownTimerBar: HextomCountdownTimerBar.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -208,8 +205,7 @@ var index = {
     KingProductOptions: KingProductOptions.default,
     RequestQuoteHidePrice: RequestQuoteHidePrice.default,
     BirdChime: BirdChime.default,
-    FordeerProductLabels: FordeerProductLabels.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    FordeerProductLabels: FordeerProductLabels.default
 };
 
 exports.default = index;

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

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

package/dist/esm/builder.js

@@ -107,8 +107,6 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
 import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
 import HulkProductOptions from './third-party/components/HulkProductOptions.js';
 import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
-import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
-import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -477,9 +475,7 @@ var builder = {
     ArticleReadMore,
     Marquee,
     MarqueeItem,
-    ProductBadge,
-    HextomCountdownTimerBar,
-    TrustBadgesBear
+    ProductBadge
 };
 
 export { builder as default };

package/dist/esm/common/const.js

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

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

@@ -1,16 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { 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';
 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();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -55,18 +52,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,
@@ -95,15 +80,10 @@ 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)),
+                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

package/dist/esm/index.js

@@ -205,8 +205,6 @@ 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 HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.js';
-export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.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,8 +159,6 @@ 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 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 ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
 export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';

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

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

package/dist/esm/third-party/components/BoostAISearchDiscovery.liquid.js

@@ -1,8 +1,10 @@
 import { template, makeStyleResponsive, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { getSettingPreloadData } from '../../helpers.js';
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const BoostAISearchDiscovery = ({ setting, advanced })=>{
-    return template`
+    const { appBlockId, widgetType, align } = setting ?? {};
+    return widgetType ? getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block [&_*]:gp-max-w-none`) : template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/esm/third-party/next.js

@@ -406,14 +406,6 @@ const Selleasy = dynamic(()=>import('./components/Selleasy.js'), {
     ssr: false,
     loading: Loading
 });
-const HextomCountdownTimerBar = dynamic(()=>import('./components/HextomCountdownTimerBar.js'), {
-    ssr: false,
-    loading: Loading
-});
-const TrustBadgesBear = dynamic(()=>import('./components/TrustBadgesBear.js'), {
-    ssr: false,
-    loading: Loading
-});
 var thirdParty = {
     TrustshopProductReviews,
     HulkProductOptions,
@@ -515,9 +507,7 @@ var thirdParty = {
     Releasit,
     RequestQuoteHidePrice,
     BirdChime,
-    FordeerProductLabels,
-    HextomCountdownTimerBar,
-    TrustBadgesBear
+    FordeerProductLabels
 };
 
 export { thirdParty as default };

package/dist/esm/third-party/setting/BoostAISearchDiscovery.js

@@ -7,9 +7,6 @@ const config = {
     editorConfigs: {
         component: {
             isThirdParty: true
-        },
-        placeholder: {
-            flowPage: 'GP_COLLECTION'
         }
     },
     presets: [
@@ -38,6 +35,11 @@ const config = {
         {
             id: 'setting',
             controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -46,6 +48,33 @@ const config = {
                     href: 'https://apps.shopify.com/product-filter-search?utm_source=gempages',
                     appName: BoostAISearchDiscovery.label
                 },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    default: 'filter-product-list-ssr',
+                    options: [
+                        {
+                            label: 'Product & Filter',
+                            value: 'filter-product-list-ssr',
+                            hideOnPage: [
+                                'ARTICLE',
+                                'BLOG',
+                                'COLLECTION',
+                                'GP_ARTICLE',
+                                'GP_BLOG',
+                                'GP_PRODUCT',
+                                'GP_INDEX',
+                                'GP_STATIC',
+                                'STATIC'
+                            ]
+                        },
+                        {
+                            label: 'Recommendation',
+                            value: 'recommendation-ssr'
+                        }
+                    ]
+                },
                 {
                     id: 'openApp',
                     type: 'open-link',
@@ -54,6 +83,11 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/product-filter-search',
                     appName: BoostAISearchDiscovery.label
                 },
+                {
+                    id: 'widgetID',
+                    type: 'input',
+                    default: ''
+                },
                 {
                     id: 'align',
                     label: 'Alignment',
@@ -91,6 +125,25 @@ const config = {
                 id: 'install'
             }
         },
+        {
+            type: 'control',
+            label: {
+                en: 'Choose widget'
+            },
+            setting: {
+                id: 'widgetType'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Widget ID'
+            },
+            setting: {
+                id: 'widgetID'
+            },
+            condition: 'widgetType === "recommendation-ssr"'
+        },
         {
             type: 'control',
             setting: {