Go to a random page from a list of 100

Site URL: https://watermelon-eagle-9jge.squarespace.com/config/pages

I am trying to code a button on the header of each page of my SquareSpace site. When clicked the idea is to send the viewer to any one of 100 pages on the site randomly. The reason for this is because the project for the UK's Medical Research Council consists of 100 contributors commenting on the theme 'A Picture of Health'. Rather than provide 100 separate links I'd like the viewer to discover the pages randomly. Rather like flipping the pages of a picture book. So the code would generate a random number from 1 to 100 then concatenate the number with text and send the viewer to a SquareSpace page. For example the user may go to 'page_001.html' or 'page_100.html' or any page within this range. I'm familiar with coding although by no means an expert. Does anyone have any suggestions?

4 hours ago, piranesi said:

Site URL: https://watermelon-eagle-9jge.squarespace.com/config/pages

I am trying to code a button on the header of each page of my SquareSpace site. When clicked the idea is to send the viewer to any one of 100 pages on the site randomly. The reason for this is because the project for the UK's Medical Research Council consists of 100 contributors commenting on the theme 'A Picture of Health'. Rather than provide 100 separate links I'd like the viewer to discover the pages randomly. Rather like flipping the pages of a picture book. So the code would generate a random number from 1 to 100 then concatenate the number with text and send the viewer to a SquareSpace page. For example the user may go to 'page_001.html' or 'page_100.html' or any page within this range. I'm familiar with coding although by no means an expert. Does anyone have any suggestions?

You should enable site wide password so we can have a look

Thanks for your observation bangank36. The 100 pages containing contributors images on the theme 'A Picture of Health' are not yet in place. I am presently required to produce just a prototype with 5 pages only. (One landing page and 4 contributor's image pages). I intend to put the random link in the video you see at the top of my test page.

Password. it is now magic

The site is not yet published and is presently a free 14 day trial which has another 5 days to run.

Just the single word 'magic' is the password

If the randomly generated URL is attached to a button then I can use it in several places within a page if necessary. I hope this makes sense.

Here is a shot at a solution. Create a page, add a button block. Get the block id of the button block. For urlPrefix set it to '/page_'.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  ( ( ) => {
  
    /*
    
      begin button block url random
      
      Version       : 0.2.0
      
      SS Versions   : 7.1, 7.0
      
      Copyright     : 2021-2024 Thomas Creedon
                      
                      Tom's Web Consulting < http://www.tomsWeb.consulting/ >
      
      */
      
    // be sure to set your button block url to the format #your-hash-here
    
    const buttonUrl = '[ enter button block url here between single quotes replacing square brackets ]';
    
    const urlPrefix = '[ enter url prefix here between single quotes replacing square brackets ]';
    
    const minNumber = 1;
    
    const maxNumber = 100;
    
    const zeroPadPlaces = 3;
    
    // do not change anything below, there be the borg here
    
    const callback = ( ) => {
    
      const selector = `.sqs-block-button-element[ href="${ buttonUrl }" ]`;
      
      let r = Math.floor (
      
        Math.random ( )
        
        *
        
        ( maxNumber - minNumber + 1 )
        
        +
        
        minNumber
        
        );
        
      if ( zeroPadPlaces )
      
        r = String ( r ).padStart ( zeroPadPlaces, '0' );
        
      const url = urlPrefix + r;
      
      document
      
        .querySelector ( selector )
        
        .setAttribute ( 'href', url );
        
      };
      
    document
    
      .addEventListener ( 'DOMContentLoaded', callback );
      
    } ) ( );
    
    /* end change button url to random page */
    
  </script>

Let us know how it goes.

Thanks Creedon. I will give that a try. I'm so grateful for your suggestion.

How do you get the block ID of a button?

4 hours ago, PriscillaMcGreer said:

How do you get the block ID of a button?

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

Thanks so much!

On 6/27/2021 at 1:51 PM, creedon said:

'/page_'

Where is urlPrefix? The link?

The URL prefix is whatever you want it to be. For example your pages could be something like...

/page_001

/page_002

/page_003

/page_004

...so the prefix is /page_

If your pages don't follow this kind of pattern then you'd need different code. Or, you could map the /page_nnn pages to other URLs via SS's URL Mapping feature.

On 2/4/2023 at 10:59 PM, creedon said:

The URL prefix is whatever you want it to be. For example your pages could be something like...

/page_001

/page_002

/page_003

/page_004

...so the prefix is /page_

If your pages don't follow this kind of pattern then you'd need different code. Or, you could map the /page_nnn pages to other URLs via SS's URL Mapping feature.

@creedon Would you be able to help with code for where each post has a specific url slug? We're not using numbers; we use words. I have the list of them all, but I don't know how to adapt the code for it 🙂

On 6/7/2023 at 3:27 AM, diavaldiablo said:

I have the list of them all

Are your URLs going to be something like the following?

/first

/second

/third

On 6/7/2023 at 8:43 PM, creedon said:

Are your URLs going to something like the following?

/first

/second

/third

@creedon Yep, structure is like:

/collection-name/url-example
/collection-name/another-url
/collection-name/yet-another-url

On 6/7/2023 at 3:27 AM, diavaldiablo said:

Would you be able to help with code for where each post has a specific url slug?

This requires the business plan or above.

Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Add element url string random.html to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

Alternately if you want a site-wide effect add the code to Website > Pages > Website Tools > Code Injection > FOOTER..

Let us know how it goes.

39 minutes ago, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<script>

  $( ( ) => {
  
    /*
    
      begin button url string random
      
      Version       : 0.1.0
      
      SS Version    : 7.1
      
      Dependencies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    // enter button block id without the #
    
    let buttonBlockId = '[enter button block id here between single quotes replacing square brackets]';
    
    const urlPrefix = '[enter url prefix here between single quotes replacing square brackets]';
    
    const strings = [
    
      /*
      
        following is an example string line. copy the example string line below
        and paste after the example string line. remove the double forward
        slash from before the example string line. repeat for as many strings
        you want to randomly choose from. this has been done once initially
        
        */
        
      // 'an example string',
      
      '[enter string here between single quotes replacing square brackets]',
      
      ];
      
    // do not change anything below, there be the borg here
    
    const i = Math.floor ( Math.random ( ) * strings.length );
    
    const selector = `#${ buttonBlockId } a`;
    
    const string = strings [ i ];
    
    const url = urlPrefix + string;
    
    $( selector )
    
      .attr ( 'href', url );
      
    // end button url string random
    
    } );
    
  </script>

Let us know how it goes.

AMAZING. Thank you so much! I've been trying to do this for two years!

1 hour ago, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<script>

  $( ( ) => {
  
    /*
    
      begin button url string random
      
      Version       : 0.1.0
      
      SS Version    : 7.1
      
      Dependencies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    // enter button block id without the #
    
    let buttonBlockId = '[enter button block id here between single quotes replacing square brackets]';
    
    const urlPrefix = '[enter url prefix here between single quotes replacing square brackets]';
    
    const strings = [
    
      /*
      
        following is an example string line. copy the example string line below
        and paste after the example string line. remove the double forward
        slash from before the example string line. repeat for as many strings
        you want to randomly choose from. this has been done once initially
        
        */
        
      // 'an example string',
      
      '[enter string here between single quotes replacing square brackets]',
      
      ];
      
    // do not change anything below, there be the borg here
    
    const i = Math.floor ( Math.random ( ) * strings.length );
    
    const selector = `#${ buttonBlockId } a`;
    
    const string = strings [ i ];
    
    const url = urlPrefix + string;
    
    $( selector )
    
      .attr ( 'href', url );
      
    // end button url string random
    
    } );
    
  </script>

Let us know how it goes.

What would I need to replace the button block ID with to add this to the Header button, too?

On 6/9/2023 at 1:50 PM, diavaldiablo said:

What would I need to replace the button block ID with to add this to the Header button, too?

I've updated my cited code to make it more general. You now have to supply the full selector to the element you want update the URL (href).

If you want to change multiple elements you could duplicate the code and change the settings in the second piece of code.

Let us know how it goes.

On 6/27/2021 at 3:51 PM, creedon said:

Here is a shot at a solution. Create a page, add a button block. Get the block id of the button block. For urlPrefix set it to '/page_'.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      begin change button url to random page
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    // enter button block id without the #
    
    const buttonBlockId = '[enter button block id without the # here between single quotes]';
    
    const urlPrefix = '[enter url prefix here between single quotes]';
    
    // do not change anything below, there be the borg here
    
    let r = Math.floor ( Math.random ( ) * 100 );
    
    r = String ( r ).padStart ( 3, '0' );
    
    const url = urlPrefix + r;
    
    $( '#' + buttonBlockId + ' a' ).attr ( 'href', url );
    
    } );
    
    /* end change button url to random page */
    
  </script>

Let us know how it goes.

When I use this code, the button just links to what I replace the '/page_' with in the button settings... doesn't seem to be reacting to the code in advanced settings at all.

1 hour ago, spspsp said:

When I use this code, the button just links to what I replace the '/page_' with in the button settings... doesn't seem to be reacting to the code in advanced settings at all.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

On 6/9/2023 at 8:44 PM, creedon said:

Add the following to Settings > Developer Tools > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Add element url string random.html to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

hi, this seems to be exactly what i need, but having (i thought) followed the instructions, it's not yet working for me.

here's the page ... https://lifeurge.com/wordsick

the random button seems to refresh the page on being clicked, but does not take me to any of the pages i thought i had set up

i have '/page' as the urlPrefix, and '1', '2', and '3' as the strings, 

hopefully you can see, any idea what i am doing wrong?

many thanks, simon

6 hours ago, simonnowis said:

having (i thought) followed the instructions, it's not yet working for me.

Use the following for selector.

#block-yui_3_17_2_1_1715172771641_10176 a

Let us know how it goes.

:)) that works!

thank you so much for your quick and very helpful reply :))

9 hours ago, creedon said:

Use the following for selector.

#block-yui_3_17_2_1_1715172771641_10176 a

 may i ask where the additional ' a' at the end comes from? (or how you knew to add it). this is the ID returned by the ID finder ...

thank you again for your help

all the best, simon

20 minutes ago, simonnowis said:

may i ask where the additional ' a' at the end comes from? (or how you knew to add it).

The selector constant in the context of my code is based on a CSS selector which is like a path to a particular element in the page. Not only do you need the block ID which Squarespace Finder ID provides but additional info to the child element within the block that we need to manipulate.

I know how to target the element of interest because I know about HTML and CSS.

I might note in a future version of my code, to help folks out, that you need to know HTML and CSS to be able to target the appropriate element.

I used some web specific jaron so you may want to look the terms up for a deeper understanding.

thank you :))

so in essence, 'buttonBlockId' in the simpler code, is not exactly the same as the 'selector' in the more advanced version?

if i now make changes on the page that has the random button, will this impact the functionality of the code?

thank you again for your help