Introduction

In this article, we describe how to integrate with a Wix vendor. If your vendor has a Wix store, Onport can automatically sync products.

Getting started

If your vendor has a Wix account, Onport can automatically import their catalog requiring no more than a few steps. However, this is a partial integration, in the sense that order sync is not available with Wix. In this case, we suggest that you choose one of the Partial Automation options available under the Orders tab, depending on what works best for you and the vendor:

Video tutorial: How to generate the correct credentials needed for a Wix vendor integration

With Onport, you can publish and automatically sync products between your Wix vendors and your store. Tracking details can be entered by the vendor through a dropship portal, as Wix doesn't currently allow orders to be synced. To learn more on how they view their orders from the dropship portal, read this.

Syncing Wix

To enable the inventory feed sync, your Wix vendors will need to do the following from their end:

1. Click on Edit Site from the main Wix dashboard menu:
   
   

2. In the editor, turn on Dev mode by clicking it on the top bar:
   
   

3. Now, on the menu on the left, click on the plus sign next to Backend > New js. File.
   
   

4. Next, rename the new file to “http-functions.js”❗️If the file already exists, we recommend co-tagging a developer to ensure your current setup continues to operate as expected, as the file contents will need to be copied into the existing file.

5. Copy paste the following code to the editor and click save and then publish:
   
   

import { notFound, ok, serverError } from 'wix-http-functions';
import wixData from 'wix-data';
import wixStores from 'wix-stores-backend';

export async function get_productsListing({ query }) {
    const options = {
        headers: {
            'Content-Type': 'application/json',
        },
    };

    const products = [];
    // Always get 100 items from first page i.e. skip 0, if query parameters are not set
    let [page, limit] = [0, 100];

    if (query) {
        page = query.page ? parseInt(query.page, 10) : page;
        limit = query.limit ? parseInt(query.limit, 10) : limit;
    }

    try {
        const result = await wixData.query('Stores/Products')
            .include('inventoryItem', 'variant')
            .skip(page * limit)
            .limit(limit)
            .find();

        for (const item of result.items) {
            // eslint-disable-next-line no-underscore-dangle
            item.mappedVariants = await wixStores.getProductVariants(item._id, {});
            products.push(item);
        }
    } catch (onRejected) {
        options.body = {
            error: onRejected.message,
        };
        return serverError(options);
    }

    options.body = {
        items: products,
        query,
    }
    return ok(options);
}

6. Last step is to turn off Dev mode, and hit publish again.

That’s all from the vendor’s side! Once this is done, the Onport user can then enter the script installation path in Onport, which is the vendor's store URL, e.g. www.mysite.com. This will then enable the inventory sync, pulling in the product catalog of the Wix vendor that can be published to the marketplace store, and syncing product details, inventory, and pricing!

NOTE: When setting up the inventory feed, if the URL the vendor provides looks something like https://XXXX.wixsite.com/website, please enter it absent the /website suffix. Onport appends that automatically to the URL for Wix, so this may generate URL errors.

Troubleshooting Errors

There are two main mistakes that we often see as the cause for a failed Wix feed in Onport. If your Wix feed is not fetching products or is giving an error, we recommend you get in touch with the vendor directly to verify the following:

1. Ensure that the URL entered is correct. It should either be in the format of https://.wixsite.com// or https:///
2. Ensure the file is named correctly. If it is not correctly named, Onport is unable to access the product data from the store. If https://.wixsite.com//, you should be able to access: https://.wixsite.com//_functions/productsListing If https:///, you should be able to access: https:///_functions/productListing
3. Ensure there is no Wix example code included in the file. Wix can sometimes include example code in the functions file. It should look like this:
   
   

   import {ok, badRequest} from 'wix-http-functions';
   
   export function get_example(request) {
   const response = {
   "headers": {
   "Content-Type": "application/json"
   }
   };
   
   // Get operation from the request path
   const operation = request.path[0]; // "multiply"
   const leftOperand = parseInt(request.query["leftOperand"], 10); // 3
   const rightOperand = parseInt(request.query["rightOperand"], 10); // 4
   
   
   // Perform the requested operation and return an OK response
   // with the answer in the response body
   
   switch (operation) {
   case 'add':
   response.body = {
   "sum": leftOperand + rightOperand
   };
   return ok(response);
   case 'multiply':
   response.body = {
   "product": leftOperand * rightOperand
   };
   return ok(response);
   default:
   // If the requested operation was not found, return a Bad Request
   // response with an error message in the response body
   response.body = {
   "error": "unknown operation"
   };
   return badRequest(response);
   }
   }

   
   If so, this may need to be removed for the feed to work. If you're unsure about the nature of the code embedded in the file, we recommend checking with a Wix developer to make sure you don't delete the wrong piece of code.

If you have ensured all of the above, and the feed is still not loading as expected, kindly ask the vendor for screenshots of their backend, and forward them to support@onport.com.

Multilingual 

Vendors using Wix can use translation tools provided by Wix for automated or manual translation into other languages, aside from their base language (https://support.wix.com/en/article/wix-multilingual-an-overview). Unfortunately, the translated content is currently not available when syncing products. As such, only the base language is available on the platform. The products can either be manually created in your store. Or, published and then manually edited. As with all published items, it's important not to adjust the product handle or SKU of the items when you are publishing. 

Onport marketplace setup

Within Onport, you'll need to go to Contacts > Dropship Providers > (choose vendor) > Products tab and click "new inventory feed". When you select the type "Wix", you'll need to add the script installation path which is the vendor's store URL:

After that, you just need to click "Save", go to Inventory > Inventory Feeds, locate the feed, and fetch it to be able to see the products you want to publish to your store.