Hello. I tried to find answer for my problem on other posts and didn't find anything in this nature.
I managed to randomise the whole gallery once the page loads, but once you choose an option to filter the content, it loads in default database order settings.
I am trying to make it random even when you choose the category.
Thanks a lot! Code and page link bellow.
https://www.erobac .com/copy-of-new-page
$w.onReady(function () { $w("#dataset1").onReady(() => { let items = $w("#gallery1").items; items = shuffle(items); $w("#gallery1").items = items; }); }); export function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } import wixData from 'wix-data'; $w.onReady(() => { $w("#sveicon1").hide() $w("#line1ex").hide() $w("#line4").hide() $w("#line5").hide() $w("#logotipibutton1").hide() $w("#logotipibutton2").hide() $w("#webbanneri1").hide() $w("#webbanneri2").hide() $w("#sveicon1").onClick(() => { // all button $w("#grafickidizajnbutton1").show() $w("#grafickidizajnbutton2").hide() $w("#oslikavanjevozilabutton1").show() $w("#oslikavanjevozilabutton2").hide() $w("#fotomanipulacijebutton1").show() $w("#fotomanipulacijebutton2").hide() $w("#logotipibutton1").hide() $w("#logotipibutton2").hide() $w("#webbanneri1").hide() $w("#webbanneri2").hide() $w("#sveicon1").hide() $w("#sveicon2").show() $w("#line1ex").hide() $w("#line4").hide() $w("#line5").hide() $w("#dataset1").setFilter(wixData.filter()) }) $w("#grafickidizajnbutton1").onClick(() => { // graficki dizajn button $w("#grafickidizajnbutton1").hide() $w("#grafickidizajnbutton2").show() $w("#oslikavanjevozilabutton1").show() $w("#oslikavanjevozilabutton2").hide() $w("#fotomanipulacijebutton1").show() $w("#fotomanipulacijebutton2").hide() $w("#logotipibutton1").show() $w("#logotipibutton2").hide() $w("#webbanneri1").show() $w("#webbanneri2").hide() $w("#sveicon1").show() $w("#sveicon2").hide() $w("#line1ex").show() $w("#line4").show() $w("#line5").show() let filter = $w("#grafickidizajnbutton1").label $w("#dataset1").setFilter(wixData.filter() .eq('tag', filter) ) }) $w("#oslikavanjevozilabutton1").onClick(() => { // oslikavanje vozila button $w("#grafickidizajnbutton1").show() $w("#grafickidizajnbutton2").hide() $w("#oslikavanjevozilabutton1").hide() $w("#oslikavanjevozilabutton2").show() $w("#fotomanipulacijebutton1").show() $w("#fotomanipulacijebutton2").hide() $w("#logotipibutton1").hide() $w("#logotipibutton2").hide() $w("#webbanneri1").hide() $w("#webbanneri2").hide() $w("#sveicon1").show() $w("#sveicon2").hide() $w("#line1ex").hide() $w("#line4").hide() $w("#line5").hide() let filter = $w("#oslikavanjevozilabutton1").label $w("#dataset1").setFilter(wixData.filter() .eq('tag', filter) ) }) $w("#fotomanipulacijebutton1").onClick(() => { // fotomanipulacije button $w("#grafickidizajnbutton1").show() $w("#grafickidizajnbutton2").hide() $w("#oslikavanjevozilabutton1").show() $w("#oslikavanjevozilabutton2").hide() $w("#fotomanipulacijebutton1").hide() $w("#fotomanipulacijebutton2").show() $w("#logotipibutton1").hide() $w("#logotipibutton2").hide() $w("#webbanneri1").hide() $w("#webbanneri2").hide() $w("#sveicon1").show() $w("#sveicon2").hide() $w("#line1ex").hide() $w("#line4").hide() $w("#line5").hide() let filter = $w("#fotomanipulacijebutton1").label $w("#dataset1").setFilter(wixData.filter() .eq('tag', filter) ) }) $w("#logotipibutton1").onClick(() => { // logotipi button $w("#grafickidizajnbutton1").show() $w("#grafickidizajnbutton2").hide() $w("#oslikavanjevozilabutton1").show() $w("#oslikavanjevozilabutton2").hide() $w("#fotomanipulacijebutton1").show() $w("#fotomanipulacijebutton2").hide() $w("#logotipibutton1").hide() $w("#logotipibutton2").show() $w("#webbanneri1").show() $w("#webbanneri2").hide() $w("#sveicon1").show() $w("#sveicon2").hide() let filter = $w("#logotipibutton1").label $w("#dataset1").setFilter(wixData.filter() .eq('tag2', filter) ) }) $w("#webbanneri1").onClick(() => { // web banneri button $w("#grafickidizajnbutton1").show() $w("#grafickidizajnbutton2").hide() $w("#oslikavanjevozilabutton1").show() $w("#oslikavanjevozilabutton2").hide() $w("#fotomanipulacijebutton1").show() $w("#fotomanipulacijebutton2").hide() $w("#logotipibutton1").show() $w("#logotipibutton2").hide() $w("#webbanneri1").hide() $w("#webbanneri2").show() $w("#sveicon1").show() $w("#sveicon2").hide() let filter = $w("#webbanneri1").label $w("#dataset1").setFilter(wixData.filter() .eq('tag2', filter) ) }) });
delete this ) (in the end, see below in red):
function filterData() { $w("#dataset1").setFilter(wixData.filter().eq('tag2', filter)).then(bindData); })
And make sure every opening parenthesis has it closing one.
Basically what you need is something like this:
Disconnect the gallery from the dataset on the editor (we will bind it via code only);
import wixData from 'wix-data';//This line must be at the top of the page code async function bindData(){ const itemsRetrival = await $w('#dataset1').getItems(0,1000); const items = itemsRetrival.items; for (let i = items.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [items[i], items[j]] = [items[j], items[i]]; } //map your data field keys to gallery items keys: $w('#gallery1').items = items.map(e => ({src: e.image, link: e.link, title: e.title})); } $w.onReady(() => { $w('#dataset1').onReady(bindData); }) //call the filterData inside onClick handler or whenever you wish: function filterData(){ //create the filter as you did, then: $w("#dataset1").setFilter(wixData.filter().eq('tag2', filter)).then(bindData); }