Construct an Complex Reporting App for Your WooCommerce Retailer

by | Nov 17, 2023 | Etcetera | 0 comments

The WooCommerce plugin for WordPress means that you can effectively create and organize an ecommerce platform, providing get right of entry to to built-in notification choices that come up with a caution about new or completed orders, low stock levels, and successful expenses. The ones choices are crucial alternatively offer most straightforward limited insights into the valuable data WooCommerce collects.

Such restrictions are the nature of standard plugins running within the WordPress surroundings. Alternatively, hosted programs — web-based operations on external servers — are far more extensible.

By means of integrating with WooCommerce APIs and using external property, hosted programs may give complicated reporting, customized signs, and detailed insights into ecommerce transactions.

In this data, learn to create a hosted software that generates piece of email signs with entire transaction data, surpassing the options of the standard plugin.

Provide Reporting and Notification Choices

WooCommerce’s built-in signs and status updates lend a hand in crucial store regulate alternatively may not satisfy all business requires. Therefore, many shoppers turn to third-party plugins to support their notification and reporting options.

One of the crucial a very powerful hottest plugins include:

With the ones plugins, WooCommerce supplies reporting and alert alternatives, along side order summaries, low stock signs, inventory regulate, and in-depth analytics via integration with equipment like Google Analytics.

The Stumbling blocks of Provide Reporting Strategies

While in reality helpful, the prevailing reporting ways have limited options and introduce various limitations, harking back to:

  • Customization: Generic reporting gear and plugins prohibit the depth and specificity of the insights your company can succeed in from the information. It’s conceivable you’ll require specialized metrics, unique visualizations, integration with proprietary analytics equipment, or certain data filters now not readily available in generic reporting equipment and plugins.
  • Scalability: Provide reporting ways would perhaps face scalability problems when dealing with large datasets. Slow potency and data processing bottlenecks can obstruct atmosphere pleasant data analysis, leading to delays in decision-making and response events.
  • Dependency on WordPress: As the mix with WordPress limits independence, customization, and scalability, chances are high that you’ll face constraints related to server property, plugin compatibility, and protection vulnerabilities. This integration might also hinder your online business from adopting additional complicated technologies and solutions.

In contrast, a customized reporting software may give detailed transaction and purchaser knowledge. You’ll use this information to sit up for market characteristics and optimize your alternatives accordingly.

Moreover, you’ll quickly scale a custom designed reporting software to care for emerging data volumes, ensuring seamless operations as your online business grows.

The Complicated Reporting App

The complicated reporting app envisioned in this data has the following functions:

  • Detailed transaction signs are emailed to the store owner when the consumer places a brand spanking new order. The app moreover has a dashboard showing a list of all orders with their details.
  • Inventory updates show the retailer stock main points on the dashboard. From there, you’ll merely practice the stock levels of each and every product.
  • Common product sales reporting means that you can analyze source of revenue characteristics through the years.
See also  Stripe vs. Sq. for WordPress eCommerce

No longer like generic plugins or the default WooCommerce notifications and alerting device, this app supplies detailed and customizable signs about ultimate inventory and total product sales.

A number of advantages moreover come from web internet hosting the appliance, harking back to:

  • Scalability: Unbiased web internet hosting minimizes data processing bottlenecks, ensuring you’ll building up operations without helpful useful resource constraints.
  • Customization: Unbiased web internet hosting means that you can tailor how you utilize the collected data, harking back to via integrating third-party products and services and merchandise (like predictive analytics engines) and implementing unique data visualization tactics to higher align along side your company’s prerequisites and objectives.
  • Autonomy: Getting rid of your software from the WordPress surroundings frees you from restrictions like limited server property and attainable conflicts between reasonably a large number of plugins.

How To Build up an Complicated Reporting App

In this section, let’s assemble a reporting app using Node.js with the WooCommerce REST API and webhooks to retrieve the store data.

Prerequisites:

Configure the Starter Template

Follow the ones steps to configure the starter template:

  1. Have in mind of your Mailgun API key and sandbox area and paste their values throughout the .env document alongside their corresponding variables. For the MAILGUN_SENDER_EMAIL variable, provide the piece of email you used to create the Mailgun account as the price.
  2. On your WordPress admin dashboard, choose WooCommerce > Settings > Complicated > REST API.

WooCommerce Advanced tab showing the REST API section. There is an Add Key button, a Search key field, a Bulk actions list, and an Apply button. Each key has a table with Description, Consumer key ending in, Permissions, and Last access columns.
WooCommerce Complicated tab showing the REST API section.

  1. Click on on Add key to create the API key to authenticate requests from your app.
  2. Open the Key details section and provide an overview and a shopper, choose Be told/Write permissions, and click on on Generate API key.

WooCommerce Advanced tab shows the Key details section with Description and User fields and a Permissions list.
WooCommerce Complicated tab showing the API Key details.

  1. Be certain you copy the Shopper key and the Shopper secret from the following cyber web web page, as you’ll be able to no longer see them another time.
  2. Open the .env document and assign the values you copied throughout the previous step to their respective variables. Provide your store’s URL for the WOOCOMMERCE_STORE_URL variable (something like http://localhost/mystore/index.php).
  3. Arrange all the undertaking dependencies via executing the following command in your terminal:
npm i explicit @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

The ones dependencies serve the following purposes:

  • explicit: Node.js framework to create an API.
  • @woocommerce/woocommerce-rest-api: Makes group calls to the WooCommerce REST API.
  • dotenv: Rather a lot surroundings variables from the .env document.
  • ejs: Creates JavaScript templates.
  • mailgun.js: Sends emails using Mailgun.
  • nodemon: Restarts the server automatically when document changes are detected.

Put in force Application Functions

The starter template accommodates the code for rendering the embedded JavaScript (EJS) templates throughout the views folder. This way, you’ll focal point on the server not unusual sense, which fetches the vital data from the WooCommerce APIs and passes it to the EJS templates to turn on the client interface (UI).

To put into effect the appliance’s capacity, practice the ones steps:

  1. Create a document named server.js throughout the undertaking’s root folder. The document acts for the reason that get entry to stage into the Specific server.
  2. Paste the following code right through the server.js document:
const explicit = require('explicit')
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
require('dotenv').config();

const app = explicit()
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,
 style: "wc/v3"
});

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

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

// retrieve all products throughout 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}`)
})

The code above uses Specific.js to create a cyber cyber web server. You get began via importing the required packages, configuring the WooCommerce client to interact with the WooCommerce REST API, and setting the app to use EJS templates.

See also  Supercharge Your Industry With E mail Advertising Automation

First, you define a / endpoint that you simply’ll use to check if the appliance is up and working. Then, you define a /products path that retrieves all the products from the WooCommerce store. If successful, this path renders the inventory template with the fetched data.

Notice that the code moreover passes the currentPage to the template for all the routes, and it’s serving to to identify the full of life pages on the dashboard.

  1. Run the command npm run dev and open http://localhost:3000/products on your browser to view the results:

Store Inventory page provides an image of the item, its Name, Date Created, Type, Status, Regular Price, Price, Total Sales, and Stock Quantity.
Store Inventory cyber web web page with products details.

The Store Inventory cyber web web page renders all the products available throughout the store in conjunction with their details. This knowledge helps you keep practice of the available products and organize inventory accordingly.

  1. To deal with product sales reporting, add the following trail to the server.js document:
// retrieve per month product sales report
app.get('/product sales', (req, res) => {
   WooCommerce.get("stories/product sales", {
       		length: "month"
   })
       .then((response) => {
           res.render('pages/product sales', {
               product sales: response.data,
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data);
       });
})

This code defines a /product sales endpoint that retrieves the per month product sales report from the WooCommerce product sales report API. The API title comprises the parameter length with the price month, which specifies the prevailing month’s product sales report. As quickly because the request is successful, the code renders the product sales EJS template with the fetched data.

  1. Navigate to http://localhost:3000/product sales in your browser to view the results:

Monthly Sales Report page with totals of Sales, Orders, Items Sold, and Refunds. Underneath is a table with Date, Sales, Orders, and Items Sold columns.
Per thirty days Product sales Report cyber web web page.

This cyber web web page displays a whole total product sales report, helping you analyze your online business’s per month source of revenue characteristics.

Put in force Order Keep watch over

  1. Add the following trail to the server.js document.
// 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);
       });
})

This code retrieves all orders from the WooCommerce store and renders the Orders template with the fetched data.

  1. Navigate to http://localhost:3000/orders in your browser to view the results. This cyber web web page displays knowledge for order regulate:

Orders page with a table containing the Customer, Currency, Number of Items, Created On, Discount, Shipping Fee, Cart Total, Payment Method, and Status columns.
Orders cyber web web page showing transaction details.

Customize Indicators for Entire Transaction Reporting

To put into effect the aptitude to send you a customized piece of email alert when a purchaser orders on your web site, practice the ones steps:

  1. Open a terminal window and run ngrok http 3000 to tunnel your cyber cyber web server’s connection. This command generates an HTTPS link that WooCommerce can use to send webhook data. Reproduction the generated forwarding link.
  2. Add the following trail to the server.js document:
app.submit('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body; // Won data from the WooCommerce webhook
   console.log('New order:', data);

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerce Store  `,
           to: [process.env.MAILGUN_SENDER_EMAIL],
           matter: "New Order Created",
           html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.piece of 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
});

 

This code defines a path that handles incoming data from a WooCommerce webhook triggered when a purchaser creates a brand spanking new order. If the received data accommodates an id property (indicating a legitimate order), it uses the Mailgun API to send an piece of email notification to the desired piece of email take care of.

The email comprises reasonably a large number of order details harking back to purchaser establish, piece of email, total amount, status, price way, and a list of purchased items.

See also  Methods to Simply Embed Instagram in WordPress (Step by way of Step)

The code composes the email using the newOrderEMail() function defined throughout the utils/new-order-email.js document, which returns a custom designed piece of email template. After processing the information and sending the email, the server responds with a status code 200, indicating successful receipt of the webhook and a corresponding message (“Webhook received successfully”).

  1. Add the following remark to import the newOrderEmail() function:
const { newOrderEmail } = require('./utils/new-order-email');
  1. Run the command npm run get began to begin out the server.
  1. On your WordPress admin dashboard, choose WooCommerce > Settings > Complicated > 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.
Complicated cyber web web page showing the Webhooks section.

  1. Click on on Add webhook and provide the following knowledge throughout the Webhook data form:
    • Establish: New Order Alert
    • Status: Vigorous
    • Subject: Order Created
    • Provide URL: Paste the ngrok forwarding URL you copied in step 1. You should definitely append /woocommerce-webhook/new-order to the URL. That’s the newly defined endpoint for receiving the webhook payload.
  • Secret: Move away this blank. It defaults to the current API client’s client secret. The secret generates a hash of the delivered webhook throughout the request headers. The receiver can use this secret to make sure the authenticity of the incoming data. If the signature fits the expected worth, it confirms that the information was once as soon as sent via WooCommerce, providing trust and protection.
  • API Fashion: WP REST API Integration v3.

Advanced page showing the Webhook data form. It has Name, Status, Topic, Delivery URL, Secret, and API Version fields with a Save webhook button.
Complicated cyber web web page showing the Webhook data form.

  1. Click on on Save webhook.
  1. Seek advice from your store and place an order. You will have to see an piece of email like the one beneath:

New Order Created email with the Order ID, Customer Name, Order Total, Order Status, Payment Method, and Line Items specifying their Name, Quantity, and Total.
Piece of email alert for a brand spanking new order and inventory knowledge.

Deploy The whole lot to Kinsta

With Kinsta, you’ll deploy now not most straightforward your WordPress + WooCommence cyber web web page with Controlled WordPress Website hosting however as well as your new reporting software with Utility Website hosting.

Our most sensible charge web internet hosting products and services and merchandise offer important choices, harking back to:

  • High potency and fantastic pace: Kinsta hosts your internet sites and apps on Google Cloud Platform’s Best charge Tier Group with the fastest and most tricky C2 machines, and edge-cached via Cloudflare’s CDN with 260+ PoPs.
  • Speedy and straight forward deployment: for a blithe web internet hosting enjoy, Kinsta builds programs automatically and deploys WordPress internet sites with no need for information configuration. You’ll merely arrange and enlarge your internet sites with DevKinsta, and post them with a push of a button, leaving the server-side settings for our specialized engineering personnel.
  • Coverage: Your programs and websites live at the back of two firewalls, with DDoS protection and mitigation, HTTP/3 and TLS 1.3. They’re deployed to an isolated container, warding off guests spikes from other programs interfering along side your production surroundings, along with contamination from malicious attacks from other internet sites.

Summary

Because of the flexibility of external web internet hosting, you created a complicated reporting app that updates the remaining inventory levels and provides entire total product sales reporting.

It moreover provides detailed transaction signs, offering real-time insights into specific transactions, along side product details, quantities, and purchaser knowledge, so that you’ll proactively organize stock and understand product sales characteristics and source of revenue patterns.

Ready to transform your WooCommerce enjoy? Take a look at Kinsta to put into effect complicated customized WooCommerce reporting.

The submit Construct an Complex Reporting App for Your WooCommerce Retailer seemed first on Kinsta®.

WP Hosting

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!