Jump to content

Is it possible to create personalised pages with data taken from an appended URL?

Recommended Posts

Site URL: https://www.little-loves.co.uk/

Hello!

Wondering if someone can help me with a quick question... Not even sure if this is possible, but here goes...

I'm building a Booking Confirmation page (/booking-confirmation) and the user gets directed here after they have completed by form on page (/booking-form).

The booking form is made using Paperform which handles the redirect, when redirecting it can also append the URL to include data from the form submission. So for instance, if the user's name is Sam then the form can redirect like this: /booking-confirmation?FirstName=Sam

Is there a way to have the Booking confirmation page 'read' any of that data in the URL and display it on the page? So for instance, if we want the text on the confirmation page to say "Thanks for your Booking [First Name]" is there a way to make that happen?

I'm imagining this would involve setting up some kind of tag / dynamic text. Is it even possible?

Thanks in advance!
Sam

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

On your booking confirmation page, add the following JS code below.

STEPS

  1. Add a text block with generic confirmation text. Make sure not to include any other text because our JS code will override it.
  2. Find and add the block id for the text block and add it to the BLOCK_ID variable in the JS code below. For information on how to find the block id value, see this article. Make sure to include the "block-" portion.
  3. To target a child element in the block, update the BLOCK_ID_SELECTOR. The code below looks for an <h3> inside of the block to override. If it doesn't find it, then it'll replace the entire content of the block.
  4. The CONFIRMATION_TEXT variable will be what replaces the content in the text block you created. Feel free to update that. Make sure the text remains in between the quotes.
  5. The PARAMETER_NAME variable is the name of the query parameter that gets added to the URL

Once the steps above are complete, the code will append the PARAMETER_NAME value to the end of the CONFIRMATION_TEXT. 

(function(){
  // Place the id of the text block between the quotes of BLOCK_ID. Should be "block-****".
  // For information on how to get the text block id, see article below,
  // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one
  var BLOCK_ID = '';
  var BLOCK_ID_SELECTOR = 'h3';
  var CONFIRMATION_TEXT = 'Thanks for your Booking, ';
  var PARAMETER_NAME = 'FirstName';
  
  
  /**************************************************************************
   * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   **************************************************************************/
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    BLOCK_ID = BLOCK_ID.replace('#', '');
    var parameterValue = getParameterByName(PARAMETER_NAME);
    var block = document.querySelector('#' + BLOCK_ID);
    var blockSelector = block.querySelector(BLOCK_ID_SELECTOR);
    var element = blockSelector || block;
    if(element && parameterValue){
      element.textContent = CONFIRMATION_TEXT + ' ' + parameterValue;
    }
  }

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

})()

 

Edited by jpeter
Added new BLOCK_ID_SELECTOR to support targeting child elements.
Link to comment
18 minutes ago, sambradley said:

Hi, 

 

Thanks so much for coming back to me.

 

To confirm, should this code be going in to Page Settings > Advanced > PAGE HEADER CODE INJECTION?

 

Thanks in advance,

Sam

Correct. I personally would put it in the footer area and make sure the code is surrounded by <script> tags.

e.g.

<script>
  // Add JS Code Here
</script>

 

Link to comment

Thanks for the fast response.

So just to confirm, I'm working on this page: https://www.little-loves.co.uk/thanksforyourrequest

The block ID for the text we're replacing is #block-c6d10541e56caccb299c (though I've inserted this as 'c6d10541e56caccb299c' is that right)?

And so the code I'm injecting is as follows:

<script>

(function(){
  // Place the id of the text block between the quotes of TEXT_BLOCK_ID.
  // For information on how to get the text block id, see article below,
  // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one
  var TEXT_BLOCK_ID = 'c6d10541e56caccb299c';
  var CONFIRMATION_TEXT = 'Thanks for your Booking';
  var PARAMETER_NAME = 'FirstName';


  
  /**************************************************************************
   * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   **************************************************************************/
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    TEXT_BLOCK_ID = TEXT_BLOCK_ID.replace('#', '');
    var parameterValue = getParameterByName(PARAMETER_NAME);
    var textBlock = document.querySelector('#' + TEXT_BLOCK_ID);
    if(textBlock && parameterValue){
      textBlock.textContent = CONFIRMATION_TEXT + ' ' + parameterValue;
    }
  }

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

})()
  
</script>

To confirm, it doesn't seem to be working just yet. I imagine there's probably something I've missed? Sorry!!

Link to comment

@sambradley I updated my code and description above. It looks like all you're missing is the "block-" portion of the block id. So in your case, the value should be block-c6d10541e56caccb299c.  I also added a 4th variable called BLOCK_ID_SELECTOR to target child elements in the block and I set it to target the <h3> in the block on the /thanksforyourrequest page you created. 

Edited by jpeter
Link to comment
  • 1 year later...

Hey @andypage

You could use the modified code below. It contains a BLOCKS_TO_UPDATE variable that is an array of objects whose property names are similar to the original code I created. The example code below contains 2 objects that will update the block based on the FirstName and Email query parameters in the URL. 

JavaScript

(function(){
  // The BLOCKS_TO_UPDATE variable is an array of objects with properties that will be used to replace content.
  // Place the id of the text block between the quotes of blockId property. Should be "block-****".
  // For information on how to get the text block id, see article below,
  // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one

  var BLOCKS_TO_UPDATE = [
    { 
      blockId: "block-10987654321", 
      blockIdSelector: "h3", 
      text: "Thanks for your Booking, ", 
      parameterName: "FirstName"
    },
    { 
      blockId: "block-1234567890", 
      blockIdSelector: "p", 
      text: "Your email is: ", 
      parameterName: "Email"
    },
    { 
      blockId: "block-987654321", 
      blockIdSelector: "a", 
      url: 'https://google.com',
      text: "Click here: ", 
      parameterName: "url"
    },
  ];
  
  /**************************************************************************
   * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   **************************************************************************/
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    BLOCKS_TO_UPDATE.forEach(item => {
      item.blockId.replace('#', '');
      var parameterValue = getParameterByName(item.parameterName);
      var block = document.querySelector('#' + item.blockId);
      var blockSelector = block && block.querySelector(item.blockIdSelector);
      var element = blockSelector || block;
      if(element && parameterValue){

        if(element.nodeName == 'A' && item.url) {
          element.setAttribute('href', item.url)
        }

        element.textContent = item.text + ' ' + parameterValue;
      }
    });
  }

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
})()

 

Edited by jpeter
Add support for <a> tags
Link to comment
  • 3 weeks later...

@jpeter okay diving deeper into this. Let's say i wanted to dynamically set elements for a button (both the button text and the href)


I'm thinking i would have to do this

     blockId: "block-yui_3_17_2_1_1669044754565_76599", 
      blockIdSelector: "a", 
      link: "google.com", 
      parameterName: "button_link"
    },
      { 
      blockId: "block-yui_3_17_2_1_1669044754565_76599", 
      blockIdSelector: "a", 
      text: "",
      parameterName: "button_text"
    },

 

and then something link this

 

function init(){
    BLOCKS_TO_UPDATE.forEach(item => {
      item.blockId.replace('#', '');
      var parameterValue = getParameterByName(item.parameterName);
      var block = document.querySelector('#' + item.blockId);
      var blockSelector = block && block.querySelector(item.blockIdSelector);
      var element = blockSelector || block;
      if(element && parameterValue){
        element.textContent = item.text + ' ' + parameterValue;
        element.linkContent = item.link + ' ' + parameterValue;
      }
    });
  }

 

But for some reason I'm not able to get that to work

Link to comment
  • 3 weeks later...
  • 3 weeks later...
  • 4 weeks later...

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.