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 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.

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 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.

Alternately if you want a site-wide effect add the code to Settings > Developer 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.