SS 7.1 - Is there a way to randomize the order of store products on each load?

I assume you'd need some sorta javascript code to achieve this. If anyone knows the right code, please let me know. Thank you.

3 hours ago, alanx said:

I assume you'd need some sorta javascript code to achieve this. If anyone knows the right code, please let me know. Thank you.

what is your site url

8 minutes ago, bangank36 said:

what is your site url

steven.squarespace.com

1 minute ago, alanx said:

https://steven.squarespace.com/clients

try

document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('.products-flex-container .list-grid');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});

1 minute ago, alanx said:

 

Should I insert this code in Advanced > Code Injection > Header? And are there any opening and closing tags? I'm sorry, I'm a little clueless when it comes to JS code.

add to footer

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('.products-flex-container .list-grid');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

@Beyondspace are you able to help me out as well please

https://adventuresofrico.com/store

Thanks

Rico

22 hours ago, tcrown86 said:

are you able to help me out as well please

https://adventuresofrico.com/store

Thanks

Rico

 

Try changing his code to this

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('.ProductList-grid');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.ProductList-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

7 hours ago, tuanphan said:

Try changing his code to this

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('.ProductList-grid');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.ProductList-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

 

thanks soooo much, worked well. have a great weekend.

@Beyondspace I tried mimicking what you where doing on my site but I seem to be struggling to get it to work. Would you mind giving me a hand as well? 

https://www.tomaro.com/residential

Thanks! 

1 hour ago, triodine said:

@Beyondspace I tried mimicking what you where doing on my site but I seem to be struggling to get it to work. Would you mind giving me a hand as well? 

 

https://www.tomaro.com/residential

 

Thanks! 

Have you tried my above code yet? It should be added on Home > settings > advanced > code injection, choose the footer

23 hours ago, Beyondspace said:

Have you tried my above code yet? It should be added on Home > settings > advanced > code injection, choose the footer

I did but it doesn't seem to be working. I think I am trying to call the wrong thing and i'm struggling to figure out what i'm doing wrong.

If it isn't too much trouble, would you mind looking at my site and letting me know what I need to fill on my site to get it to work? 

6 hours ago, triodine said:

If it isn't too much trouble, would you mind looking at my site and letting me know what I need to fill on my site to get it to work?

This thread is about randomising the order of products in a store, but the link you have provided is for a Gallery, not a store page.

15 hours ago, paul2009 said:

This thread is about randomising the order of products in a store, but the link you have provided is for a Gallery, not a store page.

Wouldn't the logic be the same? Since a gallery is still a list of images similarly to a list of products on a store page? 

7 hours ago, triodine said:

Wouldn't the logic be the same? Since a gallery is still a list of images similarly to a list of products on a store page? 

With your link, you can use the following code

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ramdomGrid = document.querySelector('#block-yui_3_17_2_1_1532378835894_3681 .sqs-gallery.sqs-gallery-design-grid');
    if (ramdomGrid) {
        var gridItems = ramdomGrid.querySelectorAll('.slide');
        for (let i = gridItems.length; i >= 0; i--) {
            ramdomGrid.appendChild(gridItems[Math.random() * i | 0]);
        }
    }
});
</script>

Support me by pressing 👍  or marking as solution if this useful for you