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 the pricing plan of an app instance on a specific site. For example, “free” or “premium”. Learn more
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
Use a custom panel to get the widget API properties.
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:
Use a custom panel to set the widget API properties.
import wixWidget from 'wix-widget';
await wixWidget.setProps({ <propName>: <propValue> });
Learn more about connecting panel elements to properties:
Create a link in a custom panel that opens the app dashboard page.
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.
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:
Get and set properties of a nested widget from a panel in the outer widget. Learn more
const innerWidget = await wixWidget.getNestedWidget("#<nestedWidgetName>");
const innerProps = await innerWidget.getProps();
await innerWidget.setProps({ <innerPropName>: "<props value>" });
Expand and collapse elements in a custom panel. Learn more
$w("#panelToggleSwitchID").onChange((event) => {
if (event.target.checked) {
$w("#panelElementID").expand();
} else {
$w("#panelElementID").collapse();
}
});
Use wix-data
to query collections in your app.
import wixData from "wix-data";
//...
wixData
.query("<yourAppNamespace>/<yourCollectionName>")
.find()
.then((results) => {
//your code using the "results";
});
Learn more about managing collections in Blocks: