Multiple drop down boxes & database integration

Ask the community
,
1

Hey guys!

We are working on creating a new website for an alloy wheel company that sells a huge amount of variation in regards to their products.

Some context to the site;

The alloy wheels that they sell have multiple specifications that are unique to what type of car it can fit, for example:

1 Size - 18"
2 J Width - 6.5"
3 P.C.D - 5/100
4 Offset (ET) - 40
5 Centre bore (CB) - 73.1

There is also the option of having the wheels staggered, basically meaning two different types of wheels

On top of this, you also have certain specifications for each car, for example:

1 Manufacturer - Audi
2 Vehicle type - A1
3 Year - 2010

So, as you can see we have a HUGE problem (Huge Variations in product + over 1500 styles of our products + HUGE variation in what they can fit)

Where we are at right now,

Here is a basic work-around that we have created to solve the problem (Using multiple wix pages + dynamic pages) however we would like to eliminate this problem of having to
create many wix pages by using a set of three drop down boxes, allowing the user to select their manufacturer, select their vehicle
then select their year which would then produce a dynamic page subjective to the options chosen within the drop down boxes

https://dgtwheels.wixsite.com/jerome-site

Please follow this string of pages as the site is not fully functionable

FITMENT GUIDE → AUDI LOGO (MIDDLE IMAGE) → AUDI A1 (BUTTON) → 2010 (BUTTON) = DYNAMIC PAGES FROM DATABASE

The dynamic pages then represent what specifications fit what for that specific car (Please see attatched image of database)

So as you can see, we have managed to create a work around using buttons and multiple pages but due to the high number of vehicle manufacturers/vehicle types/years
we need to be able to create these using dynamic pages

In an ideal situation we are aiming to create exactly what this website has;

https://www.tirerack.com/content/tirerack/desktop/en/homepage.html

Essentially, multiple drop down boxes that then eliminate the problem of having to create multiple pages for manufacturers/vehicle types.

SO

The question is;

How can we link multiple drop down boxes so that the user can enter their vehicle information which then shows a dynamic page recommending suggested fitments.

P.S We are not coders! & could potentially be looking for someone to help us solve this problem

J

1600×900 353 KB

Attatched - Data for audi a1 that draws information to create dynamic pages for https://dgtwheels.wixsite.com/jerome-site/fitment-guide

2

Hi guys!
what a cool site this is going to be… and it should be easy with wix code :wink:
I know you are not coders, and there’s some code involved in a solution like this.
I hope you will jump in and give it a try…

=====

so let me see if I got your use case right.
each wheel has certain properties that define it: size, J-width, …
each car model (i.e. combination of {maker, model, year}) can accept only a subset of wheels.
for example an Audi A1 from 2010 can only accept wheels that are 16"-18" but not 20".

assuming I got this right here’s what I’d do:
0. create a wheels collection.
add there the fields that describe the wheel -

  • name
  • size
  • j-width
  • price
  • etc.
    fill the collection with all the wheel types you have in stock.
  1. create a “cars” collection.
  • add there all the relevant properties for a car (make, model, year, image etc).
  • add there also fields that express what wheel properties are allowed for this car.
    these fields will be something like:

  • min-size (type number)

  • max-size (number)

  • min-jwidth

  • max-jwidth

  • etc.
    fill these fields to reflect what wheel types this specific car can accept.

  1. add a dynamic page for a car.
    the URL will probably look like this: "…/cars/{maker}/{model}/{year}
    design that page to show the specific car, with its image, description and whatever other interesting info you have

  2. add to this page a 2nd dataset.
    this dataset will be used to retrieve all wheels that are relevant for this car.
    hence it will be configured to work over the wheels collection.
    we will configure that dataset in runtime, using code, to get the relevant wheels for this car.

  3. add to this page a table component, and connect it to the wheels dataset you just added.
    configure the table to show the fields that are relevant for the user to view.

[now comes the interesting part]
5. all of the code outlined below should be added to your car dataset’s onReady() event handler.
you add this event handler by selecting the dataset, and from the properties panel clicking the “+” sign near the onReady event name.

the steps below will guide you to add code that creates a wix-data filter based on the properties of the car. then assign that filter to the dataset. this will make the dataset fetch records from the wheels collection based on the filter you provided, and populate the table with them.

your code basically needs to read information from the dynamic page dataset (the one that has the car record) and use that to compose a filter for the wheels dataset.

I will not write the code for you (where’s the fun in that? ;-)) but will guide you how to do it.

that should do it! the code should create the right filter for the wheels collection.

=======
I have not discussed how to add a the landing page with the three dropdowns that need to route the user to the car dynamic page.
let’s first do this part and see where we stand.

good luck!