Stock Countdown

Wix Blocks

Stock Countdown

Wix Blocks
This template is built with:
This template demonstrates how to build a site plugin for the Wix Stores product page using Wix Blocks. The Stock Countdown plugin displays the number of remaining items in stock. It has two design presets, enabling site owners to choose between a small or large design. This site plugin uses the PRODUCT plugin API to get contextual data about the product currently displayed on the user’s site, as well as Wix Stores APIs to retrieve the current stock data. You can easily adapt this app for your own needs by modifying the UI and logic of the site plugin.

How We Built This

This app was built using the Wix Blocks editor, and also requires setting up a site plugin extension in the Wix Dev Center.

Site widget

Site plugin components are created in Blocks as site widgets.

Widget design

The responsive design uses a 2x2 grid to accommodate two design presets: “Small” and “Large”. Some elements are hidden in the “Small” preset, and it includes a vector image for “selling fast” that is hidden in the “Large” preset. We used a text element to display the stock status, and we adjust its content dynamically using code.

Widget code

We added the productId property to our widget API to implement the PRODUCT plugin API, which provides data about the product currently displayed in the product page. We use the widget's onPropsChanged() function to update the widget’s content based on any changes in the productId.

To retrieve current stock data for the product, we use the getProduct() method of the Wix Stores Products API. Once we have stock data for the current product, we change the state of our widget's multi-state box accordingly.

We update the out of stock message to display the current remaining quantity as follows:

  • We display the "Only ${quantity} left in stock message if the stock level is below he widget’s threshold property. Above this level we only display an "In stock" message.

  • If the product is out of stock, we collapse the entire widget to hide the plugin.

Dev Center configuration

To make the plugin available for users to add in a slot on the product page, we added a site plugin extension to the app. This extension holds metadata about the plugin and is linked to the Blocks widget. The placements field specifies the product-page-details-7 slot and includes the 2 available versions of the product page that may be installed on a user’s site, depending on the version of Wix Stores they are using.


Related templates

Wix Blocks

Gift Wrap at Checkout

Build a site plugin that gets added to the Wix eComm checkout page.
Site PluginCheckout APIDashboard SDKDashboard Page