Product variants in the results layer

Once again, the Doofinder development team offers you a tutorial for advanced level. If you see a source code and it seems to be in an extraterrestrial language, you’d better contact your developer, who will surely be able to help.

What are you going to learn today ?

As the title said, we are going to learn how to show variations of a product in the layer. Instead of showing the different variations as independent products, we are going to show various images that will change as you move your mouse over coloured spaces.
As we like challenges, we are going to do it in a traditional way, designing a way to represent the data in the feed, which will make it quite easy to insert the HTML that we need in the layer template.

Problem analysis

Let’s suppose that we have just created our mobile phone online store and that we already have a few models to sell: one in the typical black colour, sober and elegant and another one that we have in all the colours you can imagine. Sophisticated people probably want to see how this second phone looks like in the various colours, in a single result on their search layer.
A normal product without variant has, for example, the following fields:

  • Unique product ID
  • Name of the mobile phone model
  • Link to the product page
  • Link to the product image
  • Brand
  • Price
  • Colour

The typical procedure to follow in order to show different variants of a product is to repeat this same pattern for each variant, adding some setting to the URL of the product page and changing the URL of the image.
Our mobile phone model in black, silver and gold would be exported 3 times in the feed – one for each colour – and would appear as 3 independant results in the results layer.
In order to show these 3 results as a unique product in the feed, we are going to:

  • Allow the field colour to contain all the possible colour values for the phone.
  • Add a new images field that will contain the different images of the variants.

In a nutshell, we’ll have to:

  1. Export the necessary information in the data feed in a format that can be easily transformed by Javascript in the rendering of the layer.
  2. Customize the template results layer with the appropriate HTML that allows us to insert the colour selector and the images of the variants for those products that have them.
  3. Add the template functions that are needed to transform the fields we receive in the search results and ensure the HTML which is inserted make sense, as the raw value will not be very useful.
  4. Add the events management required for images to be changed when moving the mouse over the colour selector.

Colours and images in the data feed

As we have already said, we are going to add the fields colour and images to the usual fields of our data feed.
The field colour contains various values separated by a forward slash / (MAJ + 7).
In our example, the 3 colours are:

  • black
  • silver
  • gold

The field images is slightly more complex: we need to associate each colour – of the available ones – with a different image, all in a single text field.
To do this, we will invent a format which will allow us to extract the values we need, thanks to sequences of specific characters.
In the following example, a image is defined by:

  • a colour (among those available for the product)
  • a separator ::
  • the URL of the image

We can repeat this pattern by separating the different occurrences using the ** separator.

The feed could be something like this:

The field images, in several lines for better readability:

Once this feed is processed, we have all the data we need to program our template.

Variants in the results template

From this point on, we are going to assume that you have a Doofinder layer script running with default values. If not, you can create a script from your Doofinder admin panel. We can now focus only on the changes that are needed to be made.
The next step is to make modifications to the default results template of the layer in order to include the images of the different colour variants of the product, and a selector which will allow us to switch between them.
Let’s start with the images. In this case there are 3 possibilities:

  1. There are indeed several images, that would come in the images field.
  2. There is no images field and there is a image_link field (the default field in a normal feed).
  3. There is no image at all. In this case nothing would be shown.

The HTML code for the 3 assumptions is quite simple:

In the code you can see that we refer to a remove-protocol function and to a image_variants function.
The first is included in the layer which allows us to see the images in this case the layer is based both on a HTTP or HTTPS sites.
On the contrary, we should add the second to draw the HTML of the images. Later we will see how.
To conclude with the changes of the template, we will add the variant selector, whose code is simpler given the previous case:

Here we declare a function color_selector which receives the value of the field colour and draws the HTML of the selector.
And that’s the complete template code in the tag <script>.

Lastly, we should indicate two things in the layer:

  1. That it will use the results template which we have created instead of the default template.
  2. That when we ask for results from the doofinder server, they will be changed so that our customised fields will be at our disposal of the recently created template.

We will do this, adding a couple of options to the layer:

To pass the template to the layer we index through its ID attribute, the tag <script> we added before, and obtain the content of this tag.

Data transformation

The following step is creating the functions which we declared in our template which will change the received data from Doofinder into HTML.
These functions are declared in a Javascript object in the layer options, in the templateFunctions option.
br>Let’s explain image_variants.
If you remember, the field images includes a text string that represents colour couples and URL separated by ::. Each pair is separated from the next by **.
What the function does is to divide the string in order to obtain each pair and then, for each pair, the colour and the URL are extracted and the HTML is composed to draw an image. The colour is stored in an image attribute data-image-variant.
Initially only the first image will be shown, the others will stay hidden through CSS.
The function color_selector is even simpler, due to the fact that it simply obtains the colours cutting the value of the field colour through the separator / and draws the HTML which we will use to select each variant. In this case the colour is stored into an attribute data-image-variant.
At this point the HTML should be correctly drawn, but probably it will not look pretty.
Applying a little CSS will allow us to change that and make it look better:

Event management

If you have read this far, you will notice that the color selector doesn’t work, yet.
In order for it to function, we need to catch the moment when the mouse cursor passes over the different colours to read the data-image-variant attribute and use the value to show the image in the variant and hide the others.
But we can’t declare this event capture before the layer has been initialised, so we have to wait so the layer is ready.
For that we will use the loaded callback of the layer.
The following code is a little bit boring for a pure Javascript, so I decided to write it assuming that the site is using jQuery. If it is not the case, you know what to do…

Basically the code detects the event mouseover of the mouse cursor in the layer and executes a function if the mouse has passed over elements with the class .color-selector with the data-image-variant attribute.
This is called event delegation and we use it because it allows the event capture to be defined once and function for any drawn results, so that we don’t have to worry of doing it each time that we will receive results.
Once the wished event is detected in the color selector, the data-image-variant attribute color is extracted and then we look for the image, within the same results, which has the same value for the attribute.
With these last changes, you should have a layer which shows variants when they are available and the default image when they are not.

¿Do you want to know more?

If you want to enhance the experience, I suggest you look at some exercises:

  1. With products with variations, make the default image (the one which is in the field image_link) appear when the mouse cursor abandons a variant.
  2. With products with variations, ensure that when one of the selectors is pressed, the user is taken to the correspondent link to this variant. Depending on the format of your site links, it is possible that you could use the colour code to modify the original URL of the product. If not, you should probably add a new field to the data feed.
  3. The field color only makes sense if you want to use it to filter the results. If you wish, you can try to program this example only with the field images.