Tutorial | Create a Site Plugin for the Wix Stores Product Page

In this tutorial, we demonstrate how to create the Digital Sale Banner site plugin for the Wix Stores product page. This plugin displays a small banner on digital products to let customers know this product is included in the current digital sale promotion. It is meant to be embedded in the Wix Stores product page slot.

The end result will look something like this:

We'll use the following steps to build the Digital Sale Banner site plugin:

  1. Create an app in the Wix Dev Center.
  2. Design your plugin in Wix Blocks.
  3. Code your plugin in Wix Blocks.
  4. Configure your plugin in the Dev Center.

Note: This tutorial works with the original Wix Stores product page, but you can adapt it to work with the new Wix Stores product page. Learn more about building product page site plugins.

Step 1 | Create an app and open it in Wix Blocks

To begin, create a new app in Wix Blocks. This is where you'll build the widget component that contains the UI and business logic for your plugin.

Wix Blocks is an editor for building responsive Wix apps. It lets you design widgets, write code, and use APIs – giving you all the tools you need to create a fully-functional app.

  1. In the Dev Center, go to My Apps, and then click Create New App.

  2. In the left sidebar, select Extensions, and then click Create Extension.
    A panel opens, showing the available extension types.

  3. Find the Widget (Wix Blocks) extension and click Create on Blocks.

    See how it looks

Step 2 | Design your plugin’s UI

Now design your plugin in Wix Blocks:

  1. To get started, select Blank canvas.
    The Wix Blocks editor opens with a default widget.

  2. Add an image element to the widget.
    Click Add Elements on the left side of the editor, and then click Image.

  3. Upload the image that you want to appear on the relevant product pages.
    Click Change Image. Select the image you want to use and click Update.

  4. If you find your image is cut off, then reset the image.
    Select the image and click on . Click .

  5. Next, let's make sure that when the plugin is added to a site, the image stretches across the entire width of the Wix Product page slot.
    Select the image element. In the Inspector panel on the right, click the Layout tab, and set the element's width to 100%.

    See how it looks

Step 3 | Code your plugin

We now write the code for our plugin. The code checks if the product is digital and, if so, updates the slot on the page to display the digital sale image.

  1. Before coding our plugin, we need to connect our plugin to the host widget (in our case, the Wix Stores product page) by implementing the PRODUCT API.
    To do so, add the productId property to your widget's public API.
    In the code panel, click the Widget Public API icon, and then click Add New Property.

    See how it looks

  2. In the New Property panel, name the property productId, and then click Create.

  3. In the code editor, add the following import statement at the beginning of your code to use Wix Stores APIs:
    import { products } from 'wix-stores.v2';

  4. Make the $widget.onPropsChanged() function asynchronous by adding the async keyword:
    $widget.onPropsChanged(async (oldProps, newProps) => {

  5. Inside the $widget.onPropsChanged() code block, add the following line to get the current product ID from the host widget:
    const currentProductId = newProps.productId;

    This ID identifies the product for which the type will be checked.

  6. Use the Wix Stores getProduct() function to query the type of product:

    Copy
    1
    const currentProduct = await products.getProduct(currentProductId);
    2
    const currentType = currentProduct.product.productType;

  7. Check if the product type is digital and, if so, display the digital sale banner:

    Copy
    1
    if(currentType === 'digital') {
    2
      $w('#imageX1').show()
    3
    } else {
    4
      $w('#imageX1').hide()
    5
    }

    Here's the complete code:

    Copy
    1
    import { products } from 'wix-stores.v2';
    2
    

    3
    $widget.onPropsChanged(async (oldProps, newProps) => {
    4
      const currentProductId = newProps.productId;
    5
    

    6
    	 const currentProduct = await products.getProduct(currentProductId);
    7
    	 const currentType = currentProduct.product.productType;
    8
    

    9
      if(currentType === 'digital') {
    10
    	   $w('#imageX1').show()
    11
    	 } else {
    12
    	   $w('#imageX1').hide()
    13
    	 }
    14
    });

  8. In the top-right corner, click Build. When prompted to provide an app name, enter "Digital Sale Banner" and then click Save & Continue.

  9. When prompted to select the type of version to build, select Test version.

Your widget is now ready for use, and there is one final step before adding it to a site.

Step 4 | Configure the plugin in the Dev Center

To make our plugin available for site builders to add in slots, you need to set up a Widget Plugin extension in the Dev Center. This extension holds metadata about the plugin and is linked to the widget we built in Wix Blocks.

  1. Before we begin, we first need to copy our widget's ID from Wix Blocks. We'll need this ID when configuring the Widget Plugin extension in the Dev Center.
    In the Widgets and Design panel in the left sidebar, hover over your widget's name and click the Show More icon, and then click Copy Widget ID.

  2. Go to the Dev Center, and make sure that you're in the app you created earlier.

  3. In the left sidebar, select Extensions, and then click Create Extension.
    A panel opens, showing the available extension types.

  4. Find the Widget Plugin extension and click Create.

    See how it looks

    This takes you to the JSON editor, for configuring the extension.

  5. To configure your plugin details, enter the following information in the JSON editor:

    Copy
    1
    {
    2
       "referenceComponentId": "<YOUR_WIDGET_ID>",
    3
       "pluginInterfaces": [
    4
         "PRODUCT"
    5
       ],
    6
       "marketData": {
    7
         "name": "Digital Sale Plugin",
    8
         "description": "Highlight products on digital sale!"
    9
       },
    10
       "placements": [
    11
         {
    12
           "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
    13
           "widgetId": "13a94f09-2766-3c40-4a32-8edb5acdd8bc",
    14
           "slotId": "product-page-details-2"
    15
         }
    16
       ],
    17
       "componentName": "Digital Sale Banner Plugin"
    18
     }

    "referenceComponentId": Use the ID you copied from Wix Blocks in 1.
    "pluginInterfaces": The API implemented by the plugin's widget. In this example, "PRODUCT".
    "marketData": This information about your plugin will display in the app market.
    "placements": The list of slot placements where your plugin can be installed. Check Wix Stores: Product Page to see the available slots.
    "componentName": An internal name that will only appear in the Dev Center.

  6. Click Save.

  7. Go back to Wix Blocks and build your app again.

We've now created a plugin. In the next step, we add our plugin to a site to see it in action.

Step 5 | See your plugin in action

Plugins that you develop are immediately available for installation on your own sites, using the Plugin Explorer in the editors.

Go ahead and create a new site, and then install Wix Stores. Alternatively, use a site template which already has Wix Stores installed.

  1. Open your editor. In the left sidebar, click Pages , then Store Pages, and go to the Product Page.

  2. On the Product page, click the page's widget, and then click the plugins icon.

    See how it looks

    Your plugin should appear in the Plugin Explorer.

  3. Hover over your plugin, and then click Add.
    When prompted for consent, select the checkbox and click Agree & Add.

Once you install your plugin on a site, you can preview or publish the site to test the plugin's functionality and make sure it's working properly.

Was this helpful?
Yes
No