This app was built on several parts of the Wix Blocks editor. Here is how we did it.
In this tab, we:
import wixWindow from 'wix-window'; import wixApplication from 'wix-application'; let plan; const defaultColor1 = '#384AD3' const defaultColor2 = '#959EE5' $w.onReady(async function () { // Fetch and set the current user's plan const instance = await wixApplication.getDecodedAppInstance(); plan = instance.vendorProductId; setDataToChart(); }); // Triggered when the widget properties change $widget.onPropsChanged((oldProps, newProps) => { setDataToChart(); }); const setDataToChart = () => { // On a live site, change chart colors only if user has premium const color1 = (wixWindow.viewMode != "Site" || (plan == 'premium')) ? $widget.props.sliceColorOne : defaultColor1; const color2 = (wixWindow.viewMode != "Site" || (plan == 'premium')) ? $widget.props.sliceColorTwo : defaultColor2; // Set the custom element attributes from the widget properties $w('#customElement1').setAttribute('data', JSON.stringify([ { title: $widget.props.sliceTitleOne, value: $widget.props.sliceValueOne, color: color1}, { title: $widget.props.sliceTitleTwo, value: $widget.props.sliceValueTwo, color: color2}, ])); };
In this tab, we:
Created a Widget Settings custom panel with input elements for the slice values.
Added code in the panel code, so that when a site builder changes a value in the panel, this value is passed to the widget properties and then to the custom element attributes. For example:
$w('#slice1text').onChange(() => { wixWidget.setProps({ sliceTitleOne: $w('#slice1text').value }) }); }
We added a section in the panel, with a note for site builders to upgrade their app. This is because choosing colors is a Premium feature of this app. If site builders upgrade, the color picker is enabled.
import wixWidget from 'wix-widget'; // Control your widget's properties, design presets, and more. $w.onReady(async function () { //Fetches the current widget properties const props = await wixWidget.getProps(); //Loads the panel element with the current widget properties values $w('#slice1text').value = props.sliceTitleOne; $w('#slice2text').value = props.sliceTitleTwo; $w('#slice1value').value = props.sliceValueOne.toString(); $w('#slice2value').value = props.sliceValueTwo.toString(); $w('#slice1color').value = props.sliceColorOne; $w('#slice2color').value = props.sliceColorTwo; //Handles value changes in the panel elements $w('#slice1text').onChange(() => { wixWidget.setProps({ sliceTitleOne: $w('#slice1text').value }) }); $w('#slice1value').onChange(() => { wixWidget.setProps({ sliceValueOne: Number.parseInt($w('#slice1value').value) }) }); $w('#slice1color').onChange(() => { wixWidget.setProps({ sliceColorOne: $w('#slice1color').value }) }); $w('#slice2text').onChange(() => { wixWidget.setProps({ sliceTitleTwo: $w('#slice2text').value }) }); $w('#slice2value').onChange(() => { wixWidget.setProps({ sliceValueTwo: Number.parseInt($w('#slice2value').value) }) }); $w('#slice2color').onChange(() => { wixWidget.setProps({ sliceColorTwo: $w('#slice2color').value }) }); });
In this tab, we:
Defined the custom element as non-selectable in the Behavior section. This is because, unlike other widget elements, custom elements cannot be customized directly from the site editor. So, we wanted to prevent site builders from clicking on it.
Removed the Change Design main action. This is because the Change Design button and the paintbrush button have the same functionality.
Connected the Settings main action button in the widget action bar to our custom panel.
In the app installation settings we:
In this section, we:
const color1 = (wixWindow.viewMode != "Site" || (plan == 'premium')) ? $widget.props.sliceColorOne : defaultColor1;