nextjs woocommerce restapi

? Next.js API REST WOOCOMMERCE

• React WooCommerce Thème, en utilisant l'architecture découplée dans Next.js
• Backend dans wordpress
• Front extrémité par réact.
• Les données sont récupérées via l'API REST.

Caractéristiques

• Page d'accueil
• Page de produit unique avec carrousel galerie.
• Page
• Page de paiement avec intégration de passerelle de paiement Stripe.
• Points de terminaison API REST.
• En-tête et pied de page dans Next.js Réponction des éléments de menu WordPress.
• Widgets WordPress affichés sur Next.js Frontend.
• Titre du site, slogan, texte du droit d'auteur, liens sociaux provenant de WordPress.
• Support SEO Yoast
• Composant d'image suivant.
• Génération incrémentielle statique (RE) et création automatique de nouvelles pages de produits statiques sans avoir à reconstituer ensuite.
• Support des styles Gutenberg
• Page de blog avec pagination
• Poste unique
• Pages
• 404 PAGE
• Afficher les commentaires
• Publier un commentaire (en utilisant un formulaire de commentaire)
• Aperçu de la publication (à venir bientôt)
• Pagination des produits (à venir bientôt)
• Chargez plus de produits (à venir bientôt)
• Authentification avec JWT et HTTP uniquement implémentation de cookies. ( À venir )
• Fonction de connexion pour WP Post Aperçu dans Next.js (à venir bientôt)

Cours de tutoriel

Lien de démonstration en direct

Installation

Premier clone / fourche le repo et le CD.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

Ajouter des fonctionnalités sans tête pour WordPress

• Installer et activer les plugins WordPress suivants:

• CMS sans tête
• woocommerce

Configuration?

1. (Obligatoire) Créez une référence de prise de fichier .env à partir de .env-example et mettez à jour votre URL WordPresssite et Frontend Next.js URL.

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com (ce sera votre frontend next.js URL)

2. Ajoutez votre WC_CONSUMER_KEY et WC_CONSUMER_SECRET au .env en suivant wooCommerce> Paramètres> Advanced> API REST

3. Dans votre tableau de bord WordPress, accédez à Paramètres> Général> Adresse du site (URL) (Définissez ceci sur URL Frontend, par exemple http: // localhost: 3000 pendant le développement)

4. Créez les menus d'en-tête et de pied de page dans le tableau de bord WordPress et définissez-les respectivement sur le menu de l'en-tête HCMS et le menu de page de page HCMS.

Liens utiles

• Bande
• Obtenir des touches API Stripe

Versioning?

J'utilise Git pour le versioning.

Auteur ?

• Imran Sayed

Licence?

Ce projet est sous licence en vertu de la licence MIT - voir le fichier licence.md pour plus de détails