@shopbite-de/storefront 1.6.0 → 1.6.1

package/.env.example

@@ -10,4 +10,7 @@ NUXT_PUBLIC_SHOPWARE_COUNTRY_ID=019a17a0f67b706a8ec9ead3059e12ba
 OPENAPI_ACCESS_KEY=key
 OPENAPI_JSON_URL="https://shopware.shopbite.net"
 
-NUXT_GEOAPIFY_API_KEY=
+NUXT_GEOAPIFY_API_KEY=
+
+NUXT_PUBLIC_SCRIPTS_MATOMO_ANALYTICS_MATOMO_URL=
+NUXT_PUBLIC_SCRIPTS_MATOMO_ANALYTICS_SITE_ID=

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 @veliu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# @shopbite-de/storefront
+
+Shopware storefront for food delivery shops, built with Nuxt 4 and Vue 3.
+
+This is a Nuxt project based on [shopware/frontends](https://github.com/shopware/frontends) to provide a cutting-edge frontend store based on Shopware 6.
+
+## Features
+
+- Built with Nuxt 4 and Vue 3
+- Based on shopware/frontends
+- Integration with Shopware Store API (Shopware 6)
+- Tailwind CSS and Nuxt UI
+- PWA support
+
+## Prerequisites
+
+- Node.js (latest LTS recommended)
+- pnpm 10+
+- [Shopbite Shopware Plugin](https://github.com/shopbite-de/shopware-plugin) (required to enable all features)
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+## Testing
+
+Run unit tests:
+
+```bash
+pnpm test:unit
+```
+
+Run E2E tests:
+
+```bash
+pnpm test:e2e
+```
+
+## Linting
+
+Check code quality:
+
+```bash
+pnpm eslint
+```
+
+Fix linting issues:
+
+```bash
+pnpm lint:fix
+```
+
+## License
+
+[MIT](./LICENSE)

package/app/pages/[...all].vue

@@ -0,0 +1,28 @@
+<script setup>
+const route = useRoute();
+const { data: page, error } = await useAsyncData(
+  `landingpages-${route.path}`,
+  () => {
+    return queryCollection("landingpages").path(route.path).first();
+  },
+);
+
+if (error.value || !page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `Page ${route.path} not found!`,
+    fatal: true,
+  });
+}
+
+useSeoMeta({
+  title: page.value?.title,
+  description: page.value?.description,
+});
+</script>
+
+<template>
+  <UContainer>
+    <ContentRenderer v-if="page" :value="page" class="content my-8" />
+  </UContainer>
+</template>

package/app/pages/index.vue

@@ -13,8 +13,12 @@ if (!page.value) {
 useSeoMeta({
   title: page.value.seo?.title || page.value.title,
   ogTitle: page.value.seo?.title || page.value.title,
+  twitterTitle: page.value.seo?.title || page.value.title,
   description: page.value.seo?.description || page.value.description,
   ogDescription: page.value.seo?.description || page.value.description,
+  twitterDescription: page.value.seo?.description || page.value.description,
+  ogImage: page.value.seo?.image,
+  twitterImage: page.value.seo?.image,
 });
 </script>
 <template>

package/app/pages/menu/[...all].vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+definePageMeta({
+  layout: "listing2",
+});
+const { clearBreadcrumbs } = useBreadcrumbs();
+const { resolvePath } = useNavigationSearch();
+const route = useRoute();
+const routePath = route.path;
+
+const { data: seoResult, error } = await useAsyncData(
+  `cmsResponse${routePath}`,
+  async () => {
+    // For client links if the history state contains seo url information we can omit the api call
+    if (import.meta.client) {
+      if (history.state?.routeName) {
+        return {
+          routeName: history.state?.routeName,
+          foreignKey: history.state?.foreignKey,
+        };
+      }
+    }
+    const seoUrl = await resolvePath(routePath);
+
+    if (!seoUrl?.foreignKey) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `No data fetched from API for ${routePath}`,
+      });
+    }
+
+    return seoUrl;
+  },
+);
+
+if (error.value) {
+  throw error.value;
+}
+
+const { foreignKey } = useNavigationContext(
+  seoResult as Ref<Schemas["SeoUrl"]>,
+);
+
+onBeforeRouteLeave(() => {
+  clearBreadcrumbs();
+});
+</script>
+
+<template>
+  <CategoryListing :id="foreignKey" />
+</template>

package/content/{unternehmen/impressum.md → impressum.md}

@@ -1,3 +1,8 @@
+---
+title: Impressum
+description: Impressum für unsere Website
+---
+
 # Impressum
 
 ## Angaben gemäß § 5 TMG

package/content/index.yml

@@ -1,6 +1,7 @@
 seo:
-  title: ShopBite – Kostenloses Online-Bestellsystem für Gastronomie
+  title: ShopBite – Demo Store
   description: Dein eigenes Bestellsystem ohne Provisionen, ohne monatliche Kosten – 100% Open Source und individuell anpassbar. Perfekt für Pizzerien, Imbisse und Lieferdienste.
+  image: /card.png
 title: ShopBite
 description: Reduziere Kosten und steigere deinen Umsatz
 hero:

package/content/unternehmen/agb.md

@@ -1 +1,6 @@
+---
+title: AGB
+description: Allgemeine Geschäftsbedingungen
+---
+
 # AGB

package/content/unternehmen/datenschutz.md

@@ -1 +1,6 @@
+---
+title: Datenschutz
+description: Datenschutzbestimmungen für unsere Website
+---
+
 # Datenschutz

package/content/unternehmen/zahlung-und-versand.md

@@ -1,3 +1,8 @@
+---
+title: Zahlungs- und Lieferinformationen
+description: Zahlungs- und Lieferinformationen
+---
+
 # Zahlungs- und Lieferinformationen
 
 ### Liefermethoden

package/content.config.ts

@@ -131,9 +131,13 @@ export default defineContentConfig({
         }),
       }),
     }),
-    unternehmen: defineCollection({
-      source: "unternehmen/*.md",
+    landingpages: defineCollection({
+      source: "**/*.md",
       type: "page",
+      schema: z.object({
+        title: z.string().min(1),
+        description: z.string().optional(),
+      }),
     }),
   },
 });

package/eslint.config.mjs

@@ -3,6 +3,8 @@ import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt({
   rules: {
-    'vue/multi-word-component-names': 'off'
-  }
-})
+    "vue/no-watch-after-await": "error",
+    "vue/no-lifecycle-after-await": "error",
+    "vue/multi-word-component-names": "off",
+  },
+});

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   app: {
     head: {
-      title: "ShopBite Demo Shop",
+      title: "ShopBite – Kostenloses Online-Bestellsystem für Gastronomie",
       htmlAttrs: {
         lang: "de",
       },
@@ -11,18 +11,20 @@ export default defineNuxtConfig({
         { name: "viewport", content: "width=device-width, initial-scale=1" },
         {
           name: "description",
-          content: "Italienisch-deutsche Küche in Obertshausen",
+          content:
+            "Dein eigenes Bestellsystem ohne Provisionen, ohne monatliche Kosten – 100% Open Source und individuell anpassbar. Perfekt für Pizzerien, Imbisse und Lieferdienste.",
         },
         {
           property: "og:title",
-          content: "ShopBite - Demo Shop",
+          content:
+            "Dein eigenes Bestellsystem ohne Provisionen, ohne monatliche Kosten – 100% Open Source und individuell anpassbar. Perfekt für Pizzerien, Imbisse und Lieferdienste.",
         },
         {
           property: "og:description",
           content: "Italienisch-deutsche Küche in Obertshausen",
         },
       ],
-      link: [{ rel: "icon", href: "/favicon.ico" }],
+      link: [{ rel: "icon", href: "/favicon.ico", type: "image/png" }],
     },
   },
   colorMode: {
@@ -30,12 +32,6 @@ export default defineNuxtConfig({
   },
   robots: {
     disallow: [
-      "/unternehmen/impressum",
-      "/unternehmen/datenschutz",
-      "/unternehmen/agb",
-      "/impressum",
-      "/datenschutz",
-      "/agb",
       "/merkliste",
       "/passwort-vergessen",
       "/account/recover/password",
@@ -60,15 +56,6 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    "/impressum": {
-      redirect: "/unternehmen/impressum",
-    },
-    "/datenschutz": {
-      redirect: "/unternehmen/datenschutz",
-    },
-    "/agb": {
-      redirect: "/unternehmen/agb",
-    },
     "/merkliste": {
       ssr: false,
     },
@@ -93,10 +80,8 @@ export default defineNuxtConfig({
     "@vite-pwa/nuxt",
     "@sentry/nuxt/module",
     "@nuxt/ui",
+    "@nuxt/scripts",
     "@nuxtjs/plausible",
-    ...(process.env.NODE_ENV === "development"
-      ? ["@nuxt/test-utils/module", "@nuxt/eslint"]
-      : []),
   ],
 
   plausible: {
@@ -151,4 +136,29 @@ export default defineNuxtConfig({
   experimental: {
     asyncContext: true,
   },
+  $development: {
+    modules: [
+      "@shopware/nuxt-module",
+      "@nuxt/image",
+      "@nuxt/content",
+      "@nuxtjs/robots",
+      "@vite-pwa/nuxt",
+      "@sentry/nuxt/module",
+      "@nuxt/ui",
+      "@nuxt/scripts",
+      "@nuxtjs/plausible",
+      "@nuxt/test-utils/module",
+      "@nuxt/eslint",
+    ],
+  },
+  $production: {
+    scripts: {
+      registry: {
+        matomoAnalytics: {
+          matomoUrl: "",
+          siteId: "",
+        },
+      },
+    },
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -20,6 +20,7 @@
     "@iconify-json/simple-icons": "^1.2.59",
     "@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",

package/app/pages/unternehmen/[slug].vue

@@ -1,66 +0,0 @@
-<script setup>
-const slug = useRoute().params.slug;
-const { data } = await useAsyncData(`unternehmen-${slug}`, () => {
-  return queryCollection("unternehmen").path(`/unternehmen/${slug}`).first();
-});
-</script>
-
-<template>
-  <UContainer>
-    <ContentRenderer :value="data" class="content my-8" />
-  </UContainer>
-</template>
-
-<style scoped>
-@import "tailwindcss";
-@import "@nuxt/ui";
-
-:deep(.content h1) {
-  @apply text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100;
-}
-
-:deep(.content h2) {
-  @apply text-2xl font-semibold mt-8 mb-4 text-gray-800 dark:text-gray-200;
-}
-
-:deep(.content h3) {
-  @apply text-xl font-semibold mt-6 mb-3 text-gray-800 dark:text-gray-200;
-}
-
-:deep(.content p) {
-  @apply mb-4 text-gray-700 dark:text-gray-300 leading-relaxed;
-}
-
-:deep(.content ul),
-:deep(.content ol) {
-  @apply mb-4 ml-6 space-y-2;
-}
-
-:deep(.content li) {
-  @apply text-gray-700 dark:text-gray-300 leading-relaxed;
-}
-
-:deep(.content ul li) {
-  @apply list-disc;
-}
-
-:deep(.content ol li) {
-  @apply list-decimal;
-}
-
-:deep(.content strong) {
-  @apply font-semibold text-gray-900 dark:text-gray-100;
-}
-
-/* Unstyle links by default, keep subtle hover */
-:deep(.content a) {
-  @apply no-underline text-inherit transition-colors;
-}
-:deep(.content a:hover) {
-  @apply text-primary;
-}
-
-:deep(.content section) {
-  @apply mb-8;
-}
-</style>