@shopbite-de/storefront 1.2.5 → 1.2.6

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.5",
+  "version": "1.2.6",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [