@shopware/cms-base-layer 1.5.1 → 2.0.0

package/components/SwProductCard.vue

@@ -1,286 +0,0 @@
-<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,
-  getProductName,
-  getProductRoute,
-  getSmallestThumbnailUrl,
-} from "@shopware/helpers";
-import { getCmsTranslate } from "@shopware/helpers";
-import { useElementSize } from "@vueuse/core";
-import { defu } from "defu";
-import { computed, ref, toRefs, useTemplateRef } from "vue";
-import { RouterLink } from "vue-router";
-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, isInCart, count } = 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();
-      pushError(
-        `${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 { getUrlPrefix } = useUrlResolver();
-
-const imageElement = useTemplateRef("imageElement");
-const { height } = useElementSize(imageElement);
-
-const DEFAULT_THUMBNAIL_SIZE = 10;
-function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
-}
-
-const srcPath = computed(() => {
-  return `${getSmallestThumbnailUrl(
-    product.value?.cover?.media,
-  )}?&height=${roundUp(height.value)}&fit=cover`;
-});
-</script>
-
-<template>
-  <div
-    class="sw-product-card group relative max-w-full inline-block max-w-sm bg-white border border-gray-200 rounded-md shadow transform transition duration-300 hover:scale-101"
-    data-testid="product-box"
-  >
-    <div
-      :class="[
-        'w-full rounded-md overflow-hidden hover:opacity-75',
-        layoutType === 'image' ? 'h-80' : 'h-60',
-      ]"
-    >
-      <div class="absolute top-5 -left-1 z-10">
-        <span
-          v-if="product.markAsTopseller"
-          class="bg-[#FFBD5D] px-2.5 py-1.5 color-black text-xl"
-          >{{ translations.product.badges.topseller }}</span
-        >
-      </div>
-      <RouterLink
-        :to="buildUrlPrefix(getProductRoute(product), getUrlPrefix())"
-        class="overflow-hidden"
-      >
-        <img
-          ref="imageElement"
-          loading="lazy"
-          :src="srcPath"
-          :alt="getProductName({ product }) || ''"
-          class="transform transition duration-400 hover:scale-120"
-          :class="{
-            'w-full h-full': true,
-            'object-cover':
-              displayMode === 'cover' ||
-              (displayMode === 'standard' && layoutType === 'image'),
-            'object-contain': displayMode === 'contain',
-            'object-scale-down':
-              displayMode === 'standard' && layoutType !== 'image',
-          }"
-          data-testid="product-box-img"
-        />
-      </RouterLink>
-    </div>
-    <button
-      aria-label="Add to wishlist"
-      type="button"
-      :disabled="isLoading"
-      class="absolute bg-transparent top-2 right-2 hover:animate-count-infinite hover:animate-heart-beat"
-      data-testid="product-box-toggle-wishlist-button"
-      @click="toggleWishlistProduct"
-    >
-      <client-only>
-        <div
-          v-if="isInWishlist"
-          class="h-9 w-9 i-carbon-favorite-filled c-red-500"
-          data-testid="product-box-wishlist-icon-in"
-        ></div>
-        <div
-          v-else
-          class="h-9 w-9 i-carbon-favorite c-black"
-          data-testid="product-box-wishlist-icon-not-in"
-        ></div>
-        <template #placeholder>
-          <div class="h-9 w-9 i-carbon-favorite"></div>
-        </template>
-      </client-only>
-    </button>
-    <div class="h-8 mx-4 my-2">
-      <p
-        v-for="option in product?.options"
-        :key="option.id"
-        class="items-center line-clamp-2 rounded-md text-xs font-medium text-gray-600 mt-3"
-      >
-        {{ option.group.name }}:
-        <span class="font-bold">{{ option.name }} </span>
-      </p>
-    </div>
-    <div class="px-4 pb-4">
-      <RouterLink
-        class="line-clamp-2"
-        :to="buildUrlPrefix(getProductRoute(product), getUrlPrefix())"
-        data-testid="product-box-product-name-link"
-      >
-        <div
-          class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white min-h-60px"
-        >
-          {{ getProductName({ product }) }}
-        </div>
-      </RouterLink>
-
-      <SwListingProductPrice
-        :product="product"
-        class="ml-auto"
-        data-testid="product-box-product-price"
-      />
-
-      <div>
-        <button
-          v-if="!fromPrice"
-          type="button"
-          class="w-full justify-center my-8 md-m-0 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition duration-400 flex"
-          :class="{
-            'text-white bg-blue-600 hover:bg-blue-700': !isInCart,
-            'text-gray-600 bg-gray-100': isInCart,
-            'opacity-50 cursor-not-allowed': !product.available,
-          }"
-          data-testid="add-to-cart-button"
-          :disabled="!product.available"
-          @click="addToCartProxy"
-        >
-          {{ translations.product.addToCart }}
-          <div v-if="isInCart" class="flex ml-2">
-            <div class="w-5 h-5 i-carbon-shopping-bag text-gray-600" />
-            {{ count }}
-          </div>
-        </button>
-        <RouterLink
-          v-else
-          :to="buildUrlPrefix(getProductRoute(product), getUrlPrefix())"
-          class=""
-        >
-          <div
-            class="text-center justify-center w-full md:w-auto my-8 md-m-0 py-2 px-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition duration-400"
-          >
-            <span data-testid="product-box-product-show-details">Details</span>
-          </div>
-        </RouterLink>
-      </div>
-    </div>
-  </div>
-</template>

package/components/SwProductListingFilter.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts" generic="ListingFilter extends { code: string }">
-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;
-  selectedFilters?: {
-    [key: string]: unknown;
-  };
-}>();
-
-const emit = defineEmits<{
-  selectFilterValue: [{ code: string; value: string | number | boolean }];
-}>();
-
-const cmsMap = () => {
-  const map: {
-    [key: string]: Component;
-  } = {
-    manufacturer: SwFilterPropertiesVue,
-    properties: SwFilterPropertiesVue,
-    price: SwFilterPriceVue,
-    rating: SwFilterRatingVue,
-    "shipping-free": SwFilterShippingFreeVue,
-  };
-
-  return map[props.filter?.code];
-};
-</script>
-<template>
-  <div>
-    <component
-      :is="cmsMap()"
-      :filter="filter"
-      :selected-filters="selectedFilters"
-      @select-value="emit('selectFilterValue', $event)"
-    />
-  </div>
-</template>

package/components/SwProductListingFilters.vue

@@ -1,292 +0,0 @@
-<script setup lang="ts">
-import type {
-  CmsElementProductListing,
-  CmsElementSidebarFilter,
-} from "@shopware/composables";
-import { useCmsTranslations } from "@shopware/composables";
-import { onClickOutside } from "@vueuse/core";
-import { defu } from "defu";
-import { computed, provide, reactive, ref, useTemplateRef } from "vue";
-import type { ComputedRef, UnwrapNestedRefs } from "vue";
-import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
-import type { Schemas, operations } from "#shopware";
-
-const props = defineProps<{
-  content: CmsElementProductListing | CmsElementSidebarFilter;
-  listingType?: string;
-}>();
-
-type Translations = {
-  listing: {
-    filters: string;
-    sort: string;
-    resetFilters: string;
-  };
-};
-
-let translations: Translations = {
-  listing: {
-    filters: "Filters",
-    sort: "Sort",
-    resetFilters: "Reset filters",
-  },
-};
-
-translations = defu(useCmsTranslations(), translations) as Translations;
-
-const route = useRoute();
-const router = useRouter();
-
-const isSortMenuOpen = ref(false);
-const {
-  changeCurrentSortingOrder,
-  filtersToQuery,
-  getCurrentFilters,
-  getCurrentSortingOrder,
-  getInitialFilters,
-  getSortingOrders,
-  search,
-} = useCategoryListing();
-
-const sidebarSelectedFilters: UnwrapNestedRefs<{
-  [key: string]: Set<string> | string | number | boolean | undefined;
-}> = reactive<{
-  manufacturer: Set<string>;
-  properties: Set<string>;
-  "min-price": string | number | undefined;
-  "max-price": string | number | undefined;
-  rating: string | number | undefined;
-  "shipping-free": boolean | undefined;
-}>({
-  manufacturer: new Set(),
-  properties: new Set(),
-  "min-price": undefined,
-  "max-price": undefined,
-  rating: undefined,
-  "shipping-free": undefined,
-});
-
-const showResetFiltersButton = computed<boolean>(() => {
-  if (
-    selectedOptionIds.value.length !== 0 ||
-    sidebarSelectedFilters["max-price"] ||
-    sidebarSelectedFilters["min-price"] ||
-    sidebarSelectedFilters.rating ||
-    sidebarSelectedFilters["shipping-free"]
-  ) {
-    return true;
-  }
-
-  return false;
-});
-
-const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
-  computed(() => ({
-    manufacturer: [
-      ...(sidebarSelectedFilters.manufacturer as Set<string>),
-    ]?.join("|"),
-    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
-      "|",
-    ),
-    "min-price": sidebarSelectedFilters["min-price"] as number,
-    "max-price": sidebarSelectedFilters["max-price"] as number,
-    order: getCurrentSortingOrder.value as string,
-    "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
-    rating: sidebarSelectedFilters.rating as number,
-    search: "",
-    limit: route.query.limit ? Number(route.query.limit) : 15,
-  }));
-
-for (const param in route.query) {
-  if (Object.prototype.hasOwnProperty.call(sidebarSelectedFilters, param)) {
-    if (
-      sidebarSelectedFilters[param] &&
-      typeof sidebarSelectedFilters[param] === "object"
-    ) {
-      const elements = (route.query[param] as unknown as string).split("|");
-      for (const element of elements) {
-        sidebarSelectedFilters[param].add(element);
-      }
-    } else {
-      const queryValue = route.query[param];
-      if (queryValue !== null && !Array.isArray(queryValue)) {
-        sidebarSelectedFilters[param] = queryValue;
-      }
-    }
-  }
-}
-
-const onOptionSelectToggle = async ({
-  code,
-  value,
-}: {
-  code: string;
-  value: string | number | boolean;
-}) => {
-  if (!["properties", "manufacturer"].includes(code)) {
-    sidebarSelectedFilters[code] = value;
-  } else {
-    const filterSet = sidebarSelectedFilters[code] as Set<string>;
-    const stringValue = String(value);
-    if (filterSet?.has(stringValue)) {
-      filterSet.delete(stringValue);
-    } else {
-      filterSet?.add(stringValue);
-    }
-  }
-
-  await executeSearch();
-};
-
-const executeSearch = async () => {
-  await search(searchCriteriaForRequest.value);
-  const query = filtersToQuery(searchCriteriaForRequest.value);
-  const { limit: _, ...queryWithoutLimit } = query; // remove limit from query
-  await router.push({
-    query: queryWithoutLimit as LocationQueryRaw,
-  });
-};
-
-const clearFilters = () => {
-  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
-  (sidebarSelectedFilters.properties as Set<string>).clear();
-  sidebarSelectedFilters["min-price"] = undefined;
-  sidebarSelectedFilters["max-price"] = undefined;
-  sidebarSelectedFilters.rating = undefined;
-  sidebarSelectedFilters["shipping-free"] = undefined;
-};
-
-const currentSortingOrder = computed({
-  get: (): string => getCurrentSortingOrder.value || "",
-  set: async (order: string): Promise<void> => {
-    await router.push({
-      query: {
-        ...route.query,
-        order,
-      },
-    });
-
-    await changeCurrentSortingOrder(order, {
-      ...(route.query as unknown as operations["searchPage post /search"]["body"]),
-      limit: route.query.limit ? Number(route.query.limit) : 15,
-    });
-  },
-});
-
-const selectedOptionIds = computed(() => [
-  ...(sidebarSelectedFilters.properties as Set<string>),
-  ...(sidebarSelectedFilters.manufacturer as Set<string>),
-]);
-provide("selectedOptionIds", selectedOptionIds);
-
-async function invokeCleanFilters() {
-  clearFilters();
-  await executeSearch();
-}
-const isDefaultSidebarFilter =
-  props.content.type === "sidebar-filter" &&
-  props.content.config?.boxLayout?.value === "standard";
-const dropdownElement = useTemplateRef("dropdownElement");
-onClickOutside(dropdownElement, () => {
-  isSortMenuOpen.value = false;
-});
-
-const handleSortingClick = (key: string) => {
-  currentSortingOrder.value = key;
-  isSortMenuOpen.value = false;
-};
-</script>
-<template>
-  <div class="bg-white">
-    <div class="mx-auto m-0" :class="{ 'px-5': isDefaultSidebarFilter }">
-      <ClientOnly>
-        <div
-          class="relative flex items-baseline justify-between pt-6 pb-6 border-b border-gray-200"
-        >
-          <div class="text-4xl tracking-tight text-gray-900">
-            {{ translations.listing.filters }}
-          </div>
-
-          <div ref="dropdownElement" class="flex items-center">
-            <div class="relative inline-block text-left">
-              <div>
-                <button
-                  type="button"
-                  @click="isSortMenuOpen = !isSortMenuOpen"
-                  class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
-                  id="menu-button"
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                >
-                  {{ translations.listing.sort }}
-                  <div
-                    class="i-carbon-chevron-down h-5 w-5 ml-1"
-                    :class="{ hidden: isSortMenuOpen }"
-                  ></div>
-                  <div
-                    class="i-carbon-chevron-up h-5 w-5 ml-1"
-                    :class="{ hidden: !isSortMenuOpen }"
-                  ></div>
-                </button>
-              </div>
-              <div
-                :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
-                class="origin-top-left left-0 lg:origin-top-right lg:right-0 lg:left-auto mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-1000"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="menu-button"
-                tabindex="-1"
-              >
-                <div class="py-1" role="none">
-                  <button
-                    v-for="sorting in getSortingOrders"
-                    :key="sorting.key"
-                    @click="handleSortingClick(sorting.key)"
-                    :class="[
-                      sorting.key === getCurrentSortingOrder
-                        ? 'font-medium text-gray-900'
-                        : 'text-gray-500',
-                    ]"
-                    class="block px-4 py-2 text-sm bg-transparent"
-                    role="menuitem"
-                    tabindex="-1"
-                  >
-                    {{ sorting.label }}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-wrap" v-if="getInitialFilters.length">
-          <div
-            v-for="filter in getInitialFilters"
-            :key="`${filter?.id || filter?.code}`"
-            class="mb-2 w-full"
-          >
-            <SwProductListingFilter
-              @select-filter-value="onOptionSelectToggle"
-              :selected-filters="getCurrentFilters"
-              :filter="filter"
-              class="relative"
-            />
-          </div>
-          <div v-if="showResetFiltersButton" class="mx-auto mt-4 mb-2">
-            <button
-              class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-              @click="invokeCleanFilters"
-              type="button"
-            >
-              {{ translations.listing.resetFilters
-              }}<span
-                class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
-              ></span>
-            </button>
-          </div>
-        </div>
-      </ClientOnly>
-    </div>
-  </div>
-</template>