This app was built using the Wix Blocks editor, and also requires setting up a site plugin extension in the Wix Dev Center.
Site plugin components are created in Blocks as site widgets.
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.
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.
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.