@useinsider/guido 2.1.0-beta.7ae6573 → 2.1.0-beta.7bbedc6

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,6 +1,6 @@
-import { DEFAULT_ROW_SPACING as n, DEFAULT_COLUMN_SPACING as s, DEFAULT_CARDS_IN_ROW as R } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as U } from "./selectors.js";
-const I = {
+import { DEFAULT_ROW_SPACING as U, DEFAULT_COLUMN_SPACING as I, DEFAULT_MOBILE_CARDS_IN_ROW as n, DEFAULT_CARDS_IN_ROW as s } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as R } from "./selectors.js";
+const O = {
   code: "USD",
   symbol: "USD",
   alignment: "after",
@@ -10,56 +10,57 @@ const I = {
 }, i = {
   textBefore: "",
   textAfter: ""
-}, O = {
+}, C = {
   textBefore: "",
   textAfter: ""
-}, C = [
+}, D = [
   t,
   e,
   o,
-  T,
   _,
+  T,
   r,
-  U
-], D = {
+  R
+], A = {
   [t]: !0,
   [e]: !0,
-  [T]: !0,
+  [_]: !0,
   [o]: !0,
-  [_]: !1,
+  [T]: !1,
   [r]: !1,
-  [U]: !0
-}, a = {
+  [R]: !0
+}, E = {
   // Settings
   strategy: "mostPopular",
   productIds: [],
   size: "6",
   shuffleProducts: !1,
   language: "en_US",
-  currency: I,
+  currency: O,
   filters: [],
   // Layout
   layout: "grid",
-  cardsInRow: R,
-  columnSpacing: s,
-  rowSpacing: n,
+  cardsInRow: s,
+  mobileCardsInRow: n,
+  columnSpacing: I,
+  rowSpacing: U,
   // Composition
-  composition: C,
-  visibility: D,
+  composition: D,
+  visibility: A,
   // Element settings
   omnibusPrice: i,
-  omnibusDiscount: O,
+  omnibusDiscount: C,
   textTrimming: !1,
   // Meta
   configVersion: 1,
   recommendationId: 0
-}, E = 1;
+}, N = 1;
 export {
-  E as CURRENT_CONFIG_VERSION,
-  C as DEFAULT_COMPOSITION,
-  I as DEFAULT_CURRENCY,
-  a as DEFAULT_NODE_CONFIG,
-  O as DEFAULT_OMNIBUS_DISCOUNT,
+  N as CURRENT_CONFIG_VERSION,
+  D as DEFAULT_COMPOSITION,
+  O as DEFAULT_CURRENCY,
+  E as DEFAULT_NODE_CONFIG,
+  C as DEFAULT_OMNIBUS_DISCOUNT,
   i as DEFAULT_OMNIBUS_PRICE,
-  D as DEFAULT_VISIBILITY
+  A as DEFAULT_VISIBILITY
 };

package/dist/extensions/Blocks/Recommendation/constants/layout.js

@@ -4,17 +4,19 @@ const _ = {
 }, o = [
   { icon: "grid-orientation", value: _.GRID },
   { icon: "list-orientation", value: _.LIST }
-], t = 3, n = 3, A = 9, T = 4, c = 10, s = 20, O = 0, S = 50, I = 5;
+], t = 3, n = 3, A = 9, O = 4, R = 1, T = 2, c = 10, s = 20, I = 0, S = 50, P = 5;
 export {
   n as DEFAULT_CARDS_IN_ROW,
   c as DEFAULT_COLUMN_SPACING,
+  R as DEFAULT_MOBILE_CARDS_IN_ROW,
   t as DEFAULT_PRODUCTS_PER_ROW,
   s as DEFAULT_ROW_SPACING,
   o as LAYOUT_OPTIONS,
   _ as LAYOUT_VALUES,
-  T as MAX_PRODUCTS_PER_ROW,
+  T as MAX_MOBILE_PRODUCTS_PER_ROW,
+  O as MAX_PRODUCTS_PER_ROW,
   A as MAX_PRODUCT_COUNT,
   S as MAX_SPACING,
-  O as MIN_SPACING,
-  I as SPACING_STEP
+  I as MIN_SPACING,
+  P as SPACING_STEP
 };

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,19 +1,21 @@
-const c = ".ins-recommendation-product-container", T = {
+const c = ".ins-recommendation-product-container", n = ".ins-recommendation-desktop-container", o = ".ins-recommendation-mobile-container", T = {
   CURRENCY: "currency",
   SYMBOL: "currency-symbol",
   ALIGNMENT: "currency-alignment",
   THOUSAND_SEPARATOR: "currency-thousand-separator",
   DECIMAL_SEPARATOR: "currency-decimal-separator",
   DECIMAL_COUNT: "currency-decimal-count"
-}, r = "productImage", n = "productName", o = "productPrice", t = "productOldPrice", R = "productOmnibusPrice", O = "productOmnibusDiscount", _ = "productButton";
+}, t = "productImage", r = "productName", R = "productPrice", e = "productOldPrice", O = "productOmnibusPrice", _ = "productOmnibusDiscount", C = "productButton";
 export {
-  _ as ATTR_PRODUCT_BUTTON,
-  r as ATTR_PRODUCT_IMAGE,
-  n as ATTR_PRODUCT_NAME,
-  t as ATTR_PRODUCT_OLD_PRICE,
-  O as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  R as ATTR_PRODUCT_OMNIBUS_PRICE,
-  o as ATTR_PRODUCT_PRICE,
+  C as ATTR_PRODUCT_BUTTON,
+  t as ATTR_PRODUCT_IMAGE,
+  r as ATTR_PRODUCT_NAME,
+  e as ATTR_PRODUCT_OLD_PRICE,
+  _ as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  O as ATTR_PRODUCT_OMNIBUS_PRICE,
+  R as ATTR_PRODUCT_PRICE,
   c as CONTAINER_SELECTOR,
-  T as CURRENCY_ATTR
+  T as CURRENCY_ATTR,
+  n as DESKTOP_CONTAINER_SELECTOR,
+  o as MOBILE_CONTAINER_SELECTOR
 };

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

@@ -8,16 +8,16 @@ import { AlgorithmControl as p } from "./algorithm.js";
 import { ALGORITHM_CONTROL_ID as W } from "./algorithm.js";
 import { CurrencyControl as g } from "./currency.js";
 import { CURRENCY_CONTROL_ID as H } from "./currency.js";
-import { FiltersControl as y } from "./filters.js";
+import { FiltersControl as R } from "./filters.js";
 import { FILTERS_CONTROL_ID as j } from "./filters.js";
-import { LocaleControl as R } from "./locale.js";
+import { LocaleControl as y } from "./locale.js";
 import { LOCALE_CONTROL_ID as K } from "./locale.js";
 import { ProductLayoutControl as _ } from "./productLayout.js";
 import { PRODUCT_LAYOUT_CONTROL_ID as J } from "./productLayout.js";
 import { ShuffleControl as N } from "./shuffle.js";
 import { SHUFFLE_CONTROL_ID as X } from "./shuffle.js";
 import { regenerateProductRowsWithStyles as b, getBlockElement as P, updateProductContentInPlace as I } from "./utils.js";
-import { formatProductPrice as tt, getCardComposition as et, getCurrentLayout as ot, reapplySpacing as rt, regenerateProductRows as nt, setCurrencyAttributes as it, updatePricesInPlace as st, updateSingleProductContent as ct } from "./utils.js";
+import { formatProductPrice as tt, getCardComposition as et, getCurrentLayout as ot, reapplySpacing as rt, regenerateMobileProductRows as nt, regenerateProductRows as it, setCurrencyAttributes as st, updatePricesInPlace as ct, updateSingleProductContent as at } from "./utils.js";
 import { useDebounceFn as l } from "../../../../../node_modules/@vueuse/shared/index.js";
 const T = "recommendation-id", S = "ui-elements-recommendation-block";
 class $ extends h {
@@ -59,7 +59,7 @@ class $ extends h {
     return S;
   }
   getTemplate() {
-    return this.algorithmControl = new p(), this.localeControl = new R(), this.currencyControl = new g(), this.productLayoutControl = new _(), this.filtersControl = new y(), this.shuffleControl = new N(), `
+    return this.algorithmControl = new p(), this.localeControl = new y(), this.currencyControl = new g(), this.productLayoutControl = new _(), this.filtersControl = new R(), this.shuffleControl = new N(), `
             <div class="recommendation-controls-container">
                 ${this.algorithmControl.getTemplate()}
                 ${this.localeControl.getTemplate()}
@@ -227,9 +227,9 @@ export {
   H as CURRENCY_CONTROL_ID,
   g as CurrencyControl,
   j as FILTERS_CONTROL_ID,
-  y as FiltersControl,
+  R as FiltersControl,
   K as LOCALE_CONTROL_ID,
-  R as LocaleControl,
+  y as LocaleControl,
   J as PRODUCT_LAYOUT_CONTROL_ID,
   _ as ProductLayoutControl,
   $ as RecommendationBlockControl,
@@ -240,10 +240,11 @@ export {
   et as getCardComposition,
   ot as getCurrentLayout,
   rt as reapplySpacing,
-  nt as regenerateProductRows,
+  nt as regenerateMobileProductRows,
+  it as regenerateProductRows,
   b as regenerateProductRowsWithStyles,
-  it as setCurrencyAttributes,
-  st as updatePricesInPlace,
+  st as setCurrencyAttributes,
+  ct as updatePricesInPlace,
   I as updateProductContentInPlace,
-  ct as updateSingleProductContent
+  at as updateSingleProductContent
 };

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

@@ -1,45 +1,60 @@
-var d = Object.defineProperty;
-var a = (i, e, t) => e in i ? d(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var n = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
-import { CommonControl as c } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as _, MAX_PRODUCTS_PER_ROW as h } from "../../constants/layout.js";
-import { RecommendationConfigService as r } from "../../services/configService.js";
-import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";
-import { getCurrentLayout as C, regenerateProductRowsWithStyles as p } from "./utils.js";
-import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
-const l = "recommendation-product-layout-control", o = {
+var _ = Object.defineProperty;
+var c = (i, o, t) => o in i ? _(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
+var d = (i, o, t) => c(i, typeof o != "symbol" ? o + "" : o, t);
+import { EditorStatePropertyType as u, PreviewDeviceMode as R } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as h } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as C, MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as m } from "../../constants/layout.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
+import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
+import { ensureMobileCssRulesExist as O } from "../mobileLayout/cssRules.js";
+import { getCurrentLayout as I, regenerateMobileProductRows as g, regenerateProductRowsWithStyles as b } from "./utils.js";
+import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
+const P = "recommendation-product-layout-control", e = {
   PRODUCT_COUNT: "size",
   PRODUCT_IN_ROW: "cardsInRow",
-  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel"
+  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
+  MOBILE_CARDS_IN_ROW: "mobileCardsInRow",
+  MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel"
 };
-class I extends c {
+class S extends h {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    n(this, "store", R());
-    n(this, "storeUnsubscription", () => {
+    d(this, "store", l());
+    d(this, "storeUnsubscription", () => {
     });
-    n(this, "_debouncedRegenerateProductRows", m(() => {
+    d(this, "_debouncedRegenerateProductRows", N(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return l;
+    return P;
   }
   getTemplate() {
     return `
             <div class="product-layout-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Number of Products" }),
-      this._GuCounter({ name: o.PRODUCT_COUNT, maxValue: _ }),
-      this._GuLabel({ text: "Products in One Row", name: o.PRODUCT_IN_ROW_LABEL }),
-      this._GuCounter({ name: o.PRODUCT_IN_ROW, maxValue: h })
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: C }),
+      this._GuLabel({
+        text: "Products in One Row on Desktop",
+        name: e.PRODUCT_IN_ROW_LABEL
+      }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
+      this._GuLabel({
+        text: "Products in One Row on Mobile",
+        name: e.MOBILE_CARDS_IN_ROW_LABEL
+      }),
+      this._GuCounter({
+        name: e.MOBILE_CARDS_IN_ROW,
+        maxValue: m
+      })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
+    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._subscribeToEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
@@ -48,23 +63,45 @@ class I extends c {
     this.storeUnsubscription();
   }
   _setFormValues() {
-    const t = r.getConfig(this.currentNode);
+    const t = s.getConfig(this.currentNode);
     this.api.updateValues({
-      [o.PRODUCT_COUNT]: t.size,
-      [o.PRODUCT_IN_ROW]: t.cardsInRow
+      [e.PRODUCT_COUNT]: t.size,
+      [e.PRODUCT_IN_ROW]: t.cardsInRow,
+      [e.MOBILE_CARDS_IN_ROW]: t.mobileCardsInRow
     });
   }
   /**
-   * Updates "Products in One Row" visibility based on layout orientation
-   * This control is hidden for list layout (products always take full width)
-   * Reads from node config first, falls back to DOM
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
+   */
+  _isMobileMode() {
+    return this.api.getEditorState()[u.previewDeviceMode] === R.MOBILE;
+  }
+  /**
+   * Updates counter visibility based on layout orientation and editor mode.
+   * - List layout: hide both counters (products always full-width)
+   * - Grid + desktop mode: show desktop counter, hide mobile counter
+   * - Grid + mobile mode: show mobile counter, hide desktop counter
    */
   _updateProductsInRowVisibility() {
-    const u = (r.getConfig(this.currentNode).layout || C(this.currentNode)) === "grid";
-    this.api.setVisibility(o.PRODUCT_IN_ROW, u), this.api.setVisibility(o.PRODUCT_IN_ROW_LABEL, u);
+    const r = (s.getConfig(this.currentNode).layout || I(this.currentNode)) === "grid", n = this._isMobileMode();
+    this.api.setVisibility(e.PRODUCT_IN_ROW, r && !n), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, r && !n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, r && n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, r && n);
+  }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * When the user switches between desktop/mobile preview, toggles
+   * which "Products in One Row" counter is visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      u.previewDeviceMode,
+      () => {
+        this._updateProductsInRowVisibility();
+      }
+    );
   }
   _onProductCountChange(t) {
-    this.currentNode && (r.updateConfig(
+    this.currentNode && (s.updateConfig(
       this.api,
       this.currentNode,
       { size: t },
@@ -72,24 +109,37 @@ class I extends c {
     ), this.store.patchCurrentBlockConfig({ size: t }), this._debouncedRegenerateProductRows());
   }
   _onProductsInRowChange(t) {
-    this.currentNode && (r.updateConfig(
+    this.currentNode && (s.updateConfig(
       this.api,
       this.currentNode,
       { cardsInRow: t },
       `Changed products per row to ${t}`
     ), this.store.patchCurrentBlockConfig({ cardsInRow: t }), this._debouncedRegenerateProductRows());
   }
+  _onMobileCardsInRowChange(t) {
+    this.currentNode && (s.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileCardsInRow: t },
+      `Changed mobile products per row to ${t}`
+    ), O(this.api), g({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier()
+    }));
+  }
   _regenerateProductRows() {
-    p({
+    b({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier()
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(o.PRODUCT_COUNT, (t) => {
+    this.api.onValueChanged(e.PRODUCT_COUNT, (t) => {
       this._onProductCountChange(t.toString());
-    }), this.api.onValueChanged(o.PRODUCT_IN_ROW, (t) => {
+    }), this.api.onValueChanged(e.PRODUCT_IN_ROW, (t) => {
       this._onProductsInRowChange(Number(t));
+    }), this.api.onValueChanged(e.MOBILE_CARDS_IN_ROW, (t) => {
+      this._onMobileCardsInRowChange(Number(t));
     });
   }
   /**
@@ -99,12 +149,12 @@ class I extends c {
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const s = this.store.recommendationConfigs.orientation;
-      s !== t && (t = s, this._updateProductsInRowVisibility());
+      const a = this.store.recommendationConfigs.orientation;
+      a !== t && (t = a, this._updateProductsInRowVisibility());
     });
   }
 }
 export {
-  l as PRODUCT_LAYOUT_CONTROL_ID,
-  I as ProductLayoutControl
+  P as PRODUCT_LAYOUT_CONTROL_ID,
+  S as ProductLayoutControl
 };