When you add a Blocks site widget extension in the CLI, a widget.ts file is generated for the extension. This file contains the code for your site widget.
When the widget.ts file is generated, it looks like this:
defineWidget() accepts a function that will execute when your widget is added to a site. This function accepts the following namespaces as parameters, allowing you to work with them in your code:
$w contains everything you need in order to work with your widget's components. It allows you to select elements on your widget’s pages and interact with them. Each element type exposes properties and functions that you use to enhance the functionality of your widget.
$w.onReady() is called when all widget elements have finished loading.
Place your widget initialization logic inside the $w.onReady function.
$widget contains functionality for working with your Blocks widget's API from within the widget code. It includes:
properties for storing values associated with the widget.
A handler function that runs when those properties change.
A function to fire events from your widget.
Properties and events must be defined in your api.ts file.
For more information, see About the Widget API in Blocks
$widget.onPropsChanged() is called whenever one of your widget’s properties is changed, taking the old and new properties as parameters. Add logic to this function to respond to these changes.
For example, a widget whose properties are used to update a site’s product data:
If you want your widget to expose any functions, specify them in the returned object. You define these functions in your widget’s api.ts file.
Use the Wix Javascript SDK to access and manage Wix business solutions.
For example: