orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/products/ProductCard.vue

@@ -0,0 +1,897 @@
+<template>
+  <article
+    v-if="product"
+    ref="card"
+    :style="{ minHeight }"
+    class="
+      box-border grid min-w-0 content-start
+      font-orionplace text-orionplace-text
+    "
+    :class="layoutClass"
+    :data-product-id="product.id"
+    :data-product-layout="layout"
+    :aria-busy="variantLoading || undefined"
+  >
+    <div
+      v-if="!details"
+      ref="imageArea"
+      class="relative w-full min-w-0 self-start justify-self-start"
+      :class="{
+        'col-span-full max-w-52 @min-[22rem]:col-span-1 @min-[22rem]:row-span-3 @min-[22rem]:max-w-44':
+          isCompact,
+      }"
+      :style="photoInsetStyle"
+      data-product-image
+    >
+      <component
+        :is="productHref ? 'a' : 'button'"
+        data-product-part="OrionplaceImage"
+        data-product-image-viewport
+        :data-product-photo-swipe="photos.length > 1 || undefined"
+        :href="productHref"
+        :type="productHref ? undefined : 'button'"
+        :disabled="productHref ? undefined : disabled"
+        :aria-disabled="productHref && disabled ? 'true' : undefined"
+        class="
+          relative block w-full overflow-hidden
+          cursor-pointer border-0 bg-transparent p-0
+          outline-none transition-opacity motion-reduce:transition-none
+          hover:opacity-85 focus-visible:opacity-70
+        "
+        :class="{ 'aspect-[3/4]': !isCompact }"
+        @click="selectProduct"
+        @pointerenter="photosPrimed = true"
+        @pointermove="pointAtPhoto"
+        @pointerleave="leavePhotos"
+        @touchstart.passive="startPhotoSwipe"
+        @touchend="endPhotoSwipe"
+      >
+        <template
+          v-for="(photo, index) in photoSources"
+          :key="`${index}:${photo}`"
+        >
+          <OrionplaceImage
+            v-if="index === 0 || photosPrimed || index === activePhoto"
+            :src="photo"
+            :alt="name"
+            :width="3"
+            :height="4"
+            :loading="index === 0 ? 'lazy' : 'eager'"
+            :aria-hidden="photos.length > 1 ? index !== activePhoto : undefined"
+            class="
+              box-border w-full object-contain
+              transition-opacity duration-200 motion-reduce:transition-none
+            "
+            :class="[
+              index > 0
+                ? 'absolute inset-0 h-full'
+                : isCompact
+                  ? 'h-52 @min-[22rem]:h-44'
+                  : 'h-full',
+              { 'opacity-0': index !== activePhoto },
+            ]"
+            @load="measurePhoto"
+          />
+        </template>
+      </component>
+      <span
+        v-if="photos.length > 1"
+        data-product-photo-bars
+        aria-hidden="true"
+        class="pointer-events-none absolute flex gap-1"
+      >
+        <span
+          v-for="(photo, index) in photos"
+          :key="`${index}:${photo}`"
+          class="
+            block h-0.5 flex-1 transition-colors
+            duration-150 motion-reduce:transition-none
+          "
+          :class="
+            index === activePhoto
+              ? 'bg-orionplace-accent'
+              : 'bg-orionplace-text/20'
+          "
+        />
+      </span>
+      <span
+        v-if="variantLoading"
+        data-product-variant-loading
+        aria-hidden="true"
+        class="
+          pointer-events-none absolute inset-0
+          flex items-center justify-center
+          bg-orionplace-surface/50
+        "
+      >
+        <span
+          class="
+            h-6 w-6 rounded-full
+            border-2 border-solid border-orionplace-text border-t-transparent
+            animate-spin motion-reduce:animate-none
+          "
+        />
+      </span>
+      <ProductCardBadges
+        data-product-part="ProductCardBadges"
+        v-if="!isCompact"
+        :product-id="displayedProductId"
+        :collection="collection"
+        low-stock-label=""
+        class="pointer-events-none absolute"
+      />
+      <ProductCardActions
+        data-product-part="ProductCardActions"
+        v-if="purchaseActions"
+        :product-id="displayedProductId"
+        :collection="collection"
+        :disabled="purchaseDisabled"
+        class="absolute max-w-full"
+        icon-only
+        @request-variants="variantControls?.openForPurchase()"
+        @add="emit('add', $event)"
+        @remove="emit('remove', $event)"
+        @subscribe="emit('subscribe', $event)"
+        @unsubscribe="emit('unsubscribe', $event)"
+        @preorder="emit('preorder', $event)"
+      />
+      <ProductCardFavorite
+        data-product-part="ProductCardFavorite"
+        v-if="purchaseActions"
+        :product-id="displayedProductId"
+        :collection="collection"
+        :disabled="purchaseDisabled"
+        class="absolute"
+        @toggle="
+          emit('toggleFavorite', {
+            product: displayedProductId,
+            selected: $event,
+          })
+        "
+      />
+    </div>
+    <div
+      data-product-heading
+      class="grid min-w-0 content-start gap-1 empty:hidden"
+      :class="{ 'col-span-full @min-[22rem]:col-start-2': isCompact }"
+    >
+      <ProductCardSeller
+        v-if="!details"
+        data-product-part="ProductCardSeller"
+        :product-id="displayedProductId"
+        :collection="collection"
+        :disabled="disabled"
+        @select="emit('selectSeller', $event)"
+      />
+      <component
+        :is="productHref ? 'a' : 'button'"
+        v-if="!details"
+        :href="productHref"
+        :type="productHref ? undefined : 'button'"
+        :disabled="productHref ? undefined : disabled"
+        :aria-disabled="productHref && disabled ? 'true' : undefined"
+        class="
+          block w-full
+          cursor-pointer border-0 bg-transparent p-0
+          text-left text-orionplace-text no-underline
+          outline-none transition-opacity motion-reduce:transition-none
+          hover:opacity-70 focus-visible:bg-orionplace-hover
+        "
+        @click="selectProduct"
+      >
+        <ProductCardTitle
+          data-product-part="ProductCardTitle"
+          :product-id="displayedProductId"
+          :collection="collection"
+        />
+      </component>
+      <p
+        v-if="variantFailed"
+        role="alert"
+        data-product-variant-error
+        class="m-0 text-xs leading-5 text-orionplace-danger"
+      >
+        {{ copy.variantFailed }}
+      </p>
+      <p
+        v-else-if="variantLoading"
+        role="status"
+        data-product-variant-status
+        class="sr-only"
+      >
+        {{ copy.variantLoading }}
+      </p>
+    </div>
+    <ProductCardBadges
+      data-product-part="ProductCardBadges"
+      v-if="details"
+      :product-id="displayedProductId"
+      :collection="collection"
+      low-stock-label=""
+    />
+    <ProductCardPrice
+      data-product-part="ProductCardPrice"
+      :class="{
+        'col-span-full @min-[22rem]:col-start-2 @min-[22rem]:row-start-2':
+          isCompact,
+      }"
+      :product-id="displayedProductId"
+      :collection="collection"
+    />
+    <div
+      v-if="details && $slots.afterPrice"
+      data-product-after-price
+      class="min-w-0"
+    >
+      <slot
+        name="afterPrice"
+        :product="product"
+      />
+    </div>
+    <p
+      v-if="details && variantCaption"
+      class="m-0 -mb-2 text-xs text-orionplace-muted first-letter:uppercase"
+      data-product-variant-caption
+    >
+      {{ variantCaption.name }}:
+      <span class="text-orionplace-text">{{ variantCaption.value }}</span>
+    </p>
+    <ProductCardVariants
+      data-product-part="ProductCardVariants"
+      ref="variantControls"
+      :actions-disabled="purchaseDisabled"
+      @add="emit('add', $event)"
+      @remove="emit('remove', $event)"
+      @subscribe="emit('subscribe', $event)"
+      @unsubscribe="emit('unsubscribe', $event)"
+      @preorder="emit('preorder', $event)"
+      :class="{
+        'col-span-full @min-[22rem]:col-start-2 @min-[22rem]:row-start-3':
+          isCompact,
+      }"
+      :product-id="displayedProductId"
+      :collection="collection"
+      :variant-product-ids="variantProductIds"
+      :disabled="disabled"
+      @select="selectVariant"
+      @select-secondary="selectSecondaryVariant"
+      @request-secondary="emit('requestSecondaryVariants', $event)"
+    />
+    <ProductCardRating
+      data-product-part="ProductCardRating"
+      v-if="!isCompact && !details"
+      :product-id="displayedProductId"
+      :collection="collection"
+    />
+    <ProductCardStockNotice
+      data-product-part="ProductCardStockNotice"
+      v-if="!isCompact"
+      :product-id="displayedProductId"
+      :collection="collection"
+    />
+    <ProductCardDescription
+      data-product-part="ProductCardDescription"
+      v-if="!isCompact && !details"
+      :product-id="displayedProductId"
+      :collection="collection"
+      class="line-clamp-2"
+    />
+    <div
+      v-if="details && purchaseActions"
+      class="flex items-start gap-2 pt-2"
+    >
+      <ProductCardActions
+        data-product-part="ProductCardActions"
+        :product-id="displayedProductId"
+        :collection="collection"
+        :disabled="purchaseDisabled"
+        class="min-w-0 flex-1"
+        variant-selection-resolved
+        @request-variants="variantControls?.openForPurchase()"
+        @add="emit('add', $event)"
+        @remove="emit('remove', $event)"
+        @subscribe="emit('subscribe', $event)"
+        @unsubscribe="emit('unsubscribe', $event)"
+        @preorder="emit('preorder', $event)"
+      />
+      <ProductCardFavorite
+        data-product-part="ProductCardFavorite"
+        :product-id="displayedProductId"
+        :collection="collection"
+        :disabled="purchaseDisabled"
+        @toggle="
+          emit('toggleFavorite', {
+            product: displayedProductId,
+            selected: $event,
+          })
+        "
+      />
+    </div>
+    <div
+      v-if="$slots.footer"
+      data-product-footer
+      class="min-w-0"
+    >
+      <slot
+        name="footer"
+        :product="product"
+      />
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+  import { useOrionplaceStableHeight } from '@/composables/useOrionplaceStableHeight';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceProductsStore } from '@/stores/orionplaceProducts';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { useOrionplaceProductLink } from '@/composables/useOrionplaceProductLink';
+  import { computed, nextTick, onMounted, onScopeDispose, ref, watch } from 'vue';
+  import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
+  import {
+    getAvailableNestedValueFromObject,
+    getAvailableValueFromObject,
+  } from '@/utils/orionplace/presentation';
+  import { productLabels } from '@/utils/orionplace/productLabels';
+  import {
+    productPhotoAfterSwipe,
+    productPhotoAtPointer,
+    productPhotos,
+  } from '@/utils/orionplace/productPhotos';
+  import ProductCardSeller from '@/components/orionplace/products/ProductCardSeller.vue';
+  import ProductCardTitle from '@/components/orionplace/products/ProductCardTitle.vue';
+  import ProductCardBadges from '@/components/orionplace/products/ProductCardBadges.vue';
+  import ProductCardDescription from '@/components/orionplace/products/ProductCardDescription.vue';
+  import ProductCardPrice from '@/components/orionplace/products/ProductCardPrice.vue';
+  import ProductCardRating from '@/components/orionplace/products/ProductCardRating.vue';
+  import ProductCardVariants from '@/components/orionplace/products/ProductCardVariants.vue';
+  import ProductCardActions from '@/components/orionplace/products/ProductCardActions.vue';
+  import ProductCardFavorite from '@/components/orionplace/products/ProductCardFavorite.vue';
+  import ProductCardStockNotice from '@/components/orionplace/products/ProductCardStockNotice.vue';
+  import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
+  import type {
+    IProduct,
+    IProductSeller,
+    IProductVariantValue,
+    IProductSecondaryVariant,
+  } from '@/interfaces/orionplace/products/IProduct';
+
+  const card               = ref<HTMLElement>();
+  const { minHeight }      = useOrionplaceStableHeight(card);
+
+  const props              = withDefaults(
+    defineProps<{
+      productId: number;
+      collection?: 'products' | 'featured';
+      compact?: boolean;
+      details?: boolean;
+      disabled?: boolean;
+      actionsDisabled?: boolean;
+      purchaseActions?: boolean;
+      variantProductIds?: number[];
+    }>(),
+    {
+      collection: 'products',
+      compact: false,
+      details: false,
+      disabled: false,
+      actionsDisabled: false,
+      purchaseActions: true,
+    },
+  );
+
+  const store          = useOrionplaceStore();
+  const productStore   = useOrionplaceProductsStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const isCompact      = computed(() => props.compact && !props.details);
+  const layout         = computed(() => {
+    if (props.details) {
+      return 'details';
+    }
+    return isCompact.value ? 'compact' : 'card';
+  });
+  const layoutClass        = computed(() => {
+    if (props.details) {
+      return 'gap-5';
+    }
+    return isCompact.value
+      ? '@container grid-cols-[minmax(0,11rem)_minmax(0,1fr)] gap-x-5 gap-y-3'
+      : 'w-full max-w-72 gap-0';
+  });
+
+  const variantControls    = ref<InstanceType<typeof ProductCardVariants>>();
+  const displayedProductId = ref(props.productId);
+  const requestedProductId = ref(props.productId);
+  const product            = computed(() =>
+    productStore.getProduct(displayedProductId.value, props.collection),
+  );
+  const copy               = computed(() => productLabels(selectionStore.localeCode));
+  // With a product page address from the host, the image and name are
+  // links: the page HTML then links to the product for search engines.
+  const productLink        = useOrionplaceProductLink();
+  const productHref        = computed(() =>
+    productLink && product.value ? productLink(product.value.id) : undefined,
+  );
+
+  // The host marks a missing target while it loads; see useOrionplaceProductVariants.
+  const variantRequest     = computed(() =>
+    requestedProductId.value === displayedProductId.value
+      ? undefined
+      : productStore.getProductRequest(requestedProductId.value),
+  );
+  const variantLoading     = computed(() => variantRequest.value === 'loading');
+  const variantFailed      = ref(false);
+  // Actions wait for the chosen variant, so they never target the previous product.
+  const purchaseDisabled   = computed(
+    () => props.disabled || props.actionsDisabled || variantLoading.value,
+  );
+
+  // The product page names the chosen main variant above its choices.
+  const variantCaption     = computed(() => {
+    const group    = product.value?.variants.main_variant;
+    const selected = group?.value.find(
+      (value) => value.reload_product === displayedProductId.value,
+    );
+
+    if (!group || !selected) {
+      return undefined;
+    }
+
+    return {
+      name: getAvailableValueFromObject(group.locale, selectionStore.localeCode) ?? '',
+      value: getAvailableValueFromObject(selected.locale, selectionStore.localeCode) ?? '',
+    };
+  });
+
+  const name               = computed(
+    () =>
+      getAvailableNestedValueFromObject(
+        product.value?.locale,
+        selectionStore.localeCode,
+        'product_name',
+      ) || '',
+  );
+
+  // A product with several photos switches them in the card: the mouse picks
+  // the photo of its zone (one equal zone per photo, left to right), a
+  // sideways swipe steps to the next or previous one, and the bars at the
+  // bottom show which photo is shown. Leaving the picture shows the first
+  // photo again. The other photos load once the visitor points at or
+  // touches the picture. A click on any photo selects the product.
+  const photos             = computed(() =>
+    productPhotos(product.value?.images, isCompact.value),
+  );
+  // Without photos the image shows its placeholder.
+  const photoSources       = computed(() =>
+    photos.value.length ? photos.value : [undefined],
+  );
+  const activePhoto        = ref(0);
+  const photosPrimed       = ref(false);
+  let photoSwipeStart: { x: number; y: number } | undefined;
+  let photoSwipedAt        = 0;
+
+  watch(
+    () => photos.value.join('\n'),
+    () => {
+      activePhoto.value  = 0;
+      photosPrimed.value = false;
+    },
+  );
+  watch(activePhoto, () => nextTick(measurePhoto));
+
+  function pointAtPhoto(event: PointerEvent) {
+    // A touch switches photos by swiping, not by where the finger rests.
+    if (event.pointerType === 'touch' || photos.value.length < 2) {
+      return;
+    }
+
+    photosPrimed.value = true;
+    activePhoto.value  = productPhotoAtPointer(
+      event.clientX,
+      (event.currentTarget as HTMLElement).getBoundingClientRect(),
+      photos.value.length,
+    );
+  }
+
+  function leavePhotos(event: PointerEvent) {
+    if (event.pointerType !== 'touch') {
+      activePhoto.value = 0;
+    }
+  }
+
+  // A sideways swipe switches photos only where the picture keeps sideways
+  // moves for itself (`touch-action: pan-y`). A horizontal row of cards,
+  // such as a product group on a phone, turns that off so the row scrolls.
+  function startPhotoSwipe(event: TouchEvent) {
+    const touch    = event.touches[0];
+    const viewport = event.currentTarget as HTMLElement;
+
+    photosPrimed.value = true;
+    photoSwipeStart    =
+      touch &&
+      event.touches.length === 1 &&
+      getComputedStyle(viewport).touchAction === 'pan-y'
+        ? { x: touch.clientX, y: touch.clientY }
+        : undefined;
+  }
+
+  function endPhotoSwipe(event: TouchEvent) {
+    const touch = event.changedTouches[0];
+    const start = photoSwipeStart;
+
+    photoSwipeStart = undefined;
+    if (!start || !touch) {
+      return;
+    }
+
+    const next  = productPhotoAfterSwipe(
+      activePhoto.value,
+      photos.value.length,
+      touch.clientX - start.x,
+      touch.clientY - start.y,
+    );
+
+    if (next !== activePhoto.value) {
+      activePhoto.value = next;
+      photoSwipedAt     = Date.now();
+    }
+  }
+
+  // A photo keeps its own proportions inside the card's image area, so that
+  // area can show empty space beside or above the picture. These offsets are
+  // measured from the loaded image and keep the badges, the wishlist control
+  // and the purchase actions on the picture's own corners.
+  const imageArea          = ref<HTMLElement>();
+  const photoInset         = ref({ x: 0, y: 0 });
+  const photoInsetStyle    = computed(() => ({
+    '--product-photo-inset-x': `${photoInset.value.x}px`,
+    '--product-photo-inset-y': `${photoInset.value.y}px`,
+  }));
+
+  let areaObserver: ResizeObserver | undefined;
+
+  function setPhotoInset(x: number, y: number) {
+    if (photoInset.value.x === x && photoInset.value.y === y) {
+      return;
+    }
+
+    photoInset.value = { x, y };
+  }
+
+  function clearPhotoInset() {
+    setPhotoInset(0, 0);
+  }
+
+  function measurePhoto() {
+    // A renderer without a browser layout, such as a test host, has
+    // nothing to measure.
+    const image      =
+      imageArea.value?.querySelector?.<HTMLImageElement>('img[aria-hidden="false"]') ??
+      imageArea.value?.querySelector?.('img');
+
+    if (!image?.naturalWidth || !image.naturalHeight) {
+      clearPhotoInset();
+      return;
+    }
+
+    const area       = image.getBoundingClientRect();
+    const scale      = Math.min(
+      area.width / image.naturalWidth,
+      area.height / image.naturalHeight,
+    );
+
+    setPhotoInset(
+      Math.max(0, (area.width - image.naturalWidth * scale) / 2),
+      Math.max(0, (area.height - image.naturalHeight * scale) / 2),
+    );
+  }
+
+  onMounted(() => {
+    // A cached picture is already decoded before the load listener attaches.
+    measurePhoto();
+    // A failed picture is replaced by the placeholder, which fills the whole
+    // area. OrionplaceImage handles that failure itself, so the card listens
+    // for the event on its way down to the image instead of on the image.
+    imageArea.value?.addEventListener?.('error', clearPhotoInset, true);
+
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    areaObserver = new ResizeObserver(() => measurePhoto());
+
+    if (imageArea.value) {
+      areaObserver.observe(imageArea.value);
+    }
+  });
+
+  watch(imageArea, (node, previous) => {
+    if (previous) {
+      areaObserver?.unobserve(previous);
+    }
+
+    if (node) {
+      areaObserver?.observe(node);
+      measurePhoto();
+    }
+  });
+
+  onScopeDispose(() => {
+    imageArea.value?.removeEventListener?.('error', clearPhotoInset, true);
+    areaObserver?.disconnect();
+  });
+
+  defineSlots<{
+    footer?(props: { product: IProduct }): unknown;
+    afterPrice?(props: { product: IProduct }): unknown;
+  }>();
+
+  const emit               = defineEmits<{
+    select: [product: IProduct];
+    selectSeller: [seller: IProductSeller];
+    toggleFavorite: [selection: { product: number; selected: boolean }];
+    requestSecondaryVariants: [selection: IProductSecondaryVariantRequest];
+    selectVariant: [
+      selection: { product: number; variant: IProductVariantValue },
+    ];
+    selectSecondaryVariant: [
+      selection: { product: number; variant: IProductSecondaryVariant },
+    ];
+    add: [selection: { product: number; quantity: number }];
+    remove: [selection: { product: number; cartItem: number }];
+    subscribe: [selection: { product: number }];
+    unsubscribe: [selection: { product: number }];
+    preorder: [selection: { product: number }];
+  }>();
+
+  watch(
+    [
+      () => props.productId,
+      () => props.collection,
+      () => store.init,
+      () => productStore.productUpdates,
+    ],
+    () => {
+      displayedProductId.value = props.productId;
+      requestedProductId.value = props.productId;
+      variantFailed.value      = false;
+    },
+    { flush: 'sync' },
+  );
+
+  // A failed target leaves the current product and its selected choice in place.
+  watch(
+    variantRequest,
+    (state) => {
+      if (state === 'failed') {
+        requestedProductId.value = displayedProductId.value;
+        variantFailed.value      = true;
+      }
+    },
+    { flush: 'sync' },
+  );
+
+  watch(
+    () => productStore.getProduct(requestedProductId.value, props.collection),
+    (target) => {
+      if (target) {
+        displayedProductId.value = target.id;
+      }
+    },
+    { flush: 'sync' },
+  );
+
+  // A plain click emits select and the host navigates; a click with a
+  // modifier key keeps the browser's own link behavior, such as a new tab.
+  function selectProduct(event: MouseEvent) {
+    // The click a browser may send after a photo swipe does not open the product.
+    if (Date.now() - photoSwipedAt < 500) {
+      event.preventDefault();
+      return;
+    }
+
+    const browserHandles =
+      Boolean(productHref.value) &&
+      !props.disabled &&
+      (event.button > 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey);
+
+    if (browserHandles) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (!props.disabled && product.value) {
+      emit('select', product.value);
+    }
+  }
+
+  function showVariant(id: number) {
+    const otherCollection    =
+      props.collection === 'products' ? 'featured' : 'products';
+    const target             =
+      productStore.getProduct(id, props.collection) ??
+      productStore.getProduct(id, otherCollection);
+    requestedProductId.value = id;
+    variantFailed.value      = false;
+
+    if (target) {
+      productStore.setProduct(target, props.collection);
+      displayedProductId.value = target.id;
+    }
+  }
+
+  function selectVariant(variant: IProductVariantValue) {
+    if (!product.value || props.disabled || !variant.reload_product) {
+      return;
+    }
+
+    if (variant.reload_product === product.value.id) {
+      requestedProductId.value = product.value.id;
+      return;
+    }
+
+    const selection = { product: product.value.id, variant };
+    // Selecting a failed choice again is a retry.
+    if (productStore.getProductRequest(variant.reload_product) === 'failed') {
+      productStore.setProductRequest(variant.reload_product);
+    }
+    showVariant(variant.reload_product);
+    emit('selectVariant', selection);
+  }
+
+  function selectSecondaryVariant(variant: IProductSecondaryVariant) {
+    if (
+      !product.value ||
+      props.disabled ||
+      variant.product.id === product.value.id
+    ) {
+      return;
+    }
+
+    const selection = { product: product.value.id, variant };
+    const target    =
+      productStore.productUpdates[props.collection][variant.product.id] ??
+      variant.product;
+    // The secondary response supplies this group separately from its products.
+    productStore.setProduct(
+      {
+        ...target,
+        secondary_variants:
+          target.secondary_variants ?? product.value.secondary_variants,
+      },
+      props.collection,
+    );
+    showVariant(variant.product.id);
+    emit('selectSecondaryVariant', selection);
+  }
+</script>
+
+<style scoped>
+  /*
+   * Labels and controls drawn over the picture follow its own edges. The card
+   * measures how much empty space the picture leaves inside the image area and
+   * publishes it as these offsets, so the purchase actions stay in the
+   * picture's bottom right corner whatever proportions the photo has.
+   */
+  [data-product-image] > [data-product-part='ProductCardActions'] {
+    right: calc(var(--product-photo-inset-x, 0px) + 0.5rem);
+    bottom: calc(var(--product-photo-inset-y, 0px) + 0.5rem);
+  }
+  [data-product-image] > [data-product-part='ProductCardFavorite'] {
+    right: calc(var(--product-photo-inset-x, 0px) + 0.25rem);
+    top: calc(var(--product-photo-inset-y, 0px) + 0.25rem);
+  }
+  [data-product-image] > [data-product-part='ProductCardBadges'] {
+    left: calc(var(--product-photo-inset-x, 0px) + 0.5rem);
+    top: calc(var(--product-photo-inset-y, 0px) + 0.5rem);
+    max-width: calc(100% - 3.5rem - 2 * var(--product-photo-inset-x, 0px));
+  }
+  /* One segment per photo zone along the picture's bottom edge, below the buttons. */
+  [data-product-image] > [data-product-photo-bars] {
+    right: calc(var(--product-photo-inset-x, 0px) + 0.5rem);
+    bottom: calc(var(--product-photo-inset-y, 0px) + 0.125rem);
+    left: calc(var(--product-photo-inset-x, 0px) + 0.5rem);
+  }
+
+  /* Sideways moves on a picture with several photos switch the photo. */
+  [data-product-photo-swipe] {
+    touch-action: pan-y;
+  }
+
+  /*
+   * Explicit rows keep every card part on the same line when a product group
+   * aligns neighbouring cards through a subgrid and some parts are absent.
+   */
+  [data-product-layout='card'] > [data-product-image] {
+    grid-row: 1;
+  }
+  [data-product-layout='card'] > [data-product-heading] {
+    grid-row: 2;
+    margin-top: 0.75rem;
+  }
+  [data-product-layout='card'] > [data-product-part='ProductCardVariants'] {
+    grid-row: 3;
+    margin-top: 0.625rem;
+  }
+  [data-product-layout='card'] > [data-product-part='ProductCardPrice'] {
+    grid-row: 4;
+    margin-top: 0.5rem;
+  }
+  [data-product-layout='card'] > [data-product-part='ProductCardRating'] {
+    grid-row: 5;
+    margin-top: 0.5rem;
+  }
+  [data-product-layout='card'] > [data-product-part='ProductCardStockNotice'] {
+    grid-row: 6;
+    margin-top: 0.25rem;
+  }
+  [data-product-layout='card'] > [data-product-part='ProductCardDescription'] {
+    grid-row: 7;
+    margin-top: 0.5rem;
+  }
+  [data-product-layout='card'] > [data-product-footer] {
+    grid-row: 8;
+    margin-top: 0.75rem;
+  }
+
+  /*
+   * A compact card puts the photo beside the text from 22rem of its own
+   * width (a measuring box for its parts, which take both columns below
+   * that); an added footer stays under the choices, beside the image.
+   */
+  [data-product-layout='compact'] > [data-product-footer] {
+    grid-column: 1 / -1;
+  }
+
+  @container (width >= 22rem) {
+    [data-product-layout='compact'] > [data-product-footer] {
+      grid-column: 2;
+    }
+  }
+
+  [data-product-layout='details'] :deep([data-product-favorite]) {
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 0;
+    border-color: var(--orionplace-text);
+    background: transparent;
+    backdrop-filter: none;
+  }
+
+  /* Grid cards keep every variant choice reachable on one scrollable row. */
+  [data-product-layout='card']
+    :deep([data-product-variants] [role='group'] > div) {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    /* Room for the swatches' 24px touch targets, without moving the row. */
+    margin: -2px -3px;
+    padding: 3px;
+    scrollbar-width: thin;
+  }
+
+  /* The product page shows the same variant choices at a slightly larger size. */
+  [data-product-layout='details'] :deep([data-product-variant].rounded-full),
+  [data-product-layout='details'] :deep([data-secondary-variant].rounded-full) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  [data-product-layout='details']
+    :deep([data-product-variant]:not(.rounded-full)),
+  [data-product-layout='details']
+    :deep([data-secondary-variant]:not(.rounded-full)) {
+    height: 2rem;
+    padding-inline: 0.75rem;
+  }
+
+  [data-product-layout='details']
+    > [data-product-part='ProductCardPrice']
+    :deep(span) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+</style>