Blocks Code Snippets

Here are some useful short code snippets that you can use in any type of Blocks app. Copy, adapt the names to your app and make things work!

Get Pricing Plan

Get the pricing plan of an app instance on a specific site. For example, “free” or “premium”. Learn more

Copy
import wixApplication from "wix-application"; //... instance = await wixApplication.getDecodedAppInstance(); plan = instance.vendorProductId; //If there is no plan, the value is null. //add your logic for the different plans

Get widget properties in a panel

Use a custom panel to get the widget API properties.

Copy
import wixWidget from "wix-widget"; //... const props = await wixWidget.getProps(); //load panel elements with current props $w("#<elementName>").value = props.propName;

Learn more about connecting panel elements to properties:

Set widget properties in a panel

Use a custom panel to set the widget API properties.

Copy
import wixWidget from 'wix-widget'; await wixWidget.setProps({ <propName>: <propValue> });

Learn more about connecting panel elements to properties:

Open a dashboard page from a panel

Create a link in a custom panel that opens the app dashboard page.

Copy
import wixApplication from 'wix-application'; import wixEditor from 'wix-editor'; //... const appInstance = await wixApplication.getDecodedAppInstance(); $w('#<buttonID>').onClick(() => { wixEditor.openDashboardPanel({ url: 'app/${appInstance.appDefId}'}); }

Learn more about opening a dashboard page from a panel:

Create a link in a custom panel that opens the app’s plan picker.

Copy
import wixApplication from "wix-application"; //... const appInstance = await wixApplication.getDecodedAppInstance(); const upgradeURL = `https://www.wix.com/apps/upgrade/${appInstance.appDefId}?appInstanceId=${appInstance.instanceId}`; $w("#<panelRighTextComponentID>").link = upgradeURL;

Learn more about:

Access inner-widget properties from a panel

Get and set properties of a nested widget from a panel in the outer widget. Learn more

Copy
const innerWidget = await wixWidget.getNestedWidget("#<nestedWidgetName>"); const innerProps = await innerWidget.getProps(); await innerWidget.setProps({ <innerPropName>: "<props value>" });

Expand and collapse panel elements

Expand and collapse elements in a custom panel. Learn more

Copy
$w("#panelToggleSwitchID").onChange((event) => { if (event.target.checked) { $w("#panelElementID").expand(); } else { $w("#panelElementID").collapse(); } });

Query data from a CMS database collection

Use wix-data to query collections in your app.

Copy
import wixData from "wix-data"; //... wixData .query("<yourAppNamespace>/<yourCollectionName>") .find() .then((results) => { //your code using the "results"; });

Learn more about managing collections in Blocks:

Did this help?