nextjs woocommerce Téléchargement - nextjs woocommerce Source Code Download

nextjs woocommerce

Code Source AI

? Version 1.2.1

Télécharger

Capture d'écran 1

Histoire des étoiles

Site de commerce électronique next.js avec backend WooCommerce

URL en direct: https://next-woocommerce.dfweb.no

Table des matières (COT)

Installation
Caractéristiques
Problèmes
Dépannage
FAIRE

Installation

Installez et activez les plugins requis suivants, dans votre répertoire de plugin WordPress:

WooCommerce Ecommerce pour WordPress.
WP-GRAPHQL expose GraphQL pour WordPress.
WP-graphql-wooCommerce ajoute une fonctionnalité WooCommerce à un schéma WPGraphQL.
WP-Algolia-woo-Indexer WordPress Plugin codé par moi. Envoie des produits WooCommerce à Algolia. Requis pour que la recherche fonctionne.

Plugin en option:

Headless-WordPress désactive le frontend, donc seul le backend est accessible. (facultatif)

La version actuelle a été testée et est confirmée en travaillant avec les versions suivantes:

WordPress Version 6.6.2
WooCommerce Version 7.4.0
WP GraphQL Version 1.13.8
WoographQL Version 0.12.0
WPGRAPHQL CORS Version 2.1

Pour le débogage et les tests, installez-vous:
https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkkkkbebbapilgoecccglkfbmbnfm (chrome)
Assurez-vous que WooCommerce a déjà certains produits
Cloner ou fourche le repo et modifier .env.example et le renommer à .env
Définissez ensuite les variables d'environnement en conséquence dans Vercel ou votre solution d'hébergement préférée.
Voir https://vercel.com/docs/environment-variables
Modifiez les valeurs en fonction de votre configuration
Démarrez le serveur avec npm run dev
Activer le mode de paiement COD (Cash on Demand) dans WooCommerce
Ajouter un produit au panier
Procéder à la caisse (Gå jusqu'à Kasse)
Remplissez vos coordonnées et passez la commande

Caractéristiques

Next.js version 14.3.11
React Version 18.3.1
Manuscrit
Tests avec le dramaturge
Connectez-vous à l'API WooCommerce GraphQL et au nom de liste, au prix et à l'image d'affichage des produits
Prise en charge des produits simples et des produits variables
Manipulation de chariots et paiement avec WooCommerce (espèces à la livraison uniquement pour l'instant)
Recherche d'algolies (nécessite une algolie-indexer)
Répond aux normes d'accessibilité WCAG lorsque cela est possible
Perfectionnement pour les produits sans images
Client Apollo avec GraphQL
REACT HOW FORM
Validation du formulaire HTML5 natif
Animations avec mouvement de cadre, composants stylisés et animate.css
Chargement de spinner créé avec des composants stylisés
Affiche la progression de la charge de page avec NProgress pendant la navigation
Conception entièrement réactive
Catégorie et listes de produits
Afficher l'état du stock
Jolies URL avec fonctionnalité intégrée NextJS
Aile à queue 3 pour le style
Commentaires JSDOC

Dépannage

Je reçois une erreur non définie de panier ou d'autres erreurs GraphQL

Vérifiez que vous utilisez la version 0.12.0 du plugin WP-graphql-woocommerce

La page des produits ne se charge pas

Vérifiez les attributs des produits. À l'heure actuelle, l'application nécessite la taille et la couleur.

Problèmes

Dans l'ensemble, l'application fonctionne comme prévu, mais elle n'a pas été beaucoup testée dans un environnement de production. Plus de tests et de débogage sont nécessaires avant de le déployer dans un environnement de production.

Cela dit, gardez à l'esprit ce qui suit:

Actuellement, seuls les produits simples et les produits variables fonctionnent sans aucun problème. D'autres types de produits ne sont pas connus pour fonctionner.
Seule la livraison en espèces (COD) est actuellement prise en charge. Plus de méthodes de paiement peuvent être ajoutées plus tard.

Ce projet est testé avec Browserstack.