alicroft Posted October 11, 2019 Share Posted October 11, 2019 I have a sticky "Last Updated on /Date/ at /Time/" div that I've custom-coded to appear on particular pages of a client's website. Currently, the client needs to go in to the custom code and manually enter the Date and Time whenever they update the page's content. Is it possible to code this so the date and time automatically update whenever the client makes an edit to the page? There are multiple Indexes that will each need their own unique "updated at" box. It's important for the box to be sticky, visible no matter where you are on the page, because the content that gets updated is long; we want to ensure the user doesn't miss the "updated at" date and time. Page example w/ current sticky block: https://veil-test-1.squarespace.com/rva-sa pass: test2019 The code is currently located in the PAGE HEADER CODE INJECTION of the Index Settings, and styled with custom css. I'm open to changing the whole set up if I can make it so the client doesn't have to get into the code at all! Thanks in advance for any and all ideas! brandon 1 Link to comment
Solution brandon Posted October 14, 2019 Solution Share Posted October 14, 2019 (edited) Hey @alicroft. This can be done. It requires a short bit of JavaScript to look for the "updated-at" div, query the page's JSON data, find the latest updated collection for the page (or series of pages in the index page), format the date to your liking, and then write the HTML to the "updated-at" div accordingly. I'd guess it'd take a good dev. and hour or two to write and test an efficient and resilient script to do that (the first half hour to get the "gist" done, then maybe another hour to mess with time formatting, which takes a bit of time without using 3rd-party libs). So yes, it's possible. Having taken a quick look, I think it could be done without you having to refactor your code at all. You could leave it as you have it on the pages you want it to appear, and the code could be set to run on those pages. If you want more info or help, say the word. Edited October 14, 2019 by brandon paul2009, tuanphan, CaseyD and 1 other 4 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
alicroft Posted October 23, 2019 Author Share Posted October 23, 2019 (edited) Thanks so much, @brandon! This is super helpful. I'm going to reach out to my more-experienced-than-me dev friend to see if he can assist in implementing, and if he can't, I'm going to hit you up! Edited October 23, 2019 by alicroft brandon 1 Link to comment
Robilanyo Posted July 19, 2021 Share Posted July 19, 2021 @alicroft I know I'm super late to the party on this post, but... did you figure this out? And if so, would you be able to share the coding? I'm looking to do something very similar. Beyondspace 1 Link to comment
Beyondspace Posted July 19, 2021 Share Posted July 19, 2021 2 hours ago, Robilanyo said: @alicroft I know I'm super late to the party on this post, but... did you figure this out? And if so, would you be able to share the coding? I'm looking to do something very similar. add the json parameter to your url and read the json data as such https://dawidbania.com/joanna-wojciech-weddingday?format=json-pretty Official document View JSON Data — Squarespace Developers Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
alicroft Posted July 28, 2021 Author Share Posted July 28, 2021 @Robilanyo Here's what my developer came up with, and it seems to be holding up. Note this was all done on 7.0. Live page with the below code: https://www.theveilbrewing.com/rva-sa #1 "Enable Ajax Loading" must be turned off for this to work. Located in: Design> Site Styles > Site: Loading #2 Code to be inserted into the Page header, located in: Page > Settings > Advanced > PAGE HEADER CODE INJECTION <script defer> window.Squarespace.onInitialize(Y, function(){ function addZero(i) { i = i < 10 ? "0" + i : i; return i; } function calcUpdatedTime(customDate) { const date2 = new Date(customDate); const displayDate = (date2.getMonth() + 1) + '/' + date2.getDate() + '/' + date2.getFullYear(); const displayPM = date2.getHours() > 11 ? 'PM' : 'AM'; const displayMinutes = addZero(date2.getMinutes()); let displayHours = date2.getHours() > 12 ? (date2.getHours() - 12) : date2.getHours(); if(date2.getHours() == 0) displayHours = 12; const displayTime = displayHours + ':' + displayMinutes + displayPM; return "UPDATED:<br />" + displayDate + "<br />@ " + displayTime; } function createUpdateLinkDiv() { updatedDiv = document.createElement('div'); updatedDiv.setAttribute("id", "updated-at"); updatedLink = document.createElement('a'); updatedLink.setAttribute("id", "updated-link"); updatedLink.setAttribute("href", "#rva-sa-update-note"); updatedDiv.append(updatedLink); document.body.appendChild(updatedDiv); } let myHeaders = new Headers(); myHeaders.append('pragma', 'no-cache'); myHeaders.append('cache-control', 'no-cache'); const myInit = { method: 'GET', headers: myHeaders, }; const url = window.location.href.replace(location.hash,"") + "/?format=json-pretty"; fetch(url, myInit) .then((resp) => resp.json()) .then(function(data) { let recentUpdate = 0; const collections = data.collection.collections; for ( var i = 0; i < collections.length; i++ ) { if(collections[i].urlId.indexOf('beer-list') > -1){ recentUpdate = collections[i].updatedOn; } } createUpdateLinkDiv(); document.getElementById("updated-link").innerHTML = calcUpdatedTime(recentUpdate); }) .catch(function(error) { // If there is any error you will catch it here }); }); </script> #3 You can style the box by targeting #updated-at in your css here:Design > Custom CSS Let me know if you have any questions, I will try to help! Beyondspace 1 Link to comment
sparkybooth Posted November 23, 2021 Share Posted November 23, 2021 Hi, do you know how I might possibly add this to my website? http://www.bestgradphoto.com Link to comment
Beyondspace Posted November 24, 2021 Share Posted November 24, 2021 1 hour ago, sparkybooth said: Hi, do you know how I might possibly add this to my website? http://www.bestgradphoto.com What is your site template version, check it under Help menu Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
sparkybooth Posted November 24, 2021 Share Posted November 24, 2021 My version is 7.1. 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