Drop-down + Dataset (Stores/Products) + Wix Pro Gallery integration!

Ask the community
, , ,
1

Hiya Community. Just wanted to write this post to share the code that I looked for and posted questions about for 5 days with no success. I watched every tutorial, read more than I care for and even hired a free-lancer who was not able to accomplish this. Hopefully there are others who can benefit from my luck/success as I also saw many posts on here asking for something similar.

This was the “simple” result I was looking to achieve so you have some context:

  1. Have a drop-down element

  2. Add Choices to the drop-down which are in my Wix Stores/Products database under the “Collections” field, added in my case as flavor profiles (Apple, Banana, Coconut, etc)

  3. Have a Wix Pro Gallery that filters the contents of the database according to the “Collections” filed and displays them according to the user-selection from the drop-down

2112×1054 228 KB

Note: I know the experts will read this and think of course you idiot, its so simple, but I swear to you, it is NOT! Search the forum and you will see that this particular solution is not offered by anyone, and most questions for this functionality remain unanswered or the answers provided do not work. That is the only reason I am posting this because it would have saved me a week of frustration.

How I accomplished it:

  1. Add the drop-down from the Editor, located under “Add”, then “Input”

  2. Add a Wix Pro Gallery from the Editor, located under “Add”, then “Gallery”

  3. Add the existing dataset (Products), if you have already created your product database, located under “Add + Content Manager + Dataset”

  4. Click the drop-down and select “Manage Choices”

  5. If you are pulling data like me, from the “Collections” field in your Products database, you need to enter the “Choices” exactly as they appear in your “Collections” field. So in the image below, if I want to filter by “Raspberry”, I will enter “Raspberry” for the Value field in my drop-down choice and same for the label.

2916×218 50.2 KB

  1. Once all the “Choices” have been entered into the drop-down list, move onto the Wix Pro Gallery settings and choose the layout which fits your needs best. For me, so that the image was not cropped, I choose the grid layout and scroll down to choose “Fit”. This ensures all the product images are sized to match one-another and no images are cropped.
  2. Go through all the Wix Pro Gallery settings and configure them to your needs.
  3. Connect the Gallery to the Dataset you added in step 3 by clicking the “Gallery” and then clicking the “burger” looking icon all the way on the right of the pop-up settings. Connect the " Image Source " to " Main Media" , " Title " to " Name(Text) ", and " Link connects to " to " Product Page URL ".
  4. At this stage, you should have a drop-down ( NOT CONNECTED TO DATASET ), a Wix Pro Gallery ( CONNECTED TO DATASET with appropriate fields also connected from step 8) and a Dataset connected to “Products” Database.
  5. You will need to click the “drop-down” and in the Properties Panel (appears after Corvid is enabled from the “Dev Mode” option at the top of the Editor) and add an “onChange” event by hovering and clicking the “+” sign.
  6. Then, you will need to add code to the bottom of the page, hopefully you have already enabled Corvid: The code may not be perfect or elegant or structured correctly because coding is new to me, but this is the code which worked:

import wixData from ‘wix-data’ ;

// …

$w.onReady( function () {
//TODO: write your page related code here…
});

export function dropdown1_change(event) {
console.log($w( ‘#dropdown1’ ).value);
wixData.query( “Stores/Collections” ).eq( “name” , $w( ‘#dropdown1’ ).value).find().then((fla) => {
console.log(fla.items[ 0 ]._id);
wixData.query( “Stores/Products” ).hasSome( ‘collections’ ,fla.items[ 0 ]._id).find().then((res) => {
console.log($w( ‘#gallery1’ ).items);
console.log(res.items);
// $w(‘#gallery1’).items =res.items;
let items =;
for ( let i= 0 ;i<res.items.length;i++){
let item = res.items[i];
items.push({
src: item.mediaItems[ 0 ].src,
title:item.name,
link:item.productPageUrl
});
}
$w( ‘#gallery1’ ).items = items;
// $w(‘#gallery1’). = res.items;
});
});

You will need to change the following in the code above to match your page element ID’s in the Properties Panel:

  1. #dropdown1

  2. #gallery1

I am sure I have missed some detail above and the Corvid experts will check me (please check my mistakes so that others don’t struggle when they try to follow this post, thank you devs).

When you preview this, make sure it works. If you have any problems, I guess you can post it here and the devs will be able to clarify further if my instructions are wrong or lacking.

I am grateful to everyone who has benefitted me through this forum and hopefully this will pay it forward…some.

Final Note: Some of the “Gallery” galleries have bugs and so if you follow everything exactly and it still doesn’t work, make sure to try a different gallery.

Thank you all for reading and best of luck!
Shane

1 Like