Tutorial: Recommendations Service Plugin

Wix service plugins (formerly SPIs and custom extensions) allow you to expand what your site can do by integrating with 3rd-party services not currently supported by Wix. They also allow you to implement custom logic to change how your site displays and behaves.

Read more information on how to implement a service plugin.

With the Recommendations Service Plugin, your service can seamlessly integrate with Wix to provide advanced recommendation algorithms, helping site owners deliver personalized suggestions that enhance user engagement and overall experience.

This guide explains how to set up a recommendations plugin on your site.

The process has 3 steps:

1. Create a new recommendations plugin on your site.
2. Implement your plugin with custom code.
3. Deploy the plugin.

Step 1: Create a new recommendations plugin

The first step in setting up your new plugin is to add it to your site. This process creates a new folder in the Service Plugins section of the Code sidebar (Wix Editor), or the /src/backend/spi section of the Wix IDE Explorer (Wix Studio), which contains the files for your code.

1. Add the Wix Stores app to your site.

2. Add a Related Products gallery to any page where you would like to display recommendations. On the product page, you can recommend related products. On any other page, you can display generic recommendations for the store or current visitor.

3. Enable coding:

   • Wix Studio: If necessary, click and then Start Coding.
   • Wix Editor: Enable Velo Dev Mode, and then click the Public & Backend tab in the Code sidebar.

4. Go to the Service Plugins section:

   • Wix Studio: Click Backend & Public.
   • Wix Editor: Scroll down to the Service Plugins panel at the bottom of the sidebar.

5. Hover over Service Plugins and click , then click Item recommendations.

6. Follow the prompts to add the plugin and accept any terms and conditions that display.

7. Enter a name for your integration and click Add & Edit Code. The name can't contain spaces or special characters.

8. Wix Studio: Open the Wix IDE, and go to /src/backend/spi/ecom-recommendations-provider. If your service plugin doesn't appear, try refreshing both the Studio Editor and the Wix IDE.

9. Publish your site.

Step 2: Implement the plugin

The procedure in the previous step creates a folder in the service plugins section of the Code sidebar (Wix Editor), or in the Wix IDE's Explorer (Wix Studio). The name of the folder is based on the plugin you chose. Inside, there is another folder with the name of the plugin you set up. This folder contains 2 files, <my-plugin-name>.js and <my-plugin-name>-config.js.

Implement the custom code for your plugin in these files.

Here are some guidelines for writing your code:

<my-plugin-name>-config.js

The code in this file defines a function named getConfig() that returns an object containing the values used to display the recommendations algorithms in the Related Products gallery settings in the editor.

By configuring the Related Products category, you can select which algorithms to get items from. Wix sends requests for those algorithms when the Recommended Products gallery loads.

Example of a valid config:

<my-plugin-name>.js

The code in this file defines a function named getRecommendations(). This function is called by Wix to retrieve the recommended items provided by your plugin. The function accepts the following parameter:

options: An object that includes the algorithmId of the selected algorithm. If the Related Products gallery is installed on a products page, the items field will be populated with the product ID as catalogItemId and the Stores App ID as appId. On any other page, the items field will be empty.

Example of options object:

The getRecommendations() function must return an object with a key called recommendationPerAlgorithm. The value of this key is an array of recommended items.

Example of returned value:

Add files to the plugin

If you don't want to keep all of your code in the main files, you can add files to the plugin's folder and import functions and objects into the main files.

• Wix Editor:

  1. Hover over the plugin folder's name and click Show More .
  2. Select the New.js file.

• Wix Studio: Create a new file in the plugin's folder.

To import from these files to the main files, use the following syntax:

Test the plugin

You can test your plugin before publishing your site in the Wix Editor using functional testing like you would with any backend site code. Make sure your getRecommendations function's return values are properly formatted.

You can test your plugin after deploying for both Wix Editor and Wix Studio. To test your plugin after deploying, add console logs to your code. The results appear in Wix Logs.

Step 3: Deploy the plugin

Once your code files are ready, you need to deploy your plugin and enable it on your site's dashboard.

1. Publish your site.
2. Go to the page with the Related Products gallery.
3. Click "Settings" on the gallery. Your recommendation algorithms appear in the dropdown, alongside other algorithms provided by the Stores app. Algorithms with the algorithmType of RELATED_ITEMS are listed under the "Related Products" section.
4. Select the algorithm you want to use. The recommended products will appear in the gallery.

Examples

Cheapest products in the store

You can return the top 10 cheapest products in the Store Products Wix collection.