@useinsider/guido 3.2.0-beta.e01b42a → 3.2.0-beta.ec6228c

package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js

@@ -1,14 +1,15 @@
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as d } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as m } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as u } from "../../constants/selectors.js";
-const i = {
+import { ModificationDescription as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as u } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as m } from "../../constants/selectors.js";
+import { CSS_CLASS_TEXT_TRIM as r, ensureTextTrimCssRulesExist as T } from "../shared/textTrimCssRules.js";
+const s = {
   TEXT_TRIM_ENABLED: "textTrimEnabled"
-}, o = "text-trim-enabled", c = `.${o}`, T = `.${o} p`, p = `.${o} { max-width: 0; }`, _ = `.${o} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
-class N extends d {
+};
+class N extends u {
   getId() {
-    return m.NAME_TEXT_TRIM;
+    return d.NAME_TEXT_TRIM;
   }
   getTemplate() {
     return `
@@ -16,7 +17,7 @@ class N extends d {
             <div class="name-text-trim-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Trim Long Text") }),
-      this._GuToggle(i.TEXT_TRIM_ENABLED)
+      this._GuToggle(s.TEXT_TRIM_ENABLED)
     ])}
             </div>
         `;
@@ -30,76 +31,45 @@ class N extends d {
   _setFormValues() {
     const e = this._getCurrentTrimState();
     this.api.updateValues({
-      [i.TEXT_TRIM_ENABLED]: e
+      [s.TEXT_TRIM_ENABLED]: e
     });
   }
   _getCurrentTrimState() {
     if (!this.currentNode || !("hasClass" in this.currentNode))
       return !1;
-    if (this.currentNode.hasClass(o))
+    if (this.currentNode.hasClass(r))
       return !0;
-    const e = this.currentNode.closest(u);
+    const e = this.currentNode.closest(m);
     if (!e)
       return !1;
     const t = e.querySelector(
-      `[esd-extension-block-id="${l.NAME}"]`
+      `[esd-extension-block-id="${a.NAME}"]`
     );
-    return t && "hasClass" in t ? t.hasClass(o) : !1;
-  }
-  /**
-   * Finds an existing CSS rule in the document stylesheet by exact query
-   * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
-   * @returns The CSS rule node if found, undefined otherwise
-   */
-  _findCssRule(e) {
-    const t = this.api.getDocumentRootCssNode();
-    if (t)
-      return t.querySelector(e);
-  }
-  /**
-   * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
-   * This is needed because Stripo's CSS query syntax interprets spaces as path separators
-   * @returns true if the rule exists
-   */
-  _hasParagraphRule() {
-    const e = this.api.getDocumentRootCssNode();
-    return e ? e.querySelectorAll(`*${o}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" ? s.getSelector() === T : !1) : !1;
-  }
-  /**
-   * Ensures the text-trim CSS rules exist in the document stylesheet
-   * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
-   */
-  _ensureCssRulesExist() {
-    const e = this.api.getDocumentRootCssNode();
-    if (!e)
-      return;
-    const t = this.api.getDocumentModifier();
-    let s = !1;
-    this._findCssRule(c) || (t.modifyCss(e).appendRule(p), s = !0), this._hasParagraphRule() || (t.modifyCss(e).appendRule(_), s = !0), s && t.apply(new a("Add text trim CSS rules"));
+    return t && "hasClass" in t ? t.hasClass(r) : !1;
   }
   _onTextTrimChange(e) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const t = this.currentNode.closest(u);
+    const t = this.currentNode.closest(m);
     if (!t || !("querySelectorAll" in t))
       return;
-    const s = Array.from(
-      t.querySelectorAll(`[esd-extension-block-id="${l.NAME}"]`)
+    const i = Array.from(
+      t.querySelectorAll(`[esd-extension-block-id="${a.NAME}"]`)
     );
-    if (!s.length)
+    if (!i.length)
       return;
-    e && this._ensureCssRulesExist();
-    const r = this.api.getDocumentModifier();
-    s.forEach((n) => {
-      e ? r.modifyHtml(n).setClass(o) : r.modifyHtml(n).removeClass(o);
-    }), r.apply(
-      new a(
+    e && T(this.api);
+    const o = this.api.getDocumentModifier();
+    i.forEach((n) => {
+      e ? o.modifyHtml(n).setClass(r) : o.modifyHtml(n).removeClass(r);
+    }), o.apply(
+      new l(
         e ? "Enable product name text trimming" : "Disable product name text trimming"
       )
     );
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (e) => {
+    this.api.onValueChanged(s.TEXT_TRIM_ENABLED, (e) => {
       this._onTextTrimChange(e);
     });
   }

package/dist/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js

@@ -0,0 +1,14 @@
+import { ModificationDescription as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const t = "text-trim-enabled", l = `.${t}`, c = `.${t} p`, S = `.${t} { max-width: 0; }`, T = `.${t} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
+function f(n) {
+  const e = n.getDocumentRootCssNode();
+  if (!e)
+    return;
+  const o = n.getDocumentModifier();
+  let i = !1;
+  e.querySelector(l) || (o.modifyCss(e).appendRule(S), i = !0), e.querySelectorAll(`*${t}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" && s.getSelector() === c) || (o.modifyCss(e).appendRule(T), i = !0), i && o.apply(new r("Add text trim CSS rules"));
+}
+export {
+  t as CSS_CLASS_TEXT_TRIM,
+  f as ensureTextTrimCssRulesExist
+};

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

@@ -1,13 +1,13 @@
-var P = Object.defineProperty;
-var R = (l, s, t) => s in l ? P(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
-var C = (l, s, t) => R(l, typeof s != "symbol" ? s + "" : s, t);
+var G = Object.defineProperty;
+var P = (u, s, t) => s in u ? G(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var C = (u, s, t) => P(u, typeof s != "symbol" ? s + "" : s, t);
 import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as w } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as E } from "../../constants/selectors.js";
-import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as G } from "../../constants/layout.js";
+import { CommonControl as R } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as M } from "../../constants/selectors.js";
+import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as E } from "../../constants/layout.js";
 import { RecommendationConfigService as p } from "../../services/configService.js";
-import { useRecommendationExtensionStore as V } from "../../store/recommendation.js";
-import { safeGetStyle as L, safeGetParent as I } from "../../utils/tagName.js";
+import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
+import { safeGetStyle as L, safeGetParent as V } from "../../utils/tagName.js";
 import { getCurrentLayout as f, getBlockElement as B } from "../main/utils.js";
 import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
 const U = "recommendation-spacing-control", n = {
@@ -25,16 +25,16 @@ const U = "recommendation-spacing-control", n = {
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function y(l, s) {
-  if (!l)
+function I(u, s) {
+  if (!u)
     return s;
-  const t = parseFloat(l);
+  const t = parseFloat(u);
   return Number.isNaN(t) ? s : t;
 }
-class j extends w {
+class j extends R {
   constructor() {
     super(...arguments);
-    C(this, "store", V());
+    C(this, "store", w());
     C(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
@@ -168,17 +168,17 @@ class j extends w {
       return g;
     const t = this.currentNode.querySelector(S) ?? this.currentNode;
     if (f(this.currentNode) === "grid") {
-      const h = t.querySelector(".recommendation-attribute-row"), u = h == null ? void 0 : h.querySelector("td"), d = L(u, "padding");
+      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = L(l, "padding");
       if (!d)
         return g;
-      const M = d.trim().split(/\s+/);
-      return M.length < 2 ? g : y(M[1], g / 2) * 2;
+      const y = d.trim().split(/\s+/);
+      return y.length < 2 ? g : I(y[1], g / 2) * 2;
     }
-    const o = t.querySelector(".product-card-wrapper"), i = I(o), a = L(i, "padding");
+    const o = t.querySelector(".product-card-wrapper") ?? null, i = V(o), a = L(i, "padding");
     if (!a)
       return g;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? g : y(r[1], g / 2) * 2;
+    return r.length < 2 ? g : I(r[1], g / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -186,9 +186,9 @@ class j extends w {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return G;
-    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer"), o = L(e, "height");
-    return y(o, G);
+      return E;
+    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, o = L(e, "height");
+    return I(o, E);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -209,12 +209,12 @@ class j extends w {
     const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
     c && (o === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
-    ).forEach((u) => {
-      i.modifyHtml(u).setStyle("padding", r);
+    ).forEach((l) => {
+      i.modifyHtml(l).setStyle("padding", r);
     }) : Array.from(
       c.querySelectorAll(".product-card-wrapper")
-    ).forEach((u) => {
-      const d = I(u);
+    ).forEach((l) => {
+      const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
     }), i.apply(new m(`Update column spacing to ${t}px`)));
   }
@@ -260,15 +260,15 @@ class j extends w {
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
     ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(E);
+    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(M);
     c && (o === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
-    ).forEach((u) => {
-      i.modifyHtml(u).setStyle("padding", r);
+    ).forEach((l) => {
+      i.modifyHtml(l).setStyle("padding", r);
     }) : Array.from(
       c.querySelectorAll(".product-card-wrapper")
-    ).forEach((u) => {
-      const d = I(u);
+    ).forEach((l) => {
+      const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
     }), i.apply(new m(`Update mobile column spacing to ${t}px`)));
   }
@@ -285,7 +285,7 @@ class j extends w {
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
     ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(E);
+    const e = this.currentNode.querySelector(M);
     if (!e)
       return;
     const o = Array.from(

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,6 +1,6 @@
 import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as O, ContainerControls as C, TextControls as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as U } from "./block.js";
-import { RecommendationBlockId as N } from "./constants/blockIds.js";
+import { RecommendationBlockId as S } from "./constants/blockIds.js";
 import { RecommendationControlId as T } from "./constants/controlIds.js";
 import { CONTROL_BLOCK_ID as A } from "./controls/main/index.js";
 import "./store/recommendation.js";
@@ -14,7 +14,7 @@ import "./controls/image/index.js";
 import { SPACING_CONTROL_ID as L } from "./controls/spacing/index.js";
 import { CARD_BACKGROUND_COLOR_CONTROL_ID as D } from "./controls/cardBackground/index.js";
 import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/index.js";
-import { SYNC_INFO_MESSAGE_CONTROL_ID as S } from "./controls/syncInfoMessage.js";
+import { SYNC_INFO_MESSAGE_CONTROL_ID as N } from "./controls/syncInfoMessage.js";
 class Z extends E {
   registerBlockControls(I) {
     I[U] = [
@@ -39,11 +39,11 @@ class Z extends E {
           B
         ]
       ).withLabel(this.api.translate("Card Composition"))
-    ], I[N.NAME] = [
+    ], I[S.NAME] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.NAME_STYLE,
           T.NAME_ALIGN,
           T.NAME_TEXT_TRIM,
@@ -59,11 +59,11 @@ class Z extends E {
           T.NAME_COLOR
         ]
       )
-    ], I[N.PRICE] = [
+    ], I[S.PRICE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.PRICE_STYLE,
           T.PRICE_ALIGN,
           T.PRICE_PADDINGS
@@ -78,11 +78,11 @@ class Z extends E {
           T.PRICE_COLOR
         ]
       )
-    ], I[N.OLD_PRICE] = [
+    ], I[S.OLD_PRICE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.OLD_PRICE_STYLE,
           T.OLD_PRICE_ALIGN,
           T.OLD_PRICE_PADDINGS
@@ -97,11 +97,11 @@ class Z extends E {
           T.OLD_PRICE_COLOR
         ]
       )
-    ], I[N.OMNIBUS_PRICE] = [
+    ], I[S.OMNIBUS_PRICE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.OMNIBUS_PRICE_TEXT_BEFORE,
           T.OMNIBUS_PRICE_TEXT_AFTER,
           T.OMNIBUS_PRICE_STYLE,
@@ -118,11 +118,11 @@ class Z extends E {
           T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], I[N.OMNIBUS_DISCOUNT] = [
+    ], I[S.OMNIBUS_DISCOUNT] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
           T.OMNIBUS_DISCOUNT_TEXT_AFTER,
           T.OMNIBUS_DISCOUNT_STYLE,
@@ -139,11 +139,11 @@ class Z extends E {
           T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], I[N.BUTTON] = [
+    ], I[S.BUTTON] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.BUTTON_TEXT,
           T.BUTTON_ALIGN,
           T.BUTTON_PADDINGS,
@@ -162,12 +162,13 @@ class Z extends E {
           T.BUTTON_BORDER
         ]
       )
-    ], I[N.CUSTOM_ATTRIBUTE] = [
+    ], I[S.CUSTOM_ATTRIBUTE] = [
       new _(
         O.SETTINGS,
         [
           T.CUSTOM_ATTR_STYLE,
           T.CUSTOM_ATTR_ALIGN,
+          T.CUSTOM_ATTR_TEXT_TRIM,
           T.CUSTOM_ATTR_PADDINGS
         ]
       ),
@@ -180,11 +181,11 @@ class Z extends E {
           T.CUSTOM_ATTR_COLOR
         ]
       )
-    ], I[N.IMAGE] = [
+    ], I[S.IMAGE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.IMAGE_SIZE,
           T.IMAGE_MARGINS
         ]

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

@@ -1,14 +1,14 @@
 import { RecommendationFeedSourceMaps as g, getOperatorOptions as R, PriceAttributes as k } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as y } from "../../../../services/recommendationApi.js";
-import { useConfigStore as C } from "../../../../stores/config.js";
+import { useRecommendationApi as C } from "../../../../services/recommendationApi.js";
+import { useConfigStore as y } from "../../../../stores/config.js";
 import { defineStore as G } from "pinia";
 import { DEFAULT_CARDS_IN_ROW as F } from "../constants/layout.js";
 import { EXCLUDED_ALGORITHM_IDS as w } from "../constants/defaultConfig.js";
 import { getDefaultProducts as S } from "../templates/utils.js";
 import { generateCompleteFilterQuery as b } from "../utils/filterUtil.js";
 import { isFilterValid as D } from "../validation/filterSchema.js";
-const h = y();
-let u = null, m = null, d = null;
+const h = C();
+let m = null, u = null, d = null;
 function I() {
   return {
     cardsInRow: F,
@@ -57,7 +57,7 @@ const v = () => ({
   blockStates: {},
   currentRecommendationId: null,
   configVersion: 0
-}), E = G("guidoRecommendationExtension", {
+}), z = G("guidoRecommendationExtension", {
   state: () => v(),
   getters: {
     // ====================================================================
@@ -131,11 +131,10 @@ const v = () => ({
     })),
     getFilterList() {
       return Object.values(this.filterList).map((t) => {
-        const r = t.type === "defaultAttribute", e = k.includes(t.attributeName);
-        let n = r ? t.attributeName : `product_attributes.${t.attributeName}`;
-        return n = e ? `${n}.${this.recommendationConfigs.currencySettings.value}` : n, {
+        let r;
+        return t.type === "productAttribute" ? r = `product_attributes.${t.attributeName}` : k.includes(t.attributeName) ? r = `${t.attributeName}.${this.recommendationConfigs.currencySettings.value}` : r = t.attributeName, {
           text: t.displayName,
-          value: n,
+          value: r,
           type: t.attributeType
         };
       });
@@ -163,10 +162,15 @@ const v = () => ({
      * Resets currentRecommendationId if it was the deleted block.
      */
     removeBlockState(t) {
-      const r = { ...this.blockStates };
-      if (delete r[t], this.blockStates = r, this.currentRecommendationId === t) {
-        const e = Object.keys(this.blockStates).map(Number);
-        this.currentRecommendationId = e.length > 0 ? e[0] : null;
+      const r = t.toString();
+      if (this.recommendationCampaignUrls[r]) {
+        const n = { ...this.recommendationCampaignUrls };
+        delete n[r], this.recommendationCampaignUrls = n;
+      }
+      const e = { ...this.blockStates };
+      if (delete e[t], this.blockStates = e, this.currentRecommendationId === t) {
+        const n = Object.keys(this.blockStates).map(Number);
+        this.currentRecommendationId = n.length > 0 ? n[0] : null;
       }
     },
     /**
@@ -251,11 +255,11 @@ const v = () => ({
     // ====================================================================
     async fetchRecommendationCreateData() {
       if (!this.activePredictiveAlgorithms.length) {
-        if (u) {
-          await u;
+        if (m) {
+          await m;
           return;
         }
-        u = (async () => {
+        m = (async () => {
           const {
             activePredictiveAlgorithms: t,
             languages: r,
@@ -268,26 +272,26 @@ const v = () => ({
           this.currencyList = e;
         })();
         try {
-          await u;
+          await m;
         } finally {
-          u = null;
+          m = null;
         }
       }
     },
     async fetchRecommendationFilters() {
       if (!Object.keys(this.filterList).length) {
-        if (m) {
-          await m;
+        if (u) {
+          await u;
           return;
         }
-        m = (async () => {
+        u = (async () => {
           const t = await h.fetchRecommendationFilters();
           this.filterList = t;
         })();
         try {
-          await m;
+          await u;
         } finally {
-          m = null;
+          u = null;
         }
       }
     },
@@ -375,7 +379,7 @@ const v = () => ({
     },
     async _doFetchProducts() {
       var p;
-      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((a) => a.isValid), c = b(n), i = ((p = g.find((a) => a.key === e.strategy)) == null ? void 0 : p.path) || "", o = C(), s = {
+      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((a) => a.isValid), c = b(n), i = ((p = g.find((a) => a.key === e.strategy)) == null ? void 0 : p.path) || "", o = y(), s = {
         locale: e.language,
         currency: e.currencySettings.value,
         partnerName: o.partnerName,
@@ -399,5 +403,5 @@ const v = () => ({
   }
 });
 export {
-  E as useRecommendationExtensionStore
+  z as useRecommendationExtensionStore
 };

package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js

@@ -1,11 +1,11 @@
 import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as g, ATTR_PRODUCT_BUTTON as u, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as h, ATTR_PRODUCT_OLD_PRICE as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as _ } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as x } from "../../store/recommendation.js";
+import { ATTR_PRODUCT_ATTR as g, ATTR_PRODUCT_BUTTON as u, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as h, ATTR_PRODUCT_OLD_PRICE as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
 import { formatPrice as $ } from "../../utils/priceFormatter.js";
 import { sanitizeImageUrl as C, CUSTOM_CELL_HTML as R } from "../utils.js";
 const a = "0 5px", l = "attribute-cell";
 function p() {
-  const t = x(), { currencySettings: e } = t.recommendationConfigs;
+  const t = _(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -23,7 +23,7 @@ function r(t, e = "price") {
   });
 }
 const I = {
-  [_]: (t) => `
+  [x]: (t) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
@@ -224,6 +224,8 @@ const I = {
    * Custom attribute cell template — same structure as built-in entries
    * (outer td → inner product-card-segment table).
    * Used by `buildElementRenderer` for `customAttr:*` composition entries.
+   * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
+   * @param content - Display content for the cell
    */
   [R]: (t, e) => `
         <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
@@ -238,7 +240,7 @@ const I = {
                 <tbody>
                     <tr valign="top">
                         <td
-                            ${g}="product_attribute.${t}"
+                            ${g}="${t}"
                             class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
                             align="center"
                             esd-extension-block-id="${s.CUSTOM_ATTRIBUTE}">

package/dist/extensions/Blocks/Recommendation/templates/grid/template.js

@@ -1,7 +1,7 @@
-import { DEFAULT_PRODUCTS_PER_ROW as m } from "../../constants/layout.js";
-import { DEFAULT_CARD_COMPOSITION as L, spacer as E, getDefaultProducts as I, createBlockTemplate as _, DEFAULTS as S, buildElementRenderer as b, DEFAULT_CARD_VISIBILITY as A } from "../utils.js";
-import { gridElementRenderer as f, ATTRIBUTE_CELL_CLASS as w, DEFAULT_CELL_PADDING as D } from "./elementRenderer.js";
-const C = `
+import { DEFAULT_PRODUCTS_PER_ROW as L } from "../../constants/layout.js";
+import { DEFAULT_CARD_COMPOSITION as E, spacer as I, getDefaultProducts as _, createBlockTemplate as S, DEFAULTS as b, buildElementRenderer as A, DEFAULT_CARD_VISIBILITY as f } from "../utils.js";
+import { gridElementRenderer as w, ATTRIBUTE_CELL_CLASS as D, DEFAULT_CELL_PADDING as C } from "./elementRenderer.js";
+const O = `
     <tr class="recommendation-product-row">
         <td>
             <table
@@ -18,7 +18,7 @@ const C = `
             </table>
         </td>
     </tr>
-`, O = `
+`, g = `
     <tr
         class="recommendation-attribute-row"
         data-attribute-type="{-{-ATTR_TYPE-}-}"
@@ -27,37 +27,38 @@ const C = `
         {-{-CELLS-}-}
     </tr>
 `;
-function g(t, e, l, n = L) {
-  const o = (100 / e).toFixed(2), a = e - t.length, r = `<td class="${w}" style="padding: ${D};" width="${o}%"></td>`, i = a > 0 ? r.repeat(a) : "", s = b(l, n);
-  return n.filter((c) => s[c]).map((c) => {
-    const p = A[c] ?? !0, T = p ? "" : 'style="display: none;"', u = t.map((R) => s[c](R).replace("<td", `<td width="${o}%"`)).join("");
-    return O.replace("{-{-ATTR_TYPE-}-}", c).replace("{-{-VISIBILITY-}-}", p ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", T).replace("{-{-CELLS-}-}", u + i);
+function P(t, e, o, r = E, n = {}) {
+  const c = (100 / e).toFixed(2), i = e - t.length, l = `<td class="${D}" style="padding: ${C};" width="${c}%"></td>`, d = i > 0 ? l.repeat(i) : "", a = A(o, r, n);
+  return r.filter((s) => a[s]).map((s) => {
+    const T = f[s] ?? !0, u = T ? "" : 'style="display: none;"', R = t.map((m) => a[s](m).replace("<td", `<td width="${c}%"`)).join("");
+    return g.replace("{-{-ATTR_TYPE-}-}", s).replace("{-{-VISIBILITY-}-}", T ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", u).replace("{-{-CELLS-}-}", R + d);
   }).join("");
 }
-function P(t, e, l, n) {
-  const o = [];
-  for (let r = 0; r < t.length; r += e)
-    o.push(t.slice(r, r + e));
-  return o.map((r, i) => {
-    const s = g(
-      r,
-      e,
+function U(t, e, o, r, n = {}) {
+  const c = [];
+  for (let l = 0; l < t.length; l += e)
+    c.push(t.slice(l, l + e));
+  return c.map((l, d) => {
+    const a = P(
       l,
+      e,
+      o,
+      r,
       n
-    ), d = C.replace("{-{-ATTRIBUTE_ROWS-}-}", s);
-    return i > 0 ? E + d : d;
+    ), p = O.replace("{-{-ATTRIBUTE_ROWS-}-}", a);
+    return d > 0 ? I + p : p;
   }).join("");
 }
-function U(t, e, l) {
-  return P(t, e, f, l);
+function h(t, e, o, r = {}) {
+  return U(t, e, w, o, r);
 }
-function W(t) {
-  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, l = _("grid", e), n = I(), o = U(n, m);
-  return l.replace("{-{-TITLE-}-}", S.TITLE).replace("{-{-PRODUCT_ROWS-}-}", o).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
+function F(t) {
+  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, o = S("grid", e), r = _(), n = h(r, L);
+  return o.replace("{-{-TITLE-}-}", b.TITLE).replace("{-{-PRODUCT_ROWS-}-}", n).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
 }
 export {
-  W as getDefaultTemplate,
-  g as prepareGridAttributeRows,
-  P as prepareGridProductRows,
-  U as prepareProductRows
+  F as getDefaultTemplate,
+  P as prepareGridAttributeRows,
+  U as prepareGridProductRows,
+  h as prepareProductRows
 };