@shopbite-de/storefront 1.1.0

package/app/components/AddToWishlist.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+import { useTrackEvent } from "#imports";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+
+const { addToWishlist, isInWishlist, removeFromWishlist } = useProductWishlist(
+  props.product.id,
+);
+const { getWishlistProducts } = useWishlist();
+
+const trackWishlistEvent = (
+  action: "add_to_wishlist" | "remove_from_wishlist",
+) => {
+  useTrackEvent(action, {
+    props: { product_number: props.product.productNumber },
+  });
+};
+
+const toggleWishlistProduct = async () => {
+  try {
+    if (isInWishlist.value) {
+      await removeFromWishlist();
+      trackWishlistEvent("remove_from_wishlist");
+      await getWishlistProducts();
+    } else {
+      await addToWishlist();
+      trackWishlistEvent("add_to_wishlist");
+      await getWishlistProducts();
+    }
+  } catch (error) {
+    console.error("[wishlist][handleWishlistError]", error);
+  }
+};
+
+// Computed tooltip text
+const tooltipText = computed(() =>
+  isInWishlist.value
+    ? "Von der Merkliste entfernen"
+    : "Auf die Merkliste setzten",
+);
+</script>
+
+<template>
+  <UTooltip :text="tooltipText">
+    <UButton
+      icon="i-lucide-heart"
+      variant="ghost"
+      :color="isInWishlist ? 'error' : 'neutral'"
+      @click="toggleWishlistProduct"
+    />
+  </UTooltip>
+</template>

package/app/components/Address/Card.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const props = withDefaults(
+  defineProps<{
+    address?: Schemas["CustomerAddress"] | null;
+    title?: string;
+    icon?: string;
+  }>(),
+  {
+    address: null,
+    title: "",
+    icon: "",
+  },
+);
+
+const { address, title, icon } = toRefs(props);
+</script>
+
+<template>
+  <UPageCard
+    v-if="address"
+    :icon="icon"
+    :title="title"
+    :ui="{
+      root: 'shadow-md rounded-md ',
+      footer: 'w-full',
+    }"
+  >
+    <AddressDetail :address="address" />
+  </UPageCard>
+</template>

package/app/components/Address/Detail.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  address: Schemas["CustomerAddress"] | undefined | null;
+}>();
+
+const { address } = toRefs(props);
+</script>
+
+<template>
+  <div v-if="address">
+    <div>{{ address.firstName }} {{ address.lastName }}</div>
+    <div>{{ address.phoneNumber }}</div>
+    <div>{{ address.company }}</div>
+    <div>{{ address.department }}</div>
+    <div>{{ address.additionalAddressLine1 }}</div>
+    <div>{{ address.additionalAddressLine2 }}</div>
+    <div>{{ address.street }}</div>
+    <div>{{ address.zipcode }} {{ address.city }}</div>
+  </div>
+</template>

package/app/components/Address/Form.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+import { useAddress } from "@shopware/composables";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+import { createAddressSchema } from "~/validation/addressSchema";
+import type { AddressSchema } from "~/validation/addressSchema";
+
+const props = defineProps<{
+  address?: Schemas["CustomerAddress"] | undefined;
+}>();
+
+const { address } = toRefs(props);
+
+const { updateCustomerAddress, createCustomerAddress } = useAddress();
+
+const state = reactive({
+  id: address.value.id,
+  accountType: "privat",
+  firstName: address.value.firstName ?? undefined,
+  lastName: address.value.lastName ?? undefined,
+  company: address.value.company ?? undefined,
+  department: address.value.department ?? undefined,
+  additionalAddressLine1: address.value.additionalAddressLine1 ?? undefined,
+  phoneNumber: address.value.phoneNumber ?? undefined,
+  street: address.value.street ?? undefined,
+  zipcode: address.value.zipcode ?? undefined,
+  city: address.value.city ?? undefined,
+  countryId: "018d9f162ade709b9ccc92929b44d236",
+});
+
+const schema = computed(() => createAddressSchema(state));
+
+const toast = useToast();
+
+async function onSubmit(event: FormSubmitEvent<AddressSchema>) {
+  if (event.data.id) {
+    await updateCustomerAddress(event.data);
+  } else {
+    await createCustomerAddress(event.data);
+  }
+
+  toast.add({
+    title: "Erfolgreich gespeichert",
+    color: "success",
+  });
+  emit("submit-success", event.data);
+}
+
+const accountType = ref("privat");
+
+const emit = defineEmits<{
+  "submit-success": [data: AddressSchema];
+}>();
+</script>
+
+<template>
+  <UForm
+    :schema="schema"
+    :state="state"
+    class="space-y-4"
+    @submit="onSubmit"
+    @error="(error) => console.log('Form validation error:', error)"
+  >
+    <UInput v-model="state.id" type="text" hidden />
+
+    <UFormField label="Vorname" name="firstName">
+      <UInput v-model="state.firstName" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Nachname" name="lastName">
+      <UInput v-model="state.lastName" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField
+      v-if="accountType === 'commercial'"
+      label="Unternehmen"
+      name="company"
+    >
+      <UInput v-model="state.company" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField
+      v-if="accountType === 'commercial'"
+      label="Abteilung"
+      name="department"
+    >
+      <UInput v-model="state.department" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Straße und Hausnr." name="street">
+      <UInput v-model="state.street" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Zusatz" name="additionalAddressLine1">
+      <UInput
+        v-model="state.additionalAddressLine1"
+        type="text"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField label="Postleitzahl" name="zipcode">
+      <UInput v-model="state.zipcode" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Ort" name="city">
+      <UInput v-model="state.city" type="text" class="w-full" />
+    </UFormField>
+
+    <UFormField label="Telefon" name="phoneNumber">
+      <UInput v-model="state.phoneNumber" type="phone" class="w-full" />
+    </UFormField>
+
+    <UButton type="submit" block label="Speichern" />
+  </UForm>
+</template>

package/app/components/AnimatedSection.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useScrollAnimation } from "~/composables/useScrollAnimation";
+
+interface Props {
+  animation?:
+    | "fade-up"
+    | "fade-down"
+    | "fade-left"
+    | "fade-right"
+    | "fade"
+    | "scale";
+  duration?:
+    | "duration-500"
+    | "duration-700"
+    | "duration-1000"
+    | "duration-1500";
+  delay?: string;
+  threshold?: number;
+  rootMargin?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  animation: "fade-up",
+  duration: "duration-1000",
+  delay: "delay-0",
+  threshold: 0.1,
+  rootMargin: "0px 0px -100px 0px",
+});
+
+const { isVisible, elementRef } = useScrollAnimation({
+  threshold: props.threshold,
+  rootMargin: props.rootMargin,
+});
+
+const animationClasses = {
+  "fade-up": {
+    initial: "opacity-0 translate-y-20",
+    final: "opacity-100 translate-y-0",
+  },
+  "fade-down": {
+    initial: "opacity-0 -translate-y-20",
+    final: "opacity-100 translate-y-0",
+  },
+  "fade-left": {
+    initial: "opacity-0 translate-x-20",
+    final: "opacity-100 translate-x-0",
+  },
+  "fade-right": {
+    initial: "opacity-0 -translate-x-20",
+    final: "opacity-100 translate-x-0",
+  },
+  fade: {
+    initial: "opacity-0",
+    final: "opacity-100",
+  },
+  scale: {
+    initial: "opacity-0 scale-95",
+    final: "opacity-100 scale-100",
+  },
+};
+
+const currentAnimation = animationClasses[props.animation];
+</script>
+
+<template>
+  <div
+    ref="elementRef"
+    class="transition-all ease-out"
+    :class="[
+      duration,
+      delay,
+      isVisible ? currentAnimation.final : currentAnimation.initial,
+    ]"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/BottomNavi.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import {
+  PhoneIcon,
+  BookOpenIcon,
+  HeartIcon,
+  MapPinIcon,
+  HomeIcon,
+} from "@heroicons/vue/24/outline";
+
+const route = useRoute();
+</script>
+
+<template>
+  <div
+    class="backdrop-blur bg-white/30 fixed bottom-0 w-full px-2 md:hidden z-50"
+  >
+    <div class="flex flex-row justify-between items-center py-2 gap-1">
+      <NuxtLink
+        title="Routenplaner"
+        class="flex flex-col justify-center items-center bg-blackish rounded-md px-3.5 py-2.5 basis-1/4 gap-2"
+        to="https://www.openstreetmap.org/directions?from=&to=50.080610%2C8.863783#map=19/50.080323/8.864079"
+      >
+        <MapPinIcon class="w-5 h-5 text-white" />
+        <div class="text-white text-xs">Route</div>
+      </NuxtLink>
+      <NuxtLink
+        title="Zu deiner Merkliste"
+        to="/merkliste"
+        class="flex flex-col justify-center items-center bg-blackish rounded-md px-3.5 py-2.5 basis-1/4 gap-2"
+        :class="{ hidden: route.name === 'merkliste' }"
+      >
+        <HeartIcon class="w-5 h-5 text-white" />
+        <div class="text-white text-xs">Merkliste</div>
+      </NuxtLink>
+      <NuxtLink
+        title="Zur Startseite"
+        to="/"
+        class="flex flex-col justify-center items-center bg-blackish rounded-md px-3.5 py-2.5 basis-1/4 gap-2"
+        :class="{ hidden: route.name === 'index' }"
+      >
+        <HomeIcon class="w-5 h-5 text-white" />
+        <div class="text-white text-xs">Startseite</div>
+      </NuxtLink>
+      <NuxtLink
+        title="Zur Speisekarte"
+        to="/speisekarte"
+        class="flex flex-col justify-center items-center bg-blackish rounded-md px-3.5 py-2.5 basis-1/4 gap-2"
+        :class="{ hidden: route.name === 'speisekarte' }"
+      >
+        <BookOpenIcon class="w-5 h-5 text-white" />
+        <div class="text-white text-xs">Speisekarte</div>
+      </NuxtLink>
+      <NuxtLink
+        title="Anrufen"
+        to="tel:+49610471427"
+        class="flex flex-col justify-center items-center bg-blackish rounded-md px-3.5 py-2.5 basis-1/4 gap-2"
+      >
+        <PhoneIcon class="w-5 h-5 text-white" />
+        <div class="text-white text-xs">Anrufen</div>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

package/app/components/Cart/Item.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+interface Props {
+  cartItem?: Schemas["LineItem"] | null;
+  withQuantityInput?: boolean;
+  withDeleteButton?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cartItem: null,
+  withQuantityInput: true,
+  withDeleteButton: true,
+});
+
+const { removeItem, changeProductQuantity } = useCart();
+const { getFormattedPrice } = usePrice({
+  currencyCode: "EUR",
+  localeCode: "de-DE",
+});
+
+// Use computed for reactive quantity with proper null checks
+const quantity = computed({
+  get: () => props.cartItem?.quantity ?? 1,
+  set: async (value: number) => {
+    if (!props.cartItem?.id) return;
+
+    await changeProductQuantity({
+      id: props.cartItem.id,
+      quantity: value,
+    });
+  },
+});
+
+const formattedPrice = computed(() => {
+  return props.cartItem?.price?.totalPrice
+    ? getFormattedPrice(props.cartItem.price.totalPrice)
+    : "";
+});
+
+const handleRemoveItem = () => {
+  if (!props.cartItem) return;
+  removeItem(props.cartItem);
+};
+</script>
+
+<template>
+  <div class="cart-item">
+    <div v-if="cartItem" class="flex flex-col gap-4">
+      <!-- Main content row -->
+      <div class="flex flex-row justify-between items-center gap-4">
+        <!-- Left section: Title and variations -->
+        <div class="flex flex-row items-center gap-4 flex-1 min-w-0">
+          <div class="flex-1 min-w-0">
+            <h3 class="text-md">
+              <span v-if="!withQuantityInput" class="mr-2">
+                {{ quantity }}x
+              </span>
+              <span class="font-semibold">{{ cartItem.label }}</span>
+            </h3>
+
+            <p
+              v-for="option in cartItem?.payload?.options"
+              :key="option.group + option.option"
+              class="text-sm text-pretty text-toned mt-1"
+            >
+              {{ option.group }}: {{ option.option }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Right section: Price -->
+        <div class="font-medium whitespace-nowrap">
+          {{ formattedPrice }}
+        </div>
+      </div>
+
+      <!-- Quantity input and delete button row -->
+      <div v-if="withQuantityInput" class="flex flex-row items-center gap-2">
+        <UInputNumber
+          v-model="quantity"
+          :min="1"
+          :max="100"
+          class="max-w-46"
+          aria-label="Item quantity"
+        />
+        <UButton
+          v-if="withDeleteButton"
+          icon="i-lucide-trash"
+          variant="soft"
+          color="neutral"
+          aria-label="Remove item from cart"
+          @click="handleRemoveItem"
+        />
+      </div>
+      <!-- Delete button alone if no quantity input -->
+      <UButton
+        v-else-if="withDeleteButton"
+        icon="i-lucide-trash"
+        variant="outline"
+        color="error"
+        aria-label="Remove item from cart"
+        @click="handleRemoveItem"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <div v-else class="text-center py-4">
+      <p class="text-toned">Warenkorb ist leer...</p>
+    </div>
+  </div>
+</template>

package/app/components/Cart/QuickView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const { cart, shippingTotal, isEmpty } = useCart();
+
+withDefaults(
+  defineProps<{
+    withQuantityInput?: boolean;
+    withDeleteButton?: boolean;
+    withToCartButton?: boolean;
+  }>(),
+  {
+    withQuantityInput: true,
+    withDeleteButton: true,
+    withToCartButton: false,
+  },
+);
+
+const { getFormattedPrice } = usePrice({
+  currencyCode: "EUR",
+  localeCode: "de-DE",
+});
+const emit = defineEmits(["go-to-cart"]);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 h-full justify-between">
+    <div class="flex flex-col gap-4">
+      <CartItem
+        v-for="lineItem in cart?.lineItems ?? []"
+        :key="lineItem.id"
+        :cart-item="lineItem"
+        :with-quantity-input="withQuantityInput"
+        :with-delete-button="withDeleteButton"
+      />
+    </div>
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-row justify-between">
+        <div>Versandkosten:</div>
+        <div>{{ getFormattedPrice(shippingTotal) }}</div>
+      </div>
+      <div class="flex flex-row justify-between font-bold">
+        <div>Summe:</div>
+        <div>{{ getFormattedPrice(cart?.price.totalPrice) }}</div>
+      </div>
+      <UButton
+        v-if="withToCartButton"
+        :disabled="isEmpty"
+        block
+        size="lg"
+        label="Bestellung aufgeben"
+        to="/bestellung"
+        @click="emit('go-to-cart')"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Category/Header.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+defineProps<{
+  category: Schemas["Category"];
+}>();
+</script>
+
+<template>
+  <div
+    v-if="category.media?.url"
+    class="relative mb-4 mt-8 h-40 w-full overflow-hidden rounded-lg"
+  >
+    <NuxtImg
+      v-if="category.media?.url"
+      :src="category.media.url"
+      class="absolute inset-0 h-full w-full object-cover"
+      sizes="sm:100vw md:700px"
+      alt="Pizza Kategorie"
+      placeholder
+    />
+    <div
+      v-if="category.media?.url"
+      class="absolute inset-0 bg-gradient-to-t from-black/50 to-black/10"
+    />
+
+    <div v-else class="absolute inset-0 bg-primary" />
+
+    <div class="relative z-10 p-4">
+      <h2
+        class="text-pretty font-semibold text-3xl md:text-4xl text-white drop-shadow"
+      >
+        {{ category.name }}
+      </h2>
+      <h3
+        v-if="category.description"
+        class="text-white/90 text-[15px] text-pretty mt-1"
+      >
+        {{ category.description }}
+      </h3>
+    </div>
+  </div>
+  <UPageCard
+    v-else
+    :title="category.translated.name ?? category.name"
+    :description="category.translated.description ?? category.description"
+    variant="soft"
+    class="my-4"
+    :ui="{
+      title: 'text-3xl md:text-4xl',
+    }"
+  />
+</template>