nextjs woocommerce Download - nextjs woocommerce Quellcode Download

nextjs woocommerce

AI-Quellcode

? Version 1.2.1

Herunterladen

Screenshot 1

Sterngeschichte

Next.js E -Commerce -Website mit WooCommerce -Backend

Live-URL: https://next-wocommerce.dfweb.no

Inhaltsverzeichnis (TOC)

Installation
Merkmale
Probleme
Fehlerbehebung
Todo

Installation

Installieren und aktivieren Sie die folgenden erforderlichen Plugins in Ihrem WordPress -Plugin -Verzeichnis:

WooCommerce -E -Commerce für WordPress.
WP-Graphql enthält GraphQL für WordPress.
WP-Graphql-woocommerce fügt einem WPGRAPHQL-Schema WooCommerce-Funktionalität hinzu.
WP-Algolia-woo-Indexer WordPress Plugin codiert von mir. Sendet WooCommerce -Produkte nach Algolien. Erforderlich für die Suche nach der Arbeit.

Optionales Plugin:

Headless-Wordpress deaktiviert den Frontend, sodass nur das Backend zugänglich ist. (optional)

Die aktuelle Version wurde getestet und wird bestätigt, mit den folgenden Versionen zu arbeiten:

WordPress Version 6.6.2
WooCommerce Version 7.4.0
WP GraphQL Version 1.13.8
WOOGROGRAPQL Version 0.12.0
Wpgraphql cors Version 2.1

Installieren Sie zum Debuggen und Testen entweder:
https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkbebapilgoeccciglkfbmbnfm (Chrome)
Stellen Sie sicher, dass WooCommerce bereits einige Produkte hat
Klon oder Gabel des Repos .env .env.example
Stellen Sie dann die Umgebungsvariablen entsprechend in Vercel oder in Ihrer bevorzugten Hosting -Lösung ein.
Siehe https://vercel.com/docs/environment-variables
Ändern Sie die Werte entsprechend Ihrem Setup
Starten Sie den Server mit npm run dev
Aktivieren Sie die Zahlungsmethode der COD (Cash on Demand) in WooCommerce
Fügen Sie dem Wagen ein Produkt hinzu
Fahren Sie mit dem Checkout fort (Gå bis Kasse)
Geben Sie Ihre Details ein und geben Sie die Bestellung auf

Merkmale

Next.js Version 14.3.11
React Version 18.3.1
Typoskript
Tests mit Dramatikern
Stellen Sie eine Verbindung zu WooCommerce GraphQL -API und Listenname, Preis und Anzeigebild für Produkte an
Unterstützung für einfache Produkte und variable Produkte
CART -Handhabung und Kasse mit WooCommerce (Bargeld nur vorerst)
Algoliensuche (erfordert Algolia-woo-Indexer)
Erfüllt die WCAG -Barrierefreiheitstandards, wenn möglich
Platzhalter für Produkte ohne Bilder
Apollo Client mit GraphQL
Hakenform reagieren
Native HTML5 -Formularvalidierung
Animationen mit Framer Motion, gestalteten Komponenten und Animate.css
Laden von Spinner mit gestalteten Komponenten erstellt
Zeigt den Seitenlastschritt mit Nprogress während der Navigation an
Volles reaktionsschnelles Design
Kategorie und Produktlisten
Aktienstatus anzeigen
Hübsche URLs mit gebauten NextJs -Funktionalität
Rückenwind 3 für das Styling
JSDOC -Kommentare

Fehlerbehebung

Ich erhalte einen undefinierten Fehler oder andere GraphQL -Fehler

Überprüfen Sie, ob Sie die 0,12.0-Version des WP-Graphql-Woocommerce-Plugins verwenden

Die Produktseite wird nicht geladen

Überprüfen Sie die Attribute der Produkte. Im Moment erfordert die Anwendung Größe und Farbe.

Probleme

Insgesamt arbeitet die Anwendung wie beabsichtigt, wurde jedoch in einer Produktionsumgebung nicht ausführlich getestet. Weitere Tests und Debuggen sind erforderlich, bevor es in einer Produktionsumgebung bereitgestellt wird.

Nachdem dies gesagt ist, denken Sie an die folgenden:

Derzeit funktionieren nur einfache Produkte und variable Produkte ohne Probleme. Es ist nicht bekannt, dass andere Produkttypen funktionieren.
Derzeit wird nur Bargeld für die Lieferung (COD) unterstützt. Weitere Zahlungsmethoden können später hinzugefügt werden.

Dieses Projekt wird mit BrowsStack getestet.