L’extension WooCommerce pour WordPress vous permet de créer et de gérer efficacement une plateforme de commerce électronique, en vous donnant accès à des fonctions de notification intégrées qui vous informent des nouvelles commandes ou des commandes terminées, des bas niveaux de stock et des paiements réussis. Ces fonctionnalités sont essentielles mais n’offrent qu’un aperçu limité des données précieuses collectées par WooCommerce.

De telles restrictions sont le propre des extensions traditionnelles fonctionnant dans l’environnement WordPress. En revanche, les applications hébergées – des opérations basées sur le web sur des serveurs externes – sont beaucoup plus extensibles.

En s’intégrant aux API de WooCommerce et en utilisant des ressources externes, les applications hébergées peuvent fournir des rapports avancés, des alertes personnalisées et des informations détaillées sur les transactions de commerce électronique.

Dans ce guide, apprenez à créer une application hébergée qui génère des alertes par e-mail avec des données de transaction complètes, dépassant les capacités de l’extension standard.

Fonctionnalités existantes de rapports et de notifications

Les alertes et les mises à jour d’état intégrées à WooCommerce aident à la gestion essentielle de la boutique, mais ne peuvent pas satisfaire toutes les exigences de l’entreprise. Par conséquent, de nombreux utilisateurs se tournent vers des extensions tierces pour augmenter leurs capacités de notifications et de rapports.

Certaines des extensions les plus populaires incluent :

  • WooCommerce Admin – Fournit un tableau de bord intuitif avec des mesures et des rapports clés sur la boutique.
  • WooCommerce PDF Invoices and Packing Slips – Permet de personnaliser les modèles de factures et de bordereaux d’expédition – envoyés automatiquement aux clients par e-mail – et fournit un enregistrement des factures et bordereaux d’expédition générés.
  • WooCommerce Google Analytics Intégration – Utilise les outils de Google Analytics pour générer des rapports détaillés sur la démographie des clients et les sources de trafic.

Avec ces extensions, WooCommerce offre des options de rapports et d’alerte, y compris des résumés de commande, des alertes de stock bas, la gestion des stocks, et des analyses approfondies grâce à l’intégration avec des outils tels que Google Analytics.

Les limites des systèmes de rapports actuels

Bien que bénéfiques, les systèmes de rapports actuels ont des capacités limitées et présentent plusieurs limites, telles que :

  • Personnalisation : Les outils de rapports génériques et les extensions limitent la profondeur et la spécificité des informations que votre entreprise peut tirer des données. Vous pourriez avoir besoin de mesures spécialisées, de visualisations uniques, d’une intégration avec des outils d’analyse propriétaires ou de certains filtres de données qui ne sont pas facilement disponibles dans les outils de rapports génériques et les extensions.
  • Évolutivité : Les systèmes de rapports existants peuvent être confrontés à des problèmes d’évolutivité lorsqu’ils traitent de grands ensembles de données. La lenteur des performances et les goulets d’étranglement dans le traitement des données peuvent entraver l’efficacité de l’analyse des données, entraînant des retards dans la prise de décision et les temps de réponse.
  • Dépendance à l’égard de WordPress : Comme l’intégration avec WordPress limite l’indépendance, la personnalisation et l’évolutivité, vous pouvez être confronté à des contraintes liées aux ressources du serveur, à la compatibilité des extensions et aux vulnérabilités en matière de sécurité. Cette intégration peut également empêcher votre entreprise d’adopter des technologies et des solutions plus avancées.

En revanche, une application de rapports personnalisée peut fournir des informations détaillées sur les transactions et les clients. Vous pouvez utiliser ces données pour anticiper les tendances du marché et optimiser vos offres en conséquence.

En outre, vous pouvez rapidement adapter une application de rapports personnalisée à des volumes de données croissants, ce qui garantit des opérations transparentes au fur et à mesure de la croissance de votre entreprise.

L’application de rapports avancée

L’application de rapports avancée envisagée dans ce guide a les fonctions suivantes :

  • Des alertes détaillées sur les transactions sont envoyées par e-mail au propriétaire de la boutique lorsque le client passe une nouvelle commande. L’application dispose également d’un tableau de bord affichant une liste de toutes les commandes avec leurs détails.
  • Les mises à jour de l’inventaire affichent les détails de l’inventaire de la boutique sur le tableau de bord. De là, vous pouvez facilement suivre les niveaux de stock de chaque produit.
  • Les rapports sur les ventes totales vous permettent d’analyser l’évolution du chiffre d’affaires au fil du temps.

Contrairement aux extensions génériques ou au système de notifications et d’alertes par défaut de WooCommerce, cette application offre des alertes détaillées et personnalisables sur les stocks restants et les ventes totales.

L’hébergement de l’application présente également plusieurs avantages :

  • Évolutivité : L’hébergement indépendant minimise les goulots d’étranglement dans le traitement des données, ce qui vous permet d’étendre vos activités sans contraintes de ressources.
  • Personnalisation : L’hébergement indépendant vous permet de personnaliser l’utilisation des données collectées, par exemple en intégrant des services tiers (tels que des moteurs d’analyse prédictive) et en mettant en œuvre des techniques uniques de visualisation des données afin de mieux répondre aux exigences et aux objectifs de votre entreprise.
  • Autonomie : En retirant votre application de l’environnement WordPress, vous vous affranchissez des restrictions telles que les ressources limitées du serveur et les conflits potentiels entre les différentes extensions.

Comment développer une application de rapports avancée

Dans cette section, nous allons construire une application de rapports en utilisant Node.js avec l’API REST de WooCommerce et des webhooks pour récupérer les données de la boutique.

Pré-requis :

Configurer le modèle de démarrage

Suivez ces étapes pour configurer le modèle de démarrage :

  1. Prenez note de votre clé API Mailgun et de votre domaine sandbox et collez leurs valeurs dans le fichier .env avec les variables correspondantes. Pour la variable MAILGUN_SENDER_EMAIL, indiquez comme valeur l’e-mail que vous avez utilisé pour créer le compte Mailgun.
  2. Sur votre tableau de bord d’administration WordPress, sélectionnez WooCommerce > Réglages > Avancés > REST API.
L'onglet WooCommerce Advanced montre la section REST API.
L’onglet WooCommerce Advanced montre la section REST API.
  1. Cliquez sur Ajouter une clé pour créer la clé API qui permettra d’authentifier les requêtes de votre application.
  2. Ouvrez la section Détails de la clé et fournissez une description et un utilisateur, sélectionnez Autorisations de lecture/écriture et cliquez sur Générer une clé API.
Onglet WooCommerce Advanced affichant les détails de la clé API.
Onglet WooCommerce Advanced affichant les détails de la clé API.
  1. Assurez-vous de copier la clé du consommateur et le secret du consommateur à partir de la page résultante, car vous ne pourrez pas les voir à nouveau.
  2. Ouvrez le fichier .env et assignez les valeurs que vous avez copiées dans l’étape précédente à leurs variables respectives. Indiquez l’URL de votre boutique pour la variable WOOCOMMERCE_STORE_URL (quelque chose comme http://localhost/mystore/index.php).
  3. Installez toutes les dépendances du projet en exécutant la commande suivante dans votre terminal :
npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

Ces dépendances ont les fonctions suivantes :

  • express: Cadre Node.js pour créer une API.
  • @woocommerce/woocommerce-rest-api: Effectue des appels réseau à l’API REST de WooCommerce.
  • dotenv: Charge les variables d’environnement à partir du fichier .env.
  • ejs: Crée des modèles JavaScript.
  • mailgun.js: Envoie des e-mails à l’aide de Mailgun.
  • nodemon: Redémarre automatiquement le serveur lorsque des changements de fichiers sont détectés.

Mise en œuvre des fonctions de l’application

Le modèle de démarrage contient le code pour le rendu des modèles JavaScript intégrés (EJS) dans le dossier views. De cette façon, vous pouvez vous concentrer sur la logique du serveur, qui récupère les données nécessaires à partir des API de WooCommerce et les transmet aux modèles EJS pour les afficher sur l’interface utilisateur (UI).

Pour mettre en œuvre les fonctionnalités de l’application, suivez les étapes suivantes :

  1. Créez un fichier nommé server.js dans le dossier racine du projet. Ce fichier sert de point d’entrée dans le serveur Express.
  2. Collez le code suivant dans le fichier server.js :
const express = require('express')
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
require('dotenv').config();

const app = express()
const port = 3000

const WooCommerce = new WooCommerceRestApi({
 url: process.env.WOOCOMMERCE_STORE_URL,
 consumerKey: process.env.WOOCOMMERCE_CONSUMER_KEY,
 consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY,
 version: "wc/v3"
});

app.set('view engine', 'ejs')

// endpoint to check if the application is up and running
app.get('/', (req, res) => {
   res.send('The application is up and running!')
})

// retrieve all products in the store
app.get('/products', (req, res) => {
   WooCommerce.get("products")
       .then((response) => {
           res.render('pages/inventory', {
               products: response.data,
               currentPage: req.originalUrl
           });
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

app.listen(port, () => {
 console.log(`App listening on port ${port}`)
})

Le code ci-dessus utilise Express.js pour créer un serveur web. Vous commencez par importer les paquets nécessaires, configurer le client WooCommerce pour interagir avec l’API REST de WooCommerce, et configurer l’application pour utiliser des modèles EJS.

Tout d’abord, vous définissez un point de terminaison / que vous pouvez utiliser pour vérifier si l’application est en cours d’exécution. Ensuite, vous définissez une route /products qui récupère tous les produits de la boutique WooCommerce. En cas de succès, cette route rend le modèle inventory avec les données récupérées.

Notez que le code transmet également le currentPage au modèle pour toutes les routes, ce qui permet d’identifier les pages actives sur le tableau de bord.

  1. Exécutez la commande npm run dev et ouvrez http://localhost:3000/products dans votre navigateur pour voir les résultats :
Page d'inventaire de la boutique avec les détails de l'article.
Page d’inventaire de la boutique avec les détails de l’article.

La page Inventaire de la boutique affiche tous les produits disponibles dans la boutique ainsi que leurs détails. Ces informations vous permettent de suivre les produits disponibles et de gérer les stocks en conséquence.

  1. Pour gérer les rapports sur les ventes, ajoutez la route suivante au fichier server.js:
// retrieve monthly sales report
app.get('/sales', (req, res) => {
   WooCommerce.get("reports/sales", {
       		period: "month"
   })
       .then((response) => {
           res.render('pages/sales', {
               sales: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data);
       });
})

Ce code définit un point de terminaison /sales qui récupère le rapport de vente mensuel à partir de l’API de rapport de vente de WooCommerce. L’appel à l’API inclut le paramètre period avec la valeur month, qui spécifie le rapport de ventes du mois en cours. Une fois la requête réussie, le code rend le modèle EJS des ventes avec les données récupérées.

  1. Rendez-vous à l’adresse http://localhost:3000/sales dans votre navigateur pour afficher les résultats :
Rapport mensuel des ventes.
Rapport mensuel des ventes.

Cette page affiche un rapport complet sur les ventes totales, vous aidant à analyser les tendances mensuelles du chiffre d’affaires de votre entreprise.

Mettre en œuvre la gestion des commandes

  1. Ajoutez la route suivante au fichier server.js.
// retrieve all orders
app.get('/orders', (req, res) => {
   WooCommerce.get("orders")
       .then((response) => {
           res.render('pages/orders', {
               orders: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

Ce code récupère toutes les commandes de la boutique WooCommerce et rend le modèle Orders avec les données récupérées.

  1. Naviguez vers http://localhost:3000/orders dans votre navigateur pour voir les résultats. Cette page affiche des informations sur la gestion des commandes :
Page des commandes affichant les détails de la transaction.
Page des commandes affichant les détails de la transaction.

Personnalisation des alertes pour un rapport complet sur les transactions

Pour mettre en œuvre la fonctionnalité permettant de vous envoyer une alerte personnalisée par courrier électronique lorsqu’un client passe une commande sur votre site, procédez comme suit :

  1. Ouvrez une fenêtre de terminal et exécutez ngrok http 3000 pour tunneliser la connexion de votre serveur web. Cette commande génère un lien HTTPS que WooCommerce peut utiliser pour envoyer des données webhook. Copiez le lien de redirection généré.
  2. Ajoutez la route suivante au fichier server.js :
app.post('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body; // Received data from the WooCommerce webhook
   console.log('New order:', data);

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerce Store <${process.env.MAILGUN_SENDER_EMAIL}> `,
           to: [process.env.MAILGUN_SENDER_EMAIL],
           subject: "New Order Created",
           html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.email, data.total, data.status, data.payment_method_title, data.line_items)
       })
       .then(msg => console.log(msg)) // logs response data
       .catch(err => console.log(err)); // logs any error
   }

   res.status(200).send('Webhook received successfully'); // Send a response to WooCommerce
});

Ce code définit une route qui gère les données entrantes d’un webhook WooCommerce déclenché lorsqu’un client crée une nouvelle commande. Si les données reçues contiennent une propriété id (indiquant une commande valide), elle utilise l’API Mailgun pour envoyer une notification par e-mail à l’adresse e-mail spécifiée.

L’e-mail contient divers détails relatifs à la commande, tels que le nom du client, son adresse e-mail, le montant total, l’état, le moyen de paiement et la liste des articles achetés.

Le code compose l’e-mail à l’aide de la fonction newOrderEMail() définie dans le fichier utils/new-order-email.js, qui renvoie un modèle d’e-mail personnalisé. Après avoir traité les données et envoyé l’e-mail, le serveur répond par un code d’état 200, indiquant la bonne réception du webhook et un message correspondant (« Webhook received successfully »).

  1. Ajoutez l’instruction suivante pour importer la fonction newOrderEmail():
const { newOrderEmail } = require('./utils/new-order-email');
  1. Exécutez la commande npm run start pour démarrer le serveur.
  1. Sur votre tableau de bord d’administration WordPress, sélectionnez WooCommerce > Réglages > Avancés > Webhooks.
Advanced tab showing the Webhooks section. It has an Add webhook button, an Actions list with an Apply button, and a table with Name, Status, Topic, and Delivery URL columns.
La page avancée montre la section Webhooks.
  1. Cliquez sur Ajouter un webhook et fournissez les informations suivantes dans le formulaire de données du webhook :
    • Nom : Alerte de nouvelle commande
    • État : Actif
    • Sujet : Commande créée
    • URL de livraison : Collez l’URL de transfert ngrok que vous avez copié à l’étape 1. Veillez à ajouter /woocommerce-webhook/new-order à l’URL. Il s’agit du point de terminaison nouvellement défini pour la réception de la charge utile du webhook.
  • Secret : Laissez ce champ vide. Par défaut, il s’agit du secret du consommateur de l’utilisateur actuel de l’API. Le secret génère un hachage du webhook livré dans les en-têtes de la demande. Le destinataire peut utiliser ce secret pour vérifier l’authenticité des données entrantes. Si la signature correspond à la valeur attendue, elle confirme que les données ont été envoyées par WooCommerce, fournissant confiance et sécurité.
  • Version de l’API : WP REST API Integration v3.
Page avancée montrant le formulaire de données Webhook.
Page avancée montrant le formulaire de données Webhook.
  1. Cliquez sur Enregistrer le webhook.
  1. Visitez votre boutique et passez une commande. Vous devriez recevoir un e-mail comme celui ci-dessous :
Alerte e-mail pour une nouvelle commande et des informations sur l'inventaire.
Alerte e-mail pour une nouvelle commande et des informations sur l’inventaire.

Déployez tout sur Kinsta

Avec Kinsta, vous pouvez déployer non seulement votre site WordPress + WooCommence avec l’hébergement WordPress infogéré mais aussi votre nouvelle application de reporting avec l’hébergement d’application.

Nos services d’hébergement premium offrent des fonctionnalités essentielles, telles que :

  • Haute performance et vitesse incroyable : Kinsta héberge vos sites et applications sur le Premium Tier Network de Google Cloud Platform avec les machines C2 les plus rapides et les plus robustes, et en edge-cached via le CDN de Cloudflare avec 260+ PoP.
  • Déploiement rapide et simple : pour une expérience d’hébergement simple, Kinsta construit des applications automatiquement et déploie des sites WordPress sans besoin de configuration manuelle. Vous pouvez facilement installer et développer vos sites avec DevKinsta, et les publier en appuyant sur un bouton, laissant les réglages côté serveur à notre équipe d’ingénieurs spécialisés.
  • Sécurité : Vos applications et sites web se trouvent derrière deux pare-feux, avec protection et atténuation DDoS, HTTP/3 et TLS 1.3. Ils sont déployés dans un conteneur isolé, évitant ainsi les pics de trafic provenant d’autres applications qui interfèrent avec votre environnement de production, ainsi que la contamination par des attaques malveillantes provenant d’autres sites.

Résumé

Grâce à la flexibilité de l’hébergement externe, vous avez créé une application de reporting avancée qui met à jour les niveaux de stock restants et fournit un rapport complet sur les ventes totales.

Elle fournit également des alertes détaillées sur les transactions, offrant un aperçu en temps réel des transactions spécifiques, y compris les détails des produits, les quantités et les informations sur les clients, afin que vous puissiez gérer les stocks de manière proactive et comprendre les tendances des ventes et les modèles de revenus.

Prêt à transformer votre expérience WooCommerce ? Essayez Kinsta pour mettre en œuvre des rapports WooCommerce personnalisés et avancés.

Marcia Ramos Kinsta

Je suis le responsable de l'équipe éditoriale chez Kinsta. Je suis un passionné d'open source et j'adore coder. Avec plus de 7 ans de rédaction technique et de modification pour l'industrie technologique, j'adore collaborer avec les gens pour créer des contenus clairs et concis et améliorer les flux de travail.