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

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

@@ -9,6 +9,80 @@ 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",
+    TRIGGER_BADGE: "data-trigger-badge"
+  },
+  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",
@@ -651,13 +725,13 @@ const Pagination = (props) => {
 };
 const RadioGroup$1 = "";
 const rowRenderer = ({ virtualized, item, id, labelStyle, useVirtualized }) => {
-  const { index, key = "", style = {}, isScrolling = false, isVisible = false } = virtualized || {};
+  const { index, key = "", style = {} } = virtualized || {};
   const { label, value } = item;
   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 })
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-item-flex", style, children: !useVirtualized ? content : !isVisible && isScrolling ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : content }, key || index);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-item-flex", style, children: 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(
@@ -678,13 +752,11 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
           },
           rowCount: items == null ? void 0 : items.length,
           rowHeight: 36,
-          rowRenderer: ({ index, key, style, isScrolling, isVisible }) => rowRenderer({
+          rowRenderer: ({ index, key, style }) => rowRenderer({
             virtualized: {
               index,
               key,
-              style,
-              isScrolling,
-              isVisible
+              style
             },
             item: items[index],
             id,
@@ -1211,6 +1283,154 @@ const BadgeCounter = (props) => {
   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 Badge = (props) => {
+  var _a, _b;
+  const { useProxyUrl = false, data: propsData, position: positionProp } = 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 [isFirstLoading, setIsFirstLoading] = 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 [data, setData] = React__default.useState({});
+  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 () => {
+    await wishlistInfo({
+      callback: ({ totalWishlist: valueTotalWishlist, proxyUrl: valueProxyUrl, data: valueData }) => {
+        setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
+        setProxyUrl(valueProxyUrl);
+        setIsFirstLoading(false);
+        setData(valueData);
+        localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, valueTotalWishlist);
+      }
+    });
+  };
+  const handleSettings = async (LOCAL_STORAGE_WISHLIST_SETTING) => {
+    let response;
+    response = JSON.parse(LOCAL_STORAGE_WISHLIST_SETTING);
+    if (!response)
+      return;
+    const { is_required_login } = response || {};
+    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;
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || null);
+  }, [isRenderAppWishlist]);
+  React__default.useEffect(() => {
+    if (!(dataSettings == null ? void 0 : dataSettings.launch_point))
+      return;
+    handleGetWishlistInfo();
+  }, [dataSettings]);
+  React__default.useEffect(() => {
+    if (!valueRenderWishlistBadge)
+      return;
+    if (triggerRenderWishlistBadge)
+      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" : ""}`,
+          "data-component": "wishlist-badge-counter",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": "container-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            BadgeCounter,
+            {
+              data: isJsVersion ? {
+                ...data,
+                ...{
+                  total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                }
+              } : data
+            }
+          ) })
+        }
+      )
+    ] });
+  };
+  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" : ""}`,
+            "data-component": "wishlist-badge-counter",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": "container-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              BadgeCounter,
+              {
+                data: isJsVersion ? {
+                  ...data,
+                  ...{
+                    total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                  }
+                } : data
+              }
+            ) })
+          }
+        )
+      ] })
+    ] }) });
+  };
+  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" : ""}`,
+          "data-component": "wishlist-badge-counter",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": "container-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            BadgeCounter,
+            {
+              data: isJsVersion ? {
+                ...data,
+                ...{
+                  total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                }
+              } : data
+            }
+          ) })
+        }
+      )
+    ] }) }) });
+  };
+  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 BadgeCounterInitSelector = () => {
   let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE_COUNTER));
   let isElementDetected = !element || element && !element.length;
@@ -1243,11 +1463,107 @@ const BadgeCounterInitSelector = () => {
     }
   });
 };
+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));
+  let isElementDetected = !element || element && !element.length;
+  if (!sledgeWishlistSettings || 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
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true") })
+            }
+          ) })
+        );
+      }
+    });
+  }
+};
 const Trigger = (props) => {
   var _a, _b, _c, _d, _e;
-  const { params, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist, wishlistChecked } = props;
+  const { params, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist, wishlistChecked, triggerBadge = "default" } = props;
   const { productId, productVariantId } = params || {};
-  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
+  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
   const { wishlist: isRenderAppWishlist } = isRenderApp || {};
   const { trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
   const defaultColorIcon = "#767676";
@@ -1308,7 +1624,13 @@ const Trigger = (props) => {
       setIsWishlist(!isWishlist);
       if (triggerRenderWishlistBadge)
         triggerRenderWishlistBadge(true);
-      BadgeCounterInitSelector();
+      if (isJsVersion) {
+        if (triggerBadge === "rerender") {
+          BadgeInitSelector();
+        } else {
+          BadgeCounterInitSelector();
+        }
+      }
       if (typeof window !== "undefined") {
         if (window.sledgeWishlistWidgetListUpdate)
           window.sledgeWishlistWidgetListUpdate();
@@ -1455,9 +1777,9 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !shareId && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "132px", height: "46px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "danger", onClick: handleClick, style: display_button_clear_all_style, children: buttonText ? buttonText : button_clear_all || "Clear Wishlist" }) }) }) }) });
 };
-const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading }) => {
+const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading, triggerBadge }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
+  const { triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
   const { trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
   const { is_required_login } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.global) || {};
   const {
@@ -1523,7 +1845,13 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
       if (typeof window !== "undefined") {
         if (triggerRenderWishlistBadge)
           triggerRenderWishlistBadge(true);
-        BadgeCounterInitSelector();
+        if (isJsVersion) {
+          if (triggerBadge === "rerender") {
+            BadgeInitSelector();
+          } else {
+            BadgeCounterInitSelector();
+          }
+        }
         if (window.sledgeInfoPopup)
           window.sledgeInfoPopup({
             title: title_added_all_to_wishlist,
@@ -4127,7 +4455,8 @@ const FacetComponent = (props) => {
     setValueFilterPriceChange,
     separatedFilterItem,
     setSeparatedFilterItem,
-    settings
+    settings,
+    filterItemRef
   } = props;
   let aliases = {};
   if (filter.value === "hierarchicalProductType")
@@ -4224,7 +4553,7 @@ const FacetComponent = (props) => {
   const handleFacetCheckbox = (props2) => {
     var _a2, _b2;
     const { facetValues, virtualized } = props2;
-    const { index, key, style, isScrolling, isVisible } = virtualized || {};
+    const { index, key, style } = 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;
@@ -4237,7 +4566,7 @@ const FacetComponent = (props) => {
       const blockComponentChildren = handleFacetCheckbox({
         facetValues: currentItems2
       });
-      const content = !isVisible && isScrolling ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      const content = /* @__PURE__ */ jsxRuntimeExports.jsx(
         Checkbox,
         {
           id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
@@ -4283,7 +4612,7 @@ const FacetComponent = (props) => {
       ] });
     });
   };
-  let scrollElement = document.querySelector(`#filter-component-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`);
+  let scrollElement = filterItemRef == null ? void 0 : filterItemRef.current;
   if (isDisplaySlider) {
     items = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
     let defaultValueMin = valueFilterPriceChange[0] || (items == null ? void 0 : items.min);
@@ -4405,6 +4734,20 @@ const FacetComponent = (props) => {
   }
   return blockComponent;
 };
+const FilterVerticalComponent = (props) => {
+  const { filter, indexFilter, isRender, classesUlElement, getFacetComponent, filterTitleStyle: filter_title_style = {}, handleOpenFilterVertical, clickedOpenFilters } = props;
+  const { value, label } = filter;
+  const filterItemRef = React__default.useRef(null);
+  return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: `filter-component-${stringToSlug(value)}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(value) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
+    ] }),
+    clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), ref: filterItemRef, children: getFacetComponent({
+      filterItemRef
+    }) })
+  ] }, indexFilter) : null;
+};
 const ButtonLoadMore = ({ text, onClick, isInfiniteScroll, currentPage, totalPage, totalResult, pageInfo: pageInfoProp, isVisibleLoadMore, ...otherProps }) => {
   const [ref, entry] = useIntersectionObserver({
     threshold: 0,
@@ -5548,7 +5891,7 @@ const ResultProduct = (props) => {
       isRender = !defaultValueMin && !defaultValueMax ? false : true;
     }
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
-    const getFacetComponent = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const getFacetComponent = ({ filterItemRef }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       FacetComponent,
       {
         filter: {
@@ -5566,7 +5909,8 @@ const ResultProduct = (props) => {
         valueFilterPriceChange,
         setValueFilterPriceChange,
         separatedFilterItem,
-        setSeparatedFilterItem
+        setSeparatedFilterItem,
+        filterItemRef
       }
     );
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length))
@@ -5594,15 +5938,20 @@ const ResultProduct = (props) => {
     }) })
   ] }) : null;
   const filterVerticalComponents = allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
-    const { value, label } = filter;
     const { isRender, classesUlElement, getFacetComponent } = filterSettings(filter);
-    return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: `filter-component-${stringToSlug(value)}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(value) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
-      ] }),
-      clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() })
-    ] }, indexFilter) : null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FilterVerticalComponent,
+      {
+        filter,
+        indexFilter,
+        isRender,
+        classesUlElement,
+        getFacetComponent,
+        filterTitleStyle: filter_title_style,
+        handleOpenFilterVertical,
+        clickedOpenFilters
+      }
+    );
   });
   const filterHorizontalComponents = allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
     const { value, label } = filter;