@shopbite-de/storefront 1.7.9 → 1.8.0

package/app/components/AddToWishlist.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 const props = defineProps<{
   product: Schemas["Product"];
@@ -10,25 +9,17 @@ 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 { trackAddToWishlist } = useTrackEvent();
 
 const toggleWishlistProduct = async () => {
   try {
     if (isInWishlist.value) {
       await removeFromWishlist();
-      trackWishlistEvent("remove_from_wishlist");
       await getWishlistProducts();
     } else {
       await addToWishlist();
-      trackWishlistEvent("add_to_wishlist");
       await getWishlistProducts();
+      trackAddToWishlist(props.product);
     }
   } catch (error) {
     console.error("[wishlist][handleWishlistError]", error);

package/app/components/Checkout/Summary.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import QuickView from "~/components/Cart/QuickView.vue";
 import { useIntervalFn } from "@vueuse/core";
-import { useTrackEvent } from "#imports";
 
 const { selectedPaymentMethod, selectedShippingMethod } = useCheckout();
 const { createOrder } = useCheckout();
 const { refreshCart } = useCart();
 const { isLoggedIn, isGuestSession } = useUser();
 const { isCheckoutEnabled, refresh } = useShopBiteConfig();
+const { trackOrder } = useTrackEvent();
 
 const toast = useToast();
 
@@ -24,12 +24,7 @@ async function handleCreateOrder() {
     customerComment: "Wunschlieferzeit: " + selectedDeliveryTime.value,
   });
 
-  useTrackEvent("checkout", {
-    revenue: {
-      currency: "EUR",
-      amount: order.amountTotal as number,
-    },
-  });
+  trackOrder(order);
 
   await refreshCart();
   toast.add({

package/app/components/Food/MarqueeItem.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useTrackEvent } from "#imports";
 import { useProductSearch } from "@shopware/composables";
 import type { Schemas } from "#shopware";
 
@@ -42,12 +41,6 @@ async function addToCart(productId: string) {
   });
   await refreshCart(newCart);
   await showSuccessToast();
-  useTrackEvent("add_to_cart", {
-    props: {
-      product_number: product.productNumber,
-      quantity: 1,
-    },
-  });
 }
 </script>
 

package/app/components/Navigation/DesktopLeft.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 const { loadNavigationElements, navigationElements } = useNavigation();
 
@@ -17,9 +16,6 @@ const scrollToElement = (elementId: string, margin = 0) => {
       top: offsetPosition,
       behavior: "smooth",
     });
-    useTrackEvent("scroll_to_category", {
-      props: { category_name: elementId },
-    });
   }
 };
 

package/app/components/Navigation/MobileTop.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 const { loadNavigationElements, navigationElements } = useNavigation();
 
@@ -17,9 +16,6 @@ const scrollToElement = (elementId: string, margin = 0) => {
       top: offsetPosition,
       behavior: "smooth",
     });
-    useTrackEvent("scroll_to_category", {
-      props: { category_name: elementId },
-    });
   }
 };
 

package/app/components/Product/Detail2.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { operations, Schemas } from "#shopware";
 import type { AssociationItemProduct } from "~/types/Association";
+import { useTrackEvent } from "~/composables/useTrackEvent";
 
 const props = defineProps<{
   productId: string;
 }>();
 
 const { apiClient } = useShopwareContext();
+const { trackProductView } = useTrackEvent();
 
 const productId = toRef(props.productId);
 
@@ -23,6 +25,7 @@ const searchCriteria = {
       "propertyIds",
       "options",
       "optionIds",
+      "seoCategory",
       "configuratorSettings",
       "children",
       "parentId",
@@ -33,6 +36,7 @@ const searchCriteria = {
     property_group_option: ["id", "name", "translated", "group"],
     product_configurator_setting: ["id", "optionId", "option", "productId"],
     product_option: ["id", "groupId", "name", "translated", "group"],
+    category: ["id", "name", "translated"],
   },
   associations: {
     cover: {
@@ -128,6 +132,11 @@ const onIngredientsDeselected = (deselected: string[]) => {
 const onAddToCart = () => emit("product-added");
 
 const emit = defineEmits(["product-added", "variant-selected"]);
+
+watch(productDetails, () => {
+  if (!productDetails.value) return;
+  trackProductView(productDetails.value.product);
+});
 </script>
 
 <template>

package/app/components/Product/SearchBar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { onClickOutside, useDebounceFn, useFocus } from "@vueuse/core";
-import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 withDefaults(
   defineProps<{
@@ -53,18 +51,6 @@ watch(typingQuery, (value) => {
 const performSuggestSearch = useDebounceFn((value) => {
   searchTerm.value = value;
   search();
-  trackEvent(value);
-}, 500);
-
-const trackEvent = useDebounceFn((searchTerm: string) => {
-  const searchResult = getProducts.value.map(function (
-    product: Schemas["Product"],
-  ) {
-    return product.productNumber;
-  });
-  useTrackEvent("search", {
-    props: { search_term: searchTerm, search_result: searchResult.join(",") },
-  });
 }, 500);
 
 if (import.meta.client) {

package/app/composables/useAddToCart.ts

@@ -12,6 +12,7 @@ export function useAddToCart() {
   const { addProducts, refreshCart } = useCart();
   const toast = useToast();
   const { triggerProductAdded } = useProductEvents();
+  const { trackAddToCart: trackAddToCartEvent } = useTrackEvent();
 
   const selectedExtras = ref<AssociationItemProduct[]>([]);
   const deselectedIngredients = ref<string[]>([]);
@@ -140,13 +141,7 @@ export function useAddToCart() {
     await showSuccessToast();
 
     triggerProductAdded();
-
-    useTrackEvent("add_to_cart", {
-      props: {
-        product_number: selectedProduct.value.productNumber,
-        quantity: selectedQuantity.value,
-      },
-    });
+    trackAddToCartEvent(selectedProduct.value, selectedQuantity.value);
 
     isLoading.value = false;
     if (onSuccess) {

package/app/composables/useTrackEvent.ts

@@ -0,0 +1,62 @@
+import type { Schemas } from "#shopware";
+
+export function useTrackEvent() {
+  const { proxy } = useScriptMatomoAnalytics();
+
+  function trackProductView(product: Schemas["Product"]) {
+    proxy._paq.push([
+      "setEcommerceView",
+      product.productNumber,
+      product.translated.name ?? product.name,
+      product.seoCategory.name,
+      product.calculatedPrice.unitPrice,
+    ]);
+    proxy._paq.push(["trackPageView", product.productNumber]);
+  }
+
+  function trackOrder(order: Schemas["Order"]) {
+    order.lineItems?.forEach((item) => {
+      if (item.type === "container") return;
+      proxy._paq.push([
+        "addEcommerceItem",
+        item.product?.productNumber ?? item.id,
+        item.label,
+        item.product?.seoCategory.name ?? "Default",
+        item.unitPrice,
+        item.quantity,
+      ]);
+    });
+
+    proxy._paq.push([
+      "trackEcommerceOrder",
+      order.orderNumber,
+      order.price.totalPrice,
+    ]);
+  }
+
+  function trackAddToWishlist(product: Schemas["Product"]) {
+    proxy._paq.push([
+      "trackEvent",
+      "Product",
+      "AddToWishlist",
+      product.productNumber,
+    ]);
+  }
+
+  function trackAddToCart(product: Schemas["Product"], quantity: number) {
+    proxy._paq.push([
+      "trackEvent",
+      "Cart",
+      "AddToCart",
+      product.productNumber,
+      quantity,
+    ]);
+  }
+
+  return {
+    trackProductView,
+    trackOrder,
+    trackAddToWishlist,
+    trackAddToCart,
+  };
+}

package/app/composables/useWishlistActions.ts

@@ -5,6 +5,7 @@ export function useWishlistActions() {
   const toast = useToast();
   const { triggerProductAdded } = useProductEvents();
   const { clearWishlist } = useWishlist();
+  const { trackAddToCart: trackAddToCartEvent } = useTrackEvent();
 
   const isAddingToCart = ref(false);
   const addingItemId = ref<string | null>(null);
@@ -53,6 +54,7 @@ export function useWishlistActions() {
       await refreshCart(newCart);
 
       triggerProductAdded();
+      trackAddToCartEvent(product, 1);
 
       toast.add({
         title: "In den Warenkorb gelegt",
@@ -60,13 +62,6 @@ export function useWishlistActions() {
         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({
@@ -128,14 +123,6 @@ export function useWishlistActions() {
         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({

package/content/index.yml

@@ -23,7 +23,7 @@ hero:
       icon: i-lucide-arrow-right
       trailing: true
       color: primary
-      to: /speisekarte
+      to: /menu/
       size: xl
     - label: Tisch reservieren
       icon: i-lucide-phone
@@ -87,7 +87,7 @@ cta:
   backgroundImage: https://shopware.shopbite.de/media/f5/19/4a/1762546880/category-pizza-header.webp
   links:
     - label: Zur Speisekarte
-      to: /speisekarte
+      to: /menu/
       color: primary
     - label: Tisch reservieren
       to: tel:+49610471427

package/content/navigation.yml

@@ -48,12 +48,8 @@ footer:
           to: /agb
     - label: Top Kategorien
       children:
-        - label: Pizza
-          to: /c/Pizza/
-        - label: Nudeln
-          to: /c/Nudeln/
-        - label: Fleischgerichte
-          to: /c/Fleischgerichte/
+        - label: Burger
+          to: /menu/burger/
     - label: Unternehmen
       children:
         - label: 'Tel: 06104 71427'

package/nuxt.config.ts

@@ -97,14 +97,9 @@ export default defineNuxtConfig({
     "@sentry/nuxt/module",
     "@nuxt/ui",
     "@nuxt/scripts",
-    "@nuxtjs/plausible",
     "nuxt-vitalizer",
   ],
 
-  plausible: {
-    ignoredHostnames: ["localhost"],
-  },
-
   content: {
     experimental: { sqliteConnector: "native" },
   },
@@ -184,7 +179,6 @@ export default defineNuxtConfig({
       "@sentry/nuxt/module",
       "@nuxt/ui",
       "@nuxt/scripts",
-      "@nuxtjs/plausible",
       "@nuxt/test-utils/module",
       "@nuxt/eslint",
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -18,11 +18,10 @@
     "@heroicons/vue": "^2.2.0",
     "@iconify-json/lucide": "^1.2.73",
     "@iconify-json/simple-icons": "^1.2.59",
-    "@nuxt/content": "^3.8.2",
+    "@nuxt/content": "3.8.2",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.1.0",
-    "@nuxtjs/plausible": "2.0.1",
     "@nuxtjs/robots": "^5.5.6",
     "@sentry/nuxt": "^10.25.0",
     "@shopware/api-client": "^1.3.0",

package/test/nuxt/useAddToCart.test.ts

@@ -39,7 +39,9 @@ mockNuxtImport("useProductEvents", () => {
 });
 
 mockNuxtImport("useTrackEvent", () => {
-  return mockTrackEvent;
+  return () => ({
+    trackAddToCart: mockTrackEvent,
+  });
 });
 
 // Provide the mocks globally or in a way that they are picked up
@@ -53,7 +55,9 @@ vi.stubGlobal("useToast", () => ({
 vi.stubGlobal("useProductEvents", () => ({
   triggerProductAdded: mockTriggerProductAdded,
 }));
-vi.stubGlobal("useTrackEvent", mockTrackEvent);
+vi.stubGlobal("useTrackEvent", () => ({
+  trackAddToCart: mockTrackEvent,
+}));
 
 describe("useAddToCart", () => {
   const mockProduct = {
@@ -131,10 +135,7 @@ describe("useAddToCart", () => {
     expect(mockRefreshCart).toHaveBeenCalled();
     expect(mockToastAdd).toHaveBeenCalled();
     expect(mockTriggerProductAdded).toHaveBeenCalled();
-    expect(mockTrackEvent).toHaveBeenCalledWith(
-      "add_to_cart",
-      expect.any(Object),
-    );
+    expect(mockTrackEvent).toHaveBeenCalledWith(mockProduct, 1);
   });
 
   it("should add product with extras to cart as container", async () => {

package/test/nuxt/useWishlistActions.test.ts

@@ -35,7 +35,9 @@ mockNuxtImport("useWishlist", () => () => ({
   clearWishlist: mockClearWishlist,
 }));
 
-mockNuxtImport("useTrackEvent", () => mockTrackEvent);
+mockNuxtImport("useTrackEvent", () => () => ({
+  trackAddToCart: mockTrackEvent,
+}));
 
 describe("useWishlistActions", () => {
   const mockProduct = {
@@ -72,10 +74,7 @@ describe("useWishlistActions", () => {
     expect(mockToastAdd).toHaveBeenCalledWith(
       expect.objectContaining({ title: "In den Warenkorb gelegt" }),
     );
-    expect(mockTrackEvent).toHaveBeenCalledWith(
-      "add_to_cart",
-      expect.any(Object),
-    );
+    expect(mockTrackEvent).toHaveBeenCalledWith(mockProduct, 1);
   });
 
   it("should warn when adding a base product with variants", async () => {

package/app/components/Product/Configurator.vue

@@ -1,65 +0,0 @@
-<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>

package/app/components/Product/Detail.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import type { Schemas, operations } from "#shopware";
-import type { AssociationItemProduct } from "~/types/Association";
-import { v5 as uuidv5 } from "uuid";
-import { computed, ref, toRefs } from "vue";
-import { useTrackEvent } from "#imports";
-
-const UUID_NAMESPACE = "b098ef7e-0fa2-4073-b002-7ceec4360fbf";
-const CART_SUCCESS_TITLE = "Gute Wahl!";
-const LINE_ITEM_PRODUCT = "product";
-const LINE_ITEM_CONTAINER = "container";
-
-const props = defineProps<{
-  product: Schemas["Product"];
-}>();
-const { product } = toRefs(props);
-const { addProducts, refreshCart } = useCart();
-const toast = useToast();
-const { triggerProductAdded } = useProductEvents();
-
-const selectedExtras = ref<AssociationItemProduct[]>([]);
-const deselectedIngredients = ref<string[]>([]);
-const selectedQuantity = ref(1);
-const selectedProduct = ref<Schemas["Product"]>(product.value);
-
-const cartItemLabel = computed(() => {
-  const formatIngredientModifications = (
-    items: Array<{ label: string } | string>,
-    prefix: string,
-  ): string => {
-    if (!items.length) return "";
-
-    const labels = items.map((item) =>
-      typeof item === "string" ? item : item.label,
-    );
-    const separator = " " + prefix;
-    return " " + prefix + labels.join(separator);
-  };
-
-  const extrasFormatted = formatIngredientModifications(
-    selectedExtras.value,
-    "+",
-  );
-  const removedFormatted = formatIngredientModifications(
-    deselectedIngredients.value,
-    "-",
-  );
-
-  return `${selectedProduct.value.translated.name}${extrasFormatted}${removedFormatted}`;
-});
-
-const createExtras = () =>
-  selectedExtras.value.map((extra) => ({
-    id: extra.value,
-    type: LINE_ITEM_PRODUCT,
-    quantity: selectedQuantity.value,
-  }));
-
-const generateSortedExtrasString = (extras: AssociationItemProduct[]) =>
-  extras
-    .map((extra) => extra.value)
-    .sort()
-    .join("");
-
-const generateProductId = (baseId: string, extras: AssociationItemProduct[]) =>
-  extras.length ? baseId + generateSortedExtrasString(extras) : baseId;
-
-function createCartItems(): operations["addLineItem post /checkout/cart/line-item"]["body"]["items"] {
-  const extras = createExtras();
-
-  // Simple product when no extras
-  if (extras.length === 0 && deselectedIngredients.value.length === 0) {
-    return [
-      {
-        id: selectedProduct.value.id,
-        quantity: selectedQuantity.value,
-        type: LINE_ITEM_PRODUCT,
-        label: cartItemLabel.value,
-      },
-    ];
-  }
-
-  // Container product when extras are selected
-  const generatedUuid = uuidv5(
-    generateProductId(selectedProduct.value.id, selectedExtras.value),
-    UUID_NAMESPACE,
-  );
-
-  return [
-    {
-      id: generatedUuid,
-      quantity: selectedQuantity.value,
-      type: LINE_ITEM_CONTAINER,
-      label: cartItemLabel.value,
-      payload: {
-        productNumber: selectedProduct.value.productNumber,
-      },
-      children: [
-        {
-          id: selectedProduct.value.id,
-          quantity: selectedQuantity.value,
-          type: LINE_ITEM_PRODUCT,
-        },
-        ...extras,
-      ],
-    },
-  ];
-}
-
-// Toast Notification
-async function showSuccessToast() {
-  toast.add({
-    title: CART_SUCCESS_TITLE,
-    description: `${selectedProduct.value.translated.name} wurde in den Warenkorb gelegt.`,
-    icon: "i-lucide-shopping-cart",
-    color: "success",
-    progress: true,
-    color: "primary",
-    duration: 2000,
-  });
-}
-
-// Add to Cart
-async function addToCart() {
-  const cartItems = createCartItems();
-  const newCart = await addProducts(cartItems);
-  await refreshCart(newCart);
-  await showSuccessToast();
-  emit("product-added");
-  triggerProductAdded(); // Clear search globally
-  useTrackEvent("add_to_cart", {
-    props: {
-      product_number: selectedProduct.value.productNumber,
-      quantity: selectedQuantity.value,
-    },
-  });
-}
-
-// Event Handlers
-const onVariantSwitched = (variant: Schemas["Product"]) => {
-  selectedProduct.value = variant;
-};
-
-const onExtrasSelected = (extras: AssociationItemProduct[]) => {
-  selectedExtras.value = extras;
-};
-
-const onIngredientsDeselected = (deselected: string[]) => {
-  deselectedIngredients.value = deselected;
-};
-const emit = defineEmits(["product-added"]);
-</script>
-
-<template>
-  <div class="flex flex-col justify-between w-full">
-    <div>
-      <ProductConfigurator
-        :parent-product="product"
-        @variant-switched="onVariantSwitched"
-      />
-      <ProductCrossSelling
-        :product="selectedProduct"
-        @extras-selected="onExtrasSelected"
-      />
-      <ProductDeselectIngredient
-        :product="selectedProduct"
-        @ingredients-deselected="onIngredientsDeselected"
-      />
-    </div>
-    <div class="flex flex-row gap-4 mt-8">
-      <UInputNumber
-        v-model="selectedQuantity"
-        size="xl"
-        placeholder="Anzahl"
-        :min="1"
-        :max="100"
-      />
-      <UButton
-        size="xl"
-        label="In den Warenkorb"
-        icon="i-lucide-shopping-cart"
-        block
-        @click="addToCart"
-      />
-    </div>
-  </div>
-</template>