Jump to content

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

Recommended Posts

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, alanx said:

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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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? 

Link to comment
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
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? 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.