@shopbite-de/storefront 1.2.4 → 1.2.6

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/app/components/Wishlist.vue

@@ -1,19 +1,30 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
 
-const { getWishlistProducts, items, clearWishlist } = useWishlist();
+const props = withDefaults(
+  defineProps<{
+    showMenuButton?: boolean;
+    useGridLayout?: boolean;
+  }>(),
+  {
+    showMenuButton: false,
+    useGridLayout: false,
+  },
+);
+
+const { getWishlistProducts, items } = useWishlist();
 const { apiClient } = useShopwareContext();
+const {
+  isAddingToCart,
+  addingItemId,
+  isLoading,
+  clearWishlistHandler,
+  addSingleItemToCart,
+  addAllItemsToCart,
+} = useWishlistActions();
+
 const products = ref<Schemas["Product"][]>([]);
-const isLoading = ref(false);
 
-const clearWishlistHandler = async () => {
-  try {
-    isLoading.value = true;
-    clearWishlist();
-  } finally {
-    isLoading.value = false;
-  }
-};
 const loadProductsByItemIds = async (itemIds: string[]): Promise<void> => {
   isLoading.value = true;
 
@@ -56,33 +67,159 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <h2 class="text-2xl">Merkliste</h2>
-    <div class="flex flex-col gap-4 h-full">
+  <div class="flex flex-col gap-6">
+    <!-- Primary Action - Add All to Cart -->
+    <div v-if="products.length > 0">
+      <UButton
+        icon="i-lucide-shopping-cart"
+        color="primary"
+        variant="solid"
+        size="xl"
+        block
+        :loading="isAddingToCart"
+        class="font-semibold shadow-md"
+        @click="addAllItemsToCart(products)"
+      >
+        Alle in den Warenkorb ({{ products.length }})
+      </UButton>
+    </div>
+
+    <!-- Empty State -->
+    <UPageCard v-if="products.length === 0 && !isLoading" class="text-center">
+      <div class="flex flex-col items-center justify-center gap-4 py-8">
+        <UIcon name="i-lucide-heart-off" class="size-16 text-neutral-400" />
+        <div class="flex flex-col gap-2">
+          <h3 class="text-lg font-semibold text-highlighted">
+            Keine Produkte auf der Merkliste
+          </h3>
+          <p class="text-sm text-neutral-500">
+            Füge deine Lieblingsprodukte zur Merkliste hinzu, um sie später
+            schnell wiederzufinden.
+          </p>
+        </div>
+        <NuxtLink v-if="showMenuButton" to="/speisekarte">
+          <UButton
+            icon="i-lucide-utensils"
+            color="primary"
+            variant="solid"
+            size="lg"
+          >
+            Zur Speisekarte
+          </UButton>
+        </NuxtLink>
+      </div>
+    </UPageCard>
+
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex flex-col gap-4">
+      <USkeleton class="h-32 w-full" />
+      <USkeleton class="h-32 w-full" />
+    </div>
+
+    <!-- Products List -->
+    <div v-if="products.length > 0" class="flex flex-col gap-4">
+      <!-- Product Items -->
       <div
-        v-if="products.length === 0"
-        class="flex flex-row items-center gap-2"
+        :class="
+          props.useGridLayout
+            ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
+            : 'flex flex-col gap-4'
+        "
       >
-        <UIcon name="i-lucide-frown" class="size-5" />
-        <p>Keine Produkte</p>
+        <div v-for="product in products" :key="product.id">
+          <div class="relative">
+            <UPageCard
+              variant="outline"
+              :ui="{ root: 'shadow-sm hover:shadow-md transition-shadow' }"
+            >
+              <div class="flex flex-col gap-3">
+                <!-- Product Info with Heart Button -->
+                <div class="flex flex-row gap-3 items-start justify-between">
+                  <div class="flex flex-row gap-3 items-start flex-1 min-w-0">
+                    <div
+                      v-if="product.cover?.media?.url"
+                      class="flex-shrink-0 w-16 h-16"
+                    >
+                      <NuxtImg
+                        :src="product.cover.media.url"
+                        class="rounded-md w-full h-full object-cover"
+                        sizes="64px"
+                      />
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <div class="flex flex-col gap-1">
+                        <span class="text-xs text-brand-500 font-medium">
+                          #{{ product.productNumber }}
+                        </span>
+                        <h3
+                          class="text-sm font-semibold text-highlighted line-clamp-2 leading-tight"
+                        >
+                          {{ product.translated.name }}
+                        </h3>
+                        <p class="text-base font-bold text-primary-600">
+                          {{
+                            usePrice({
+                              currencyCode: "EUR",
+                              localeCode: "de-DE",
+                            }).getFormattedPrice(
+                              product.calculatedPrice.totalPrice,
+                            )
+                          }}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Heart Button -->
+                  <div class="flex-shrink-0">
+                    <AddToWishlist :product="product" />
+                  </div>
+                </div>
+
+                <!-- Add to Cart Button -->
+                <UButton
+                  icon="i-lucide-shopping-cart"
+                  color="primary"
+                  variant="solid"
+                  size="md"
+                  block
+                  :loading="addingItemId === product.id"
+                  @click="addSingleItemToCart(product)"
+                >
+                  In den Warenkorb
+                </UButton>
+              </div>
+            </UPageCard>
+          </div>
+        </div>
       </div>
-      <div class="flex flex-col gap-4">
-        <ProductCard
-          v-for="product in products"
-          :key="product.id"
-          :product="product"
-          :with-favorite-button="true"
-          :with-add-to-cart-button="false"
-        />
+
+      <!-- Secondary Actions -->
+      <div
+        class="pt-4 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row gap-2"
+      >
         <UButton
-          v-if="products.length > 0"
+          icon="i-lucide-trash-2"
           color="neutral"
-          variant="outline"
-          icon="i-lucide-trash"
+          variant="ghost"
+          size="md"
+          class="flex-1"
+          :disabled="isLoading"
           @click="clearWishlistHandler"
         >
-          Alles löschen
+          Merkliste leeren
         </UButton>
+
+        <NuxtLink v-if="showMenuButton" to="/speisekarte" class="flex-1">
+          <UButton
+            icon="i-lucide-utensils"
+            color="neutral"
+            variant="outline"
+            size="md"
+            block
+          >
+            Zur Speisekarte
+          </UButton>
+        </NuxtLink>
       </div>
     </div>
   </div>

package/app/composables/useAddToCart.ts

@@ -79,9 +79,9 @@ export function useAddToCart() {
     if (extras.length === 0 && deselectedIngredients.value.length === 0) {
       return [
         {
-          id: selectedProduct.value.id,
           quantity: selectedQuantity.value,
           type: LINE_ITEM_PRODUCT,
+          referencedId: selectedProduct.value.id,
         },
       ];
     }

package/app/composables/useWishlistActions.ts

@@ -0,0 +1,160 @@
+import type { Schemas } from "#shopware";
+
+export function useWishlistActions() {
+  const { addProducts, refreshCart } = useCart();
+  const toast = useToast();
+  const { triggerProductAdded } = useProductEvents();
+  const { clearWishlist } = useWishlist();
+
+  const isAddingToCart = ref(false);
+  const addingItemId = ref<string | null>(null);
+  const isLoading = ref(false);
+
+  const clearWishlistHandler = async () => {
+    try {
+      isLoading.value = true;
+      clearWishlist();
+      toast.add({
+        title: "Merkliste geleert",
+        description: "Alle Produkte wurden von der Merkliste entfernt.",
+        icon: "i-lucide-trash",
+        color: "neutral",
+      });
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  const addSingleItemToCart = async (product: Schemas["Product"]) => {
+    try {
+      addingItemId.value = product.id;
+
+      // Check if this is a base product with variants
+      const isBaseProduct = product.childCount && product.childCount > 0;
+      if (isBaseProduct) {
+        toast.add({
+          title: "Variante erforderlich",
+          description: `${product.translated.name} hat Varianten. Bitte wähle eine spezifische Variante aus.`,
+          icon: "i-lucide-alert-circle",
+          color: "warning",
+        });
+        return;
+      }
+
+      const cartItems = [
+        {
+          id: product.id,
+          quantity: 1,
+          type: "product" as const,
+        },
+      ];
+
+      const newCart = await addProducts(cartItems);
+      await refreshCart(newCart);
+
+      triggerProductAdded();
+
+      toast.add({
+        title: "In den Warenkorb gelegt",
+        description: `${product.translated.name} wurde hinzugefügt.`,
+        icon: "i-lucide-shopping-cart",
+        color: "primary",
+      });
+
+      useTrackEvent("add_to_cart", {
+        props: {
+          product_number: product.productNumber,
+          quantity: 1,
+        },
+      });
+    } catch (error) {
+      console.error("[wishlist][addSingleItemToCart] Error details:", error);
+      toast.add({
+        title: "Fehler",
+        description: "Produkt konnte nicht hinzugefügt werden.",
+        icon: "i-lucide-alert-circle",
+        color: "error",
+      });
+    } finally {
+      addingItemId.value = null;
+    }
+  };
+
+  const addAllItemsToCart = async (products: Schemas["Product"][]) => {
+    if (products.length === 0) {
+      return;
+    }
+
+    try {
+      isAddingToCart.value = true;
+
+      // Filter out base products (parent products with childCount > 0)
+      // Only add actual variants or simple products
+      const addableProducts = products.filter((product) => {
+        const isBaseProduct = product.childCount && product.childCount > 0;
+        return !isBaseProduct;
+      });
+
+      if (addableProducts.length === 0) {
+        toast.add({
+          title: "Keine Produkte hinzugefügt",
+          description: "Bitte wähle zuerst Varianten für deine Produkte aus.",
+          icon: "i-lucide-alert-circle",
+          color: "warning",
+        });
+        return;
+      }
+
+      const cartItems = addableProducts.map((product) => ({
+        id: product.id,
+        quantity: 1,
+        type: "product" as const,
+      }));
+
+      const newCart = await addProducts(cartItems);
+      await refreshCart(newCart);
+
+      triggerProductAdded();
+
+      const skippedCount = products.length - addableProducts.length;
+      const successMessage =
+        skippedCount > 0
+          ? `${addableProducts.length} Produkte hinzugefügt. ${skippedCount} Produkt(e) übersprungen (Varianten müssen einzeln ausgewählt werden).`
+          : `${addableProducts.length} Produkte wurden in den Warenkorb gelegt.`;
+
+      toast.add({
+        title: "Produkte hinzugefügt",
+        description: successMessage,
+        icon: "i-lucide-shopping-cart",
+        color: "primary",
+      });
+
+      useTrackEvent("add_to_cart", {
+        props: {
+          product_count: addableProducts.length,
+          skipped_count: products.length - addableProducts.length,
+          source: "wishlist_bulk",
+        },
+      });
+    } catch (error) {
+      console.error("[wishlist][addAllItemsToCart] Error:", error);
+      toast.add({
+        title: "Fehler",
+        description: "Produkte konnten nicht hinzugefügt werden.",
+        icon: "i-lucide-alert-circle",
+        color: "error",
+      });
+    } finally {
+      isAddingToCart.value = false;
+    }
+  };
+
+  return {
+    isAddingToCart,
+    addingItemId,
+    isLoading,
+    clearWishlistHandler,
+    addSingleItemToCart,
+    addAllItemsToCart,
+  };
+}

package/app/pages/merkliste.vue

@@ -12,6 +12,12 @@ useSeoMeta({
 
 <template>
   <UContainer>
-    <Wishlist />
+    <UPageSection
+      title="Merkliste"
+      description="Verwalte deine Lieblingsprodukte."
+      icon="i-lucide-heart"
+    >
+      <Wishlist :show-menu-button="true" :use-grid-layout="true" />
+    </UPageSection>
   </UContainer>
 </template>

package/package.json

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