@akinon/pz-theme 2.0.143-rc.0 → 2.0.143

package/src/components/with-designer-features.tsx

@@ -15,6 +15,10 @@ import {
   HOVER_SCOPE_ATTRIBUTE,
   REVEAL_ON_HOVER_ATTRIBUTE
 } from '../utils/property-switches';
+import {
+  HIDE_IN_CARD_VIEW_ATTRIBUTE,
+  HIDE_IN_CARD_VIEW_PROPERTY
+} from '../utils/card-media';
 
 /** Elements that already act on Enter/Space themselves. */
 export const NATIVE_KEYBOARD_CONTROLS =
@@ -159,6 +163,17 @@ export function WithDesignerFeatures({
 
   // In designer mode, keep hidden blocks mounted (prevents remount-driven side effects)
   // but visually hide them.
+  // A part of a card that one of the listing's grid views leaves out — the
+  // Product Card's caption in the picture-only archive (utils/card-media).
+  // On the wrapper, which carries the part's box, so nothing of it remains.
+  const hideInCardViewRaw = getResponsiveValue(
+    block.properties?.[HIDE_IN_CARD_VIEW_PROPERTY],
+    currentBreakpoint,
+    ''
+  );
+  const hideInCardView =
+    typeof hideInCardViewRaw === 'string' ? hideInCardViewRaw.trim() : '';
+
   const mergedStyle: React.CSSProperties = {
     ...(style || {}),
     ...(isDesigner && block.hidden ? { display: 'none' } : null),
@@ -173,6 +188,9 @@ export function WithDesignerFeatures({
       data-block-id={block.styleSourceId || block.id}
       {...(block.hoverScope ? { [HOVER_SCOPE_ATTRIBUTE]: '' } : null)}
       {...(block.revealOnHover ? { [REVEAL_ON_HOVER_ATTRIBUTE]: '' } : null)}
+      {...(hideInCardView
+        ? { [HIDE_IN_CARD_VIEW_ATTRIBUTE]: hideInCardView }
+        : null)}
       className={clsx(
         'relative',
         className,

package/src/theme-block.tsx

@@ -14,6 +14,7 @@ import {
   isPublishWindowVisible
 } from './utils';
 import { devWarn } from './utils/dev-warn';
+import type { CardsSliderSettings, CardViewSettings } from './utils/card-media';
 
 /**
  * Narrows what a designer typed into something usable as a document-wide id.
@@ -70,6 +71,16 @@ export interface Block {
    */
   revealOnHover?: boolean;
   hoverScope?: boolean;
+  /**
+   * Written by the same pass, never authored (utils/card-media.ts): the card's
+   * picture zooms in on hover, and this repeat lays the cards it holds out as
+   * a slider. Absent on every block no setting reaches, which is every block
+   * of an unconfigured list.
+   */
+  cardZoom?: boolean;
+  cardsSlider?: CardsSliderSettings;
+  /** The listing's grid view this repeat is drawn in, and its toggles when offered. */
+  cardsViews?: CardViewSettings;
   /**
    * Properties this clone resolved for itself from its row. One generated rule
    * serves every clone, so these are the values that have to be inlined on the

package/src/theme-placeholder-wrapper.tsx

@@ -36,7 +36,9 @@ import {
 import { isPublishWindowVisible } from './utils/publish-window';
 import {
   collectionBindingKey,
+  collectionPreviewWidget,
   fetchDesignerLiveRows,
+  fetchDesignerPreviewRows,
   hangDesignerDataSource,
   liveRowsEntryKey,
   LiveRowsStore,
@@ -799,7 +801,8 @@ export default function ThemePlaceholderWrapper({
               dataSource: hangDesignerDataSource(
                 section,
                 dataSource || section.dataSource,
-                liveRowsRef.current
+                liveRowsRef.current,
+                { previous: section.dataSource }
               )
             };
           }
@@ -814,11 +817,45 @@ export default function ThemePlaceholderWrapper({
   // preview (whose blob path writes no live rows), or the server could not
   // resolve them — asks the storefront for them once. Until they arrive the
   // picked snapshot stays on the canvas: it is the same collection.
+  //
+  // An unsaved pick asks for its binding's preview widget instead, once per
+  // binding, when the editor prepared one: those are the rows the section
+  // will show once published, where the snapshot is Omnitron's catalogue.
   useEffect(() => {
     if (!isDesigner) return;
 
     sections.forEach((section) => {
-      if (section.dataSourceSaved !== true || !section.id) return;
+      if (!section.id) return;
+
+      if (section.dataSourceSaved !== true) {
+        // The editor's record, not the one the section is drawn with: while
+        // its preview rows are asked for, the section keeps the source it
+        // showed before (see hangDesignerDataSource).
+        const record =
+          dataSources?.find(
+            (ds: { id?: string }) => ds.id === section.dataSourceId
+          ) ?? section.dataSource;
+        const previewWidget = collectionPreviewWidget(record);
+        if (
+          !previewWidget ||
+          liveRowsRef.current.has(previewWidget) ||
+          liveRowsAttemptedRef.current.has(previewWidget)
+        ) {
+          return;
+        }
+
+        liveRowsAttemptedRef.current.add(previewWidget);
+
+        fetchDesignerPreviewRows(previewWidget).then((answer) => {
+          if (!liveRowsMountedRef.current) return;
+
+          // Held as `null` when it gave nothing: the section stops holding
+          // its previous rows and falls back to the snapshot.
+          liveRowsRef.current.set(previewWidget, answer);
+          setLiveRowsRevision((revision) => revision + 1);
+        });
+        return;
+      }
 
       const bindingKey = collectionBindingKey(section.dataSource);
       if (!bindingKey) return;
@@ -844,8 +881,9 @@ export default function ThemePlaceholderWrapper({
       });
     });
     // `sections` already follows `dataSources`: every change to the records is
-    // hung over the sections before this runs.
-  }, [sections, isDesigner]);
+    // hung over the sections before this runs — except a record held back
+    // while its preview rows are asked for, which is read from `dataSources`.
+  }, [sections, dataSources, isDesigner]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -940,7 +978,7 @@ export default function ThemePlaceholderWrapper({
 
                 // In editor mode: Complete override with theme editor's data
                 // This allows unsaved sections to render with editor's product data
-                setSections(() => {
+                setSections((previousSections) => {
                   return placeholder.sections.map((incomingSection: any) => {
                     let dataSource = null;
                     if (incomingSection.dataSourceId && theme.dataSources) {
@@ -963,11 +1001,18 @@ export default function ThemePlaceholderWrapper({
                         ? { ...incomingSection.properties }
                         : {},
                       // Live rows only for a pick the editor reports as
-                      // saved; otherwise the picked snapshot.
+                      // saved; otherwise the preview widget's rows or the
+                      // picked snapshot — and what the section showed so
+                      // far while the preview widget is asked.
                       dataSource: hangDesignerDataSource(
                         incomingSection,
                         dataSource || null,
-                        liveRowsRef.current
+                        liveRowsRef.current,
+                        {
+                          previous: previousSections.find(
+                            (section) => section.id === incomingSection.id
+                          )?.dataSource
+                        }
                       )
                     };
                   });