@sledge-app/react-instant-search 1.0.68 → 1.0.69

package/dist/sledge-react-instant-search.js

@@ -9,79 +9,6 @@ const API_URL = "https://api.sledge-app.com";
 const INSTANT_SEARCH_ENGINE_URL = "https://instant-search-engine.sledge-app.com";
 const CDN_URL = "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com";
 const SELECTOR_ATTRIBUTE_KEY = "data-component";
-const DATASET_ATTRIBUTE_KEY = {
-  GLOBAL: {
-    ON_AFTER_ADD_WISHLIST: "data-on-after-add-wishlist",
-    ON_AFTER_REMOVE_WISHLIST: "data-on-after-remove-wishlist",
-    ON_AFTER_ADD_TO_CART: "data-on-after-add-to-cart",
-    ON_AFTER_ADD_REVIEW: "data-on-after-add-review",
-    ON_AFTER_RENDER_PRODUCT: "data-on-after-render-product",
-    PRODUCT_ID: "data-product-id",
-    PRODUCT_VARIANT_ID: "data-product-variant-id",
-    PRODUCT_NAME: "data-product-name",
-    PRODUCT_VENDOR: "data-product-vendor",
-    PRODUCT_SKU: "data-product-sku",
-    PRODUCT_VARIANT_NAME: "data-product-variant-name",
-    PRODUCT_LINK: "data-product-link",
-    PRODUCT_IMAGE: "data-product-image",
-    PRODUCT_CURRENCY: "data-product-currency",
-    PRODUCT_PRICE: "data-product-price",
-    USER_ID: "data-user-id",
-    USER_EMAIL: "data-user-email",
-    USER_FULLNAME: "data-user-fullname",
-    COLLECTION_ID: "data-collection-id",
-    COLLECTION_NAME: "data-collection-name",
-    WIDTH_ELEMENT: "data-width-element",
-    ICON_SIZE: "data-icon-size",
-    API_KEY: "data-api-key",
-    INSTANT_SEARCH_API_KEY: "data-instant-search-api-key",
-    RENDER_PRODUCT_CARD: "data-render-product-card",
-    WITH_SKELETON_LOADING: "data-with-skeleton-loading",
-    SECTION_TITLE: "data-section-title",
-    SECTION_DESCRIPTION: "data-section-description",
-    USE_SLIDER: "data-use-slider",
-    FILL_COLOR: "data-fill-color",
-    OUTLINE_COLOR: "data-outline-color",
-    POSITION_WIDGET: "data-position-widget"
-  },
-  WISHLIST: {
-    SHARE_ID: "data-share-id",
-    QUERY_SHARE_ID: "data-query-share-id",
-    RENDER_WISHLIST_WIDGET_ALERT: "data-render-wishlist-widget-alert",
-    USE_PROXY_URL: "data-use-proxy-url",
-    LIMIT_OPTIONS: "data-limit-options"
-  },
-  PRODUCT_REVIEW: {
-    RATING_SIZE: "data-rating-size",
-    RATING_TOTAL: "data-rating-total",
-    RATING_AVERAGE: "data-rating-average",
-    RENDER_REVIEW_PRODUCT_INFO: "data-render-review-product-info",
-    TRUST_BADGE_VARIANT: "data-trust-badge-variant",
-    SHOW_RATING_AVERAGE: "data-show-rating-average"
-  },
-  INSTANT_SEARCH: {
-    ON_AFTER_RENDER_COLLECTION: "data-on-after-render-collection",
-    ON_AFTER_RENDER_PAGE: "data-on-after-render-page",
-    ON_AFTER_RENDER_BLOG: "data-on-after-render-blog",
-    ON_AFTER_RENDER_ARTICLE: "data-on-after-render-article",
-    QUERY_KEYWORD: "data-query-keyword",
-    QUERY_SORT_BY: "data-query-sort-by",
-    QUERY_PAGE: "data-query-page",
-    QUERY_LIMIT: "data-query-limit",
-    URL_SEARCH_RESULT: "data-url-search-result",
-    RENDER_SUGGESTION_KEYWORD_LIST: "data-render-suggestion-keyword-list",
-    RENDER_OTHER_INDEX_LIST: "data-render-other-index-list",
-    RENDER_SEARCH_VIEW_MORE_RESULT: "data-render-search-view-more-result",
-    RENDER_COLLECTION_CARD: "data-render-collection-card",
-    RENDER_PAGE_CARD: "data-render-page-card",
-    RENDER_BLOG_CARD: "data-render-blog-card",
-    RENDER_ARTICLE_CARD: "data-render-article-card"
-  },
-  PRODUCT_RECOMMENDATION: {
-    DISPLAY_LIMIT: "data-display-limit",
-    HIDDEN_PRODUCT_IDS: "data-hidden-product-ids"
-  }
-};
 const LOCAL_STORAGE_KEY = {
   ANONYM_ID: "sledge-anonym-id",
   AUTH_APP: "sledge-auth-app",
@@ -95,7 +22,8 @@ const LOCAL_STORAGE_KEY = {
   ISSUED_AUTH_APP: "sledge-issued-auth-app",
   EXPIRED_AUTH_APP: "sledge-expired-auth-app",
   RECENTLY_VIEWED_APP: "sledge-recently-viewed",
-  LIMIT_PRODUCT: "sledge-limit-product"
+  LIMIT_PRODUCT: "sledge-limit-product",
+  WISHLIST_BADGE_COUNTER: "sledge-wishlist-badge-counter"
 };
 const INTERNAL_SELECTOR_VALUE = {
   ELEMENT_TOAST_NOTIFICATION: "toast-notification",
@@ -123,6 +51,7 @@ const SELECTOR = {
   },
   WISHLIST: {
     ELEMENT_BADGE: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-badge"]`,
+    ELEMENT_BADGE_COUNTER: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-badge-counter"]`,
     ELEMENT_BADGE_MENU_ITEM: `[href="#sledge-wishlist-badge-menu-item"]`,
     ELEMENT_TRIGGER: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-trigger"]`,
     ELEMENT_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-widget"]`,
@@ -721,13 +650,14 @@ const Pagination = (props) => {
   ] });
 };
 const RadioGroup$1 = "";
-const rowRenderer = ({ virtualized, item, id, labelStyle }) => {
-  const { index, key = "", style = {} } = virtualized || {};
+const rowRenderer = ({ virtualized, item, id, labelStyle, useVirtualized }) => {
+  const { index, key = "", style = {}, isScrolling = false, isVisible = false } = virtualized || {};
   const { label, value } = item;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__radio-group-item-flex", style, children: [
+  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$6d08773d2e66f8f2, { className: "sledge__radio-group-item", value, id: `${id}${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$adb584737d712b70, { className: "sledge__radio-group-indicator" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sledge__radio-group-label", htmlFor: `${id}${index}`, style: labelStyle, children: label })
-  ] }, key || index);
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-item-flex", style, children: !useVirtualized ? content : !isVisible && isScrolling ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : content }, key || index);
 };
 const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {}, onValueChange, scrollElement, useVirtualized = false }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -748,15 +678,18 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
           },
           rowCount: items == null ? void 0 : items.length,
           rowHeight: 36,
-          rowRenderer: ({ index, key, style }) => rowRenderer({
+          rowRenderer: ({ index, key, style, isScrolling, isVisible }) => rowRenderer({
             virtualized: {
               index,
               key,
-              style
+              style,
+              isScrolling,
+              isVisible
             },
             item: items[index],
             id,
-            labelStyle
+            labelStyle,
+            useVirtualized
           })
         }
       ) : items.map(
@@ -766,7 +699,8 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
           },
           item,
           id,
-          labelStyle
+          labelStyle,
+          useVirtualized
         })
       )
     }
@@ -1204,41 +1138,48 @@ const addToCartTrigger$2 = async (data) => {
     return;
   });
 };
-const Badge = (props) => {
+const wishlistInfo = async ({ callback }) => {
   var _a, _b;
-  const { useProxyUrl = false, data: propsData, position: positionProp } = props;
-  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
+  let response;
+  let run = false;
+  let valueTotalWishlist;
+  let valueProxyUrl;
+  response = await getWishlistInfo();
+  run = ((_a = response == null ? void 0 : response.status) == null ? void 0 : _a.code) === 200 || false;
+  valueTotalWishlist = !((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.total_data) ? 0 : response.data.total_data;
+  valueProxyUrl = DEFAULT_WISHLIST_URL;
+  if (run)
+    callback({
+      totalWishlist: valueTotalWishlist,
+      proxyUrl: valueProxyUrl,
+      data: response == null ? void 0 : response.data
+    });
+};
+const BadgeCounter = (props) => {
+  var _a;
+  const { data: propsData } = props;
+  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
   const { wishlist: isRenderAppWishlist } = isRenderApp || {};
   const { value: valueRenderWishlistBadge, trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
-  const defaultColorIcon = "currentColor";
-  const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
   const [totalWishlist, setTotalWishlist] = React__default.useState((propsData == null ? void 0 : propsData.total_data) || 0);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [isMaximizeTotalWishlist, setIsMaximizeTotalWishlist] = React__default.useState(false);
-  const [proxyUrl, setProxyUrl] = React__default.useState((propsData == null ? void 0 : propsData.proxy_url) || "");
   const [dataSettings, setDataSettings] = React__default.useState({});
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
-  const { floating_button_type } = (dataSettings == null ? void 0 : dataSettings.launch_point) || {};
-  const { alert_login, alert, login_button } = ((_b = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _b.widget) || {};
-  const defaultPosition = positionProp || floating_button_type;
-  const position = defaultPosition ? defaultPosition : "none";
   const handleGetWishlistInfo = async () => {
-    var _a2, _b2;
-    let response;
-    let run = false;
-    let valueTotalWishlist;
-    let valueProxyUrl;
-    response = await getWishlistInfo();
-    run = ((_a2 = response == null ? void 0 : response.status) == null ? void 0 : _a2.code) === 200 || false;
-    valueTotalWishlist = !((_b2 = response == null ? void 0 : response.data) == null ? void 0 : _b2.total_data) ? 0 : response.data.total_data;
-    valueProxyUrl = DEFAULT_WISHLIST_URL;
-    if (run) {
-      setTotalWishlist(valueTotalWishlist);
-      setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
-      setProxyUrl(valueProxyUrl);
-      setIsFirstLoading(false);
-      setIsLoading(false);
+    if (!propsData || propsData && !Object.keys(propsData).length) {
+      await wishlistInfo({
+        callback: ({ totalWishlist: valueTotalWishlist }) => {
+          setTotalWishlist(valueTotalWishlist);
+          setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
+          setIsFirstLoading(false);
+          setIsLoading(false);
+          localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, valueTotalWishlist);
+        }
+      });
+    } else {
+      localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, totalWishlist);
     }
   };
   const handleSettings = async (LOCAL_STORAGE_WISHLIST_SETTING) => {
@@ -1250,25 +1191,6 @@ const Badge = (props) => {
     setDataSettings(response);
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
   };
-  const handleRequiredLogin = (e) => {
-    if (isRequiredLogin) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    if (isRequiredLogin) {
-      if (typeof window !== "undefined" && window.sledgeConfirmationPopup)
-        window.sledgeConfirmationPopup({
-          title: alert_login || "Login required!",
-          message: alert || "Please login to save your wishlist across devices.",
-          textSubmit: login_button || "Login",
-          buttonSubmitType: "info",
-          onSubmit: () => window.location.href = "/account/login"
-        });
-    } else {
-      if (useProxyUrl)
-        window.location.href = proxyUrl || "/";
-    }
-  };
   React__default.useEffect(() => {
     if (!isRenderAppWishlist)
       return;
@@ -1286,124 +1208,40 @@ const Badge = (props) => {
       triggerRenderWishlistBadge(false);
     handleGetWishlistInfo();
   }, [valueRenderWishlistBadge]);
-  const HeaderMenu = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge", onClick: handleRequiredLogin, onMouseEnter: () => setColorIcon("#F85538"), onMouseLeave: () => setColorIcon(defaultColorIcon), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 20, height: 20, type: "outline", color: colorIcon }),
-      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
-    ] });
-  };
-  const FloatingFull = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating sledge__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-wishlist__badge-floating-text", children: "My Wishlist" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 18, height: 18, type: "fill", color: "#000000" }),
-        !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
-      ] })
-    ] }) });
-  };
-  const FloatingIcon = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating-icon sledge-wishlist__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 27.01, height: 25.73, type: "outline", color: "#000000" }),
-      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
-    ] }) }) });
-  };
-  return isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: position === "none" ? /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderMenu, {}) : String(position).includes("bottom") ? /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingFull, {}) });
+  const defaultTotalWishlist = isJsVersion ? (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || null : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? defaultTotalWishlist : isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 });
 };
-const BadgeInitSelector = () => {
-  const sledgeWishlistSettings = localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || null) : null;
-  let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
+const BadgeCounterInitSelector = () => {
+  let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE_COUNTER));
   let isElementDetected = !element || element && !element.length;
-  if (!sledgeWishlistSettings || isElementDetected)
+  if (isElementDetected)
     return;
-  const { floating_button_type } = (sledgeWishlistSettings == null ? void 0 : sledgeWishlistSettings.launch_point) || {};
-  const isBottomFloatingType = String(floating_button_type).includes("bottom");
-  if (floating_button_type !== "none") {
-    if (isBottomFloatingType) {
-      element.map((item, index) => {
-        if (item && !index) {
-          if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
-            item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
-          let elementContainerWidget = document.createElement("div");
-          elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
-          item.appendChild(elementContainerWidget);
-          const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-          client.createRoot(elementContainerWidget).render(
-            /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SledgeContext.Provider,
-              {
-                value: {
-                  isRenderApp: {
-                    wishlist: true,
-                    productReview: true,
-                    instantSearch: true
-                  },
-                  sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
-                  isJsVersion: true
-                },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), position: floating_button_type })
-              }
-            ) })
-          );
-        }
-      });
-    } else {
-      element.map((item, index) => {
-        if (item && !index) {
-          if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
-            item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
-          let elementContainerWidget = document.createElement("div");
-          elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
-          item.appendChild(elementContainerWidget);
-          const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-          client.createRoot(elementContainerWidget).render(
-            /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SledgeContext.Provider,
-              {
-                value: {
-                  isRenderApp: {
-                    wishlist: true,
-                    productReview: true,
-                    instantSearch: true
-                  },
-                  sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
-                  isJsVersion: true
-                },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), position: floating_button_type })
-              }
-            ) })
-          );
-        }
-      });
-    }
-  } else {
-    element.map((item) => {
-      if (item) {
-        const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-        if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
-          item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
-        let elementContainerWidget = document.createElement("div");
-        elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
-        item.appendChild(elementContainerWidget);
-        client.createRoot(elementContainerWidget).render(
-          /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SledgeContext.Provider,
-            {
-              value: {
-                isRenderApp: {
-                  wishlist: true,
-                  productReview: true,
-                  instantSearch: true
-                },
-                sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
-                isJsVersion: true
+  element.map((item) => {
+    if (item) {
+      if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
+        item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
+      let elementContainerWidget = document.createElement("div");
+      elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
+      item.appendChild(elementContainerWidget);
+      client.createRoot(elementContainerWidget).render(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SledgeContext.Provider,
+          {
+            value: {
+              isRenderApp: {
+                wishlist: true,
+                productReview: true,
+                instantSearch: true
               },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true") })
-            }
-          ) })
-        );
-      }
-    });
-  }
+              sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+              isJsVersion: true
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(BadgeCounter, {})
+          }
+        ) })
+      );
+    }
+  });
 };
 const Trigger = (props) => {
   var _a, _b, _c, _d, _e;
@@ -1470,7 +1308,7 @@ const Trigger = (props) => {
       setIsWishlist(!isWishlist);
       if (triggerRenderWishlistBadge)
         triggerRenderWishlistBadge(true);
-      BadgeInitSelector();
+      BadgeCounterInitSelector();
       if (typeof window !== "undefined") {
         if (window.sledgeWishlistWidgetListUpdate)
           window.sledgeWishlistWidgetListUpdate();
@@ -1685,7 +1523,7 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
       if (typeof window !== "undefined") {
         if (triggerRenderWishlistBadge)
           triggerRenderWishlistBadge(true);
-        BadgeInitSelector();
+        BadgeCounterInitSelector();
         if (window.sledgeInfoPopup)
           window.sledgeInfoPopup({
             title: title_added_all_to_wishlist,
@@ -4288,8 +4126,14 @@ const FacetComponent = (props) => {
     valueFilterPriceChange,
     setValueFilterPriceChange,
     separatedFilterItem,
-    setSeparatedFilterItem
+    setSeparatedFilterItem,
+    settings
   } = props;
+  let aliases = {};
+  if (filter.value === "hierarchicalProductType")
+    aliases = settings.productTypeAliases || {};
+  if (filter.value === "hierarchicalCollections")
+    aliases = settings.collectionAliases || {};
   const { button_load_more } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const { colors: colorSwatches, languages: languageSettings } = displaySettings || {};
   const {
@@ -4332,7 +4176,7 @@ const FacetComponent = (props) => {
       if (!(isHideFacetWhenZeroValue && !counter))
         facetValues.push({
           ...item,
-          labelName,
+          labelName: aliases[labelName] || labelName,
           counter
         });
     }
@@ -4380,7 +4224,7 @@ const FacetComponent = (props) => {
   const handleFacetCheckbox = (props2) => {
     var _a2, _b2;
     const { facetValues, virtualized } = props2;
-    const { index, key, style } = virtualized || {};
+    const { index, key, style, isScrolling, isVisible } = virtualized || {};
     return (_b2 = handleFacetValues(virtualized && ((_a2 = Object.keys(virtualized)) == null ? void 0 : _a2.length) ? [facetValues[index]] : facetValues)) == null ? void 0 : _b2.map((facetValue) => {
       var _a3;
       const { labelName, value: itemValue, counter, children, level } = facetValue;
@@ -4393,39 +4237,40 @@ const FacetComponent = (props) => {
       const blockComponentChildren = handleFacetCheckbox({
         facetValues: currentItems2
       });
+      const content = !isVisible && isScrolling ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox,
+        {
+          id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
+          name: value,
+          value: itemValue,
+          label: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}` }),
+            isHasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              motion.div,
+              {
+                initial: false,
+                animate: isChecked ? "open" : "closed",
+                variants: ROTATE_FILTER_ARROW_ANIMATION,
+                className: "sledge-instant-search__result-filter-checkbox-item-level-arrow",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" })
+              }
+            ) : null
+          ] }),
+          onClick: (e) => handleFilterChange({
+            parentId: value,
+            value: e.currentTarget.value
+          }),
+          checked: isChecked,
+          labelStyle: filter_option_style
+        }
+      );
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
             className: `sledge-instant-search__result-filter-checkbox-item ${isFacetHierarchical ? `sledge-instant-search__result-filter-checkbox-item-level sledge-instant-search__result-filter-checkbox-item-level-${level}` : ""}`,
             style,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Checkbox,
-              {
-                id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
-                name: value,
-                value: itemValue,
-                label: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}` }),
-                  isHasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    motion.div,
-                    {
-                      initial: false,
-                      animate: isChecked ? "open" : "closed",
-                      variants: ROTATE_FILTER_ARROW_ANIMATION,
-                      className: "sledge-instant-search__result-filter-checkbox-item-level-arrow",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" })
-                    }
-                  ) : null
-                ] }),
-                onClick: (e) => handleFilterChange({
-                  parentId: value,
-                  value: e.currentTarget.value
-                }),
-                checked: isChecked,
-                labelStyle: filter_option_style
-              }
-            )
+            children: content
           },
           key
         ),
@@ -5647,11 +5492,16 @@ const ResultProduct = (props) => {
     else
       valueText = (_a2 = String(valueText)) == null ? void 0 : _a2.replaceAll(hierarchical_collections_separator, " > ");
     valueText = (_b2 = String(valueText)) == null ? void 0 : _b2.replaceAll("_", " ");
+    let aliases = {};
+    if (name === "hierarchicalCollections")
+      aliases = settings.collectionAliases || {};
+    if (name === "hierarchicalProductType")
+      aliases = settings.productTypeAliases || {};
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", children: [
         label,
         ": ",
-        valueText
+        aliases[value] || valueText
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "span",
@@ -5708,6 +5558,7 @@ const ResultProduct = (props) => {
         isFirstLoading,
         displaySettings,
         generalDataSettings,
+        settings,
         searchFacetDistribution,
         clickedFacets,
         handleFilterChange,