[Answered] Conditional Elements

Ask the community
, ,
1

Hey guys. This is a bit of an advanced question. I’ll try to describe what I’m intending to do. Now I don’t know if it is possible with Wix. The idea is coming up from other stuff I program where I can do something like that.

I’m wanting to make a collection of parameters, maybe in a table, which will effect specific site elements. The first ‘test’ I’ll be trying to make is show a specific image I place in the header. When shown, it will link to a page. The thing is, I don’t want it shown always. The link is to a specific page I only need to show once or twice per month. I don’t want to keep adding/removing the image to the header. I prefer setting some value ‘true/false’.

Looking into the code, I think I could add a ‘wixData.query’ to a data collection ‘site_settings’ and then store that in something I can reference anytime (like a vuex store, if it is not already possible). Then with the ‘$w.Element’ I could get it. Then I would perhaps be able to hide it too. But, hidden elements are not the same as not rendered.

So as you may read above, I have a rough idea of steps I could take, but has someone a different approach?

Thanks for the input.

2

Hi Edgar Koster ,
Welcome to Wix Code :slight_smile:
I like your suggestion, I would approach it like this:

  1. Creating a Boolean field type in Database collection.
  2. Adding a dataset to the page and connect it the the Database collection
  3. Adding a Checkbox element to page and check in properties “Hidden on load”
  4. Connect the Checkbox to the dataset and the boolean field.
  5. In code:
$w.onReady(function () {
	$w('#yourDataset').onReady(() => {
		 if ($w('#yourCheckBox').checked) {
		 	$w('#yourImage').show();
		 }
	});
});

Good luck!

3

Hi Roi. Thanks for the tip. I will try this out tonight. It seems doable and straight forward. When that works, I’ll try making it something system wide so you don’t need to add the same dataset each time. I’ll post my results here.

4

Did some fiddling and have this running. I don’t like non used elements so I skipped the checkbox, sorry Roi. What I have done now is

import wixData from ‘wix-data’;
$w.onReady(function () {
// Get Site Settings and adjust site accordingly
wixData.query(“site_settings”)
.eq(“setting_code”, “venture_the_trails”)
.find()
.then((oSiteSettings) => {
if (!oSiteSettings.items[0].setting_sos) {
$w(‘#image3’).hide();
}
});
});

So what I did was place this code in the ‘site code’. I bet, I’m going to get issues with having ‘image3’ on a different page, but we’ll see about that. Anyway, I query a ‘site_settings’ table for a row where my ‘setting_code’ is going to be ‘venture_the_trails’ (still looking for best practice on data structure). Then if the column ‘setting_sos’ is ‘false’ I hide the image.

So thanks for you help. I do have a new question now (two) but will post them else where as not to pollute this thread.