New Update - Click to see what is new!

Backtorp & Gyllander Blog

Backtorpgyllander.se

How to make a product configurator using Wix, JavaScript and Corvid


Written by Albin Gyllander

Published 26 September 2020


This tutorial is somewhat based on the Sweatshirt configurator on Wix.com .

There is no need to have any prior knowledge of JavaScript nor some understanding of Wix but this tutorial will perhaps be hard to understand if you never have used Wix.

This tutorial does not aim to teach you JavaScript, instead there will be code that you can copy and then change to fit your needs.

Are you trying to make a product configurator, builder or any sort of product with interactive options?

A product configurator is a good and user-friendly way of giving your costumers more freedom to personalize their desired product. Commonly, product configurators have been used for car companies. You can try out the Tesla configurator here to see what all the fuzz is about:

I tried for so long to make such a configurator but all the tutorials I encountered was in many ways not explanatory enough. They all presumed that I had extensive experience in JavaScript or the Wix Corvid interface. Finally, after combining multiple different tutorials and figuring out what works and what doesn’t, I finally solved all issues that I had and now have I a working laptop case configurator website called Pampador.se .

It works by using the Wix ecommerce solution and the Corvid API. Corvid is essentially a techier version of Wix which allows developers to make more advanced and special things with Wix. Even if Wix is a much freer interface to build websites than Shopify for example, there is a limit to what you can make with Wix.

With Corvid there is a few additional components added to your Elements library such as the Input element category which allows for input types like slider, checkboxes and other elements that you can connect with a database, something that is also added when using Corvid. There is also the Content Manager which is in essence a database collection which you can connect to specific elements.

To start using Corvid on your Wix website, simple log in and go to the website editor, where you then click on Dev Mode at the top navigation of the page, and then on Turn on Dev Mode.

I recommend to watch the introduction video to get some idea of what Corvid can do. You can read more about Wix and Corvid. You can read more about Wix at Wix.com

The idea of this configurator is that you have a product with different options such as color or sizes, this can be set when you edit or make a new product. On the webpage there will be an image of the product and some buttons to change a specific variant within an option of the product. The best example of this is the color of the product, each button changes the color of the product on display and when you place the product in the cart, the selected color is then selected as the option. This means that the buttons which change the color need to correspond to a specific option of the product. If you have different options such as sizes and colors of the product, you need to have buttons for each variant of every option.

This configurator uses a collection of images that is displayed or hidden depending on what options is selected. Then the selected color will become the selected products option.

There will be three factors that make the configurator work: a Wix product with options, buttons that change the selected option, and a database that links the code between the buttons and the product.

Overview

In our site we added the following:

I added JavaScript to do the following:

Step 1: Create the collection

Start by going to the Wix site editor and make sure that you have Corvid enabled like we spoke about in the introduction.

Click the Content Manager in the tools bar to the right on the page. This should open a list of the website’s collections. Begin by creating a new collection by pressing the blue button. Give it a name, in my case Configurator and set the “What’s this collection for” to Site content.

When you have created the collection, press the plus-icon to create something that is called a Field.

You need to add three new fields:

  • Option
    • Field Name: option
    • Field Key: option
    • Field type: text
  • choiceImage
    • Field Name: choiceImage
    • Field Key: choiceImage
    • Field type: Image
  • displayImage
    • Field Name: displayImage
    • Field Key: displayImage
    • Field type: image

Now your collection is set up!

Step 2: Create the product

Create a new product or use an already existing one. In the product editor, scroll to the Product Options section and add the number of options you want. In my case I used three options: 2 color options and 1 patch option.

Click the product option and under Option Name you set the name of your option. I recommend using one word such as color or size.

Use this name consistently throughout the configurator as there are many parts that interact with each other. My biggest problem during the development was that I forgot to use exactly the same name for everything.

Under Choices for this option, set the different variants or choices. For example, if you have color as an option, set the different colors as the choices. Separate each choice with a comma.

Repeat this process with each option.

Step 3: populate the database

The database you just have created currently is empty. This needs to be changed.

Begin with naming each variant the same as the variant within the options you made when creating the product. Under the option field, write the name of the option corresponding to that variant.

The choiceImage is the image that will be on the button in the repeater.

The displayImage is the image that is displayed as a part of the product. Those images are up to you to create. The idea is that there is a number of parts of the product that simultaneously displayed makes the product whole. There needs the be one image for every option and its variants.

Step 4: create the connection between the product and collection

Create one dataset for every option your product has. To create a dataset, go back to the Wix website editor and open the add tool where you open the Content Manager. Add a dataset by clicking the add-button next to the element named dataset.

Now that you have a dataset, open the settings of the dataset by clicking on it.

  1. Under Connect a collection choose the collection you just created.
  2. Under Dataset Name, name it anything but preferably one of the product options to keep everything simple.
  3. Set the mode to read-only, although it is probably already disabled.
  4. Set the Number of items displayed to 20.
  5. Under the headline filter, choose +add filter.
  6. Field should equal option (text). This is the Field you created in the collection on step 1.
  7. Set condition to is.
  8. Set value source to manual entry.
  9. Set the value to what you named the option on step 2, it must be exact. It is very important to name it the exactly the same as what you named it when you created the option.
  10. Click save and repeat the same for every option that the product has.

Also, add an add to cart button. You can find this special button under add > store > add to cart button.

Step 5: Product page

Firstly, add the product images. You need one image for every option of your product. In the laptop case example, I used one image for the two colors and one image for the patch. When a user clicks the option buttons the image changes. Depending on what your product is you have to have different images, overlay the images so that together they form as a complete product. The fewer options the less work it is when creating your images.

Each image needs to have a specific Id. In the Wix editor go to Tools > check Properties Panel. Click an image and in the top of the Properties Panel, you can specify an Id. Choose a specific id that is related to the image and thus the option. If your three options are color1, color2 and patch, name the corresponding images the same.

To create the buttons which the user will use to configure the product, you use something called a repeater. You can find the repeater element under the category Lists and grids where you can add a repeater to your site.

The repeater will automatically increase the buttons for each option.

Once you’ve placed it, remove everything like images and text. Remove the preexisting containers as well. All you should have is a repeater with one small box.

Next add a button and an image on top. The image can be any image and will not be shown to a user. This image will later be changed to the choiceImage that we created on step 1 in our collection.

You can spend some time design this element to your preferences, but we will now continue with adding code to the website.

Click the image and when the tools appear above the element, click the connection symbol. This opens an interface similar to when you added the filter to the dataset. Now, connect the collection you have made for this project and under image source connects to choose choiceImage. This connects the choiceImage to the buttons in the repeater.

Step 6: core functions and clearSelection

This next step will require you to use the code below, but you probably have to tweak it to fit your exact set of options & product etc. All of the code should be written on the product page.

On this page there should be a bar at the bottom of the page, click the arrow farthest to the right to expand the code editor. Copy or write the following code snippets into the editor.

First, we need to add the Wix Window to check whether the user is on a mobile or desktop device. Then we add the variables.

NUMBER_OF_CHOICES is the number of options you have. It is the same number of datasets you just created. It is vital that they are correct as the add to cart buttons functionality depend on it.

productid is the id of the product. It is an individual id number for your product. You can find the product id in the Products collection in the Content manager.

selectedOptions is an object that stores the user’s choices. It should be empty.

The clearSelection function clear the selection when the page is loaded.

See the Pen ZEOeQwr by Albin Gyllander (@AlbinGyllander) on CodePen.

Now you need to define the clearSelection function like the following.

See the Pen NWrpxJd by Albin Gyllander (@AlbinGyllander) on CodePen.

Note that I used the same id for the images here as the id’s of the images I created in step 4 and the id of add to cart button is the same as the add to cart button I created earlier.

It is very important that you are consistant with names and id’s as the code cannot understand what to do if you are not naming things consitantly.

The last line in this code disables the add to cart button so that a user cannot add a product to the cart when all options are not chosen.

Step 7: selectChoiceForOption

This snippet of code tells Wix that when the clearSelection function is called, all images are emptied and cleared. The add to cart button is also disabled meaning that the customer cannot order a product without having chosen a choice for all options.

Now it is time the add some code that changes the images when a choice is made by the user. The following code is a function that changes the images and when all choices have been made: enables the add to cart button.

See the Pen NWrpava by Albin Gyllander (@AlbinGyllander) on CodePen.

Add the following code to your code editor. There is no need to change this code, add it as-is:

See the Pen mdEWBBE by Albin Gyllander (@AlbinGyllander) on CodePen.

This code capitalizes the first letter of every string.

A string is any text or number within single of double quotes. Note that I have not capitalized the first letter of my strings.

Step 8: code for the repeater

Now it is time to write some code in order to put the choices the costumer have made and store that choice. To get this code to work, DO NOT just copy this code. Open the properties panel and click the repeater and then under events, click the + icon on the onItemReady. Then you have to add the code that is missing from the code below. Make sure that the $w, itemdata, index is included within brackets on the first line.

Theoretically, you should be able to just copy this code into the code editor but from my experience, the code doesn’t work all the time.

See the Pen abZJLGg by Albin Gyllander (@AlbinGyllander) on CodePen.

The #selectColorButton need to be changed to whatever you have called your buttons that are inside the repeater. Remember to be consistent with id’s. On the last line of code, the color is the options for that specific repeater. This code stores the choice into the option of your product.

Do this for every repeater you have. Every repeater needs those lines of code in order to work.

Step 9: addToCartButton

Now you need to add the product to card with the options the user has chosen. This is done by executing the code below. The #shoppingCartIcon1 is the id of the shopping cart. You can most likely find your shopping cart in the header. You can find its id the same way as images.

See the Pen oNLZGMj by Albin Gyllander (@AlbinGyllander) on CodePen.

The productid Is what you set in the first lines of code. The choices the user have made have been stored in the selectedOptions variable.

Now you are done! If you have followed the steps above, you should now have a working product configurator. It probably doesn’t look exactly the way you want so you have to design it yourselves.

Here is the total code that I used on my site:

See the Pen eYzvGjx by Albin Gyllander (@AlbinGyllander) on CodePen.

Comment Box is loading comments...