@useinsider/guido 2.0.0-beta.1c331b8 → 2.0.0-beta.1f72712

package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js

@@ -1,61 +1,50 @@
-var P = Object.defineProperty;
-var O = (n, i, t) => i in n ? P(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
-var p = (n, i, t) => O(n, typeof i != "symbol" ? i + "" : i, t);
-import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as b } from "../../../common-control.js";
-import { useRecommendationExtensionStore as I } from "../../store/recommendation.js";
-import { getCurrentLayout as S } from "../main/utils.js";
-import { useDebounceFn as _ } from "../../../../../node_modules/@vueuse/shared/index.js";
-const y = "recommendation-spacing-control", a = {
+var G = Object.defineProperty;
+var I = (o, n, t) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
+var p = (o, n, t) => I(o, typeof n != "symbol" ? n + "" : n, t);
+import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as L } from "../../../common-control.js";
+import { SPACING_STEP as b, MAX_SPACING as y, MIN_SPACING as A, DEFAULT_COLUMN_SPACING as s, DEFAULT_ROW_SPACING as m } from "../../constants/layout.js";
+import { RecommendationConfigService as d } from "../../services/configService.js";
+import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
+import { safeGetStyle as S, safeGetParent as V } from "../../utils/tagName.js";
+import { getCurrentLayout as C } from "../main/utils.js";
+import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
+const R = "recommendation-spacing-control", a = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
   ROW_SPACING: "rowSpacing"
-}, f = {
+}, P = {
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing"
-}, s = {
-  COLUMN_SPACING: 10,
-  // 5px on each side = 10px total
-  ROW_SPACING: 20
-}, u = {
-  MIN_SPACING: 0,
-  MAX_SPACING: 50,
-  STEP: 5
 };
-function C(n, i) {
-  return !n || !("getStyle" in n) ? null : n.getStyle(i);
+function N(o, n) {
+  if (!o)
+    return n;
+  const t = parseFloat(o);
+  return Number.isNaN(t) ? n : t;
 }
-function G(n) {
-  return !n || !("parent" in n) || typeof n.parent != "function" ? null : n.parent();
-}
-function m(n, i) {
-  if (!n)
-    return i;
-  const t = parseFloat(n);
-  return Number.isNaN(t) ? i : t;
-}
-class E extends b {
+class $ extends L {
   constructor() {
     super(...arguments);
-    p(this, "store", I());
+    p(this, "store", w());
     p(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    p(this, "_debouncedOnColumnSpacingChange", _((t) => {
+    p(this, "_debouncedOnColumnSpacingChange", O((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    p(this, "_debouncedOnRowSpacingChange", _((t) => {
+    p(this, "_debouncedOnRowSpacingChange", O((t) => {
       this._onRowSpacingChange(t);
     }, 300));
   }
   getId() {
-    return y;
+    return R;
   }
   getTemplate() {
     return `
@@ -64,16 +53,16 @@ class E extends b {
       this._GuLabel({ text: "Column Spacing (px)", name: a.COLUMN_SPACING_LABEL }),
       this._GuCounter({
         name: a.COLUMN_SPACING,
-        minValue: u.MIN_SPACING,
-        maxValue: u.MAX_SPACING,
-        step: u.STEP
+        minValue: A,
+        maxValue: y,
+        step: b
       }),
       this._GuLabel({ text: "Row Spacing (px)" }),
       this._GuCounter({
         name: a.ROW_SPACING,
-        minValue: u.MIN_SPACING,
-        maxValue: u.MAX_SPACING,
-        step: u.STEP
+        minValue: A,
+        maxValue: y,
+        step: b
       })
     ])}
             </div>
@@ -85,23 +74,30 @@ class E extends b {
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
   }
+  onDestroy() {
+    this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
+  }
   /**
    * Updates column spacing visibility based on layout orientation
    * Column spacing is hidden for horizontal layout (products are stacked vertically)
-   * Reads from store first for reliability, falls back to DOM
+   * Reads from node config first, falls back to store then DOM
    */
   _updateColumnSpacingVisibility() {
-    const r = (this.store.recommendationConfigs.orientation || S(this.currentNode)) === "vertical";
-    this.api.setVisibility(a.COLUMN_SPACING, r), this.api.setVisibility(a.COLUMN_SPACING_LABEL, r);
+    if (!this.api)
+      return;
+    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || C(this.currentNode)) === "vertical";
+    this.api.setVisibility(a.COLUMN_SPACING, i), this.api.setVisibility(a.COLUMN_SPACING_LABEL, i);
   }
   /**
-   * Reads spacing values from data attributes or returns defaults
+   * Reads spacing values from node config first, falls back to DOM styles
    */
   _setFormValues() {
-    const t = this._getStoredColumnSpacing(), e = this._getStoredRowSpacing();
+    if (!this.api)
+      return;
+    const t = d.getConfig(this.currentNode), e = t.columnSpacing !== s ? t.columnSpacing : this._getStoredColumnSpacing(), r = t.rowSpacing !== m ? t.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [a.COLUMN_SPACING]: t,
-      [a.ROW_SPACING]: e
+      [a.COLUMN_SPACING]: e,
+      [a.ROW_SPACING]: r
     });
   }
   /**
@@ -112,28 +108,28 @@ class E extends b {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return s.COLUMN_SPACING;
-    if (S(this.currentNode) === "vertical") {
-      const o = this.currentNode.querySelector(".recommendation-attribute-row"), A = o == null ? void 0 : o.querySelector("td"), h = C(A, "padding");
-      if (!h)
-        return s.COLUMN_SPACING;
-      const g = h.trim().split(/\s+/);
-      return g.length < 2 ? s.COLUMN_SPACING : m(g[1], s.COLUMN_SPACING / 2) * 2;
+      return s;
+    if (C(this.currentNode) === "vertical") {
+      const l = this.currentNode.querySelector(".recommendation-attribute-row"), c = l == null ? void 0 : l.querySelector("td"), f = S(c, "padding");
+      if (!f)
+        return s;
+      const _ = f.trim().split(/\s+/);
+      return _.length < 2 ? s : N(_[1], s / 2) * 2;
     }
-    const e = this.currentNode.querySelector(".product-card-wrapper"), r = G(e), l = C(r, "padding");
-    if (!l)
-      return s.COLUMN_SPACING;
-    const c = l.trim().split(/\s+/);
-    return c.length < 2 ? s.COLUMN_SPACING : m(c[1], s.COLUMN_SPACING / 2) * 2;
+    const e = this.currentNode.querySelector(".product-card-wrapper"), r = V(e), i = S(r, "padding");
+    if (!i)
+      return s;
+    const u = i.trim().split(/\s+/);
+    return u.length < 2 ? s : N(u[1], s / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return s.ROW_SPACING;
-    const t = this.currentNode.querySelector(".spacer"), e = C(t, "height");
-    return m(e, s.ROW_SPACING);
+      return m;
+    const t = this.currentNode.querySelector(".spacer"), e = S(t, "height");
+    return N(e, m);
   }
   /**
    * Handles column spacing changes.
@@ -143,17 +139,22 @@ class E extends b {
   _onColumnSpacingChange(t) {
     if (!this.currentNode)
       return;
-    this._storeColumnSpacing(t);
-    const e = S(this.currentNode), r = this.api.getDocumentModifier(), c = `0 ${t / 2}px`;
-    e === "vertical" ? Array.from(
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { columnSpacing: t },
+      `Changed column spacing to ${t}px`
+    ), this._storeColumnSpacing(t);
+    const r = d.getConfig(this.currentNode).layout || C(this.currentNode), i = this.api.getDocumentModifier(), h = `0 ${t / 2}px`;
+    r === "vertical" ? Array.from(
       this.currentNode.querySelectorAll(".attribute-cell")
-    ).forEach((o) => {
-      r.modifyHtml(o).setStyle("padding", c);
+    ).forEach((c) => {
+      i.modifyHtml(c).setStyle("padding", h);
     }) : Array.from(
       this.currentNode.querySelectorAll(".product-card-wrapper")
-    ).forEach((o) => {
-      "parent" in o && o.parent() && r.modifyHtml(o.parent()).setStyle("padding", c);
-    }), r.apply(new d(`Update column spacing to ${t}px`));
+    ).forEach((c) => {
+      "parent" in c && c.parent() && i.modifyHtml(c.parent()).setStyle("padding", h);
+    }), i.apply(new g(`Update column spacing to ${t}px`));
   }
   /**
    * Handles row spacing changes
@@ -162,16 +163,21 @@ class E extends b {
   _onRowSpacingChange(t) {
     if (!this.currentNode)
       return;
-    this._storeRowSpacing(t);
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { rowSpacing: t },
+      `Changed row spacing to ${t}px`
+    ), this._storeRowSpacing(t);
     const e = Array.from(
       this.currentNode.querySelectorAll(".spacer")
     );
     if (!e.length)
       return;
-    const r = this.api.getDocumentModifier(), l = `${t}px`;
-    e.forEach((c) => {
-      r.modifyHtml(c).setStyle("height", l);
-    }), r.apply(new d(`Update row spacing to ${t}px`));
+    const r = this.api.getDocumentModifier(), i = `${t}px`;
+    e.forEach((u) => {
+      r.modifyHtml(u).setStyle("height", i);
+    }), r.apply(new g(`Update row spacing to ${t}px`));
   }
   /**
    * Stores column spacing value in block data attribute
@@ -180,7 +186,7 @@ class E extends b {
     if (!this.currentNode)
       return;
     const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(f.COLUMN_SPACING, t.toString()).apply(new d("Store column spacing"));
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.COLUMN_SPACING, t.toString()).apply(new g("Store column spacing"));
   }
   /**
    * Stores row spacing value in block data attribute
@@ -189,7 +195,7 @@ class E extends b {
     if (!this.currentNode)
       return;
     const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(f.ROW_SPACING, t.toString()).apply(new d("Store row spacing"));
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.ROW_SPACING, t.toString()).apply(new g("Store row spacing"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(a.COLUMN_SPACING, (t) => {
@@ -211,6 +217,6 @@ class E extends b {
   }
 }
 export {
-  y as SPACING_CONTROL_ID,
-  E as SpacingControl
+  R as SPACING_CONTROL_ID,
+  $ as SpacingControl
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -1,15 +1,19 @@
 const n = `/* Utils */
 .es-180w { width: 180px; }
 
-/* Recommendation Controls */
-.recommendation-controls-container > .container {
-    padding: 16px;
+/* Recommendation Controls - Main settings panel separators */
+.recommendation-controls-container > div {
+    border-bottom: 1px solid #e0e0e0;
 }
 
-.recommendation-controls-container > .container:first-child {
+.recommendation-controls-container > div:first-child {
     padding-top: 0;
 }
 
+.recommendation-controls-container > div:last-child {
+    border-bottom: none;
+}
+
 .container:has(.recommendation-controls-container) {
     padding: 0
 }

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -0,0 +1,239 @@
+import { ModificationDescription as f } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENT_CONFIG_VERSION as u, DEFAULT_NODE_CONFIG as e } from "../constants/defaultConfig.js";
+import { setCurrencyAttributes as g } from "../controls/main/utils.js";
+import { hasMinimalConfig as a } from "../types/nodeConfig.js";
+class y {
+  // ========================================================================
+  // Read Operations
+  // ========================================================================
+  /**
+   * Get configuration from a node, with defaults for missing values
+   *
+   * This is the primary way to read configuration from a block.
+   * Always returns a complete config object with defaults merged in.
+   * @example
+   * const config = RecommendationConfigService.getConfig(this.currentNode);
+   * console.log(config.strategy); // 'mostPopular'
+   * @param node - The immutable HTML node to read config from
+   * @returns Complete configuration with defaults for missing values
+   */
+  static getConfig(i) {
+    if (!i)
+      return this.cloneDefaults();
+    if (!("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
+      return this.cloneDefaults();
+    try {
+      const t = i.getNodeConfig();
+      return t ? this.mergeWithDefaults(t) : this.cloneDefaults();
+    } catch {
+      return this.cloneDefaults();
+    }
+  }
+  /**
+   * Check if a node has valid configuration stored
+   *
+   * Used for migration detection - returns false for legacy templates
+   * that need their configuration migrated.
+   * @param node - The immutable HTML node to check
+   * @returns True if node has valid config with version number
+   */
+  static hasConfig(i) {
+    if (!i || !("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
+      return !1;
+    try {
+      const t = i.getNodeConfig();
+      return a(t);
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Get the configuration version from a node
+   * @param node - The immutable HTML node to check
+   * @returns Config version number, or 0 if no config exists
+   */
+  static getConfigVersion(i) {
+    return this.hasConfig(i) && this.getConfig(i).configVersion || 0;
+  }
+  // ========================================================================
+  // Write Operations
+  // ========================================================================
+  /**
+   * Update specific configuration values
+   *
+   * Merges the updates with existing config and persists to node.
+   * This is the primary way to update configuration from controls.
+   * @example
+   * RecommendationConfigService.updateConfig(
+   *   this.api,
+   *   this.currentNode,
+   *   { strategy: 'complementaryItems' },
+   *   'Changed recommendation algorithm'
+   * );
+   * @param api - Stripo extension API with document modifier
+   * @param node - The immutable HTML node to update
+   * @param updates - Partial config with values to update
+   * @param description - Human-readable description for undo/redo
+   * @returns The new complete configuration
+   */
+  static updateConfig(i, t, o, n) {
+    const s = this.getConfig(t), c = this.deepMerge(s, o);
+    return this.saveConfig(i, t, c, n), c;
+  }
+  /**
+   * Initialize configuration for a new block
+   *
+   * Called when a block is first created (dropped into template).
+   * Can optionally merge in partial config from migration.
+   * @example
+   * // In Block.onCreated lifecycle
+   * RecommendationConfigService.initializeConfig(this.api, node);
+   * @param api - Stripo extension API with document modifier
+   * @param node - The immutable HTML node to initialize
+   * @param partialConfig - Optional partial config to merge with defaults
+   * @returns The initialized configuration
+   */
+  static initializeConfig(i, t, o) {
+    const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
+    return this.saveConfig(i, t, n, "Initialize recommendation block"), g({
+      currentNode: t,
+      documentModifier: i.getDocumentModifier(),
+      currency: n.currency
+    }), n;
+  }
+  /**
+   * Save complete configuration to a node
+   *
+   * Low-level method - prefer `updateConfig` or `initializeConfig` in most cases.
+   * @param api - Stripo extension API with document modifier
+   * @param node - The immutable HTML node to save to
+   * @param config - Complete configuration to save
+   * @param description - Human-readable description for undo/redo
+   */
+  static saveConfig(i, t, o, n) {
+    try {
+      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new f(n));
+    } catch (s) {
+      console.warn("[RecommendationConfigService] Failed to save config:", s);
+    }
+  }
+  // ========================================================================
+  // Migration Helpers
+  // ========================================================================
+  /**
+   * Migrate configuration from legacy data-attributes
+   *
+   * Reads existing data-attributes and creates a proper node config.
+   * Used when loading templates created before node config was implemented.
+   * @param api - Stripo extension API with document modifier
+   * @param node - The block node to migrate
+   * @returns The migrated configuration
+   */
+  static migrateFromDataAttributes(i, t) {
+    const o = {
+      configVersion: u
+    };
+    if ("getAttribute" in t && typeof t.getAttribute == "function") {
+      const n = t.getAttribute("data-layout");
+      (n === "horizontal" || n === "vertical") && (o.layout = n);
+      const s = t.getAttribute("data-card-composition");
+      s && (o.composition = s.split(",").filter(Boolean));
+      const c = t.getAttribute("data-column-spacing");
+      c && (o.columnSpacing = parseInt(c) || e.columnSpacing);
+      const r = t.getAttribute("data-row-spacing");
+      r && (o.rowSpacing = parseInt(r) || e.rowSpacing);
+    }
+    return this.initializeConfig(i, t, o);
+  }
+  /**
+   * Check if configuration needs migration
+   * @param node - The block node to check
+   * @returns True if migration is needed
+   */
+  static needsMigration(i) {
+    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < u : !0 : !1;
+  }
+  // ========================================================================
+  // Internal Helpers
+  // ========================================================================
+  /**
+   * Clone default config to avoid mutations
+   */
+  static cloneDefaults() {
+    return {
+      ...e,
+      currency: { ...e.currency },
+      omnibusPrice: { ...e.omnibusPrice },
+      omnibusDiscount: { ...e.omnibusDiscount },
+      composition: [...e.composition],
+      visibility: { ...e.visibility },
+      filters: [],
+      productIds: []
+    };
+  }
+  /**
+   * Merge partial config with defaults
+   *
+   * Deep merges nested objects like currency, omnibus settings.
+   */
+  static mergeWithDefaults(i) {
+    const t = this.cloneDefaults();
+    return {
+      ...t,
+      ...i,
+      currency: {
+        ...t.currency,
+        ...i.currency || {}
+      },
+      omnibusPrice: {
+        ...t.omnibusPrice,
+        ...i.omnibusPrice || {}
+      },
+      omnibusDiscount: {
+        ...t.omnibusDiscount,
+        ...i.omnibusDiscount || {}
+      },
+      visibility: {
+        ...t.visibility,
+        ...i.visibility || {}
+      },
+      composition: i.composition || t.composition,
+      filters: i.filters || [],
+      productIds: i.productIds || []
+    };
+  }
+  /**
+   * Deep merge for nested objects
+   *
+   * Recursively merges source into target, preserving existing values
+   * that aren't explicitly overwritten.
+   */
+  static deepMerge(i, t) {
+    return {
+      ...i,
+      ...t,
+      currency: {
+        ...i.currency,
+        ...t.currency || {}
+      },
+      omnibusPrice: {
+        ...i.omnibusPrice,
+        ...t.omnibusPrice || {}
+      },
+      omnibusDiscount: {
+        ...i.omnibusDiscount,
+        ...t.omnibusDiscount || {}
+      },
+      visibility: {
+        ...i.visibility,
+        ...t.visibility || {}
+      },
+      composition: t.composition ?? i.composition,
+      filters: t.filters ?? i.filters,
+      productIds: t.productIds ?? i.productIds
+    };
+  }
+}
+export {
+  y as RecommendationConfigService
+};

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -1,14 +1,14 @@
-import { RecommendationFeedSourceMaps as u, PriceAttributes as c } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as p } from "../../../../services/recommendationApi.js";
-import { useConfigStore as m } from "../../../../stores/config.js";
-import { defineStore as f } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as d } from "../constants/layout.js";
-import { generateCompleteFilterQuery as l } from "../utils/filterUtil.js";
-const s = p(), g = () => ({
+import { RecommendationFeedSourceMaps as l, PriceAttributes as p } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as m } from "../../../../services/recommendationApi.js";
+import { useConfigStore as f } from "../../../../stores/config.js";
+import { defineStore as d } from "pinia";
+import { DEFAULT_CARDS_IN_ROW as g } from "../constants/layout.js";
+import { generateCompleteFilterQuery as c } from "../utils/filterUtil.js";
+const s = m(), h = () => ({
   recommendationCampaignUrls: {},
   recommendationProducts: [],
   recommendationConfigs: {
-    cardsInRow: d,
+    cardsInRow: g,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -135,8 +135,8 @@ const s = p(), g = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), S = f("guidoRecommendationExtension", {
-  state: () => g(),
+}), R = d("guidoRecommendationExtension", {
+  state: () => h(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,
     getFilterGroupCount: (e) => {
@@ -146,7 +146,7 @@ const s = p(), g = () => ({
     getActivePredictiveAlgorithms: (e) => {
       const t = [];
       return e.activePredictiveAlgorithms.forEach((r) => {
-        t.push(...u.filter((i) => i.id === r));
+        t.push(...l.filter((i) => i.id === r));
       }), t.map((r) => ({
         text: r.name,
         value: r.key
@@ -161,7 +161,7 @@ const s = p(), g = () => ({
       value: t.text
     })),
     getFilterList: (e) => Object.values(e.filterList).map((t) => {
-      const r = t.type === "defaultAttribute", i = c.includes(t.attributeName);
+      const r = t.type === "defaultAttribute", i = p.includes(t.attributeName);
       let o = r ? t.attributeName : `product_attributes.${t.attributeName}`;
       return o = i ? `${o}.${e.recommendationConfigs.currencySettings.value}` : o, {
         text: t.displayName,
@@ -241,30 +241,32 @@ const s = p(), g = () => ({
       });
     },
     generateFilterQuery() {
-      return l(this.recommendationConfigs.filters);
+      return c(this.recommendationConfigs.filters);
     },
     async fetchRecommendationProducts() {
-      var a;
-      const e = this.recommendationConfigs.filters.filter((n) => n.isValid), t = l(e), r = ((a = u.find((n) => n.key === this.recommendationConfigs.strategy)) == null ? void 0 : a.path) || "", i = m(), o = await s.fetchRecommendationProducts(
+      var u;
+      const e = this.recommendationConfigs.filters.filter((n) => n.isValid), t = c(e), r = ((u = l.find((n) => n.key === this.recommendationConfigs.strategy)) == null ? void 0 : u.path) || "", i = f(), o = {
+        // Note: {itemId} and {campaignId} are template placeholders replaced at runtime
+        locale: this.recommendationConfigs.language,
+        currency: this.recommendationConfigs.currencySettings.value,
+        partnerName: i.partnerName,
+        productId: this.recommendationConfigs.strategy === "manualMerchandising" ? this.recommendationConfigs.productIds.join(",") : "{itemId}",
+        size: this.recommendationConfigs.size,
+        details: !0,
+        campaignId: "{campaignId}",
+        filter: t
+      };
+      this.recommendationConfigs.shuffleProducts && (o.shuffle = !0);
+      const a = await s.fetchRecommendationProducts(
         r,
-        {
-          // TODO: Here will be optimized and filled carefully
-          locale: this.recommendationConfigs.language,
-          currency: this.recommendationConfigs.currencySettings.value,
-          partnerName: i.partnerName,
-          productId: this.recommendationConfigs.strategy === "manualMerchandising" ? this.recommendationConfigs.productIds.join(",") : "{itemId}",
-          size: this.recommendationConfigs.size,
-          details: !0,
-          campaignId: "{campaignId}",
-          filter: t
-        }
+        o
       );
       this.$patch({
-        recommendationProducts: o
+        recommendationProducts: a
       });
     }
   }
 });
 export {
-  S as useRecommendationExtensionStore
+  R as useRecommendationExtensionStore
 };