sambradley Posted February 6, 2021 Share Posted February 6, 2021 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
jpeter Posted February 6, 2021 Share Posted February 6, 2021 (edited) On your booking confirmation page, add the following JS code below. STEPS Add a text block with generic confirmation text. Make sure not to include any other text because our JS code will override it. 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. 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. 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. 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 February 8, 2021 by jpeter Added new BLOCK_ID_SELECTOR to support targeting child elements. Link to comment
sambradley Posted February 7, 2021 Author Share Posted February 7, 2021 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 Link to comment
jpeter Posted February 7, 2021 Share Posted February 7, 2021 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
sambradley Posted February 8, 2021 Author Share Posted February 8, 2021 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
jpeter Posted February 8, 2021 Share Posted February 8, 2021 (edited) @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 February 8, 2021 by jpeter Link to comment
andypage Posted November 3, 2022 Share Posted November 3, 2022 @jpeter thanks for this script. its awesome. i'm curious, how would you edit that to allow for the ability to pass multiple url parameters to a page that edit different blocks? Link to comment
jpeter Posted November 3, 2022 Share Posted November 3, 2022 (edited) 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 December 23, 2022 by jpeter Add support for <a> tags Link to comment
andypage Posted November 21, 2022 Share Posted November 21, 2022 @jpeter you're incredible - thank you! Link to comment
andypage Posted November 21, 2022 Share Posted November 21, 2022 @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
AustinC Posted December 7, 2022 Share Posted December 7, 2022 On 11/21/2022 at 8:42 AM, andypage said: But for some reason I'm not able to get that to work Did you ever get this to work?? I am looking to do the exact same thing. Please help if you got it! Link to comment
jpeter Posted December 23, 2022 Share Posted December 23, 2022 @andypage and @AustinC I updated the code in this comment to support modifying an <a> by specifying a url property that will be used for the <a> tag. Link to comment
andypage Posted January 17 Share Posted January 17 incredible - appreciate you @jpeter! Link to comment
vektren Posted March 14 Share Posted March 14 Hey, is this still working on 7.1? I just cannot seem to get it working. Added the code in <script></script> tags under the advanced section for the page itself, not site-wide. I got the block-id's correctly from inspecting the page. I have added some text to the block for it to load, but nothing is replaced? Are their variables that I need to add to the page? Or is the script (from my understanding) replacing current text in format <h3> etc... ? I am redirecting users from Typeform, with their names, email, and order details in the URL, and just want them to have a personalised order confirmation screen. Link to comment
vektren Posted March 16 Share Posted March 16 For anyone who wants to do this, I got it to work on 7.0 and 7.1. You can pass any number of URL parameters, and the script allows you to push them into a code block: The URL I used for this: https://website.com/ordered?firstname=Jack&order=2545346&email=jack@email.com Log in to your Squarespace account and navigate to the page where you want to display the URL parameters as payload. Click on the page's settings icon and select "Advanced" from the menu. Click on "Code Injection" in the Advanced menu. In the "Header" section of the Code Injection panel, paste the following code: <script> window.onload = function() { const urlParams = new URLSearchParams(window.location.search); const firstName = urlParams.get('firstname'); const order = urlParams.get('order'); const email = urlParams.get('email'); const payloadString = `Thank you, ${firstName}<br/> Here is yout order number: ${order}<br/> And lastly, we will send order updates to the following email address on file: ${email}`; document.getElementById('url-payload').innerHTML = payloadString; } </script> Then on the page, you want to display the payload: In the page editor, add a "Text" block where you want to display the URL payload. In the text block, add the following code: <h1>Your order has been submitted</h1> <p id="url-payload"></p> You can add/change the number of parameters by adding and removing "const parameter = urlParams.get('parameter');" within the Java Script above, and then add it to your payload under PayloadString: by adding ${parameter}. Thanks to everyone that put me on the right path! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment