How to Add Low Stock Notifications to Wix Online Stores with Velo Coding

Learn how you can add low-stock notifications to your Wix online store with Velo coding by following this tutorial. Let your visitors know stock information for a product.

How to Add Low Stock Notifications to the Wix Online Store

Inform your visitors about a product's stock status. Before you get started, ensure that you have a working knowledge in Wix and its coding environment Velo. Here is the full code.

import wixLocation from 'wix-location';

$w.onReady(function () {

    trackProductInventory();

    wixLocation.onChange(() => {
        trackProductInventory();
    })
});

async function trackProductInventory() {
    const product = await $w('#productPage').getProduct();
    const productQuantity = product.quantityInStock;

    if (product.inStock && productQuantity <= 8) {
        $w('#stockNotification').show();
    } else {
        $w('#stockNotification').hide();
    }
}

Importing a Wix Velo Module

The wix-location module contains functionality for getting information about the URL of the current page and for navigating to other pages. In our code, we track users' behaviour if they visit another product page or not. If they do, trackProductInventory() function is executed one more time to retrieve related logic.

Importance of onReady Function for Wix Websites

When a page loads in a browser, it's possible for the code on the page to run before the page finishes loading. This can cause an error if your code tries to reference an element in the page before it's loaded. Code inside the onReady function runs when the page loads.

This is only required if you add code on your own using the $w selector. Any code you add to a function using the Properties & Events panel runs only after the page loads.

async and await Wizard

async wait until the following await property retrieves something from somewhere. After it retrieves related parts, functions inside the async are executed.

When Do You Need to Show This Notification?

In our example code, we set the stock notification threshold as 8.

product.inStock && productQuantity <= 8

You can replace this with whatever value you want.

Necessary Page Elements

This code is applied to the product page. Two basic page elements are used. One is for getting productPage and the other is for showing stockNotification. You can add whatever element you want as stockNotification. This might be an icon, a text, a box or either two at the same time.

Bizim Muhit Wix Services

Have trouble setting low-in-stock Wix store notifications? Contact us to get help from Wix experts.