3 minutes October 3, 2024

So richten Sie das Frontend für Shopware 6 ein

Das Einrichten und Installieren des Frontends für Shopware 6 kann eine anspruchsvolle Aufgabe sein, insbesondere ohne klare Dokumentation. Viele Benutzer stoßen auf Herausforderungen, wenn sie versuchen, eine benutzerdefinierte Storefront zu erstellen, die ihren spezifischen Anforderungen entspricht.

Dieser Artikel führt Sie durch den Prozess der Einrichtung des Frontends für Shopware 6.

Lösung: Frontend für Shopware 6 einrichten

Shopware Composable Frontends ist Shopwares Toolkit zum Erstellen plattformunabhängiger, individueller Storefronts. Die Implementierung des Demo-Stores basiert auf Vue.js und Nuxt3, die ein flexibles und modernes Framework für die Entwicklung bieten.

Installieren des Frontends

Option 1: Installieren Sie das CMS-Basispaket

npm install -D @shopware-pwa/cms-base

1	npm install -D @shopware-pwa/cms-base

Option 2: Die Vue Demo Store-Vorlage manuell einrichten

Führen Sie die folgenden Befehle in einem neuen Verzeichnis aus:

                 npx tiged shopware/frontends/templates/vue-demo-store demo-store && cd demo-store

                 npm i && npm run dev

npx tiged shopware/frontends/templates/vue-demo-store demo-store && cd demo-store

npm i && npm run dev

Wenn ein Abhängigkeitskonflikt auftritt, können Sie das Flag –legacy-peer-deps verwenden:

npm i --legacy-peer-deps && npm run dev

1	npm i --legacy-peer-deps && npm run dev

Hinweis: Die Verwendung von –legacy-peer-deps kann zu potenziellen Problemen führen. Gehen Sie daher mit Vorsicht vor.

Verbindung zur Shopware-API herstellen

Öffnen Sie demo-store/nuxt.config.ts und bearbeiten Sie die Konfiguration:

    runtimeConfig: {
                

                   public: {
                                

                     shopware: {

                       endpoint: "https://frontend.local/store-api/",

                       accessToken: "SWSCTFY5A2PVA0NTEGO4A3AXQQ",

                       devStorefrontUrl: "https://frontend.local",

                     },
                

                   },
                


                 },

runtimeConfig: {

public: {

shopware: {

endpoint: "https://frontend.local/store-api/",

accessToken: "SWSCTFY5A2PVA0NTEGO4A3AXQQ",

devStorefrontUrl: "https://frontend.local",

Der Endpunkt sollte HTTPS sein und das Format haben: https://Ihre-URL/Store-API
Der Zugriffstoken kann aus dem Shopware-Admin-Login (Verkaufskanal > API-Bereich) kopiert werden.

Hinweis: Das Frontend bevorzugt für SEO-URLs normalerweise keine Headless-URLs.

Verwenden von HTTPS für Localhost mit zusammensetzbaren Frontends

Manuelles Setup mit mkcert

Installieren Sie mkcert (folgen Sie den Anweisungen hier )
Erstellen Sie ein gültiges Zertifikat:

 mkcert localhost

1	mkcert localhost

Aktualisieren Sie den Nuxt-Dev -Befehl in Ihrer Datei package.json:

"scripts": {
  "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev 
--https --ssl-cert localhost.pem --ssl-key localhost-key.pem"
}

"scripts": {

"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev

--https --ssl-cert localhost.pem --ssl-key localhost-key.pem"

}

Führen Sie Ihr Projekt aus:

npm run dev

1	npm run dev

pnpm run dev

1	pnpm run dev

Notiz: Ihr Browser fordert Sie möglicherweise beim Besuch auf, das Risiko zu akzeptieren https://localhost:3000 aufgrund des selbstsignierten Zertifikats.

Spracheinstellungen

Englische Konfiguration: demo-store/i18n/en-GB/en-GB.ts

Standardlayouts

Standardseitenlayout: demo-store/layouts/default.vue
Seitenlayout „Mein Konto“: demo-store/layouts/account.vue
Layout der Checkout-Seite: demo-store/layouts/checkout.vue

Schlüsselseiten

Eintragsseite (Frontend-Navigation): demo-store/components/FrontendNavigationPage.vue
Landingpage (Frontend-Detail): demo-store/components/FrontendDetailPage.vue

Dienstprogramm CSS

Unterstützt mehrere CSS-Frameworks, darunter:

Rückenwind-CSS
Windiges CSS
Bootstrap

npm install bootstrap oder npm install bootstrap –legacy-peer-deps

CMS-Block und -Element

Standard-CMS-Blöcke: Automatisch zum Frontend hinzugefügt. Beim Hinzufügen im Backend werden standardmäßige CMS-Blockcodes automatisch im Nuxt-Modul generiert.
Benutzerdefinierte CMS-Blöcke: Muss manuell auf der Frontend-Vue-Seite entworfen werden. Stellen Sie sicher, dass Sie den im Backend angegebenen Blocknamen und Elementnamen zusammen mit den entsprechenden Konfigurationswerten verwenden.

Block wird hier hinzugefügt – demo-store/components/cms/block z.B: CmsBlockAccordion.vue
Hier werden Elemente hinzugefügt – demo-store/components/cms/element z.B: CmsElementAccordiion.vue

Wichtige Einschränkungen

Zu den Frontend-Einstellungen, die nicht vom Backend synchronisiert werden, gehören:

Verfügbare Felder zur Kasse und Registrierung
Mehrere Domänen (separates Projekt für separate Domänen erforderlich)
Übersetzungen und Snippets (Zusätzliches Sprachsnippet im Frontend erforderlich)

Abschluss

Dieser Leitfaden soll Ihnen dabei helfen, das Frontend für Ihren Shopware-Shop mit Vue.js und Nuxt3 effektiv einzurichten. Wenn Sie auf Probleme stoßen, wenden Sie sich an uns Shopware-Agentur für kompetente Lösungen.

Recent help desk articles

Grüße! Ich bin Aneesh Sreedharan, CEO von 2Hats Logic Solutions. Bei 2Hats Logic Solutions widmen wir uns der Bereitstellung von technischem Fachwissen und der Lösung Ihrer Probleme in der Welt der Technologie. Unsere Blog-Seite dient als Ressource, in der wir Einblicke und Erfahrungen teilen und wertvolle Perspektiven auf Ihre Fragen bieten.