@shopware/cms-base-layer 1.5.0 → 2.0.0

package/{components → app/components}/SwProductAddToCart.vue

@@ -2,7 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
-import { toRefs } from "vue";
+import { computed, toRefs } from "vue";
 import {
   useAddToCart,
   useCartErrorParamsResolver,
@@ -23,6 +23,7 @@ type Translations = {
     addedToCart: string;
     qty: string;
     addToCart: string;
+    productNumber: string;
   };
   errors: {
     [key: string]: string;
@@ -34,6 +35,7 @@ let translations: Translations = {
     addedToCart: "has been added to cart.",
     qty: "Qty",
     addToCart: "Add to cart",
+    productNumber: "Product number",
   },
   errors: {
     "product-stock-reached":
@@ -46,6 +48,12 @@ translations = defu(useCmsTranslations(), translations) as Translations;
 const { product } = toRefs(props);
 const { addToCart, quantity } = useAddToCart(product);
 
+const availableStock = computed(() => product.value?.availableStock ?? 0);
+const minPurchase = computed(() => product.value?.minPurchase ?? 0);
+const deliveryTime = computed(() => product.value?.deliveryTime);
+const restockTime = computed(() => product.value?.restockTime);
+const productNumber = computed(() => product.value?.productNumber ?? "");
+
 const addToCartProxy = async () => {
   await addToCart();
   const errors = getErrorsCodes();
@@ -63,32 +71,19 @@ const addToCartProxy = async () => {
 </script>
 
 <template>
-  <div class="flex flex-row mt-10">
-    <div class="basis-1/4 relative -top-6">
-      <label for="qty" class="text-sm">{{ translations.product.qty }}</label>
-      <input
-        id="qty"
-        v-model="quantity"
-        type="number"
-        :min="product.minPurchase || 1"
-        :max="product.calculatedMaxPurchase"
-        :step="product.purchaseSteps || 1"
-        class="border rounded-md py-2 px-4 border-solid border-1 border-cyan-600 w-full mt-4"
-        data-testid="product-quantity"
-      />
-    </div>
-    <div class="basis-3/4 ml-4">
-      <button
-        :disabled="!product.available"
-        class="py-2 px-6 w-full mt-4 bg-gradient-to-r from-cyan-500 to-blue-500 transition ease-in-out hover:bg-gradient-to-l duration-300 cursor-pointer border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        :class="{
-          'opacity-50 cursor-not-allowed': !product.available,
-        }"
-        data-testid="add-to-cart-button"
-        @click="addToCartProxy"
-      >
-        🛍 {{ translations.product.addToCart }}
-      </button>
+  <div class="w-full inline-flex flex-col justify-start items-start gap-8">
+    <SwQuantitySelect v-model="quantity" :min="product.minPurchase" :max="product.maxPurchase"
+      :steps="product.purchaseSteps" />
+    <SwStockInfo :availableStock="availableStock" :minPurchase="minPurchase" :deliveryTime="deliveryTime"
+      :restockTime="restockTime" />
+    <div class="self-stretch flex flex-col justify-start items-start gap-1">
+      <SwBaseButton variant="primary" size="medium" :disabled="!product?.available" block data-testid="add-to-cart-button"
+        @click="addToCartProxy">
+        {{ translations.product.addToCart }}
+      </SwBaseButton>
+      <div class="self-stretch text-surface-on-surface text-xs font-normal leading-none">
+        {{ translations.product.productNumber }}: {{ productNumber }}
+      </div>
     </div>
   </div>
 </template>

package/app/components/SwProductCard.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ApiClientError } from "@shopware/api-client";
+import type { BoxLayout, DisplayMode } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import {
+  buildUrlPrefix,
+  getProductFromPrice,
+  getProductManufacturerName,
+  getProductName,
+  getProductRoute,
+} from "@shopware/helpers";
+import { getCmsTranslate } from "@shopware/helpers";
+import { defu } from "defu";
+import { computed, ref, toRefs } from "vue";
+import {
+  useAddToCart,
+  useCartErrorParamsResolver,
+  useCartNotification,
+  useNotifications,
+  useProductWishlist,
+  useUrlResolver,
+} from "#imports";
+import type { Schemas } from "#shopware";
+
+const { pushSuccess, pushError } = useNotifications();
+const { getErrorsCodes } = useCartNotification();
+const { resolveCartError } = useCartErrorParamsResolver();
+
+const props = withDefaults(
+  defineProps<{
+    product: Schemas["Product"];
+    layoutType?: BoxLayout;
+    isProductListing?: boolean;
+    displayMode?: DisplayMode;
+  }>(),
+  {
+    layoutType: "standard",
+    displayMode: "standard",
+    isProductListing: false,
+  },
+);
+
+type Translations = {
+  product: {
+    addedToWishlist: string;
+    removedFromTheWishlist: string;
+    reason: string;
+    cannotAddToWishlist: string;
+    addedToCart: string;
+    addToCart: string;
+    details: string;
+    badges: {
+      topseller: string;
+    };
+  };
+  errors: {
+    [key: string]: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    addedToWishlist: "has been added to wishlist.",
+    removedFromTheWishlist: "has been removed from wishlist.",
+    reason: "Reason",
+    cannotAddToWishlist: "cannot be added to wishlist.",
+    addedToCart: "has been added to cart.",
+    addToCart: "Add to cart",
+    details: "Details",
+    badges: {
+      topseller: "Tip",
+    },
+  },
+  errors: {
+    "product-stock-reached":
+      "The product {name} is only available {quantity} times",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product } = toRefs(props);
+
+const { addToCart } = useAddToCart(product);
+
+const { addToWishlist, removeFromWishlist, isInWishlist } = useProductWishlist(
+  product.value.id,
+);
+const isLoading = ref(false);
+
+const toggleWishlistProduct = async () => {
+  isLoading.value = true;
+
+  try {
+    if (!isInWishlist.value) {
+      await addToWishlist();
+      pushSuccess(
+        `${props.product?.translated.name} ${translations.product.addedToWishlist}`,
+      );
+    } else {
+      await removeFromWishlist();
+      pushSuccess(
+        `${props.product?.translated.name} ${translations.product.removedFromTheWishlist}`,
+      );
+    }
+  } catch (error) {
+    if (error instanceof ApiClientError) {
+      const reason = error.details.errors?.[0]?.detail
+        ? `${translations.product.reason}: ${error.details.errors?.[0]?.detail}`
+        : "";
+      return pushError(
+        `${props.product?.translated.name} ${translations.product.cannotAddToWishlist}\n${reason}`,
+        {
+          timeout: 5000,
+        },
+      );
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const addToCartProxy = async () => {
+  await addToCart();
+  const errors = getErrorsCodes();
+  for (const element of errors) {
+    const { messageKey, params } = resolveCartError(element);
+    if (translations.errors[messageKey])
+      pushError(getCmsTranslate(translations.errors[messageKey], params));
+  }
+
+  if (!errors.length)
+    pushSuccess(
+      `${props.product?.translated.name} ${translations.product.addedToCart}`,
+    );
+};
+
+const fromPrice = getProductFromPrice(props.product);
+const productName = computed(() => getProductName({ product: product.value }));
+const productManufacturer = computed(() =>
+  getProductManufacturerName(product.value),
+);
+
+const { getUrlPrefix } = useUrlResolver();
+const productLink = computed(() =>
+  buildUrlPrefix(getProductRoute(product.value), getUrlPrefix()),
+);
+</script>
+
+<template>
+  <div class="p-px flex flex-col justify-start items-start overflow-hidden">
+    <SwProductCardImage
+      :product="product"
+      :translations="translations"
+      :isInWishlist="isInWishlist"
+      :isLoading="isLoading"
+      :toggleWishlist="toggleWishlistProduct"
+      :productLink="productLink"
+    />
+    <SwProductCardDetails
+      :product="product"
+      :productName="productName"
+      :productManufacturer="productManufacturer"
+      :translations="translations"
+      :fromPrice="fromPrice"
+      :addToCartProxy="addToCartProxy"
+      :productLink="productLink"
+    />
+  </div>
+</template>

package/app/components/SwProductCardDetails.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { UrlRouteOutput } from "@shopware/helpers";
+import type { Schemas } from "#shopware";
+
+type Translations = {
+  product: {
+    addToCart: string;
+    details: string;
+  };
+  errors: {
+    [key: string]: string;
+  };
+};
+
+defineProps<{
+  product: Schemas["Product"];
+  productName: string | null;
+  productManufacturer?: string | null;
+  translations: Translations;
+  fromPrice?: number;
+  addToCartProxy: () => Promise<void>;
+  productLink: UrlRouteOutput;
+}>();
+</script>
+<template>
+  <div class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1">
+    <div class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div class="self-stretch flex flex-col justify-start items-start gap-2">
+        <div class="self-stretch flex flex-col justify-start items-start gap-1">
+          <div v-if="productManufacturer"
+            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight">
+            {{ productManufacturer }}
+          </div>
+
+          <RouterLink :to="productLink"
+            class="self-stretch text-surface-on-surface text-2xl font-normal font-serif leading-9 overflow-hidden line-clamp-2 break-words"
+            data-testid="product-box-product-name-link">
+            {{ productName }}
+          </RouterLink>
+        </div>
+      </div>
+
+      <SwListingProductPrice :product="product" data-testid="product-box-product-price" />
+    </div>
+
+    <SwBaseButton variant="primary" v-if="!fromPrice" size="medium" :disabled="!product?.available" block
+      data-testid="add-to-cart-button" @click="addToCartProxy">
+      {{ translations.product.addToCart }}
+    </SwBaseButton>
+
+    <RouterLink v-else :to="productLink" class="self-stretch">
+      <SwBaseButton block>
+        {{ translations.product.details }}
+      </SwBaseButton>
+    </RouterLink>
+  </div>
+</template>

package/app/components/SwProductCardImage.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+  type UrlRouteOutput,
+  getSmallestThumbnailUrl,
+  isProductOnSale,
+  isProductTopSeller,
+} from "@shopware/helpers";
+import { useElementSize } from "@vueuse/core";
+import { computed, useTemplateRef } from "vue";
+import { useImagePlaceholder } from "#imports";
+import type { Schemas } from "#shopware";
+
+type Translations = {
+  product: {
+    badges: {
+      topseller: string;
+    };
+  };
+};
+
+const props = defineProps<{
+  product: Schemas["Product"];
+  translations: Translations;
+  isInWishlist: boolean;
+  isLoading: boolean;
+  toggleWishlist: () => Promise<void>;
+  productLink: UrlRouteOutput;
+}>();
+
+const containerElement = useTemplateRef<HTMLDivElement>("containerElement");
+const { width, height } = useElementSize(containerElement);
+
+const DEFAULT_THUMBNAIL_SIZE = 10;
+function roundUp(num: number) {
+  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
+}
+
+const coverSrcPath = computed(() => {
+  return getSmallestThumbnailUrl(props.product?.cover?.media);
+});
+
+const imageModifiers = computed(() => {
+  // Use the larger dimension and apply 2x for high-DPI displays
+  // For square containers, width and height should be the same
+  const containerSize = Math.max(width.value || 0, height.value || 0);
+  const size = roundUp(containerSize * 2);
+  return {
+    width: size,
+    height: size,
+  };
+});
+
+const coverAlt = computed(() => {
+  return props.product?.cover?.media?.alt || props.product?.translated?.name;
+});
+
+const isOnSale = computed(() => isProductOnSale(props.product));
+const isTopseller = computed(() => isProductTopSeller(props.product));
+
+const placeholderSvg = useImagePlaceholder();
+</script>
+
+<template>
+  <div ref="containerElement" class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
+    <RouterLink :to="productLink" class="self-stretch h-full relative overflow-hidden">
+      <NuxtImg preset="productCard"
+        class="w-full h-full absolute top-0 left-0 object-cover"
+        :placeholder="placeholderSvg"
+        :src="coverSrcPath" :alt="coverAlt" :modifiers="imageModifiers" data-testid="product-box-img" />
+    </RouterLink>
+
+    <div v-if="isTopseller || isOnSale"
+      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center">
+      <div class="text-states-on-error text-xs font-bold leading-none">
+        {{ translations.product.badges.topseller }}
+      </div>
+    </div>
+
+    <client-only>
+      <SwIconButton type="secondary" aria-label="Toggle wishlist" :disabled="isLoading"
+        class="w-10 h-10 right-4 top-4 absolute bg-brand-secondary rounded-full flex items-center justify-center"
+        data-testid="product-box-toggle-wishlist-button" @click="toggleWishlist">
+        <SwWishlistIcon :filled="isInWishlist" />
+      </SwIconButton>
+    </client-only>
+  </div>
+</template>

package/app/components/SwProductCardSkeleton.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
+    aria-hidden="true">
+    <!-- image skeleton -->
+    <div class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden">
+      <div class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+
+      <div
+        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse">
+        <span class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"></span>
+      </div>
+
+      <div class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
+    </div>
+
+    <!-- details skeleton -->
+    <div class="flex flex-col items-start justify-start gap-4 self-stretch p-2">
+      <div class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+
+      <div class="w-full">
+        <div class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"></div>
+        <div class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      </div>
+
+      <div class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+
+      <div class="flex w-full gap-3">
+        <div class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/SwProductListingFilter.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts" generic="ListingFilter extends { code: string }">
+import { computed } from "vue";
+import type { Component } from "vue";
+import SwFilterPriceVue from "./listing-filters/SwFilterPrice.vue";
+import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
+import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
+import SwFilterShippingFreeVue from "./listing-filters/SwFilterShippingFree.vue";
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedManufacturer: Set<string>;
+  selectedProperties: Set<string>;
+  selectedMinPrice: number | undefined;
+  selectedMaxPrice: number | undefined;
+  selectedRating: number | undefined;
+  selectedShippingFree: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+  "filter-change": [{ code: string; value: string | number | boolean }];
+}>();
+
+const transformedFilters = computed(() => ({
+  price: {
+    min: props.selectedMinPrice,
+    max: props.selectedMaxPrice,
+  },
+  rating: props.selectedRating,
+  "shipping-free": props.selectedShippingFree,
+  manufacturer: [...props.selectedManufacturer],
+  properties: [...props.selectedProperties],
+}));
+
+const filterComponent = computed<Component | undefined>(() => {
+  const componentMap: Record<string, Component> = {
+    manufacturer: SwFilterPropertiesVue,
+    price: SwFilterPriceVue,
+    rating: SwFilterRatingVue,
+    "shipping-free": SwFilterShippingFreeVue,
+  };
+
+  return (
+    componentMap[props.filter.code] ||
+    ("options" in props.filter ? SwFilterPropertiesVue : undefined)
+  );
+});
+
+const handleSelectValue = ({
+  code,
+  value,
+}: { code: string; value: string | number | boolean }) => {
+  emit("filter-change", { code, value });
+};
+</script>
+<template>
+  <div>
+    <component
+      :is="filterComponent"
+      :filter="filter"
+      :selected-filters="transformedFilters"
+      @select-value="handleSelectValue"
+    />
+  </div>
+</template>