@shopware/cms-base-layer 1.5.1 → 2.1.0

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

@@ -78,8 +78,18 @@ const { getConfigValue } = useCmsElementConfig(props.content);
 const { newsletterSubscribe, newsletterUnsubscribe } = useNewsletter();
 
 const getFormTitle = computed(() => getConfigValue("title"));
-const state = reactive({
-  option: subscriptionOptions[0]?.value ?? "",
+
+type NewsletterFormState = {
+  option: "subscribe" | "unsubscribe";
+  salutationId: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  checkbox: boolean;
+};
+
+const state = reactive<NewsletterFormState>({
+  option: subscriptionOptions[0]?.value ?? "subscribe",
   salutationId: "",
   firstName: "",
   lastName: "",
@@ -87,7 +97,7 @@ const state = reactive({
   checkbox: false,
 });
 
-type Rules = {
+type RequiredRules = {
   email: {
     required: ValidationRuleWithoutParams;
     email: ValidationRuleWithoutParams;
@@ -96,6 +106,9 @@ type Rules = {
     required: ValidationRuleWithoutParams;
     isTrue: (value: boolean) => boolean;
   };
+};
+
+type OptionalRules = {
   firstName: {
     required: ValidationRuleWithoutParams;
     minLength: number;
@@ -105,8 +118,9 @@ type Rules = {
     minLength: number;
   };
 };
-const rules = computed(() => {
-  let temp: Partial<Rules> = {
+
+const rules = computed((): RequiredRules & Partial<OptionalRules> => {
+  const temp: RequiredRules & Partial<OptionalRules> = {
     email: {
       required,
       email,
@@ -117,16 +131,13 @@ const rules = computed(() => {
     },
   };
   if (state.option === "subscribe") {
-    temp = {
-      ...temp,
-      firstName: {
-        required,
-        minLength: 3,
-      },
-      lastName: {
-        required,
-        minLength: 3,
-      },
+    temp.firstName = {
+      required,
+      minLength: 3,
+    };
+    temp.lastName = {
+      required,
+      minLength: 3,
     };
   }
   return temp;
@@ -184,7 +195,7 @@ const invokeSubmit = async () => {
             id="option"
             v-model="state.option"
             name="option"
-            class="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border border-outline-outline-variant placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:border-brand-primary focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option
               v-for="subscription in subscriptionOptions"
@@ -204,19 +215,19 @@ const invokeSubmit = async () => {
             type="email"
             autocomplete="email"
             :class="[
-              $v.email?.$error
+              $v.email.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :placeholder="translations.form.emailPlaceholder"
-            @blur="$v.email?.$touch()"
+            @blur="$v.email.$touch()"
           />
           <span
-            v-if="$v.email?.$error"
+            v-if="$v.email.$error && $v.email.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email?.$errors[0]?.$message || '' }}
+            {{ $v.email.$errors[0].$message }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -225,7 +236,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class=" border-gray-300 focus:border-indigo-500appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class=" border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -247,20 +258,20 @@ const invokeSubmit = async () => {
             name="first-name"
             type="text"
             autocomplete="given-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName?.$error
-                ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+          ? 'border-red-600 focus:border-red-600'
+          : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName?.$touch()"
           />
           <span
-            v-if="$v.firstName?.$error"
+            v-if="$v.firstName?.$error && $v.firstName?.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName?.$errors[0]?.$message || '' }}
+            {{ $v.firstName?.$errors[0].$message }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -271,20 +282,20 @@ const invokeSubmit = async () => {
             name="last-name"
             type="text"
             autocomplete="family-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.lastName?.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.lastNamePlaceholder"
             @blur="$v.lastName?.$touch()"
           />
           <span
-            v-if="$v.lastName?.$error"
+            v-if="$v.lastName?.$error && $v.lastName?.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName?.$errors[0]?.$message || '' }}
+            {{ $v.lastName?.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -295,7 +306,7 @@ const invokeSubmit = async () => {
               v-model="state.checkbox"
               name="privacy"
               type="checkbox"
-              class="mt-1 focus:ring-indigo-500 h-4 w-4 border text-indigo-600 rounded"
+              class="mt-1 focus:ring-brand-primary h-4 w-4 border text-brand-primary rounded"
               :class="[
                 $v.checkbox?.$error ? 'border-red-600' : 'border-gray-300',
               ]"
@@ -313,7 +324,7 @@ const invokeSubmit = async () => {
       </div>
       <div class="flex justify-end mt-10">
         <button
-          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-75"
+          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-primary disabled:opacity-75"
           type="submit"
         >
           {{ translations.form.submit }}

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

@@ -36,8 +36,7 @@ defineEmits<(e: "changePage", page: number) => void>();
       @click="$emit('changePage', current - 1)"
     >
       <span class="sr-only">{{ translations.listing.previous }}</span>
-      <!-- Heroicon name: solid/chevron-left -->
-      <div class="w-5 h-5 i-carbon-chevron-left" />
+      <SwChevronIcon direction="left" :size="20" />
     </button>
     <button
       v-if="current > 2"
@@ -62,7 +61,7 @@ defineEmits<(e: "changePage", page: number) => void>();
     </button>
     <button
       aria-current="page"
-      class="bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      class="bg-surface-surface-primary border-brand-primary text-brand-primary relative inline-flex items-center px-4 py-2 border text-sm font-medium"
       :class="[
         current - 1 >= 1 ? '' : 'rounded-l-md border border-secondary-300',
         total == current ? 'rounded-r-md border border-secondary-300' : '',
@@ -99,8 +98,7 @@ defineEmits<(e: "changePage", page: number) => void>();
       @click="$emit('changePage', current + 1)"
     >
       <span class="sr-only">{{ translations.listing.next }}</span>
-      <!-- Heroicon name: solid/chevron-right -->
-      <div class="w-5 h-5 i-carbon-chevron-right" />
+      <SwChevronIcon direction="right" :size="20" />
     </button>
   </nav>
 </template>

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,169 @@
+<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, toRef } 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 {
+  product: productProp,
+  layoutType = "standard",
+  displayMode = "standard",
+  isProductListing = false,
+} = defineProps<{
+  product: Schemas["Product"];
+  layoutType?: BoxLayout;
+  displayMode?: DisplayMode;
+  isProductListing?: boolean;
+}>();
+
+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 = toRef(() => productProp);
+
+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(
+        `${product?.value.translated.name} ${translations.product.addedToWishlist}`,
+      );
+    } else {
+      await removeFromWishlist();
+      pushSuccess(
+        `${product?.value.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(
+        `${product?.value.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(
+      `${product?.value.translated.name} ${translations.product.addedToCart}`,
+    );
+};
+
+const fromPrice = getProductFromPrice(product.value);
+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"
+      :layoutType="layoutType"
+    />
+  </div>
+</template>

package/app/components/SwProductCardDetails.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { BoxLayout } from "@shopware/composables";
+import type { UrlRouteOutput } from "@shopware/helpers";
+import { computed } from "vue";
+import type { Schemas } from "#shopware";
+
+type Translations = {
+  product: {
+    addToCart: string;
+    details: string;
+  };
+  errors: {
+    [key: string]: string;
+  };
+};
+
+const props = defineProps<{
+  product: Schemas["Product"];
+  productName: string | null;
+  productManufacturer?: string | null;
+  translations: Translations;
+  fromPrice?: number;
+  addToCartProxy: () => Promise<void>;
+  productLink: UrlRouteOutput;
+  layoutType?: BoxLayout;
+}>();
+
+const isMinimalLayout = computed(() => props.layoutType === "minimal");
+</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 min-h-[4.5rem]"
+            data-testid="product-box-product-name-link">
+            {{ productName }}
+          </RouterLink>
+        </div>
+      </div>
+
+      <!-- Star rating for minimal layout -->
+      <SwProductRating
+        v-if="isMinimalLayout"
+        :rating="product?.ratingAverage ?? 0"
+        :review-count="product?.productReviews?.length ?? 0"
+        class="mt-4"
+      />
+
+      <!-- Price for standard layout -->
+      <SwListingProductPrice v-else :product="product" data-testid="product-box-product-price" />
+    </div>
+
+    <!-- CTA buttons only for non-minimal layout -->
+    <template v-if="!isMinimalLayout">
+      <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>
+    </template>
+  </div>
+</template>

package/app/components/SwProductCardImage.vue

@@ -0,0 +1,90 @@
+<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) ||
+    props.product?.cover?.media?.url
+  );
+});
+
+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>