@shopbite-de/storefront 1.1.0

package/app/components/Navigation/DesktopLeft.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+import type { Schemas } from "#shopware";
+import { useTrackEvent } from "#imports";
+
+const { loadNavigationElements, navigationElements } = useNavigation();
+
+loadNavigationElements({ depth: 1 });
+
+const scrollToElement = (elementId: string, margin = 0) => {
+  const element = document.getElementById(elementId);
+  if (element) {
+    const elementPosition =
+      element.getBoundingClientRect().top + window.scrollY;
+    const offsetPosition = elementPosition - margin;
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth",
+    });
+    useTrackEvent("scroll_to_category", {
+      props: { category_name: elementId },
+    });
+  }
+};
+
+const navItems = computed<NavigationMenuItem[][]>(() => {
+  return navigationElements.value.map((item: Schemas["Category"]) => {
+    return {
+      label: item.translated?.name,
+      onSelect: () => scrollToElement(item.name ?? "#", 90),
+      children: item.children?.map((child: Schemas["Category"]) => {
+        return {
+          label: child.translated?.name,
+          onSelect: () => scrollToElement(child.name ?? "#", 90),
+        };
+      }),
+    };
+  });
+});
+</script>
+
+<template>
+  <div>
+    <h2>Navigation</h2>
+    <UNavigationMenu
+      orientation="vertical"
+      :items="navItems"
+      class="data-[orientation=vertical]"
+    />
+  </div>
+</template>

package/app/components/Navigation/DesktopLeft2.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+import type { Schemas } from "#shopware";
+
+const { loadNavigationElements } = useNavigation();
+
+const { data: navigationElements } = await useAsyncData(
+  `menu-navigation`,
+  async () => {
+    return await loadNavigationElements({ depth: 2 });
+  },
+);
+
+const navItems = computed<NavigationMenuItem[]>(() => {
+  return navigationElements.value?.map((item: Schemas["Category"]) => {
+    return {
+      label: item.translated?.name,
+      description: `${item.translated?.name} Kategorie`,
+      to: item.seoUrl,
+      defaultOpen: true,
+      children: item.children?.map((child: Schemas["Category"]) => {
+        return {
+          label: child.translated?.name,
+          description: `${child.translated?.name} Kategorie`,
+          to: child.seoUrl,
+        };
+      }),
+    };
+  });
+});
+</script>
+
+<template>
+  <div>
+    <h2>Navigation</h2>
+    <UNavigationMenu
+      variant="link"
+      orientation="vertical"
+      class="data-[orientation=vertical]:w-48"
+      :items="navItems"
+    />
+  </div>
+</template>

package/app/components/Navigation/MobileTop.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+import type { Schemas } from "#shopware";
+import { useTrackEvent } from "#imports";
+
+const { loadNavigationElements, navigationElements } = useNavigation();
+
+loadNavigationElements({ depth: 1 });
+
+const scrollToElement = (elementId: string, margin = 0) => {
+  const element = document.getElementById(elementId);
+  if (element) {
+    const elementPosition =
+      element.getBoundingClientRect().top + window.scrollY;
+    const offsetPosition = elementPosition - margin;
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth",
+    });
+    useTrackEvent("scroll_to_category", {
+      props: { category_name: elementId },
+    });
+  }
+};
+
+const navItems = computed<NavigationMenuItem[][]>(() => {
+  return navigationElements.value.map((item: Schemas["Category"]) => {
+    return {
+      label: item.translated?.name,
+      onSelect: () => scrollToElement(item.name ?? "#", 90),
+      children: item.children?.map((child: Schemas["Category"]) => {
+        return {
+          label: child.translated?.name,
+          onSelect: () => scrollToElement(child.name ?? "#", 90),
+        };
+      }),
+    };
+  });
+});
+</script>
+
+<template>
+  <UNavigationMenu
+    class="lg:hidden"
+    orientation="horizontal"
+    :items="navItems"
+    :ui="{
+      list: 'overflow-x-auto',
+      item: 'flex-shrink-0',
+    }"
+  >
+    <template #list-leading>
+      <UIcon name="i-lucide-chevron-left" class="size-8" />
+    </template>
+    <template #list-trailing>
+      <UIcon name="i-lucide-chevron-right" class="size-8" />
+    </template>
+  </UNavigationMenu>
+</template>

package/app/components/Navigation/MobileTop2.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+import type { Schemas } from "#shopware";
+
+const { loadNavigationElements, navigationElements } = useNavigation();
+
+loadNavigationElements({ depth: 1 });
+
+const navItems = computed<NavigationMenuItem[]>(() => {
+  return navigationElements.value?.map((item: Schemas["Category"]) => {
+    return {
+      label: item.translated?.name,
+      to: item.children.length === 0 ? item.seoUrl : undefined,
+      children: item.children?.map((child: Schemas["Category"]) => {
+        return {
+          label: child.translated?.name,
+          to: child.seoUrl,
+        };
+      }),
+    };
+  });
+});
+</script>
+
+<template>
+  <UNavigationMenu
+    class="lg:hidden"
+    orientation="horizontal"
+    :items="navItems"
+    :ui="{
+      list: 'overflow-x-auto',
+      item: 'flex-shrink-0',
+    }"
+  >
+    <template #list-leading>
+      <UIcon name="i-lucide-chevron-left" class="size-8" />
+    </template>
+    <template #list-trailing>
+      <UIcon name="i-lucide-chevron-right" class="size-8" />
+    </template>
+  </UNavigationMenu>
+</template>

package/app/components/Order/Detail.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+import type { TableColumn } from "#ui/components/Table.vue";
+
+const props = defineProps<{
+  order: Schemas["Order"];
+  status: string;
+}>();
+
+const { order } = toRefs(props);
+
+const { getFormattedPrice } = usePrice({
+  currencyCode: "EUR",
+  localeCode: "de-DE",
+});
+
+const isLoadingData = ref(true);
+
+const columns: TableColumn<Schemas["OrderLineItem"]>[] = [
+  {
+    accessorKey: "label",
+    header: "Produkt",
+  },
+  {
+    accessorKey: "unitPrice",
+    header: "Einzelpreis",
+    cell: ({ row }) => {
+      return getFormattedPrice(row.getValue("unitPrice"));
+    },
+  },
+  {
+    accessorKey: "quantity",
+    header: "Anzahl",
+  },
+  {
+    accessorKey: "totalPrice",
+    header: () => h("div", { class: "text-right" }, "Preis"),
+    cell: ({ row }) => {
+      const formatted = getFormattedPrice(row.getValue("totalPrice"));
+
+      return h("div", { class: "text-right" }, formatted);
+    },
+  },
+];
+
+onMounted(() => {
+  isLoadingData.value = false;
+});
+
+const columnRows = computed(() => {
+  return order.value?.lineItems.filter(
+    (lineItem: Schemas["OrderLineItem"]) => lineItem.parentId === null,
+  );
+});
+</script>
+
+<template>
+  <div class="flex flex-row justify-between">
+    <UBadge variant="outline" color="neutral" size="xl"
+      >Status: {{ status }}</UBadge
+    >
+    <UBadge variant="outline" color="neutral" size="xl"
+      >Versandart: {{ order?.deliveries[0].shippingMethod.name }}</UBadge
+    >
+  </div>
+  <UTable
+    :columns="columns"
+    :loading="isLoadingData"
+    loading-color="primary"
+    loading-animation="carousel"
+    :data="columnRows"
+    class="flex-1"
+  />
+  <div class="flex flex-col items-end w-full pr-4">
+    <div>Lieferkosten: {{ getFormattedPrice(order?.shippingTotal) }}</div>
+    <div>Gesamtkosten Netto: {{ getFormattedPrice(order?.amountNet) }}</div>
+    <div v-for="tax in order?.price.calculatedTaxes" :key="tax.taxRate">
+      inkl. {{ tax.taxRate }}% MwSt. {{ getFormattedPrice(tax.tax) }}
+    </div>
+    <div class="font-bold">
+      Gesamtkosten Brutto: {{ getFormattedPrice(order?.amountTotal) }}
+    </div>
+  </div>
+</template>

package/app/components/Product/Card.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+  withFavoriteButton: boolean;
+  withAddToCartButton: boolean;
+}>();
+
+const { isCheckoutEnabled } = usePizzaToppings();
+
+const { product, withFavoriteButton, withAddToCartButton } = toRefs(props);
+
+const { getFormattedPrice } = usePrice({
+  currencyCode: "EUR",
+  localeCode: "de-DE",
+});
+
+const isVegi = computed<boolean>(() => {
+  if (!product.value?.properties) {
+    return false;
+  }
+
+  return product.value?.sortedProperties?.some(
+    (propertyGroup: Schemas["PropertyGroup"]) =>
+      propertyGroup.translated.name === "Vegetarisch" &&
+      propertyGroup.options?.some(
+        (option: Schemas["PropertyGroupOption"]) =>
+          option.translated.name === "Ja",
+      ),
+  );
+});
+const openDetails = ref(false);
+
+function toggleDetails() {
+  openDetails.value = !openDetails.value;
+}
+
+const MAIN_INGREDIENTS_PROPERTY_LABEL = "Hauptzutaten";
+
+const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
+  const sortedProps =
+    product.value?.sortedProperties ?? ([] as Schemas["PropertyGroup"][]);
+  const mainIngredientsProperty = sortedProps.find(
+    (propertyGroup: Schemas["PropertyGroup"]) =>
+      propertyGroup.translated.name === MAIN_INGREDIENTS_PROPERTY_LABEL,
+  );
+  return mainIngredientsProperty?.options ?? [];
+});
+</script>
+
+<template>
+  <AnimatedSection
+    animation="fade-up"
+    duration="duration-1000"
+    delay="delay-100"
+  >
+    <UPageCard
+      :orientation="product.cover?.media?.url ? 'horizontal' : 'vertical'"
+      variant="outline"
+      reverse
+      :ui="{ footer: 'w-full', root: 'shadow-lg' }"
+    >
+      <template #header>
+        <UBadge
+          v-if="isVegi"
+          icon="i-lucide-leaf"
+          color="success"
+          variant="outline"
+          size="sm"
+          label="Vegetarisch"
+        />
+      </template>
+
+      <div v-if="product.cover?.media?.url">
+        <NuxtImg
+          :src="product.cover.media.url"
+          class="rounded-md h-auto max-w-full object-contain ransition-opacity duration-700"
+          sizes="(min-width: 1024px) 50vw, 100vw"
+        />
+      </div>
+
+      <template #title>
+        <div class="flex flex-row items-baseline gap-1">
+          <span class="text-sm text-brand-500"
+            >#{{ product.productNumber }}</span
+          >
+
+          <p class="text-base text-pretty font-semibold text-highlighted">
+            {{ product.translated.name }}
+          </p>
+        </div>
+      </template>
+
+      <template #description>
+        <div class="flex flex-col gap-2">
+          <div>{{ product.description }}</div>
+          <div
+            v-if="mainIngredients.length > 0"
+            class="font-extralight text-sm text-pretty"
+          >
+            {{
+              mainIngredients
+                .map((ingredient) => ingredient.translated.name)
+                .join(", ")
+            }}
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex flex-row justify-between content-center w-full">
+          <p>{{ getFormattedPrice(product.calculatedPrice.totalPrice) }}</p>
+          <div class="flex flex-row gap-2">
+            <AddToWishlist v-if="withFavoriteButton" :product="product" />
+            <UButton
+              v-if="withAddToCartButton && isCheckoutEnabled"
+              icon="i-lucide-shopping-cart"
+              variant="subtle"
+              @click="toggleDetails"
+            />
+          </div>
+        </div>
+        <UCollapsible v-model:open="openDetails" class="flex flex-col gap-2">
+          <template #content>
+            <ProductDetail :product="product" @product-added="toggleDetails" />
+          </template>
+        </UCollapsible>
+      </template>
+    </UPageCard>
+  </AnimatedSection>
+</template>

package/app/components/Product/Category.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+import ProductCard from "~/components/Product/Card.vue";
+
+const props = defineProps({
+  category: {
+    type: Object as () => Schemas["Category"],
+    required: true,
+  },
+});
+
+const category = toRef(props.category);
+const { apiClient } = useShopwareContext();
+const categoryProducts = ref<Schemas["Product"][]>([]);
+const isLoading = ref(true);
+
+const fetchCategoryProducts = async () => {
+  isLoading.value = true;
+  try {
+    const { data } = await apiClient.invoke("readProduct post /product", {
+      body: {
+        filter: [
+          {
+            type: "equals",
+            field: "categoryTree",
+            value: category.value.id,
+          },
+          {
+            type: "equals",
+            field: "parentId",
+            value: null,
+          },
+        ],
+        includes: {
+          product: [
+            "id",
+            "productNumber",
+            "name",
+            "description",
+            "calculatedPrice",
+            "translated",
+            "categories",
+            "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"],
+        },
+        sort: [
+          {
+            field: "productNumber",
+            order: "ASC",
+          },
+        ],
+        associations: {
+          cover: {
+            associations: {
+              media: {},
+            },
+          },
+          categories: {},
+          properties: {
+            associations: {
+              group: {},
+            },
+          },
+          options: {
+            associations: {
+              group: {},
+            },
+          },
+          configuratorSettings: {
+            associations: {
+              option: {
+                associations: {
+                  group: {},
+                },
+              },
+            },
+          },
+          children: {
+            associations: {
+              properties: {
+                associations: {
+                  group: {},
+                },
+              },
+              options: {
+                associations: {
+                  group: {},
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    if (data?.elements) {
+      categoryProducts.value = data.elements;
+    }
+  } catch (error) {
+    console.error(`[category-products][${category.value.id}]`, error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Fetch products when the component is mounted
+onMounted(() => {
+  fetchCategoryProducts();
+});
+</script>
+<template>
+  <div
+    v-if="!isLoading && categoryProducts.length > 0"
+    :id="category.name ?? ''"
+    class="flex flex-col"
+  >
+    <CategoryHeader :category="category" />
+    <div v-if="category.childCount > 0" class="grid grid-cols-1 gap-4">
+      <ProductCategory
+        v-for="child in category.children"
+        :key="child.id"
+        :category="child"
+      />
+    </div>
+    <div v-else class="grid grid-cols-1 gap-4">
+      <ProductCard
+        v-for="product in categoryProducts"
+        :key="product.id"
+        :product="product"
+        :with-favorite-button="true"
+        :with-add-to-cart-button="true"
+      />
+    </div>
+  </div>
+  <div v-else-if="isLoading" class="flex flex-col" />
+</template>

package/app/components/Product/Configurator.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+const props = defineProps<{
+  parentProduct: Schemas["Product"];
+}>();
+const { parentProduct } = toRefs(props);
+const { product, changeVariant, configurator } = useProduct(
+  parentProduct.value?.children?.length > 0
+    ? parentProduct.value.children[0]
+    : parentProduct.value,
+  parentProduct.value?.configuratorSettings || [],
+);
+const { findVariantForSelectedOptions } = useProductConfigurator();
+const { variants: selectableOptions } = useProductVariants(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;
+    }
+  }
+}
+onMounted(() => {
+  initialOptions(product);
+});
+watch(
+  selectedOptions.value,
+  async () => {
+    const foundVariant = await findVariantForSelectedOptions(
+      selectedOptions.value,
+    );
+    const variant = parentProduct.value.children?.find(
+      (child: Schemas["Product"]) => child.id === foundVariant?.id,
+    );
+
+    if (variant) {
+      changeVariant(variant);
+      emit("variant-switched", variant);
+    }
+  },
+  { deep: true },
+);
+const emit = defineEmits<{
+  "variant-switched": [variant: Schemas["Product"]];
+}>();
+</script>
+<template>
+  <div
+    v-for="(variantGroup, propertyGroupId) in selectableOptions"
+    :key="propertyGroupId"
+    class="my-6"
+  >
+    <div class="flex flex-row gap-2 items-center">
+      <div class="basis-1/3">{{ variantGroup.name }}:</div>
+      <USelect
+        v-model="selectedOptions[propertyGroupId]"
+        value-key="productId"
+        :items="variantGroup.options"
+        class="w-full"
+        icon="i-lucide-square-stack"
+      />
+    </div>
+  </div>
+</template>