Change Button Link URL based on time

Site URL: https://www.willkonitzer.com

Hi,

I have a button on my website "Listen now" where I'd like the target url to change pending on the time of day. Every Friday from 6pm-7pm CST I want it to point to website B, while at all other times I want it to point to website A.

What is the best way to achieve this? I was thinking some javascript code, but I'm not sure how to apply it within the squarespace design framework.

If someone is able to provide some pointers, that would be much appreciated.

-Will

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

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

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

<script>

  $( ( ) => {
  
    /*
    
      change button block url on Fridays 6 - 7 PM CST & CDT
      
      Version      : 0.2d0
      
      SS Versions  : v7.0, 7.1
      
      Dependancies : jQuery
      
      Note         : this code assumes there is only one button block on the
                     page
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const url = '[enter alternate button block url here between quotes]';
    
    // do not change anything below, there be the borg here
    
    const d = new Date ( );
    
    // first friday after time change to CDT 2021 various times
    
      // d = Date.parse ( '19 Mar 2021 17:59:59 CDT' ); d = new Date ( d );
      
      // d = Date.parse ( '19 Mar 2021 18:00:00 CDT' ); d = new Date ( d );
      
      // d = Date.parse ( '19 Mar 2021 18:59:59 CDT' ); d = new Date ( d );
      
      // d = Date.parse ( '19 Mar 2021 19:00:00 CDT' ); d = new Date ( d );
      
    // first friday after time change to CST 2021 various times
    
      // d = Date.parse ( '05 Nov 2021 17:59:59 CST' ); d = new Date ( d );
      
      // d = Date.parse ( '05 Nov 2021 18:00:00 CST' ); d = new Date ( d );
      
      // d = Date.parse ( '05 Nov 2021 18:59:59 CST' ); d = new Date ( d );
      
      // d = Date.parse ( '05 Nov 2021 19:00:00 CST' ); d = new Date ( d );
      
    const dayOfWeekNumber = d.getUTCDay ( ) + 1;
    
    const hour = d.getUTCHours ( );
    
    let utcData = {
    
      false : { // standard time
      
        dayOfWeek : 7,
        
        hour : 0
        
        },
        
      true : { // daylight savings time
      
        dayOfWeek : 6,
        
        hour : 23
        
        }
      }
      
    utcData = utcData [ d.isDST ( ) ];
    
    if ( dayOfWeekNumber != utcData.dayOfWeek ) return;
    
    if ( hour != utcData.hour ) return;
    
    $( '.sqs-block-button a' )
    
      .attr ( 'href', url );
      
    } );
    
  </script>

Let us know how it goes.

@creedon thanks I will give this a go 🙂

I think your if statement only needs "23" in it though - at the moment the link will change from 6-8pm CST I believe.

I think you are right! My bad.

I have updated my code.

It is no fun working with time in code! 😀

This updated code should work OK for CDT until November when we fall back. To make it work then you'd change 23 to 0. Better yet a new version of the code would take care of the time change itself. Not sure when/if that will happen but I have some time! 🙂

There is one more improvement that comes to mind. Currently the code runs when the page is loaded. Which will probably work for a majority of the cases. But what happens if someone loads the page, walks away, and then come back to it sometime later? Well they might have a stale button. It might be better to run the code when the button is clicked.

I also left in some commented code for testing in case anyone is using the console and debugging. You can put a breakpoint after the date is first gotten, then override with the commented code to test the date/time.

How did your test go?

I have updated the code again. It now handles CST & CDT. I found an isDST method that has been added to Date either by SS or one of the libraries they use.

@creedonAppreciate the help here, but I could never get it to work correctly.. Instead I now just have the link pointed to a sub website which runs a php script and does a redirect to the correct place. If I get some time I'll try out your solution again.