I struggle to randomize the gallery after filtering.

Ask the community
,
1

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 ) 

         ) 
     }) 

 });
2

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);
}
3

Thanks for helping me.

I must have misunderstood something here. I am not sure how to “map your data field keys to gallery items keys” using the code.

944×706 28 KB

This is my first time even doing something with the code. So far I can kinda understand some simple stuff you see in my code but with help of copy/paste.

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 ]];
}

$w ( ‘#gallery1’ ). items = items . map ( e => ({ src : ‘mainProjectImage’ , link : ‘link’ , title : ‘title’ }));
})

$w . onReady (() => {
$w ( ‘#dataset1’ ). onReady ( bindData );
})

$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 (() => {  // SVE FILTER KLIK 

                $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 () 

                function  filterData () { 

                    $w ( "#dataset1" ). setFilter ( wixData.filter (). eq ( 'tag2' ,  filter )). then ( bindData ); 
                }) 

            $w ( "#grafickidizajnbutton1" ). onClick (() => {  // GRAFICKI DIZAJN FILTER KLIK 

                $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 FILTER KLIK 

                $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 FILTER KLIK 

                $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 FILTER KLIK 

                $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 FILTER KLIK 

                $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 ) 

                ) 
            }) 

        });
4

@robertovukomanovic Remove the last ) from line 12.

5

@jonatandor35 Now I see it tells me where’s the problem. I deleted it but came across another, but this time it’s not showing anything

986×534 179 KB

6

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.

7

I think I will skip this… Can’t manage to do it. It always shows new and new errors.
I’ll use it without random sorting nd instead, use default sorting options.
https://www.erobac .com/

Thanks for your help once again, I am too stupid for this haha