The Gents Bay Case Study

‍Summary

The Gents Bay (TGB) provides safe hair products for men, with all natural ingredients and unique scents in Vietnam. TGB has been in business since 2015, and their sole marketing channel was through Facebook and word of mouth. They occasionally use landing pages, but now they are expanding nationwide and going International, they want a new website that is capable of handling their mass order lists.

We were provided a custom UI design and were requested to develop it. We went through their brief and suggested that Wix eCommerce should be able to do the job well, and we went along.

Challenges

After we had developed the UI template, the challenges arose just as we expected. We will show you the end result right off the bat, so you can get an idea of what we are talking about when we dive deeper into each problem.

‍

Challenge 1 - Limitation of Wix Built-in Product Page

Our client wanted the ability to add an Ingredient section and a Product Showcase section directly on the Wix built-in product page. We thought we would be able to use the Wix database and connect the data to the image and text placeholders from these two sections, but we quickly found out that it was not possible with the Wix product widget. 

We added  a new dataset and connected it to a new collection that contains the data for the two new sections. This new collection was connected to the main built-in Product Collection using the reference field type. 

Hypothesis

We reached out to Wix support but we never got a reply. We totally understand that Wix may not have the resources to support all clients, so we took the matter in our hands. We also tried to look on the forum to see if anyone has tried and got any solution for it. 

We suspected that it was the built-in Product Page that was causing the problem. We used our logic to try to come up with a solution, but it still did not work.

Solution

We decided to build our own Product Page using Wix database and Wix dynamic page. We created a new collection list, almost exactly to the built-in Wix Product Collection, but we added a few more fields that contained images and texts for our new sections.

With a dynamic page, we were able to build a brand new All Product page and a Single Product page. They linked together seamlessly.

‍

Challenge 2 - How to Build a Tab Element like the Wix Product Widget?

When we finished the Single Product page, we saw a new issue that required some custom coding. It was the built-in Tab Element under the Add to Cart button. If you do not know this, you can make the change easily by going to the Product Page/Setting/Design/Info Sections Layout/Tabs.

The built-in Tab Element on the Wix Products Page is so good. However, with our custom dynamic product page, there was no other way but to use custom code to achieve something similarly.

Hypothesis

Initially, we thought it was not possible to add a separate Tab Element in Wix. Yet, we were wrong. There is an option called Multi State Box, we did some extensive research to find work with this solution.

Solution

Here is the code that we found:

$w.onReady(function () {
 $w("#button1").onClick(() => {
    $w('#myStatebox').changeState("state2");
} );
 $w("#button2").onClick(() => {
    $w('#myStatebox').changeState("state1");
} );
});

Multi State Boxes from Wix Forum

‍

And here is the code that was modified so we can use on our website. We modified the button, naming convention of the element as well as its ID. We deleted the active button color change as it didn’t suit the branding.

We left the textbox in the Multi State Box, and we used only 3 options instead of 4. We configure the design so it was mobile friendly.

Challenge 3 - How to Make The Add to Cart Button Dynamic?

Now the new product page was completed. We were really proud of ourselves that we solved a problem for our client. Again, the built-in Add to Cart button did not work as we expected. It kept throwing us back to the original built-in Product Page.

Hypothesis

We needed a dynamic Add to Cart button that only responded to a product when clicked. To achieve this, we needed some more code customization.

Solution

We figured out a code that would work with the dynamic data. We found only one thread that talked about this but the conversation went cold and we were not sure if the person was able to make the solution work.

We went over the code, and you would be surprised how straight forward the code was. By all means, yes we went through Wix Velo Documentation to understand how the custom Wix Add to Cart button works. 

Here is the original code that we found:

==========

import wixData from 'wix-data';
import wixStores from 'wix-stores';
$w.onReady(function () {
   $w("#addToCart").onClick((event) => {
let $item = $w.at(event.context);
let selectedProduct = $item('#dataset1').getCurrentItem();
let productId = selectedProduct._id;
       $w('#shoppingCartIcon1').addToCart(productId)
           .then(() => {
               console.log("add product ${productId} success");
           })
           .catch((error) => {
               console.log(error);
           });
   });

==========

Notice all the highlighted words? Make sure you select the right ID of the column in your collection database. And here is our modified code:

==========

$w.onReady( function () {
   $w("#addtocartButton").onClick( (event) => {
       let $item = $w.at(event.context); // Get container scope
       let selectedProduct = $item('#dataset1').getCurrentItem();
       let productId = selectedProduct.prodname;
       $w('#shoppingCartIcon1').addToCart(productId)
       .then(() => {
           // Item added to the shopping cart
           console.log("add product ${productId} success");
       })
        .catch( (error) => {
     console.log(error);
       });
   } );

==========

Challenge 4 - Built-in Product Slider Brought Us Back to the Old Product Page

Our client gave us feedback that the Product Slider on the Homepage, Cart Page, Product Page brought them back to the old built-in Product Page. We completely forgot about them. When we use dynamic page, anything that was built-in originally from Wix needed to be replaced.

‍

Hypothesis

Fortunately,  we also found that we could apply it to the built-in Product Slider from Wix.

Solution

First, we tested our hypothesis on the Homepage by adding a new dataset that was connected to a repeater. The dataset itself was connected to our new Product Collection.

We made sure that our naming convention did not change, so that we could copy & paste them throughout the website without making a big mess. The repeater works as a dynamic product slider. We connected each element in there to the dataset, and it worked like a charm. We also checked that we put a display limit on our dataset to 3. Otherwise the Slider will display all products on the homepage. We added a simple Sort logic by adding a new field to our Product Collection. This way we can manipulate which products are related to each other.

Conclusion

We hope that this case study can shed some light on your upcoming project.

If coding is not your expertise, we can help you with it. However, the reason we choose to go with no code is to save development time and increase turnaround rate for our clients.

If you find this case study helpful, please share it and do not forget to give us credit as we did to our great Wix community. Thank you so much.

Visit The Gents Bay if you enjoy this Case Study