Jump to content

Code to display date/time a page within an Index was last modified?

Go to solution Solved by brandon,

Recommended Posts

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:


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!

Screen Shot 2019-10-11 at 14.55.28.png

Link to comment
  • Solution

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 by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 2 weeks later...
  • 1 year later...
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

image.thumb.png.83923dcfad29fa8a1a2e5c741b6bec81.png

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 plugin
If 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
  • 2 weeks later...

@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!

Link to comment
  • 3 months later...
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 plugin
If 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

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.