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 a 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.
2. Design your plugin in Wix Blocks.
3. Code your plugin in Wix Blocks.

Step 1 | Open the Wix Studio workspace and create an app

You can access Wix Blocks through the Wix Studio workspace.

1. Open the Wix Studio workspace.
2. Click Custom Apps in the left menu.
3. Click Create New App and then select Build from scratch.
4. When prompted to choose a framework, select Wix Blocks.
   Your newly-created app opens in Wix Blocks.

Step 2 | Design your plugin’s UI

Now design your plugin in Wix Blocks:

1. Open the Widgets and Design panel, click , and select Add Plugin.

2. In the Add a plugin panel, set up the plugin as follows:

   • Plugin name: Digital Sale Banner Plugin

   • Which Wix app does it extend?: ウィックス店舗

   • Slots this plugin can be added to: product-page-details-2 (New Product Page) そして product-page-details-2 (Old Product Page)

   Note: Check Wix Stores: Product Page to see the available slots.
   This example uses the slots for both the new version of Wix Stores product page and the old version. This ensures a user can add your app to their site with whichever version they have.

3. 作成」をクリックする。

4. Add an image element to the plugin.
   クリック エレメントの追加 on the left side of the editor, and then click 画像.

5. 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.

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

7. 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 plugin API.
   To do so, add the productId property to your plugin's public API.
   In the code panel, click the Widget Public API icon, and then click Add New Property.

   See how it looks

   

2. の中で 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:

   コピー

   1
   
   

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

   コピー

   1
   
   

   Here's the complete code:

   コピー

   1
   
   

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 plugin is now ready for use. In the next step, you'll add your plugin to a site to see it in action.

Step 4 | 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 ページ数 , then Store Pages, and go to the 製品ページ.

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.