@shopbite-de/storefront 1.18.5 → 1.20.0

package/.github/workflows/ci.yaml

@@ -121,51 +121,51 @@ jobs:
       - name: Unit tests
         run: pnpm test:unit
 
-  e2e-test:
-    name: E2E tests
-    environment: test
-    needs: [setup]
-    timeout-minutes: 15
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: pnpm/action-setup@v5
-        with:
-          version: 10.33.0
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-
-      - name: Restore workspace from cache
-        uses: actions/cache/restore@v5
-        with:
-          path: |
-            ~/.local/share/pnpm/store
-            node_modules
-            .nuxt
-            .output
-          key: workspace-${{ runner.os }}-${{ github.sha }}
-
-      - name: Cache Playwright browsers
-        uses: actions/cache@v5
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - name: Install Playwright browsers
-        run: pnpm exec playwright install --with-deps chromium
-
-      - name: E2E tests
-        env:
-          TEST_USER: ${{ secrets.TEST_USER }}
-          TEST_USER_PASS: ${{ secrets.TEST_USER_PASS }}
-        run: pnpm test:e2e
-
-      - uses: actions/upload-artifact@v7
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
+#  e2e-test:
+#    name: E2E tests
+#    environment: test
+#    needs: [setup]
+#    timeout-minutes: 15
+#    runs-on: ubuntu-latest
+#    steps:
+#      - uses: actions/checkout@v6
+#
+#      - uses: pnpm/action-setup@v5
+#        with:
+#          version: 10.33.0
+#
+#      - uses: actions/setup-node@v6
+#        with:
+#          node-version: '24'
+#
+#      - name: Restore workspace from cache
+#        uses: actions/cache/restore@v5
+#        with:
+#          path: |
+#            ~/.local/share/pnpm/store
+#            node_modules
+#            .nuxt
+#            .output
+#          key: workspace-${{ runner.os }}-${{ github.sha }}
+#
+#      - name: Cache Playwright browsers
+#        uses: actions/cache@v5
+#        with:
+#          path: ~/.cache/ms-playwright
+#          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+#
+#      - name: Install Playwright browsers
+#        run: pnpm exec playwright install --with-deps chromium
+#
+#      - name: E2E tests
+#        env:
+#          TEST_USER: ${{ secrets.TEST_USER }}
+#          TEST_USER_PASS: ${{ secrets.TEST_USER_PASS }}
+#        run: pnpm test:e2e
+#
+#      - uses: actions/upload-artifact@v7
+#        if: ${{ !cancelled() }}
+#        with:
+#          name: playwright-report
+#          path: playwright-report/
+#          retention-days: 30

package/app/components/Category/Listing.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { operations, Schemas } from "#shopware";
+import type { Schemas } from "#shopware";
 import Breadcrumb from "~/components/Category/Breadcrumb.vue";
 
 const props = defineProps<{
@@ -8,72 +8,43 @@ const props = defineProps<{
 
 const { id: categoryId } = toRefs(props);
 
-const searchCriteria = {
-  includes: {
-    product: [
-      "id",
-      "productNumber",
-      "name",
-      "description",
-      "calculatedPrice",
-      "translated",
-      "properties",
-      "propertyIds",
-      "sortedProperties",
-      "cover",
-    ],
-    property: ["id", "name", "translated", "options"],
-    property_group_option: ["id", "name", "translated", "group"],
-    product_option: ["id", "groupId", "name", "translated", "group"],
-  },
-  associations: {
-    cover: {
-      associations: {
-        media: {},
-      },
-    },
-    properties: {
-      associations: {
-        group: {},
-      },
-    },
-  },
-  limit: 100,
-} as operations["searchPage post /search"]["body"];
+const { category } = await useCategory(categoryId);
 
 const {
-  resetFilters,
+  showSkeleton,
   loading,
-  search,
-  getElements,
-  getCurrentListing,
-  getCurrentSortingOrder,
-  getSortingOrders,
-  changeCurrentSortingOrder,
-  getAvailableFilters,
-  getCurrentFilters,
-  setCurrentFilters,
-  setInitialListing,
-} = useListing({
-  listingType: "categoryListing",
-  categoryId: props.id,
-  defaultSearchCriteria: searchCriteria,
-});
-
-const { category } = await useCategory(categoryId);
+  elements,
+  sortingOrders,
+  currentSortingOrder,
+  availableFilters,
+  currentFilters,
+  changeSorting,
+  setFilters,
+  resetFilters,
+} = useCategoryListing(props.id);
 
 useCategorySeo(category);
 
-const currentSorting = ref(getCurrentSortingOrder.value ?? "Sortieren");
+const currentSorting = ref(currentSortingOrder.value ?? "Sortieren");
+
+// Sync currentSorting when listing data arrives during client-side navigation
+// (currentSortingOrder.value is null at setup time in that case).
+watch(
+  currentSortingOrder,
+  (val) => {
+    if (val) currentSorting.value = val;
+  },
+  { once: true },
+);
 
 const propertyFilters = computed<Schemas["PropertyGroup"][]>(
   () =>
-    (getAvailableFilters.value?.filter(
+    (availableFilters.value?.filter(
       (availableFilter) => availableFilter.code === "properties",
     ) ?? []) as unknown as Schemas["PropertyGroup"][],
 );
 
-const selectedPropertyFilters = ref(getCurrentFilters.value?.properties ?? []);
+const selectedPropertyFilters = ref(currentFilters.value?.properties ?? []);
 const selectedPropertyFiltersString = computed(() =>
   selectedPropertyFilters.value?.join("|"),
 );
@@ -87,48 +58,26 @@ const selectedListingFilters = computed<ShortcutFilterParam[]>(() => {
   ];
 });
 
-const nuxtApp = useNuxtApp();
-const { data: listingPayload, pending } = await useAsyncData(
-  `listing${categoryId.value}`,
-  async () => {
-    await search(searchCriteria);
-    // Return the result so it gets serialized into the SSR payload.
-    // On the client, useAsyncData will restore this without re-running search().
-    return getCurrentListing.value;
-  },
-);
-
-// Populate useListing state from the SSR payload on the client.
-// useListing uses plain refs (not useState), so its state is not automatically
-// hydrated — we restore it via setInitialListing.
-if (listingPayload.value) {
-  await setInitialListing(listingPayload.value);
-}
-
-// During SSR hydration, pending may briefly be true before the payload cache is applied.
-// Suppress the skeleton in that window to prevent a hydration mismatch.
-const showSkeleton = computed(() => pending.value && !nuxtApp.isHydrating);
+let filterChain = Promise.resolve();
 
 watch(selectedListingFilters, (newFilters, oldFilters) => {
-  if (newFilters[0]?.value === oldFilters?.[0]?.value) {
-    return;
-  }
-  setCurrentFilters(newFilters);
+  if (newFilters[0]?.value === oldFilters?.[0]?.value) return;
   currentSorting.value = "Sortieren";
+  filterChain = filterChain
+    .catch(() => {})
+    .then(() => setFilters(newFilters))
+    .catch(() => {});
 });
 
-watch(currentSorting, async () => {
+watch(currentSorting, async (val) => {
+  if (val === currentSortingOrder.value) return;
   const sortingQuery = {
-    query: getCurrentFilters.value?.search,
-    properties: getCurrentFilters.value?.properties?.join("|"),
+    query: currentFilters.value?.search,
+    properties: currentFilters.value?.properties?.join("|"),
   };
-  await changeCurrentSortingOrder(currentSorting.value as string, sortingQuery);
+  await changeSorting(val as string, sortingQuery);
 });
 
-async function handleFilterRest() {
-  await resetFilters();
-}
-
 const moreThanOneFilterAndOption = computed<boolean>(
   () => propertyFilters.value.length > 0,
 );
@@ -148,15 +97,12 @@ const moreThanOneFilterAndOption = computed<boolean>(
           <Breadcrumb :category-id="category?.id" />
           <CategoryHeader v-if="category" :category="category" />
           <div class="flex flex-row justify-between gap-4 mb-4">
-            <UBadge
-              variant="subtle"
-              :label="`${getElements.length} Produkte`"
-            />
+            <UBadge variant="subtle" :label="`${elements.length} Produkte`" />
             <USelect
               v-model="currentSorting"
               icon="i-lucide-arrow-down-wide-narrow"
               value-key="key"
-              :items="getSortingOrders"
+              :items="sortingOrders"
               placeholder="Sortierung"
             />
             <ClientOnly v-if="moreThanOneFilterAndOption">
@@ -205,7 +151,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
                       label="Zurücksetzen"
                       variant="outline"
                       block
-                      @click="handleFilterRest"
+                      @click="resetFilters"
                     />
                   </div>
                 </template>
@@ -231,7 +177,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
             :class="{ 'opacity-40 pointer-events-none': loading }"
           >
             <ProductCard
-              v-for="product in getElements"
+              v-for="product in elements"
               :key="product.id"
               :product="product"
               :with-favorite-button="true"
@@ -281,7 +227,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
                 label="Zurücksetzen"
                 variant="outline"
                 block
-                @click="handleFilterRest"
+                @click="resetFilters"
               />
             </div>
             <template #fallback>

package/app/components/Product/Configurator.vue

@@ -14,17 +14,12 @@ const { variants: selectableOptions } = useProductVariantsZwei(configurator);
 
 const selectedOptions = ref<Record<string, string>>({});
 
-function initialOptions(variant: Ref<Schemas["Product"]>) {
-  const options = variant.value.options as Schemas["PropertyGroupOption"][];
-  for (const option of options) {
-    if (option.group && option.id) {
-      selectedOptions.value[option.group.id] = option.id;
-    }
+const options = product.value.options as Schemas["PropertyGroupOption"][];
+for (const option of options ?? []) {
+  if (option.group && option.id) {
+    selectedOptions.value[option.group.id] = option.id;
   }
 }
-onMounted(() => {
-  initialOptions(product);
-});
 
 watch(
   selectedOptions.value,

package/app/components/Product/CrossSelling.vue

@@ -1,69 +1,26 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import type {
-  AssociationItemProduct,
-  AssociationItem,
-} from "~/types/Association";
-import { useShopwareContext } from "#imports";
+import type { AssociationItemProduct } from "~/types/Association";
 
-const DEFAULT_CURRENCY = "EUR";
-const DEFAULT_LOCALE = "de-DE";
 const LOADING_ICON = "i-lucide-loader";
-const DEFAULT_ICON = "i-lucide-plus";
 
 const props = defineProps<{
   product: Schemas["Product"];
 }>();
 
-const product = computed(() => props.product);
-const selectedExtras = ref<AssociationItemProduct[]>([]);
-
-const { getFormattedPrice } = usePrice({
-  currencyCode: DEFAULT_CURRENCY,
-  localeCode: DEFAULT_LOCALE,
-});
-
-function mapAssociationToItems(
-  associations: Schemas["CrossSellingElement"][],
-): AssociationItem[] {
-  return associations.map((crossSellingElement) => ({
-    label: crossSellingElement.crossSelling.name,
-    products: crossSellingElement.products.map(
-      (product: Schemas["Product"]) => ({
-        label: product.name,
-        value: product.id,
-        price: getFormattedPrice(product.calculatedPrice.unitPrice),
-        icon: DEFAULT_ICON,
-      }),
-    ),
-  }));
-}
-
-const { apiClient } = useShopwareContext();
-
-const { data: productAssociations, pending: isAssociationsLoading } =
-  useAsyncData(`cross-selling-${product.value.id}`, async () => {
-    const response = await apiClient.invoke(
-      "readProductCrossSellings post /product/{productId}/cross-selling",
-      {
-        pathParams: { productId: product.value.id },
-      },
-    );
+const emit = defineEmits<{
+  "extras-selected": [selectedExtras: AssociationItemProduct[]];
+}>();
 
-    return response.data;
-  });
+const selectedExtras = ref<AssociationItemProduct[]>([]);
 
-const associationItems = computed(() =>
-  mapAssociationToItems(productAssociations.value ?? []),
+const { associationItems, isAssociationsLoading } = useProductCrossSelling(
+  () => props.product.id,
 );
 
 watch(selectedExtras, () => emit("extras-selected", selectedExtras.value), {
   deep: true,
 });
-
-const emit = defineEmits<{
-  "extras-selected": [selectedExtras: AssociationItemProduct[]];
-}>();
 </script>
 
 <template>

package/app/components/Product/Detail.vue

@@ -1,142 +1,30 @@
 <script setup lang="ts">
-import type { operations, Schemas } from "#shopware";
-import type { AssociationItemProduct } from "~/types/Association";
-import { useTrackEvent } from "~/composables/useTrackEvent";
+import type { Schemas } from "#shopware";
 
 const props = defineProps<{
   productId: string;
 }>();
 
-const { apiClient } = useShopwareContext();
-const { trackProductView } = useTrackEvent();
-
-const productId = toRef(props.productId);
-
-const searchCriteria = {
-  includes: {
-    product: [
-      "id",
-      "productNumber",
-      "name",
-      "description",
-      "calculatedPrice",
-      "translated",
-      "properties",
-      "propertyIds",
-      "options",
-      "optionIds",
-      "seoCategory",
-      "configuratorSettings",
-      "children",
-      "parentId",
-      "sortedProperties",
-      "cover",
-    ],
-    property: ["id", "name", "translated", "options"],
-    property_group_option: ["id", "name", "translated", "group"],
-    product_configurator_setting: ["id", "optionId", "option", "productId"],
-    product_option: ["id", "groupId", "name", "translated", "group"],
-    category: ["id", "name", "translated"],
-  },
-  associations: {
-    cover: {
-      associations: {
-        media: {},
-      },
-    },
-    properties: {
-      associations: {
-        group: {},
-      },
-    },
-    options: {
-      associations: {
-        group: {},
-      },
-    },
-    configuratorSettings: {
-      associations: {
-        option: {
-          associations: {
-            group: {},
-          },
-        },
-      },
-    },
-    children: {
-      associations: {
-        properties: {
-          associations: {
-            group: {},
-          },
-        },
-        options: {
-          associations: {
-            group: {},
-          },
-        },
-      },
-    },
-  },
-} as operations["searchPage post /search"]["body"];
-
-const { data: productDetails, pending } = useAsyncData(
-  () => `product-${productId.value ?? "none"}`,
-  async () => {
-    if (!productId.value) return null;
-    const response = await apiClient.invoke(
-      "readProductDetail post /product/{productId}",
-      {
-        pathParams: { productId: productId.value },
-        body: searchCriteria,
-      },
-    );
-    return response.data;
-  },
-);
+const emit = defineEmits(["product-added", "variant-selected"]);
 
 const {
+  productDetails,
+  pending,
   selectedProduct,
   selectedQuantity,
   isLoading,
   addToCart,
   setSelectedProduct,
-  setSelectedExtras,
-  setDeselectedIngredients,
-} = useAddToCart();
-
-// Initialize when productDetails is loaded
-watch(
-  () => productDetails.value?.product,
-  (product) => {
-    if (product) {
-      setSelectedProduct(product);
-    }
-  },
-  { immediate: true },
-);
+  onExtrasSelected,
+  onIngredientsDeselected,
+} = useProductDetail(() => props.productId);
 
 const onVariantSwitched = (variant: Schemas["Product"]) => {
   setSelectedProduct(variant);
   emit("variant-selected", variant);
 };
 
-const onExtrasSelected = (extras: AssociationItemProduct[]) => {
-  setSelectedExtras(extras);
-};
-
-const onIngredientsDeselected = (deselected: string[]) => {
-  setDeselectedIngredients(deselected);
-};
-
 const onAddToCart = () => emit("product-added");
-
-const emit = defineEmits(["product-added", "variant-selected"]);
-
-watch(productDetails, () => {
-  if (!productDetails.value) return;
-  trackProductView(productDetails.value.product);
-});
 </script>
 
 <template>

package/app/composables/useCategory.ts

@@ -1,38 +1,10 @@
-import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { Schemas } from "#shopware";
+import type { NitroFetchRequest } from "nitropack";
 
 export async function useCategory(categoryId: Ref<string>) {
-  const { apiClient } = useShopwareContext();
+  const { data: category } = await useFetch<Schemas["Category"]>(
+    `/api/category/${categoryId.value}` as NitroFetchRequest,
+  );
 
-  const criteria = encodeForQuery({
-    includes: {
-      category: [
-        "name",
-        "translated",
-        "seoUrl",
-        "externalLink",
-        "customFields",
-      ],
-    },
-  });
-
-  const cacheKey = computed(() => `category-${categoryId.value}`);
-
-  const { data } = await useAsyncData(cacheKey, async () => {
-    const response = await apiClient.invoke(
-      "readCategoryGet get /category/{navigationId}",
-      {
-        // @ts-expect-error: _criteria is not in the type definition
-        query: { _criteria: criteria },
-        pathParams: {
-          navigationId: categoryId.value,
-        },
-      },
-    );
-
-    return response.data;
-  });
-
-  return {
-    category: data,
-  };
+  return { category };
 }