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

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -1,12 +1,12 @@
 import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlockId as f } from "../../constants/blockIds.js";
+import { RecommendationBlockId as m } from "../../constants/blockIds.js";
 import { MOBILE_CONTAINER_SELECTOR as P, MOBILE_ROW_SELECTOR as k, CURRENCY_ATTR as y, DESKTOP_CONTAINER_SELECTOR as q, CONTAINER_SELECTOR as $ } from "../../constants/selectors.js";
 import { RecommendationConfigService as E } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 import { prepareProductRows as T } from "../../templates/index.js";
 import { formatPrice as B } from "../../utils/priceFormatter.js";
 import { isTdNode as v } from "../../utils/tagName.js";
-import { getDefaultProducts as _, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as j } from "../../templates/utils.js";
+import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as j } from "../../templates/utils.js";
 const h = "recommendation-block-v2";
 function M(t) {
   if (!t)
@@ -25,7 +25,7 @@ function g(t) {
   const o = e.getAttribute("data-layout");
   return o === "list" || o === "horizontal" ? "list" : "grid";
 }
-function L(t) {
+function _(t) {
   const e = M(t);
   if (!e || !("getAttribute" in e))
     return R;
@@ -36,12 +36,12 @@ function b(t, e, o) {
   if (!e || !("childNodes" in e))
     return !1;
   const i = e.childNodes().find(
-    (c) => "getType" in c && c.getType() === "text"
+    (l) => "getType" in l && l.getType() === "text"
   );
   return i ? (t.modifyHtml(i).setText(o), !0) : !1;
 }
 function x(t, e) {
-  return t && t.length > 0 ? t : e.length > 0 ? e : _();
+  return t && t.length > 0 ? t : e.length > 0 ? e : L();
 }
 function V(t) {
   const { currentNode: e, documentModifier: o } = t;
@@ -56,7 +56,7 @@ function W(t) {
     documentModifier: o,
     products: n,
     layout: i,
-    composition: c
+    composition: l
   } = t;
   if (!e || !("querySelector" in e))
     return;
@@ -68,9 +68,10 @@ function W(t) {
   const s = e.querySelector(k);
   if (!s)
     return;
-  const l = C(), a = x(n, l.recommendationProducts), m = c ?? L(e), S = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${T(a, r, {
+  const c = C(), a = x(n, c.recommendationProducts), f = l ?? _(e), S = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${T(a, r, {
     productsPerRow: u.mobileCardsInRow,
-    composition: m
+    composition: f,
+    filterList: c.filterList
   })}</table></td>`;
   o.modifyHtml(s).setInnerHtml(S), o.apply(new p("Updated mobile product rows"));
 }
@@ -80,7 +81,7 @@ function G(t) {
     documentModifier: o,
     afterRegenerate: n,
     products: i,
-    layout: c,
+    layout: l,
     composition: r
   } = t;
   if (!e || !("querySelector" in e))
@@ -88,53 +89,54 @@ function G(t) {
   const u = e.querySelector(q) ?? e.querySelector($);
   if (!u)
     return;
-  const s = C(), l = x(i, s.recommendationProducts), { cardsInRow: a } = s.recommendationConfigs, m = r ?? L(e), d = c ?? g(e), S = T(l, d, {
+  const s = C(), c = x(i, s.recommendationProducts), { cardsInRow: a } = s.recommendationConfigs, f = r ?? _(e), d = l ?? g(e), S = T(c, d, {
     productsPerRow: a,
-    composition: m
+    composition: f,
+    filterList: s.filterList
   });
   o.modifyHtml(u).setInnerHtml(S).apply(new p("Updated product")), W(t), n == null || n();
 }
 function I(t, e, o, n) {
-  const c = `0 ${Math.floor(o / 2)}px`;
+  const l = `0 ${Math.floor(o / 2)}px`;
   let r = !1;
   return n === "grid" ? Array.from(
     t.querySelectorAll(".attribute-cell")
   ).forEach((s) => {
-    e.modifyHtml(s).setStyle("padding", c), r = !0;
+    e.modifyHtml(s).setStyle("padding", l), r = !0;
   }) : Array.from(
     t.querySelectorAll(".product-card-wrapper")
   ).forEach((s) => {
-    const l = "parentNode" in s ? s.parentNode : null;
-    l && v(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
+    const c = "parentNode" in s ? s.parentNode : null;
+    c && v(c) && (e.modifyHtml(c).setStyle("padding", l), r = !0);
   }), r;
 }
 function O(t, e, o) {
   const n = `${o}px`, i = Array.from(t.querySelectorAll(".spacer"));
-  let c = !1;
+  let l = !1;
   return i.forEach((r) => {
-    e.modifyHtml(r).setStyle("height", n), c = !0;
-  }), c;
+    e.modifyHtml(r).setStyle("height", n), l = !0;
+  }), l;
 }
 function Y(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
   const n = E.getConfig(e), i = g(e);
-  let c = !1;
+  let l = !1;
   const r = e.querySelector(q);
   if (r) {
-    c = I(
+    l = I(
       r,
       o,
       n.columnSpacing,
       i
     );
-    const l = O(
+    const c = O(
       r,
       o,
       n.rowSpacing
     );
-    c = c || l;
+    l = l || c;
   }
   const u = e.querySelector(P);
   if (u) {
@@ -144,23 +146,23 @@ function Y(t) {
       n.mobileColumnSpacing,
       i
     );
-    c = c || s;
-    const l = O(
+    l = l || s;
+    const c = O(
       u,
       o,
       n.mobileRowSpacing
     );
-    c = c || l;
+    l = l || c;
   }
-  c && o.apply(new p("Reapply spacing after regeneration"));
+  l && o.apply(new p("Reapply spacing after regeneration"));
 }
 function re(t) {
-  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
+  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: l, composition: r } = t;
   e && G({
     currentNode: e,
     documentModifier: o,
     products: i,
-    layout: c,
+    layout: l,
     composition: r,
     afterRegenerate: () => {
       setTimeout(() => {
@@ -170,7 +172,7 @@ function re(t) {
   });
 }
 function ie(t, e) {
-  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ..._(e - t.length)];
+  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
 }
 function D() {
   const t = C(), { currencySettings: e } = t.recommendationConfigs, o = parseInt(e.decimalCount);
@@ -191,28 +193,28 @@ function A(t, e = "price") {
   });
 }
 function F(t) {
-  var c, r;
-  const e = D(), o = ((c = t.original_price) == null ? void 0 : c[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((r = t.price) == null ? void 0 : r[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = o > 0 ? Math.round((o - n) / o * 100) : 0;
+  var l, r;
+  const e = D(), o = ((l = t.original_price) == null ? void 0 : l[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((r = t.price) == null ? void 0 : r[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = o > 0 ? Math.round((o - n) / o * 100) : 0;
   return i > 0 ? `-${i}%` : "0%";
 }
 function H(t) {
-  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: c, omnibusDiscountEl: r } = t;
+  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: l, omnibusDiscountEl: r } = t;
   let u = !1;
   if (n && "querySelector" in n) {
-    const s = n.querySelector("strong"), l = A(o, "price");
-    b(e, s, l) && (u = !0);
+    const s = n.querySelector("strong") ?? null, c = A(o, "price");
+    b(e, s, c) && (u = !0);
   }
   if (i && "querySelector" in i) {
-    const s = i.querySelector("strong"), l = A(o, "original_price");
-    b(e, s, l) && (u = !0);
+    const s = i.querySelector("strong") ?? null, c = A(o, "original_price");
+    b(e, s, c) && (u = !0);
   }
-  if (c && "querySelector" in c) {
-    const s = c.querySelector(".omnibus-price-value"), l = A(o, "original_price");
-    b(e, s, l) && (u = !0);
+  if (l && "querySelector" in l) {
+    const s = l.querySelector(".omnibus-price-value") ?? null, c = A(o, "original_price");
+    b(e, s, c) && (u = !0);
   }
   if (r && "querySelector" in r) {
-    const s = r.querySelector(".omnibus-discount-value"), l = F(o);
-    b(e, s, l) && (u = !0);
+    const s = r.querySelector(".omnibus-discount-value") ?? null, c = F(o);
+    b(e, s, c) && (u = !0);
   }
   return u;
 }
@@ -222,33 +224,33 @@ function K(t) {
     product: o,
     imageEl: n,
     nameEl: i,
-    priceEl: c,
+    priceEl: l,
     oldPriceEl: r,
     omnibusPriceEl: u,
     omnibusDiscountEl: s,
-    buttonEl: l
+    buttonEl: c
   } = t;
   let a = !1;
   if (n && "querySelector" in n) {
-    const m = n.querySelector("img");
-    m && (e.modifyHtml(m).setAttribute("src", j(o.image_url)).setAttribute("alt", o.name), a = !0);
+    const f = n.querySelector("img");
+    f && (e.modifyHtml(f).setAttribute("src", j(o.image_url)).setAttribute("alt", o.name), a = !0);
     const d = n.querySelector("a");
     d && (e.modifyHtml(d).setAttribute("href", o.url), a = !0);
   }
   if (i && "querySelector" in i) {
-    const m = i.querySelector("strong");
-    b(e, m, o.name) && (a = !0);
+    const f = i.querySelector("strong") ?? null;
+    b(e, f, o.name) && (a = !0);
   }
   if (H({
     documentModifier: e,
     product: o,
-    priceEl: c,
+    priceEl: l,
     oldPriceEl: r,
     omnibusPriceEl: u,
     omnibusDiscountEl: s
-  }) && (a = !0), l && "querySelector" in l) {
-    const m = l.querySelector("a.es-button") || l.querySelector("a");
-    m && (e.modifyHtml(m).setAttribute("href", o.url), a = !0);
+  }) && (a = !0), c && "querySelector" in c) {
+    const f = c.querySelector("a.es-button") || c.querySelector("a");
+    f && (e.modifyHtml(f).setAttribute("href", o.url), a = !0);
   }
   return a;
 }
@@ -259,53 +261,53 @@ function w(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
-    `[esd-extension-block-id="${f.IMAGE}"]`
+    `[esd-extension-block-id="${m.IMAGE}"]`
   ), i = t.querySelectorAll(
-    `[esd-extension-block-id="${f.NAME}"]`
-  ), c = t.querySelectorAll(
-    `[esd-extension-block-id="${f.PRICE}"]`
+    `[esd-extension-block-id="${m.NAME}"]`
+  ), l = t.querySelectorAll(
+    `[esd-extension-block-id="${m.PRICE}"]`
   ), r = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OLD_PRICE}"]`
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
   ), u = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_PRICE}"]`
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
   ), s = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_DISCOUNT}"]`
-  ), l = t.querySelectorAll(
-    `[esd-extension-block-id="${f.BUTTON}"]`
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
+  ), c = t.querySelectorAll(
+    `[esd-extension-block-id="${m.BUTTON}"]`
   ), a = Math.min(n.length, o.length);
-  let m = !1;
+  let f = !1;
   for (let d = 0; d < a; d++) {
     const S = K({
       documentModifier: e,
       product: o[d],
       imageEl: n[d] ?? null,
       nameEl: i[d] ?? null,
-      priceEl: c[d] ?? null,
+      priceEl: l[d] ?? null,
       oldPriceEl: r[d] ?? null,
       omnibusPriceEl: u[d] ?? null,
       omnibusDiscountEl: s[d] ?? null,
-      buttonEl: l[d] ?? null
+      buttonEl: c[d] ?? null
     });
-    m = m || S;
+    f = f || S;
   }
-  return m;
+  return f;
 }
-function ce(t) {
+function le(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
   const i = U(e);
   if (!("querySelectorAll" in i) || i.querySelectorAll(
-    `[esd-extension-block-id="${f.IMAGE}"]`
+    `[esd-extension-block-id="${m.IMAGE}"]`
   ).length !== n.length)
     return !1;
   let r = w(i, o, n);
   const u = g(e), s = E.getConfig(e);
   if (u !== "list" && s.mobileLayoutEnabled && "querySelector" in e) {
-    const l = e.querySelector(P);
-    if (l) {
+    const c = e.querySelector(P);
+    if (c) {
       const a = w(
-        l,
+        c,
         o,
         n
       );
@@ -318,40 +320,40 @@ function N(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
-    `[esd-extension-block-id="${f.PRICE}"]`
+    `[esd-extension-block-id="${m.PRICE}"]`
   ), i = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OLD_PRICE}"]`
-  ), c = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_PRICE}"]`
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
+  ), l = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
   ), r = t.querySelectorAll(
-    `[esd-extension-block-id="${f.OMNIBUS_DISCOUNT}"]`
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
   ), u = Math.min(n.length, o.length);
   let s = !1;
-  for (let l = 0; l < u; l++)
+  for (let c = 0; c < u; c++)
     H({
       documentModifier: e,
-      product: o[l],
-      priceEl: n[l] ?? null,
-      oldPriceEl: i[l] ?? null,
-      omnibusPriceEl: c[l] ?? null,
-      omnibusDiscountEl: r[l] ?? null
+      product: o[c],
+      priceEl: n[c] ?? null,
+      oldPriceEl: i[c] ?? null,
+      omnibusPriceEl: l[c] ?? null,
+      omnibusDiscountEl: r[c] ?? null
     }) && (s = !0);
   return s;
 }
-function le(t) {
+function ce(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
   const i = C().recommendationProducts;
   if (i.length === 0)
     return !1;
-  const c = U(e);
-  let r = N(c, o, i);
+  const l = U(e);
+  let r = N(l, o, i);
   const u = g(e), s = E.getConfig(e);
   if (u !== "list" && s.mobileLayoutEnabled && "querySelector" in e) {
-    const l = e.querySelector(P);
-    if (l) {
-      const a = N(l, o, i);
+    const c = e.querySelector(P);
+    if (c) {
+      const a = N(c, o, i);
       r = r || a;
     }
   }
@@ -361,23 +363,23 @@ function se(t) {
   const { currentNode: e, documentModifier: o, currency: n } = t, i = M(e);
   if (!i)
     return;
-  const c = n.alignment === "before" ? "0" : "1", r = (u, s) => {
+  const l = n.alignment === "before" ? "0" : "1", r = (u, s) => {
     o.modifyHtml(i).setAttribute(u, s);
   };
-  r(y.CURRENCY, n.code), r(y.SYMBOL, n.symbol), r(y.ALIGNMENT, c), r(y.THOUSAND_SEPARATOR, n.thousandSeparator), r(y.DECIMAL_SEPARATOR, n.decimalSeparator), r(y.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
+  r(y.CURRENCY, n.code), r(y.SYMBOL, n.symbol), r(y.ALIGNMENT, l), r(y.THOUSAND_SEPARATOR, n.thousandSeparator), r(y.DECIMAL_SEPARATOR, n.decimalSeparator), r(y.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
 }
 export {
   ie as adjustProductsToSize,
   A as formatProductPrice,
   M as getBlockElement,
-  L as getCardComposition,
+  _ as getCardComposition,
   g as getCurrentLayout,
   Y as reapplySpacing,
   W as regenerateMobileProductRows,
   G as regenerateProductRows,
   re as regenerateProductRowsWithStyles,
   se as setCurrencyAttributes,
-  le as updatePricesInPlace,
-  ce as updateProductContentInPlace,
+  ce as updatePricesInPlace,
+  le as updateProductContentInPlace,
   K as updateSingleProductContent
 };

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/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}">