[ad_1]
Met de WooCommerce plugin voor WordPress kun je op een efficiënte manier een e-commerce platform creëren en beheren, waarbij je toegang hebt tot ingebouwde meldingsfuncties die je waarschuwen over nieuwe of voltooide bestellingen, lage voorraadniveaus en succesvolle betalingen. Deze functies zijn essentieel, maar bieden slechts een beperkt inzicht in de waardevolle gegevens die WooCommerce verzamelt.
Dergelijke beperkingen zijn de aard van traditionele plugins die binnen de WordPress omgeving werken. Aan de andere kant zijn gehoste applicaties – webgebaseerde operaties op externe servers – veel uitbreidbaarder.
Door te integreren met WooCommerce API’s en externe resources te gebruiken, kunnen gehoste applicaties geavanceerde rapportages, custom waarschuwingen en gedetailleerde inzichten in e-commerce transacties bieden.
In deze handleiding leer je hoe je een gehoste applicatie maakt die e-mailwaarschuwingen genereert met uitgebreide transactiegegevens, die de mogelijkheden van de standaard plugin overtreffen.
Bestaande features voor rapportage en meldingen
De ingebouwde waarschuwingen en statusupdates van WooCommerce helpen bij essentieel winkelbeheer, maar voldoen misschien niet aan alle zakelijke eisen. Daarom maken veel gebruikers gebruik van externe plugins om hun meldings- en rapportagemogelijkheden uit te breiden.
Enkele van de populairste plugins zijn:
- WooCommerce Admin – Biedt een intuïtief dashboard met belangrijke winkelgegevens en rapporten.
- WooCommerce PDF Invoices and Packing Slips – Maakt het mogelijk om factuur- en pakbon-templates aan te passen – die automatisch via e-mail naar klanten worden gestuurd – en biedt een overzicht van gegenereerde facturen en pakbonnen.
- WooCommerce Google Analytics Integration – Gebruikt Google Analytics tools om gedetailleerde rapporten te genereren over de demografische gegevens van klanten en verkeersbronnen.
Met deze plugins biedt WooCommerce rapportage- en waarschuwingsopties, waaronder overzichten van bestellingen, waarschuwingen voor lage voorraden, voorraadbeheer en diepgaande analyses door integratie met tools zoals Google Analytics.
De beperkingen van de huidige rapportagesystemen
Hoewel ze nuttig zijn, hebben de huidige rapportagesystemen beperkte mogelijkheden en introduceren ze verschillende beperkingen, zoals:
- Aanpassing: Standaard rapportagetools en plugins beperken de diepte en specificiteit van de inzichten die je bedrijf uit de gegevens kan halen. Je hebt misschien gespecialiseerde statistieken nodig, unieke visualisaties, integratie met eigen analysetools of bepaalde gegevensfilters die niet direct beschikbaar zijn in generieke rapportagetools en plugins.
- Schaalbaarheid: Bestaande rapportagesystemen kunnen te maken krijgen met schaalbaarheidsproblemen bij het verwerken van grote datasets. Trage prestaties en knelpunten in de gegevensverwerking kunnen een efficiënte gegevensanalyse in de weg staan, wat kan leiden tot vertragingen in de verwerking en reactietijden.
- Afhankelijkheid van WordPress: Omdat de integratie met WordPress de onafhankelijkheid, aanpasbaarheid en schaalbaarheid beperkt, kun je te maken krijgen met beperkingen met betrekking tot serverresources, plugincompatibiliteit en beveiligingslekken. Deze integratie kan je bedrijf ook belemmeren om meer geavanceerde technologieën en oplossingen te implementeren.
Een op maat gemaakte rapportage-applicatie kan daarentegen gedetailleerde transactie- en klantgegevens leveren. Je kunt deze gegevens gebruiken om te anticiperen op trends in de markt en je aanbod dienovereenkomstig te optimaliseren.
Bovendien kun je een op maat gemaakte rapportagetoepassing snel schalen om groeiende gegevensvolumes aan te kunnen, zodat je naadloos kunt werken terwijl je bedrijf groeit.
De geavanceerde rapportage-applicatie
De geavanceerde rapportage-applicatie die in deze handleiding wordt beschreven, heeft de volgende functies:
- Gedetailleerde transactiemeldingen worden naar de winkeleigenaar gemaild wanneer de klant een nieuwe bestelling plaatst. De app heeft ook een dashboard met een lijst van alle bestellingen en hun details.
- Voorraadupdates tonen de voorraadgegevens van de winkel op het dashboard. Van daaruit kun je eenvoudig de voorraadniveaus van elk product bijhouden.
- Met de totale verkooprapportage kun je de omzettrends in de loop van de tijd analyseren.
In tegenstelling tot generieke plugins of het standaard WooCommerce meldings- en waarschuwingssysteem, biedt deze app gedetailleerde en aanpasbare waarschuwingen over resterende voorraad en totale verkopen.
Het hosten van de applicatie heeft ook verschillende voordelen, zoals:
- Schaalbaarheid: Onafhankelijke hosting minimaliseert knelpunten in de gegevensverwerking en zorgt ervoor dat je je activiteiten kunt uitbreiden zonder beperkingen in je resources.
- Aanpassing: Met onafhankelijke hosting kun je de manier waarop je de verzamelde gegevens gebruikt aanpassen, bijvoorbeeld door externe diensten te integreren (zoals engines voor voorspellende analyses) en unieke technieken voor gegevensvisualisatie te implementeren om beter aan te sluiten bij de eisen en doelen van je bedrijf.
- Autonomie: Door je applicatie uit de WordPress omgeving te halen, ben je verlost van beperkingen zoals beperkte serverresources en mogelijke conflicten tussen verschillende plugins.
Een geavanceerde rapportage-applicatie ontwikkelen
In dit gedeelte gaan we een rapportage app bouwen met Node.js met de WooCommerce REST API en webhooks om de winkelgegevens op te halen.
Vereisten:
De starttemplate configureren
Volg deze stappen om de starttemplate te configureren:
- Noteer je Mailgun API key en sandbox domein en plak hun waarden in het .env bestand naast hun corresponderende variabelen. Geef voor de variabele
MAILGUN_SENDER_EMAILals waarde het e-mailadres op dat je hebt gebruikt om het Mailgun account aan te maken. - Selecteer in je WordPress admindashboard WooCommerce > Settings > Advanced > REST API.
- Klik op Add key om de API sleutel te maken voor de authenticatie van verzoeken vanuit je app.
- Open het gedeelte Key details en geef een beschrijving en een gebruiker op, selecteer Read/Write rechten en klik op Generate API key.
- Zorg ervoor dat je de Consumer key en het Consumer secret kopieert van de resulterende pagina, want je kunt ze niet meer zien.
- Open het .env bestand en wijs de waarden die je in de vorige stap hebt gekopieerd toe aan hun respectievelijke variabelen. Geef de URL van je winkel op voor de variabele
WOOCOMMERCE_STORE_URL(iets alshttp://localhost/mystore/index.php). - Installeer alle dependencies van het project door het volgende commando in je terminal uit te voeren:
npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js
npm i -D nodemonDeze dependencies dienen de volgende doelen:
express: Node.js framework om een API te maken.@woocommerce/woocommerce-rest-api: Maakt netwerk calls naar de WooCommerce REST API.dotenv: Laadt omgevingsvariabelen uit het .env bestand.ejs: Maakt JavaScript templates.mailgun.js: Verstuurt e-mails met Mailgun.nodemon: Start de server automatisch opnieuw op wanneer bestandswijzigingen worden gedetecteerd.
Applicatiefuncties implementeren
De starttemplate bevat de code voor het renderen van de embedded JavaScript (EJS) templates in de views-map. Op deze manier kun je je richten op de serverlogica, die de benodigde gegevens ophaalt van de WooCommerce API’s en doorgeeft aan de EJS templates om weer te geven op de gebruikersinterface (UI).
Volg deze stappen om de functionaliteit van de applicatie te implementeren:
- Maak een bestand met de naam server.js in de hoofdmap van het project. Het bestand fungeert als toegangspunt tot de Express server.
- Plak de volgende code in het bestand 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}`)
})De bovenstaande code gebruikt Express.js om een webserver te maken. Je begint met het importeren van de benodigde pakketten, het configureren van de WooCommerce client voor interactie met de WooCommerce REST API en het instellen van de app om EJS templates te gebruiken.
Eerst definieer je een / endpoint dat je kunt gebruiken om te controleren of de applicatie draait. Vervolgens definieer je een /products route die alle producten van de WooCommerce winkel ophaalt. Als dat lukt, rendert deze route de inventory template met de opgehaalde gegevens.
Merk op dat de code ook de currentPage doorgeeft aan de template voor alle routes, en het helpt om de actieve pagina’s op het dashboard te identificeren.
- Voer het commando
npm run devuit en openhttp://localhost:3000/productsin je browser om de resultaten te bekijken:
De pagina Store Inventory toont alle producten die beschikbaar zijn in de winkel, samen met hun gegevens. Met deze informatie kun je de beschikbare producten bijhouden en de voorraad beheren.
- Om de verkooprapportage af te handelen, voeg je de volgende route toe aan het bestand 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);
});
})Deze code definieert een /sales endpoint dat het maandelijkse verkooprapport ophaalt uit de WooCommerce verkooprapport API. De API call bevat de parameter period met de waarde month, die het verkooprapport van de huidige maand specificeert. Zodra het verzoek succesvol is, rendert de code het verkoop EJS template met de opgehaalde gegevens.
- Navigeer naar
http://localhost:3000/salesin je browser om de resultaten te bekijken:
Deze pagina geeft een uitgebreid totaalrapport over de verkoop weer, waarmee je de maandelijkse trends in de omzet van je bedrijf kunt analyseren.
Orderbeheer implementeren
- Voeg de volgende route toe aan het bestand 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);
});
})Deze code haalt alle bestellingen op uit de WooCommerce winkel en rendert het template Orders met de opgehaalde gegevens.
- Navigeer naar
http://localhost:3000/ordersin je browser om de resultaten te bekijken. Deze pagina geeft informatie weer voor orderbeheer:
Waarschuwingen aanpassen voor uitgebreide transactierapportage
Volg deze stappen om de functionaliteit te implementeren die je een aangepaste e-mailwaarschuwing stuurt wanneer een klant op je site bestelt:
- Open een terminalvenster en voer
ngrok http 3000uit om de verbinding van je webserver te tunnelen. Deze opdracht genereert een HTTPS link die WooCommerce kan gebruiken om webhookgegevens te versturen. Kopieer de gegenereerde doorstuurlink. - Voeg de volgende route toe aan het bestand 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
});Deze code definieert een route die inkomende gegevens verwerkt van een WooCommerce webhook die wordt geactiveerd wanneer een klant een nieuwe bestelling aanmaakt. Als de ontvangen gegevens een property id bevatten (die een geldige bestelling aangeeft), wordt de Mailgun API gebruikt om een e-mailmelding naar het opgegeven e-mailadres te sturen.
De e-mail bevat verschillende bestelgegevens zoals de naam van de klant, e-mail, totaalbedrag, status, betaalmethode en een lijst met gekochte artikelen.
De code stelt de e-mail samen met behulp van de functie newOrderEMail() die is gedefinieerd in het bestand utils/new-order-email.js , dat een aangepaste e-mailtemplate retourneert. Na het verwerken van de gegevens en het verzenden van de e-mail, antwoordt de server met een statuscode 200, wat duidt op een succesvolle ontvangst van de webhook en een bijbehorend bericht (“Webhook successfully received”).
- Voeg de volgende declaration toe om de functie
newOrderEmail()te importeren:
const { newOrderEmail } = require('./utils/new-order-email');- Voer het commando
npm run startuit om de server te starten.
- Selecteer in je WordPress admin dashboard WooCommerce > Settings > Advanced > Webhooks.
- Klik op Add webhook en geef de volgende informatie op in het formulier Webhook data:
-
- Name: New Order Alert
- Status: Active
- Onderwerp: Order Created
- URL voor aflevering: Plak de ngrok forwarding URL die je in stap 1 hebt gekopieerd. Zorg ervoor dat je
/woocommerce-webhook/new-ordertoevoegt aan de URL. Dit is het nieuw gedefinieerde endpoint voor het ontvangen van de webhook payload.
- Secret: Laat dit leeg. Het is standaard de consumer secret van de huidige API gebruiker. Het geheim genereert een hash van de geleverde webhook in de request headers. De ontvanger kan deze secret gebruiken om de authenticiteit van de binnenkomende gegevens te verifiëren. Als de handtekening overeenkomt met de verwachte waarde, bevestigt dit dat de gegevens zijn verzonden door WooCommerce, wat vertrouwen en veiligheid biedt.
- API version: WP REST API Integration v3.
- Klik op Save webhook.
- Bezoek je winkel en plaats een bestelling. Je zou een e-mail moeten zien zoals hieronder:
Alles deployen naar Kinsta
Met Kinsta kun je niet alleen je WordPress + WooCommence website deployen met Managed WordPress Hosting, maar ook je nieuwe rapportage-applicatie met Applicatie Hosting.
Onze premium hostingdiensten bieden essentiële features, zoals:
- Hoge prestaties en ongelooflijke snelheid: Kinsta host je sites en apps op het Premium Tier Network van Google Cloud Platform met de snelste en meest robuuste C2-machines en edge-caching via het CDN van Cloudflare met 260+ PoP’s.
- Snelle en ongecompliceerde deployments: voor een soepele hostingervaring bouwt Kinsta automatisch applicaties en deployt WordPress sites zonder dat er handmatige configuratie nodig is. Je kunt je sites eenvoudig installeren en ontwikkelen met DevKinsta en ze publiceren met één druk op de knop, waarbij de server-side instellingen worden overgelaten aan ons gespecialiseerde engineeringsteam.
- Veiligheid: Je applicaties en websites bevinden zich achter twee firewalls, met DDoS bescherming en -mitigatie, HTTP/3 en TLS 1.3. Ze worden ingezet in een geïsoleerde container, waardoor verkeerspieken van andere applicaties die je productieomgeving verstoren worden voorkomen, evenals besmetting door kwaadaardige aanvallen van andere sites.
Samenvatting
Dankzij de flexibiliteit van externe hosting heb je een geavanceerde rapportage-app gemaakt die de resterende voorraadniveaus bijwerkt en een uitgebreide totale verkooprapportage biedt.
De app biedt ook gedetailleerde transactiewaarschuwingen en biedt realtime inzicht in specifieke transacties, inclusief productdetails, hoeveelheden en klantinformatie, zodat je proactief je voorraad kunt beheren en inzicht hebt in verkooptrends en omzetpatronen.
Klaar om je WooCommerce ervaring te transformeren? Probeer Kinsta om geavanceerde aangepaste WooCommerce rapportage te gebruiken.
Marcia Ramos
I’m the Editorial Team Lead at Kinsta. I’m a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.
[ad_2]
https://kinsta.com/nl/blog/woocommerce-rapportage-applicatie/
