@shopbite-de/storefront 1.2.4 → 1.2.5

package/app/assets/css/main.css

@@ -17,6 +17,9 @@
     --color-brand-900: #7a2800;
     --color-brand-950: #471500;
     --color-neutral-950: #171717;
+
+    /* This is important because apple devices will zoom in when the font size is below 16px */
+    --text-sm: 16px;
 }
 
 :root {

package/app/components/AnimatedSection.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   duration: "duration-1000",
   delay: "delay-0",
   threshold: 0.1,
-  rootMargin: "0px 0px -100px 0px",
+  rootMargin: "0px 0px 100px 0px",
 });
 
 const { isVisible, elementRef } = useScrollAnimation({

package/app/components/Category/Header.vue

@@ -27,17 +27,12 @@ defineProps<{
     <div v-else class="absolute inset-0 bg-primary" />
 
     <div class="relative p-4">
-      <h2
-        class="text-pretty font-semibold text-3xl md:text-4xl text-white drop-shadow"
-      >
+      <h1 class="text-white font-semibold">
         {{ category.name }}
-      </h2>
-      <h3
-        v-if="category.description"
-        class="text-white/90 text-[15px] text-pretty mt-1"
-      >
+      </h1>
+      <p v-if="category.description">
         {{ category.description }}
-      </h3>
+      </p>
     </div>
   </div>
   <UPageCard
@@ -51,3 +46,15 @@ defineProps<{
     }"
   />
 </template>
+
+<style scoped>
+@import "tailwindcss";
+
+h1 {
+  @apply text-white text-4xl md:text-5xl lg:text-6xl font-extrabold leading-none tracking-tighter mb-3;
+}
+
+p {
+  @apply text-white/90 text-[16px] text-pretty mt-1;
+}
+</style>

package/app/components/Category/Listing.vue

@@ -16,21 +16,13 @@ const searchCriteria = {
       "description",
       "calculatedPrice",
       "translated",
-      "categories",
       "properties",
       "propertyIds",
-      "options",
-      "optionIds",
-      "configuratorSettings",
-      "children",
-      "parentId",
       "sortedProperties",
       "cover",
-      "parentId",
     ],
     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"],
   },
   associations: {
@@ -39,57 +31,14 @@ const searchCriteria = {
         media: {},
       },
     },
-    categories: {},
     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 defaultSorting = {
-  sort: [
-    {
-      field: "productNumber",
-      order: "ASC",
-    },
-  ],
-};
-
-const searchCriteriaWithSorting = {
-  ...searchCriteria,
-  ...defaultSorting,
-} as operations["searchPage post /search"]["body"];
-
 const {
   resetFilters,
   loading,
@@ -149,30 +98,27 @@ const selectedListingFilters = computed<ShortcutFilterParam[]>(() => {
 });
 
 await useAsyncData(`listing${categoryId.value}`, async () => {
-  await search(searchCriteriaWithSorting);
+  await search(searchCriteria);
 });
 
-watch(selectedListingFilters, () => {
-  if (selectedListingFilters.value[0]?.value == "") {
-    handleFilterRest();
-  } else {
-    setCurrentFilters(selectedListingFilters.value);
+watch(selectedListingFilters, (newFilters, oldFilters) => {
+  if (newFilters[0]?.value === oldFilters?.[0]?.value) {
+    return;
   }
+  setCurrentFilters(newFilters);
+  currentSorting.value = "Sortieren";
 });
 
-watch(currentSorting, () => {
-  const q = {
+watch(currentSorting, async () => {
+  const sortingQuery = {
     query: getCurrentFilters.value?.search,
     properties: getCurrentFilters.value?.properties?.join("|"),
   };
-
-  changeCurrentSortingOrder(currentSorting.value as string, q);
+  await changeCurrentSortingOrder(currentSorting.value as string, sortingQuery);
 });
 
 async function handleFilterRest() {
   await resetFilters();
-  selectedPropertyFilters.value = [];
-  currentSorting.value = "number-asc";
 }
 
 const moreThanOneFilterAndOption = computed<boolean>(
@@ -278,7 +224,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
       <template #right>
         <UPageAside>
           <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
-            <h3>Filter</h3>
+            <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Filter</h2>
             <div
               v-for="filter in propertyFilters"
               :key="filter.id"

package/app/components/Features.vue

@@ -18,6 +18,7 @@ defineProps<{
     <UPageSection
       id="features"
       :description="description"
+      :title="title"
       :features="features"
       :headline="headline"
       class="relative overflow-hidden"

package/app/components/Header.vue

@@ -127,6 +127,17 @@ const cartQuickViewOpen = ref(false);
             icon="i-lucide-shopping-cart"
           />
         </UChip>
+
+        <template #header>
+          <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">
+            <UIcon
+              name="i-lucide-shopping-cart"
+              class="size-8"
+              color="primary"
+            />
+            Warenkorb
+          </h2>
+        </template>
         <template #body>
           <CartQuickView
             :with-to-cart-button="true"

package/app/components/Navigation/DesktopLeft2.vue

@@ -32,7 +32,7 @@ const navItems = computed<NavigationMenuItem[]>(() => {
 
 <template>
   <div>
-    <h2>Navigation</h2>
+    <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Speisekarte</h2>
     <UNavigationMenu
       variant="link"
       orientation="vertical"

package/app/components/Product/Card.vue

@@ -87,7 +87,7 @@ const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
           >
 
           <p class="text-base text-pretty font-semibold text-highlighted">
-            {{ product.translated.name }}
+            {{ product.translated.name ?? product.name }}
           </p>
         </div>
       </template>
@@ -123,7 +123,10 @@ const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
         </div>
         <UCollapsible v-model:open="openDetails" class="flex flex-col gap-2">
           <template #content>
-            <ProductDetail2 :product="product" @product-added="toggleDetails" />
+            <ProductDetail2
+              :product-id="product.id"
+              @product-added="toggleDetails"
+            />
           </template>
         </UCollapsible>
       </template>

package/app/components/Product/Detail2.vue

@@ -1,14 +1,81 @@
 <script setup lang="ts">
-import type { Schemas } from "#shopware";
+import type { operations, Schemas } from "#shopware";
 import type { AssociationItemProduct } from "~/types/Association";
 
 const props = defineProps<{
-  product: Schemas["Product"];
+  productId: string;
 }>();
 
 const { apiClient } = useShopwareContext();
 
-const productId = toRef(props.product.id);
+const productId = toRef(props.productId);
+
+const searchCriteria = {
+  includes: {
+    product: [
+      "id",
+      "productNumber",
+      "name",
+      "description",
+      "calculatedPrice",
+      "translated",
+      "properties",
+      "propertyIds",
+      "options",
+      "optionIds",
+      "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"],
+  },
+  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 () => {
@@ -17,6 +84,7 @@ const { data: productDetails, pending } = useAsyncData(
       "readProductDetail post /product/{productId}",
       {
         pathParams: { productId: productId.value },
+        body: searchCriteria,
       },
     );
     return response.data;
@@ -65,7 +133,7 @@ const emit = defineEmits(["product-added"]);
     <div v-if="productDetails?.configurator">
       <ProductConfigurator2
         v-if="productDetails?.configurator"
-        :p="product"
+        :p="productDetails.product"
         :c="productDetails.configurator"
         @variant-switched="onVariantSwitched"
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [