Gift Wrap at Checkout

Wix Blocks

Gift Wrap at Checkout

Wix Blocks
This template is built with:
This template demonstrates how to build a site plugin for the Wix eComm checkout page using Wix Blocks. The Gift Wrap at Checkout plugin enables customers to mark their order as a gift and add a personalized message for the wrapping. The site plugin uses the CHECKOUT plugin API to get contextual data about the current checkout process used on the site, as well as Wix eCommerce APIs to retrieve and update checkout data. The app also includes a dashboard page, enabling site owners to add the plugin to their checkout page and configure its settings. The dashboard page utilizes the Wix Dashboard SDK to interact with the site’s dashboard. You can easily adapt this app for your own needs by modifying the UI and logic of the site plugin and its dashboard page.

How We Built This

This app was built using the Wix Blocks editor, and also requires setting up a site plugin extension in the Wix Dev Center.

Site widget

Site plugin components are created in Blocks as site widgets.

Widget design

The responsive design uses a 2x3 grid layout, containing the following elements:

  • Title (“Is this a gift?”), which spans the top grid row.
  • Image, which spans rows 2 and 3 of column 1.
  • Checkbox (“Wrap as a gift”), located in row 2 of column 2. Users mark this checkbox to indicate that they would like the order to be wrapped as a gift.
  • Message input, consisting of 2 stacked elements (a text input element and a text element for the character count), located in row 3 of column 2. Users enter an optional gift message in the text input box.

Widget code

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.

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.

Design

The dashboard page contains the following elements:

  • Multi-state box for adding the site plugin to the checkout page, with the following states:
    • Pending: Informs the user that the plugin isn't on the checkout page yet, and provides a button for adding it.
    • Added: Informs the user that the plugin is live on the checkout page.
  • Radio button group for selecting the gift message placeholder that appears in the site plugin.
  • Button ("Save") for saving the the configuration settings specified by the user in the radio button group.

Code

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.

Database

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.

Dev Center configuration

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.


Related templates

Wix Blocks

Stock Countdown

Build a site plugin that gets added to the Wix Stores product page.
Site PluginStores API