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

package/src/blocks/listing-context.ts

@@ -167,8 +167,11 @@ export const resolveListingContext = (
   const source = findListingSource(context);
   if (!source) return null;
 
-  const products = toArray(source.products)
-    .map((entry, index) => normalizeListingProduct(entry, index, options))
+  const rows = toArray(source.products);
+  const products = rows
+    .map((entry, index) =>
+      normalizeListingProduct(entry, index, { ...options, rows })
+    )
     .filter((product): product is ListingProduct => product !== null);
 
   const pagination = toRecord(source.pagination);

package/src/blocks/listing-row.ts

@@ -12,6 +12,7 @@
  * module and the iterator is walked on both sides of hydration.
  */
 
+import { resolveSwatchColor } from '../utils/swatch-colors';
 import { formatMoney, MoneyStyleOptions, parseAmount } from './commerce-format';
 
 export type { MoneyStyleOptions };
@@ -60,7 +61,8 @@ export interface ListingProductColor {
   /**
    * Hex a circular swatch can be filled with. Commerce sends the colour as a
    * bare value ("kirmizi") and no colour at all, so this is only present when
-   * the author mapped that value in `lookups.swatch`.
+   * the author mapped that value in `lookups.swatch`, or the brand resolved it
+   * through its registered swatch colours (utils/swatch-colors).
    */
   color?: string;
 }
@@ -163,6 +165,8 @@ export interface ListingBasketOffer {
   price?: string;
 }
 
+export type ListingPriceNote = 'lowest' | 'advantageous';
+
 export interface ListingProduct {
   key: string;
   /**
@@ -214,6 +218,16 @@ export interface ListingProduct {
    * the payload would move published cards.
    */
   discountPercentFromPrevious?: number;
+  /**
+   * Which price-history caption a discounted row may carry (EU Omnibus; the
+   * listing's "Son 10 günün en düşük fiyatı"). `lowest`: the selling price is
+   * the lowest of the period — no `previousPrice`, or one at or above it.
+   * `advantageous`: commerce's price-history figure is BELOW the selling
+   * price, so a "lowest price" claim would be false and the listing says
+   * "Avantajlı Fiyat" instead. Absent on a row with no discount. Which words
+   * are printed is the card's: it binds a text to each value.
+   */
+  priceNote?: ListingPriceNote;
   /**
    * A raw commerce value resolved through the author's lookup table (see
    * `ListingBadgeLookup`). Absent when no table was authored, when the product
@@ -245,6 +259,12 @@ export interface ListingLocalizationOptions {
    * row stays absent, which is the shape the row has always had.
    */
   lookups?: ListingValueLookups;
+  /**
+   * The list's rows as commerce sent them, for a brand's swatch colours that
+   * read a colour off the row's neighbours (utils/swatch-colors). Absent = the
+   * row alone.
+   */
+  rows?: unknown[];
 }
 
 
@@ -511,7 +531,8 @@ const isColorAttributeKey = (key: string): boolean => {
 
 const normalizeProductColors = (
   product: UnknownRecord,
-  swatch?: Record<string, string>
+  swatch?: Record<string, string>,
+  listRows?: unknown[]
 ): ListingProductColor[] | undefined => {
   const groups = toArray(toRecord(product.extra_data).variants);
   // A known key wins over the loose suffix match: a payload carrying both
@@ -528,6 +549,13 @@ const normalizeProductColors = (
 
   if (!group) return undefined;
 
+  const rows = listRows
+    ? listRows.filter(
+        (row): row is UnknownRecord =>
+          Boolean(row) && typeof row === 'object' && !Array.isArray(row)
+      )
+    : [product];
+
   // Reshaped once rather than per option, so this table gets the same
   // case-insensitive matching the badge table gets.
   const swatchEntries = swatch
@@ -557,7 +585,17 @@ const normalizeProductColors = (
       // (GANT's `integration_renk` group) carry the code as the option's LABEL
       // and no value at all, so the label is the key there — the same string
       // the swatch table is authored against.
-      const hex = resolveLookupEntry(swatchEntries, value || label)?.color;
+      const hex =
+        resolveLookupEntry(swatchEntries, value || label)?.color ??
+        // Nothing authored for this colour: the brand's own resolution, the
+        // one its listing paints with, when it registered one.
+        resolveSwatchColor({
+          key: value || label,
+          label,
+          product,
+          variant,
+          rows
+        });
 
       return {
         label,
@@ -588,6 +626,23 @@ const readInStock = (product: UnknownRecord): boolean | undefined => {
   return undefined;
 };
 
+/**
+ * The listing's price rule (the old storefront's SHOP-88144, shared by its
+ * product item, PDP and basket): only a discounted product carries a caption,
+ * and it may only claim the lowest price when commerce's price-history figure
+ * is not below the selling price.
+ */
+const readPriceNote = (
+  hasDiscount: boolean,
+  price: number | null,
+  previous: number | null
+): ListingPriceNote | undefined => {
+  if (!hasDiscount) return undefined;
+  return price !== null && previous !== null && price > previous
+    ? 'advantageous'
+    : 'lowest';
+};
+
 const normalizeProduct = (
   entry: unknown,
   index: number,
@@ -631,7 +686,11 @@ const normalizeProduct = (
   const rawPreviousPrice = toRecord(product.price_extra_field).previous_price;
   const numericPrevious = parsePriceValue(rawPreviousPrice);
   const numericPk = Number(product.pk);
-  const colors = normalizeProductColors(product, options.lookups?.swatch);
+  const colors = normalizeProductColors(
+    product,
+    options.lookups?.swatch,
+    options.rows
+  );
   const attributes = normalizeProductAttributes(product);
   const percentFromRetail = percentOff(numericRetail, numericPrice);
 
@@ -663,6 +722,7 @@ const normalizeProduct = (
     discountPercent: percentFromRetail,
     discountPercentFromRetail: percentFromRetail,
     discountPercentFromPrevious: percentOff(numericPrevious, numericPrice),
+    priceNote: readPriceNote(hasDiscount, numericPrice, numericPrevious),
     inStock: readInStock(product),
     attributes,
     badge: resolveBadge(attributes, options.lookups?.badge),

package/src/blocks/product-grid-block.tsx

@@ -12,6 +12,13 @@ import {
   TABLET_MEDIA_QUERY_COMPACT
 } from '../utils/breakpoints';
 import { neutralizeStyleTagBreakout } from '../utils/css-safety';
+import {
+  resolveOwnCardsSlider,
+  resolveOwnCardZoom
+} from '../utils/property-switches';
+import { CardListSlider, readListGap } from '../components/card-list-slider';
+import { postBlockSelection } from '../hooks/use-designer-features';
+import { CardZoom } from '../components/card-zoom';
 import ThemeBlock, { Block } from '../theme-block';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -284,13 +291,18 @@ const readOption = <T extends string>(
  * so a published grid renders exactly what it rendered before.
  *
  * Parts: list, card, image, name, price, sale-price, list-price, badge,
- * density, density-label, density-option, density-icon, insert, empty.
+ * density, density-label, density-option, density-icon, insert, empty,
+ * slider, slider-header, slider-arrow.
  * Properties: columnsDesktop, columnsMobile, limit, showName, nameLines,
  * imageRatio, imageFit, showPrice, showRetailPrice, showDiscountBadge,
  * discountBadgeTemplate, badgePosition, decimals, currencyDisplay,
  * currencyText, currencyPosition, showDensitySwitcher, densityOptions,
  * densityStyle, densityPosition, densityLabel, densityAriaLabel,
- * previewEmptyState, badgeAttribute, badgeMap, swatchMap.
+ * previewEmptyState, badgeAttribute, badgeMap, swatchMap, cardsSlider,
+ * cardsSliderShowTitle, cardsSliderTitle, cardsSliderTitleColor,
+ * cardsSliderTitleSize, cardsSliderTitleWeight, cardsSliderTitleFont,
+ * cardsSliderTitleTransform, cardsPerView, cardsPerViewMobile,
+ * cardsSliderArrows, cardImageHoverZoom.
  * Child properties (on a `grid-insertion` child): insertPosition,
  * insertColumnSpan, insertRowSpan, insertPages.
  */
@@ -436,6 +448,15 @@ const ProductGridBlock = ({
   const badgePosition = String(
     getResponsiveValue(block.properties?.badgePosition, currentBreakpoint, 'inline')
   );
+  // The grid's "Cards:" slider and zoom (ZERO-5173). The slider is the grid's
+  // own layout, so it is read here; the zoom reaches a designer-authored card
+  // through the property-switch pass, and the built-in card, drawn here,
+  // reads it off the grid directly.
+  const cardsSlider = resolveOwnCardsSlider(
+    block.properties,
+    currentBreakpoint
+  );
+  const builtInZoom = resolveOwnCardZoom(block.properties, currentBreakpoint);
 
   const showDensitySwitcher = readToggle(
     block.properties?.showDensitySwitcher,
@@ -741,7 +762,29 @@ const ProductGridBlock = ({
             : null)
         }}
       >
-        {product.image ? (
+        {product.image && builtInZoom ? (
+          <CardZoom
+            attributes={{
+              'data-product-card-image': '',
+              ...partAttrs('image')
+            }}
+            style={
+              imageRatio !== 'auto' ? { aspectRatio: imageRatio } : undefined
+            }
+          >
+            <img
+              src={product.image}
+              alt={product.name}
+              loading="lazy"
+              style={{
+                width: '100%',
+                height: imageRatio !== 'auto' ? '100%' : 'auto',
+                display: 'block',
+                objectFit: imageFit as React.CSSProperties['objectFit']
+              }}
+            />
+          </CardZoom>
+        ) : product.image ? (
           <img
             src={product.image}
             alt={product.name}
@@ -839,6 +882,43 @@ const ProductGridBlock = ({
       interleaveCells(builtInCards, insertionTiles, placedInsertions)
     );
 
+  // ZERO-5173: with the slider on, the same cards — built-in or authored, and
+  // any merchandising tile among them — go into one sliding row instead of
+  // the grid. The column template, the tiles' cell pins and the density
+  // switcher belong to the grid; the row counts its own cards in view per side
+  // of the 1024px line, keeps the gap the grid was authored with, and draws
+  // the grid's slider title beside its arrows.
+  if (cardsSlider) {
+    return (
+      <div
+        data-product-grid=""
+        data-product-grid-id={gridId}
+        data-product-grid-slider=""
+      >
+        <CardListSlider
+          sliderId={`grid-${gridId}`}
+          settings={cardsSlider}
+          gap={readListGap(block.styles?.['list/gap'])}
+          defaultGap="var(--product-grid-gap, 16px)"
+          isDesigner={isDesigner}
+          currentBreakpoint={currentBreakpoint}
+          trackAttributes={partAttrs('list')}
+          onTitleSelect={() =>
+            postBlockSelection({
+              placeholderId,
+              sectionId,
+              blockId: block.id,
+              blockType: block.type,
+              blockLabel: block.label
+            })
+          }
+        >
+          {gridChildren}
+        </CardListSlider>
+      </div>
+    );
+  }
+
   const grid = (
     <div
       data-product-grid=""

package/src/components/card-list-slider.tsx

@@ -0,0 +1,374 @@
+'use client';
+
+import React from 'react';
+
+import { MOBILE_MEDIA_QUERY_COMPACT } from '../utils/breakpoints';
+import type { CardsSliderSettings } from '../utils/card-media';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
+import { partAttrs } from '../utils/part-styles';
+
+/**
+ * A list of product cards as one sliding row (ZERO-5173) — what the product
+ * grid and the Product Cards section draw once their slider is on.
+ *
+ * Modelled on the GANT rail ("Sizin için seçtiklerimiz", the posts slider
+ * with its arrows top right): a row above the cards with the list's title on
+ * the left and the two chevrons on the right, laid out and typed as that rail
+ * lays out its own, and the cards underneath, `perView` of them in view on desktop and
+ * `perViewMobile` below 1024px. The strip is a native scroller with scroll
+ * snap, so a touch screen swipes it as it is, the server renders it complete,
+ * and a swipe is a scroll — it is never read as a click on a card. The
+ * chevrons step one card and leave the row when every card already fits; at
+ * either end the one with nowhere to go is disabled, drawn like the other as
+ * the rail draws it, and stamped so a design can style that state.
+ *
+ * The cards are the host's own elements, unwrapped: every direct child of the
+ * strip is one card. Their width comes from the slider's scoped stylesheet, so
+ * it is right before any script runs.
+ */
+
+export interface CardListSliderProps {
+  /** Selector-safe and unique on the page: scopes the slider's stylesheet. */
+  sliderId: string;
+  settings: CardsSliderSettings;
+  /**
+   * The space between cards, desktop and below — the list's own gap, so the
+   * strip keeps the spacing the grid had. Each falls back to `defaultGap`.
+   */
+  gap?: { desktop?: unknown; mobile?: unknown };
+  defaultGap?: string;
+  isDesigner?: boolean;
+  /**
+   * The canvas breakpoint. The phone and tablet canvases show the phone
+   * count; the storefront decides by media query, which the canvas iframe
+   * cannot answer for the device it previews.
+   */
+  currentBreakpoint?: string;
+  /** The host's marks for the element holding the cards (its list part). */
+  trackAttributes?: Record<string, string>;
+  /**
+   * The canvas's selection for a click on the title: the list whose settings
+   * hold it — the Product Cards section, the product grid. The title is no
+   * block of its own, and the block it is drawn in is not where it is set.
+   */
+  onTitleSelect?: () => void;
+  prevLabel?: string;
+  nextLabel?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * An authored gap as a CSS length, or undefined. Numbers are pixels; strings
+ * must be a plain length, since the value lands inside a stylesheet.
+ */
+export const readGapLength = (value: unknown): string | undefined => {
+  if (typeof value === 'number' && Number.isFinite(value)) return `${value}px`;
+  if (typeof value !== 'string') return undefined;
+
+  const text = value.trim();
+  const match = text.match(/^(\d+(?:\.\d+)?)(px|rem|em|%)?$/);
+  if (!match) return undefined;
+
+  return match[2] ? text : `${match[1]}px`;
+};
+
+const readBreakpointValue = (value: unknown, breakpoint: string): unknown => {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const record = value as Record<string, unknown>;
+    return breakpoint === 'desktop'
+      ? record.desktop
+      : record[breakpoint] ?? record.mobile ?? record.desktop;
+  }
+  return value;
+};
+
+/** The authored gap of a list, per side of the 1024px line. */
+export const readListGap = (
+  value: unknown
+): { desktop?: unknown; mobile?: unknown } => ({
+  desktop: readBreakpointValue(value, 'desktop'),
+  mobile: readBreakpointValue(value, 'mobile')
+});
+
+/** One card's width with `count` in view and the gap between them. */
+const cardWidth = (count: number) =>
+  `calc((100% - ${count - 1} * var(--card-slider-gap)) / ${count})`;
+
+export const buildCardSliderCss = (
+  sliderId: string,
+  settings: CardsSliderSettings,
+  gapDesktop: string,
+  gapMobile: string,
+  onPhoneCanvas: boolean
+): string => {
+  const scope = `[data-card-slider="${sliderId}"]`;
+  const cards = `${scope}>[data-card-slider-frame]>[data-card-slider-track]>*`;
+  const phone = `${scope}{--card-slider-gap:${gapMobile}}${cards}{flex-basis:${cardWidth(
+    settings.perViewMobile
+  )}}`;
+
+  return neutralizeStyleTagBreakout(
+    `${scope}{--card-slider-gap:${gapDesktop}}` +
+      `${cards}{flex:0 0 ${cardWidth(
+        settings.perView
+      )};min-width:0;scroll-snap-align:start}` +
+      `${scope}>[data-card-slider-frame]>[data-card-slider-track]::-webkit-scrollbar{display:none}` +
+      // The canvas previews the phone in whatever width the iframe has, so it
+      // takes the phone count outright; the storefront asks the viewport.
+      (onPhoneCanvas ? phone : `${MOBILE_MEDIA_QUERY_COMPACT}{${phone}}`)
+  );
+};
+
+/**
+ * The slider's chevron: the 8 × 12 glyph the GANT rail's arrows draw
+ * (posts-slider's top-right navigation), mirrored for "next", so a list
+ * slider and the rail beside it read as one design.
+ */
+const Chevron = ({ direction }: { direction: 'prev' | 'next' }) => (
+  <svg
+    width="8"
+    height="12"
+    viewBox="0 0 8 12"
+    fill="none"
+    aria-hidden="true"
+    style={{
+      display: 'block',
+      ...(direction === 'next' ? { transform: 'scaleX(-1)' } : null)
+    }}
+  >
+    <path d="M6.5 1L1.5 6l5 5" stroke="currentColor" strokeWidth="1.2" />
+  </svg>
+);
+
+const prefersReducedMotion = (): boolean =>
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export const CardListSlider = ({
+  sliderId,
+  settings,
+  gap,
+  defaultGap = '16px',
+  isDesigner = false,
+  currentBreakpoint = 'desktop',
+  trackAttributes,
+  onTitleSelect,
+  prevLabel = 'Previous',
+  nextLabel = 'Next',
+  children
+}: CardListSliderProps) => {
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  // Before the strip is measured it is assumed to overflow, which is the
+  // common case: the server renders the chevrons, the first one disabled,
+  // and they only leave the row once a measurement says every card fits.
+  const [edges, setEdges] = React.useState({ atStart: true, atEnd: false });
+
+  const measure = React.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    // Negative in a right-to-left strip.
+    const offset = Math.abs(track.scrollLeft);
+    const next = {
+      atStart: offset <= 1,
+      atEnd: offset + track.clientWidth >= track.scrollWidth - 1
+    };
+    setEdges((previous) =>
+      previous.atStart === next.atStart && previous.atEnd === next.atEnd
+        ? previous
+        : next
+    );
+  }, []);
+
+  // After every render: a page of cards appended by Load More, a breakpoint
+  // or a count changed in the panel can each turn a full strip into one that
+  // fits, and back.
+  React.useEffect(() => {
+    measure();
+  });
+
+  React.useEffect(() => {
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [measure]);
+
+  const step = (direction: 1 | -1) => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    const card = track.firstElementChild as HTMLElement | null;
+    const computed = window.getComputedStyle(track);
+    const spacing = parseFloat(computed.columnGap) || 0;
+    const distance =
+      (card ? card.getBoundingClientRect().width : track.clientWidth) + spacing;
+    const sign = computed.direction === 'rtl' ? -1 : 1;
+
+    track.scrollBy({
+      left: sign * direction * distance,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+    });
+  };
+
+  const onPhoneCanvas = isDesigner && currentBreakpoint !== 'desktop';
+  const gapDesktop = readGapLength(gap?.desktop) ?? defaultGap;
+  const gapMobile = readGapLength(gap?.mobile) ?? gapDesktop;
+  const css = buildCardSliderCss(
+    sliderId,
+    settings,
+    gapDesktop,
+    gapMobile,
+    onPhoneCanvas
+  );
+
+  const fits = edges.atStart && edges.atEnd;
+  const showsArrows = settings.arrows !== 'none' && !fits;
+  const title = settings.title;
+  const showsHeader =
+    Boolean(title) || (showsArrows && settings.arrows === 'top-right');
+
+  const arrow = (direction: 'prev' | 'next', placement: 'row' | 'side') => {
+    const disabled = direction === 'prev' ? edges.atStart : edges.atEnd;
+
+    return (
+      <button
+        type="button"
+        data-card-slider-arrow={direction}
+        {...partAttrs('slider-arrow', { disabled })}
+        aria-label={direction === 'prev' ? prevLabel : nextLabel}
+        disabled={disabled}
+        onClick={(event) => {
+          // Inside a card list that may sit in a link or a designer selection
+          // target: the page turn is the whole of what this click means.
+          event.preventDefault();
+          event.stopPropagation();
+          step(direction === 'prev' ? -1 : 1);
+        }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          border: 0,
+          color: 'inherit',
+          background: placement === 'side' ? '#ffffff' : 'transparent',
+          cursor: disabled ? 'default' : 'pointer',
+          ...(placement === 'side'
+            ? {
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 1,
+                ...(direction === 'prev' ? { left: '8px' } : { right: '8px' })
+              }
+            : null)
+        }}
+      >
+        <Chevron direction={direction} />
+      </button>
+    );
+  };
+
+  return (
+    <div
+      data-card-slider={sliderId}
+      {...partAttrs('slider')}
+      style={{
+        position: 'relative',
+        width: '100%',
+        minWidth: 0,
+        // A grid host keeps its own column template; the slider spans it.
+        gridColumn: '1 / -1'
+      }}
+    >
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      {showsHeader ? (
+        <div
+          data-card-slider-header=""
+          {...partAttrs('slider-header')}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '24px',
+            // The rail's row: the title 24px in from the left, the chevrons
+            // 14px in from the right, 16px above and below. The list's
+            // Slider Header part restyles it; a host with no part styles of
+            // its own (the Product Cards section) through its custom CSS.
+            padding: 'var(--card-slider-header-padding, 16px 14px 16px 24px)'
+          }}
+        >
+          {title ? (
+            // The rail's title, typed as the list's settings say. Not a block:
+            // clicking it in the canvas selects the list that owns it, whose
+            // panel holds the title's settings.
+            <h2
+              data-card-slider-title=""
+              onClick={
+                isDesigner && onTitleSelect
+                  ? (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onTitleSelect();
+                    }
+                  : undefined
+              }
+              style={{
+                minWidth: 0,
+                margin: 0,
+                color: title.color,
+                fontSize: `${title.size}px`,
+                fontWeight: title.weight,
+                lineHeight: 1.4,
+                textTransform: title.transform,
+                fontFamily: title.font || 'var(--theme-font-body, inherit)'
+              }}
+            >
+              {title.text}
+            </h2>
+          ) : (
+            <span />
+          )}
+          {showsArrows && settings.arrows === 'top-right' ? (
+            <div
+              data-card-slider-arrows="top-right"
+              style={{ display: 'flex', alignItems: 'center' }}
+            >
+              {arrow('prev', 'row')}
+              {arrow('next', 'row')}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      <div data-card-slider-frame="" style={{ position: 'relative' }}>
+        <div
+          ref={trackRef}
+          data-card-slider-track=""
+          {...trackAttributes}
+          onScroll={measure}
+          style={{
+            display: 'flex',
+            gap: 'var(--card-slider-gap)',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            scrollSnapType: 'x mandatory',
+            overscrollBehaviorX: 'contain',
+            scrollbarWidth: 'none'
+          }}
+        >
+          {children}
+        </div>
+        {showsArrows && settings.arrows === 'sides' ? (
+          <>
+            {arrow('prev', 'side')}
+            {arrow('next', 'side')}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default CardListSlider;