Création de rapports avancés pour les boutiques WooCommerce - Photonflux.com | Service professionnel de réparation de WordPress, portée mondiale, réponse rapide

Le plugin WooCommerce pour WordPress vous permet de créer et de gérer efficacement des plateformes de commerce électronique et fournit des notifications intégrées qui vous avertissent des nouvelles commandes ou des commandes terminées, des faibles niveaux de stock et des paiements réussis. Ces fonctionnalités sont importantes, mais il y a très peu d'informations sur les données précieuses que WooCommerce collecte.

Ces limitations sont caractéristiques des plugins traditionnels qui fonctionnent dans un environnement WordPress. En s'intégrant à l'API WooCommerce et en utilisant des ressources externes, l'application hébergée peut fournir des rapports avancés, des alertes personnalisées et une vue détaillée des transactions de commerce électronique.

Fonctionnalités existantes en matière de rapports et de notifications

Les alertes et les mises à jour de statut intégrées à WooCommerce aident à la gestion de base de la boutique, mais ne répondent pas à tous les besoins de l'entreprise. C'est pourquoi de nombreux utilisateurs se tournent vers des plugins tiers pour améliorer les capacités de notification et de reporting.

Parmi les plugins les plus populaires, citons

WooCommerce Admin - Fournit un tableau de bord intuitif avec des mesures et des rapports clés sur l'atelier.
Factures et bordereaux d'expédition WooCommerce en PDF - Les modèles de factures et de listes de colisage peuvent être personnalisés et envoyés automatiquement par courrier électronique aux clients, avec un enregistrement des factures et des listes de colisage qui ont été générées.
Intégration de Google Analytics dans WooCommerce - Utilisez l'outil Google Analytics pour générer des rapports détaillés sur les caractéristiques démographiques des clients et les sources de trafic.

Avec ces plugins, WooCommerce offre des options de reporting et d'alerte, y compris des résumés de commande, des alertes de bas de stock, la gestion de l'inventaire, et des analyses approfondies grâce à des intégrations avec des outils tels que Google Analytics.

Limites du système de notification actuel

Le système de rapport actuel, bien qu'utile, a une fonctionnalité limitée et introduit un certain nombre de restrictions :

personnalisationLes outils de reporting génériques et les plug-ins limitent la possibilité d'obtenir des informations approfondies et spécifiques à partir des données. Il est nécessaire de disposer de mesures spécialisées, de visualisations uniques, d'une intégration avec des outils analytiques propriétaires ou de filtres de données que certains outils de reporting génériques et plug-ins ne peuvent pas fournir.
Évolutivité : Les systèmes de reporting existants peuvent être confrontés à des problèmes d'évolutivité lorsqu'ils traitent des ensembles de données volumineux. 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é, des limitations liées aux ressources du serveur, à la compatibilité des plugins et aux vulnérabilités en matière de sécurité peuvent être rencontrées. Cette intégration peut également empêcher les organisations d'adopter des technologies et des solutions plus avancées.

Applications avancées de création de rapports

L'application de reporting avancée envisagée dans ce guide présente les caractéristiques suivantes :

Lorsqu'un client passe une nouvelle commande, une alerte de transaction détaillée est envoyée au propriétaire du magasin par courrier électronique. L'application dispose également d'un tableau de bord qui affiche toutes les commandes et leurs détails.
Les mises à jour de l'inventaire affichent les détails de l'inventaire de la boutique sur le tableau de bord. À partir de là, il est facile de suivre le niveau de stock de chaque produit.
Le rapport sur les ventes totales permet d'analyser l'évolution des recettes dans le temps.

Contrairement aux plugins génériques ou au système de notification et d'alerte par défaut de WooCommerce, l'application fournit des alertes détaillées et personnalisables sur les stocks restants et les ventes totales.

Comment développer des applications de reporting avancées

Dans cette section, nous allons utiliser Node.js et la fonctionWooCommerce REST API répondre en chantantCrochet WebCréez ensemble une application de reporting pour extraire les données de l'atelier.

Demande :

Une boutique WooCommerce gérée localement et contenant un ou plusieurs groupes de produits.
Gratuit pour l'envoi de courrielsCompte Mailgun .
Node.js installé répondre en chantantngrok .
basé sur des projetsModèles de démarrage.
Éditeur de code.

Configuration du modèle de démarrage

Suivez les étapes ci-dessous pour configurer le modèle de mise en route :

Notez votre clé API Mailgun et le domaine de la sandbox. et de coller leurs valeurs avec les variables correspondantes dans le fichier.envdans le fichier. Pour lesMAILGUN_SENDER_EMAILqui fournit comme valeur l'adresse électronique utilisée pour créer le compte Mailgun.
Dans le tableau de bord de WordPress, sélectionnezWooCommerce >mettre en place >niveau élevé > API REST.

cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Ajouter une clé Créer une clé API pour authentifier les demandes de l'application.
spectacle (un billet)Détails clés et fournir des instructions et des utilisateurs, sélectionnerLecture/écriture puis cliquez surGénérer des clés API.

Assurer la copie de la page de résultatsclé du consommateur répondre en chantantConsommer des clés car il est impossible de les revoir.
spectacle (un billet).env et assigner les valeurs copiées dans l'étape précédente aux variables respectives. Indiquez l'URL de la boutique pour la variable WOOCOMMERCE_STORE_URL (Similaire àhttp://localhost/mystore/index.php).
Installez toutes les dépendances du projet en exécutant la commande suivante dans le terminal :

npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

Les rôles de ces dépendances sont les suivants :

express: Un framework Node.js pour la création d'API.
@woocommerce/woocommerce-rest-api: à l'API REST de WooCommercePasser un appel réseau.
dotenv: à partir de .envpour charger les variables d'environnement .
ejs: crée des modèles JavaScript.
mailgun.jsMailgun : Utilisez Mailgun pour envoyer des courriels.
nodemonRedémarre automatiquement le serveur lorsqu'un changement de fichier est détecté.

Mise en œuvre des fonctions de l'application

Le modèle de départ contient les modèles utilisés pour le rendu de la vueLe code du modèle JavaScript intégré (EJS) dans le dossier . De cette façon, vous pouvez vous concentrer sur la logique du serveur qui obtient les données nécessaires de l'API WooCommerce et les transmet au modèle EJS pour l'affichage sur l'interface utilisateur (UI).

Pour mettre en œuvre les fonctions de l'application, procédez comme suit :

Créer un fichier dans le dossier racine du projet appeléserver.jsCe fichier sert de point d'entrée au serveur Express. Ce fichier sert de point d'entrée au serveur Express.
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.
 consumerKey : process.env.WOOCOMMERCE_CONSUMER_KEY, consumerSecret : process.env.
 consumerSecret : process.env.WOOCOMMERCE_SECRET_KEY, consumerSecret : process.env.
 version : "wc/v3"
}) ;

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

// point de terminaison pour vérifier si l'application est en place et fonctionne
app.get('/', (req, res) => {
   res.send('L'application est opérationnelle!')
})

// récupérer tous les produits de la boutique
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) ; }) ; }) .catch((error) => {
       }) ;
})

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

Le code ci-dessus utilise Express.js pour créer un serveur web. Tout d'abord, vous devez importer les paquets nécessaires et configurer le client WooCommerce pour qu'il fonctionne avec le paquetageWooCommerce REST APIet configurer l'application pour qu'elle utilise des modèles EJS.

Tout d'abord, définissez un/ pour vérifier que l'application fonctionne correctement. Ensuite, définissez un/produits Une route pour récupérer tous les produits de la boutique WooCommerce. En cas de succès, cette routeinventaire Utilisez le modèle de présentation des données acquises.

Notez que le code sera égalementpage actuelleLes modèles de tous les itinéraires sont transmis aux modèles, ce qui permet d'identifier les pages actives sur le tableau de bord.

Exécuter la commandenpm run dev en outrehttp://localhost:3000/products Ouvrez dans votre navigateur pour voir les résultats :

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

Pour traiter le rapport de ventes, ajoutez la route suivante au fichier server.js :

// récupérer le rapport mensuel des ventes
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/ventes Point de terminaison pour récupérer les rapports de ventes mensuels à partir de l'API WooCommerce Sales Reporting. L'appel à l'API contientpériode Les paramètres ayant une valeur demoisCe paramètre spécifie le rapport sur les ventes pour le mois en cours. Après une demande réussie, le code rend le modèle EJS des ventes en utilisant les données récupérées.

Naviguez dans votre navigateur jusqu'àhttp://localhost:3000/sales Voir les résultats :

Cette page affiche un rapport complet sur les ventes brutes afin de faciliter l'analyse des tendances mensuelles en matière de revenus.

Mise en œuvre de la gestion des commandes

Ajouter les itinéraires suivants auserver.js Documentation.

// récupérer toutes les commandes
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 va récupérer toutes les commandes de la boutique WooCommerce et rendre le modèle de commande en utilisant les données récupérées.

Naviguez dans votre navigateur jusqu'àhttp://localhost:3000/orders Voir les résultats. Cet écran affiche les informations relatives à la gestion des ordres :

Personnalisation des alertes pour les rapports de transaction consolidés

Pour mettre en œuvre la possibilité de vous envoyer des alertes e-mail personnalisées lorsqu'un client passe une commande sur votre site web, suivez les étapes ci-dessous :

Ouvrez une fenêtre de terminal et exécutezngrok http 3000 pour établir un tunnel pour la connexion au serveur web. Cette commande génère un lien HTTPS que WooCommerce peut utiliser pour envoyer les données du webhook. Copiez le lien de redirection généré.
Ajoutez la route suivante au fichier server.js :

app.post('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body ; // Réception des données du webhook WooCommerce
   console.log('Nouvelle commande:', data) ;

   if(data ?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from : `WooCommerce Store  `,
           
           subject : "Nouvelle commande créée",
           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)) // enregistre les données de la réponse
       .catch(err => console.log(err)) ; // enregistre les erreurs éventuelles
   }

   res.status(200).send('Webhook received successfully') ; // envoie une réponse à WooCommerce
}).

Ce code définit une route pour traiter les données entrantes d'un crochet web WooCommerce déclenché lorsqu'un client crée une nouvelle commande. Si les données entrantes contiennent un attribut id (indiquant que la commande est valide), il utilise l'API Mailgun pour envoyer une notification par email à l'adresse email spécifiée.

Les courriers électroniques contiennent divers détails relatifs à la commande, tels que le nom du client, son adresse électronique, le montant total, le statut, le mode de paiement et une liste des articles achetés.

Utilisation du code La fonction newOrderEMail() définie dans le fichier utils/new-order-email.js écrit l'e-mail, qui renvoie un modèle d'e-mail personnalisé. Après le traitement des données et l'envoi de l'e-mail, le serveur répond avec un code d'état 200, indiquant que le webhook a été reçu avec succès et le message correspondant ("Webhook successfully received").

Ajouter la déclaration suivante à l'importationnewOrderEmail() fonction :

const { newOrderEmail } = require('. /utils/new-order-email') ;

Exécuter la commandenpm run start pour démarrer le serveur.
Dans le tableau de bord de WordPress, sélectionnezWooCommerce >mettre en place >niveau élevé > Crochets Web.

cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Ajoutez le Webhook et ajoutez l'élémentDonnées du webhookLes informations suivantes sont fournies dans le formulaire :

nom (d'une chose)Alertes du Nouvel Ordre
état des lieux: Actif
thématiqueOrdre créé
URL de livraisonPour ce faire, il convient de coller l'URL de redirection ngrok que vous avez copiée à l'étape 1. Veillez à joindre l'URL de redirection ngrok à la page d'accueil./woocommerce-webhook/new-order à l'URL, qui est le point de terminaison nouvellement défini pour la réception des chargements Webhook.

transgression(Secret) : laisser vide. La valeur par défaut est le secret du consommateur de l'utilisateur actuel de l'API. Ce secret génère un hachage du web hook fourni dans l'en-tête 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: Intégration de l'API REST de WP v3.

cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Sauvegarder le webhook.
Visitez la boutique et passez votre commande. Vous devriez recevoir un courriel comme indiqué ci-dessous :

résumés

Une application de reporting avancée a été créée pour mettre à jour les niveaux de stocks restants et fournir des rapports complets sur les ventes brutes. Elle fournit également des alertes détaillées sur les transactions qui vous donnent une visibilité en temps réel sur 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.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.