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 2x3 grid layout, containing the following elements:
We added the checkoutId
property to our widget API to implement the Checkout plugin API, which provides data about the current checkout process.
To retrieve data about the current checkout process and update the checkout with gift wrapping data, we use Wix eCommerce's getCheckout()
and updateCheckout()
APIs. We call these APIs from a backend code file (checkout.jsw
) and export corresponding functions that we invoke in our widget code.
We also created several public code files that provide functionality that is consumed in the widget code, including:
createCustomBuyerNote.js
: Generates a buyer note with information about the gift wrapping, which is added to the order.giftWrapCollection.js
: Reads the configuration setting that the user specified in the dashboard page.Our app has a dashboard page that lets users add the site plugin to their checkout page and configure the gift message placeholder that appears in the site plugin.
Unlike most plugins, which are added in the editor directly to the host widget, checkout plugins are added through the dashboard. This is because the checkout page is not available in the editors.
The dashboard page contains the following elements:
We used the getPlacementStatus()
API to check whether the site plugin is added to the checkout page. If it isn't, we set the multi-state box's state to Pending
. In this state, the user sees the Add Plugin button. We added an onClick()
event handler to the button that uses the Dashboard SDK's openModal()
API with the appropriate parameters to open the consent modal that adds a plugin to the checkout page.
We used Wix Blocks' data binding feature to implement the configuration settings logic without writing any code. We added a dataset to the page (#giftWrapDataset
) and then connected the radio buttons (#placeholderRadioButtonsList
) to the Placeholder
field in our collection and the Save button to the Submit
action.
Our app uses a collection to store data that is configured in the app's dashboard page, specifically the setting for the gift message placeholder that appears in the site plugin.
To make the plugin available for users to add in a slot on the checkout 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 checkout:summary:lineItems:after
slot in which our site plugin can be added.