WooCommerce est l’une des extensions WordPress les plus populaires pour la création d’applications de commerce électronique. En plus d’utiliser WooCommerce dans une application WordPress traditionnelle, vous pouvez l’utiliser comme une solution headless.

Cet article vous apprend à construire une application WordPress headless avec React déployée sur Kinsta.

Introduction à WooCommerce headless

Le terme « eCommerce headless » signifie la séparation du backend (tête) du frontend (corps) d’une application eCommerce. L’architecture headless transmet les requêtes entre les couches de présentation (frontend) et les couches d’application (backend) d’une solution de commerce électronique par le biais d’API.

Les API définissent les interactions entre les intermédiaires, ce qui permet aux entreprises de modifier les couches de présentation sans perturber la fonctionnalité des couches d’application et de mettre à jour, de modifier ou d’ajouter des produits à plusieurs couches d’application.

Dans une application WooCommerce headless, l’API WooCommerce est un intermédiaire, assurant la communication entre le frontend et le backend. En plus des avantages mentionnés ci-dessus, cela prend en charge le développement flexible et évolutif du frontend, vous permettant de vous concentrer sur la création d’interfaces utilisateur attrayantes et dynamiques avec des piles technologiques modernes telles que React ou Vue.

En outre, l’utilisation de WooCommerce headless protège l’infrastructure du commerce électronique en vous aidant à vous adapter aux besoins changeants des clients et aux progrès technologiques. Vous pouvez mettre à jour sans effort les composants du frontend tout en assurant la stabilité et la fiabilité de la plateforme WooCommerce.

Une application de commerce électronique traditionnelle et une application WooCommerce headless.
Une application de commerce électronique traditionnelle et une application WooCommerce headless.

Cette approche moderne offre de nombreux avantages par rapport à la configuration traditionnelle d’un site de commerce électronique WordPress.

Maintenant que vous comprenez ce qu’est une application WooCommerce headless et ses avantages, il est temps d’en créer une vous-même. En utilisant WordPress, React et l’extension WooCommerce, vous allez créer une application de commerce électronique et la déployer sur Kinsta.

Pré-requis

Avant de commencer, assurez-vous d’avoir les éléments suivants :

Avantages de WooCommerce headless

Lorsque vous choisissez la voie headless pour vos applications WooCommerce, vous débloquez une série d’avantages – en particulier la flexibilité d’avoir un backend qui supporte différents frontend pour votre application.

Voici quelques autres avantages de WooCommerce headless :

  • Personnalisation améliorée – Vous pouvez construire votre application WooCommerce comme vous le souhaitez en utilisant n’importe quel framework web.
  • Amélioration des performances du site – Vous pouvez tirer parti de frameworks web rapides tels que React et Vue pour améliorer considérablement les performances de votre site.
  • Avantages SEO – Vous avez plus de contrôle et de flexibilité sur les stratégies SEO pour atteindre les objectifs de votre entreprise.
  • Meilleure évolutivité – Votre site peut évoluer plus efficacement, garantissant des performances fluides même pendant les périodes de fort trafic.
  • Possibilité de créer des expériences client uniques – Vous êtes libéré des contraintes des modèles traditionnels. Vous pouvez créer des expériences innovantes et personnalisées pour vos clients.

Mise en place d’un site WooCommerce headless

Voici un guide étape par étape pour configurer un site WooCommerce :

  1. Connectez-vous à votre tableau de bord MyKinsta
  2. Naviguez vers Ajouter un service > Site WordPress.
  3. Sélectionnez l’option Installer WordPress.
  4. Sur la page Ajouter un nouveau site WordPress, remplissez les champs nécessaires pour installer WordPress.
  5. Cochez la case Installer WooCommerce avant de cliquer sur Continuer.
Installer WordPress et l'extension WooCommerce.
Installer WordPress et l’extension WooCommerce.

Activer le plugin WooCommerce

  1. Sur votre tableau de bord MyKinsta, cliquez sur Domaines dans la colonne latérale.
  2. Sur la page Domaines, cliquez sur Ouvrir l’Admin WordPress.
  3. Connectez-vous à votre tableau de bord d’administration WordPress, naviguez vers les extensions, sélectionnez l’extension WooCommerce et activez-la.
Activation de l'extension WooCommerce.
Activation de l’extension WooCommerce.

Configurer WooCommerce pour les opérations headless

Pour configurer WooCommerce pour des opérations headless :

  1. Connectez-vous à votre tableau de bord d’administration WordPress. Dans la colonne latérale, cliquez sur WooCommerce > Réglages.
  2. Sur la page Réglages, cliquez sur l’onglet Avancé. Ensuite, cliquez sur Rest API.
  3. Cliquez maintenant sur Ajouter une clé.

    Ajouter la clé pour l'API REST.
    Ajouter la clé pour l’API REST.

  4. Cliquez sur Créer une clé API. Donnez une description à votre nouvelle API REST, définissez le champ Permissions sur Lecture/Ecriture et cliquez sur Générer une clé API.

    Génération de la clé API de WooCommerce.
    Génération de la clé API de WooCommerce.

  5. Copiez la clé du consommateur et le secret et stockez-les en toute sécurité pour les utiliser dans l’application React.
  6. Enfin, ajustez la structure du permalien pour vous assurer que les données JSON sont renvoyées lors de la demande de l’API. Sur le tableau de bord d’administration de WordPress, cliquez sur Réglages > Permaliens, et sélectionnez Nom de la publication.

Avant de continuer, ajoutez quelques produits à votre boutique WooCommerce. Naviguez vers la section WooCommerce dans votre tableau de bord WordPress, cliquez sur Produits, et suivez les instructions pour ajouter des produits. Vous pouvez également importer ces exemples de produits pour votre boutique.

Une fois WordPress et WooCommerce installés, vous êtes prêt à vous concentrer sur le frontend de votre application de commerce électronique headless.

Configurer un projet React

Voici comment configurer un projet React :

  1. Dans votre répertoire préféré, utilisez les commandes suivantes pour créer un projet React : 
    # Remember to replace <app-name> with your preferred name

# With npx
npx create-react-app <app-name> && cd <app-name>

# With yarn
yarn create react-app <app-name> && cd <app-name>
  2. Une fois votre projet créé, créez un fichier .env à la racine de votre projet et ajoutez les éléments suivants : 
    REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

    Remplacez ceci par votre clé de consommateur WooCommerce et votre secret générés plus tôt.

  3. Ensuite, utilisez la commande ci-dessous pour installer un paquet pour la gestion des routes : 
    ## With npm
npm i react-router-dom

## With yarn
yarn add react-router-dom
  4. Enfin, lancez le projet React à l’aide de la commande suivante : 
    ## With npm
npm start

## With yarn
yarn start

Développer le frontend de votre site WooCommerce headless

Une boutique de commerce électronique réussie met en valeur les produits et facilite les achats. Commencez par afficher les produits disponibles dans la boutique WooCommerce sur le frontend. Cela implique de faire des requêtes à l’API de WooCommerce.

Le point de terminaison permettant de lister tous les produits est wp-json/wc/v3/products. Ce point de terminaison doit être ajouté à l’URL de l’hôte. Ajoutez cette variable à votre fichier .env pour votre URL de base, qui est l’URL de l’hôte ajoutée au point de terminaison products. Mettez à jour http://example.com avec le domaine de votre site WooCommerce.

REACT_APP_BASE_URL=http://example.com/wp-json/wc/v3/products

Lorsque vous effectuez des requêtes API, vous devez inclure votre clé de consommateur et votre secret dans l’URL. Une fois combinée, l’URL ressemble à ceci :


https://kinstawoocommerce.kinsta.cloud/wp-json/wc/v3/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

Effectuons des requêtes d’API dans l’application React en utilisant l’API Fetch pour récupérer les produits WooCommerce.

  1. Dans votre application React, ouvrez le fichier App.js dans le répertoire src et remplacez son contenu par le code ci-dessous : 
    import {Link} from 'react-router-dom';
import {useEffect, useState} from 'react';

function App() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);
            const data = await response.json();
            setProducts(data);
            setLoading(false);
        };

        fetchProducts();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);

    return loading ? (
        <div className="loaderText">
            <h2>Just a moment. Fetching products...</h2>{' '}
        </div>
    ) : (
        <ul>
            {products ? (
                products.map((product) => (
                    <li key={product.id}>
                        <Link to={`/product/${product.id}`}>
                            <img src={product.images[0].src} alt="Product banner"/>
                            <h2>{product.name}</h2>
                            <p>Sale price: {product.sale_price}</p>
                            <strong>
                                {product.stock_status === 'instock'
                                    ? 'In stock'
                                    : 'Out of stock'}
                            </strong>
                            <button>Add to Cart</button>
                        </Link>
                    </li>
                ))
            ) : (
                <li>No products found</li>
            )}
        </ul>
    );
}

export default App;

    Ce code récupère une liste de produits à partir du point de yterminaison de l’API WooCommerce à l’aide de l’API Fetch lorsque le composant est monté (useEffect hook). L’URL du point de terminaison est construite à l’aide des variables d’environnement définies précédemment

    Une fois les données récupérées, il met à jour l’état du composant (products) à l’aide de setProducts(response) et définit loading à false à l’aide de setLoading(false).

    Pendant que les données sont récupérées, un message de chargement s’affiche. Une fois que les données sont récupérées et que loading est défini sur false, il parcourt le tableau products et affiche une liste d’articles à l’aide de JavaScript XML(JSX). Chaque élément de produit est enveloppé dans un composant Link provenant de react-router-dom, qui génère un lien vers la page de détails du produit individuel en fonction de son ID.

    Le nom du produit, le prix, la description (rendue à l’aide de dangerouslySetInnerHTML pour injecter du contenu HTML), l’état des stocks et un bouton sont affichés pour chaque produit.

  2. Dans le répertoire src, ouvrez le fichier index.js et remplacez le code par l’extrait ci-dessous : 
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import App from "./App";


ReactDOM.render(
    <React.StrictMode>
        <div className="container">
            <header>
                <h1>Kinsta Store</h1>
            </header>
                <BrowserRouter>
                    <Routes>
                        <Route exact path="/" element={<App />} />
                    </Routes>
                </BrowserRouter>

        </div>
    </React.StrictMode>,
    document.getElementById("root")
);

    Il rend le composant App lorsque la route / est appelée dans le navigateur.

  3. Exécutez votre application pour voir les changements. 
    ## With npm
npm start

## With yarn
yarn start

    L’application React affiche désormais une liste de produits de la boutique WooCommerce.

    Liste des produits de la boutique WooCommerce.
    Liste des produits de la boutique WooCommerce.

Créer des pages de produits dynamiques

Maintenant, pour améliorer l’expérience utilisateur, créez des pages de produits dynamiques à l’aide de l’API WooCommerce. Cette API fournit un point de terminaison pour récupérer des données sur un seul produit : wp-json/wc/v3/products/<id>. Pour utiliser ce point de terminaison afin de récupérer et d’afficher les données relatives à un seul produit dans la boutique, procédez comme suit :

  1. Créez un composant ProductDetail.js dans le répertoire src qui récupère et affiche des données sur un seul produit. Il fonctionne de la même manière que le code du fichier App.js, sauf qu’il récupère les détails d’un seul produit. 
    import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';

function ProductDetail() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const {id} = useParams();
    const [product, setProduct] = useState(null);

    useEffect(() => {
        const fetchSingleProductDetails = async () => {
            const response = await fetch(
                `${BASE_URL}/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`
            );
            const data = await response.json();
            setProduct(data);
        };
        fetchSingleProductDetails();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);

    if (!product) {
        return (
            <div className="loaderText">
                <h2>Fetching product details...</h2>
            </div>
        );
    }

    return (
        <div className="product-detail">
            <h2>{product.name}</h2>
            <h4>Original Price: {product.regular_price}</h4>
            <h4>Sale price: {product.sale_price}</h4>
            <img src={product.images[0].src} alt="Product banner"/>
            <strong>
                {product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}
            </strong>
        </div>
    );
}

export default ProductDetail;
  2. Créez une nouvelle route dans index.js et affectez-lui le composant ProductDetail. Cet extrait de code crée une nouvelle route dans index.j s et lui affecte le composant ProductDetail. Cela permet de s’assurer que lorsque les utilisateurs cliquent sur un lien de produit, ils sont dirigés vers la page du produit concerné. 
    // index.js
…
import ProductDetail from "./ProductDetail";

ReactDOM.render(
  <React.StrictMode>
	…
               <Router>
          <Routes>
            <Route exact path="/" element={<App />} />
		{/* the new route */}
            <Route path="/product/:id" element={<ProductDetail />} />
          </Routes>
        </Router>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

    Avec ces modifications, le fait de cliquer sur n’importe quel produit dans l’application redirige les utilisateurs vers une page affichant des informations détaillées sur ce produit spécifique.

    Informations détaillées sur un produit vestimentaire.
    Informations détaillées sur un produit vestimentaire.

Vous pouvez accéder au code complet dans ce dépôt GitHub.

Intégrer les fonctionnalités clés de WooCommerce dans une configuration headless

Vous pouvez construire sur les fondations du référencement de produits dans une application WooCommerce headless en intégrant des fonctionnalités essentielles telles que les suivantes :

  • Paniers d’achat – Gérez les données du panier côté client ou utilisez le stockage local pour permettre aux utilisateurs d’ajouter, de supprimer et de mettre à jour les articles de manière transparente.
  • Processus de paiement – Concevez un processus de paiement rationalisé avec des composants React, collectez les informations nécessaires, validez les entrées de l’utilisateur et assurez une expérience de paiement fluide.
  • Authentification des utilisateurs – Mettez en œuvre une authentification sécurisée à l’aide de JSON Web Token (JWT) ou Open Authorization 2.0 (OAuth2) pour améliorer l’expérience des utilisateurs avec des fonctions d’enregistrement, de connexion et de réinitialisation du mot de passe.
  • Traitement des paiements – Utilisez des API de passerelles de paiement sécurisées, telles que Stripe ou PayPal, pour les transactions et les remboursements.
  • Gestion des commandes – Gérez efficacement les commandes et les statuts avec l’API WooCommerce. Proposez des fonctionnalités conviviales pour l’historique des commandes, le suivi, les retours et les remboursements, et automatisez les processus à l’aide de webhooks ou d’une architecture pilotée par les évènements.

Déployer votre site WooCommerce headless sur Kinsta

Une fois que vous avez développé votre site WooCommerce headless, le déployer sur la plateforme d’hébergement WordPress de Kinsta est simple.

Kinsta offre une gamme d’avantages, y compris des performances élevées, une sécurité robuste et une évolutivité, ce qui en fait un choix idéal pour l’hébergement de votre site de commerce électronique headless. Si vous avez déjà un site WordPress qui n’est pas sur Kinsta, vous pouvez facilement le migrer vers Kinsta.

En outre, vous pouvez déployer gratuitement votre application React sur le service d’hébergement de site statique de Kinsta – il vous suffit de pousser votre code vers votre fournisseur Git préféré(Bitbucket, GitHub ou GitLab).

Une fois que vous avez poussé votre code, suivez les étapes suivantes pour déployer votre site :

  1. Connectez-vous à votre tableau de bord MyKinsta.
  2. Cliquez sur Ajouter un service, puis sur Site statique.
  3. Sélectionnez un fournisseur Git et cliquez sur Connecter le fournisseur git.
  4. Sélectionnez le dépôt et la branche que vous souhaitez déployer. Les réglages de construction sont automatiquement détectés.
  5. Assurez-vous d’ajouter toutes les variables d’environnement nécessaires à partir de votre fichier .env.

    Ajout de variables d'environnement.
    Ajout de variables d’environnement.

  6. Enfin, cliquez sur Créer un site pour déployer votre application React.

Vous avez déployé avec succès votre application WooCommerce headless !

Résumé

Cet article a expliqué les nombreux avantages et les nouvelles possibilités de créer des boutiques en ligne dynamiques et performantes en mettant en place des sites WooCommerce headless.

En découplant le frontend du backend, vous pouvez personnaliser votre site afin d’offrir aux clients des expériences d’achat plus attrayantes et personnalisées qui bénéficient de hautes performances, d’une sécurité robuste et d’une grande évolutivité.

Que vous soyez un développeur chevronné ou que vous débutiez, Kinsta fournit le support, les outils et les autres ressources dont vous avez besoin pour construire et gérer des solutions de commerce électronique innovantes et réussies. Hébergez-vous chez Kinsta dès aujourd’hui pour explorer les possibilités du commerce électronique headless !

Êtes-vous enthousiasmé par les possibilités infinies de WooCommerce headless pour votre boutique en ligne ? Partagez vos idées ou vos questions dans les commentaires ci-dessous.

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).