0

I have built a Squarespace site using a template that has a unique masonry type gallery - https://wexley-demo.squarespace.com/ . This template was chosen almost exclusively because of this gallery layout, but otherwise has several drawbacks, and I have essentially rebuilt the site from scratch. I am not in developper mode, so keep in mind I have limited access to the code - I can only add code to the header, on the page (however, not in the case of the gallery), and in the footer but only sitewide as a code block. I am ideally looking for a solution to this problem that works with only adding code in the header.

The gallery that you'll see previewed at the URL above has an unfortunate problem in that the default action for clicking on a thumbnail is to open a lightbox of sorts - you cannot, as opposed to most Squarespace "Gallery" type pages, assign a hyperlink to each thumbnail. Note that you can set this "Clickthrough URL" attribute through the sqs panels, but by default, this will be ignored and only open a lightbox.

For our site, it is critical that these thumbnails send you to the projects page on click. To achieve this, the following script (found from another sqs user, ghostcat) is included in the header:

<script>
  var currentPageBaseURL=window.location.href.split("?")[0];
   Y.on("domready",function(e){
   Y.io(currentPageBaseURL+"?page=1&format=json-pretty", {
     on:{success: jsonLoaded}
  });
  function jsonLoaded(err,data){
  try{
   var jsonResponse = Y.JSON.parse(data.responseText);
   var items=jsonResponse.items
   Y.all("#thumbList .thumb, #galleryWrapper .slide").each(function(e){
     var thumbId=this.getAttribute("data-slide-id");
     for(var i=0;i<items.length;i++){
       if(thumbId==items[i].id && items[i].clickthroughUrl){
         this.setAttribute("data-clickthrough-url",items[i].clickthroughUrl).on("click",function(e){
           e.preventDefault();
           e.stopPropagation();
          window.open(this.getAttribute("data-clickthrough-url"),'_self');
         })
       }
     }
   })
   }catch(e){}
   }
   });
</script>

This code works well - according to the author (ghostcat), it "does an ajax load on the gallery json to get the clickthrough urls and then some DOM manipulation to change the thumb click event" - except that, it requires the website visitor to clear their cache if they have visited the website previously to work properly. So, if a visitor has come to the website project page previously and we added thumbnails since their last visit, these thumbnails will have their default action of opening a lightbox, and only the old thumbnails will work.

I have tried inserting this code into the footer to no avail. I have also tried uploading the script as a .js file, and calling it up on page load. After updating the gallery, I changed the scripts filename and called up a version with the new filename - this did not resolve the issue.

Strangely, the script is not being cached by either Chrome or Safari (on inspection of the resources loading), but clearing the cache before visiting the page always makes it function as intended.

Currently, I have a redirect approach in place where I add the date to the gallery versions URL (i.e. www.website.com/work -> www.website.com/work-041718) and setup a 301 redirect, that works, but appending the galleries URL with a date feels clunky.

Is there any modifications I could make the script / other tactic I can use to resolve this issue?

Happy to clarify in any way possible.

EDIT - I took another look at the inspector, and noticed that an XHR file is being cached. This 'file' contains all of the image attributes that I would set in the panel, including the Clickthrough URL.

It is also found at www.website.com/galery-page?page=1&format=json-pretty

This makes me think that this is the issue as the script is running the functions on this XHR URL.

Maybe this helps find a solution?

paulcook
  • 49
  • 2
  • 11

2 Answers2

1

One probable reason (and assuming your code is in a .js file and not in a script tag in markup). If this file has previously been downloaded by a user and their cache is enabled, the browser will serve up the file it has saved - as opposed to the file from the server - the file will still exist in the request but if you look at the network inspector you should be able to see the file and whether it is from a cached source - typically a cached file will serve up much faster (a few milliseconds) as opposed to a few hundred.

This is solved in most production sites by hashing the file or you could also try using the version tag

The only other thing that comes to mind is by including your javascript within the DOM itself in a script tag although this would introduce some other problems which are likely to occur. This would work because your html file is served up to the client directly from the server and this is typically not cached (although can be). If your code is in a script tag in your markup then you will likely be caching server side and you will need to clear this on the server.

Matthew Brent
  • 1,366
  • 11
  • 23
  • I tried both approaches - a .js file uploaded elsewhere and called up, and inserting the whole script directly in the header within script tags. With the .js file approach, even changing the .js filename completely between updates, the approach fails with new thumbnails. On inspecting the resource loading, the .js is not cached on my browser, and it gets pulled up each time I load the page. I did get Squarespace to clear the server side cache as well to test - still no luck. – paulcook Apr 17 '18 at 16:10
  • Please see my edit above - I believe this is the issue. Any recommendations? – paulcook Apr 17 '18 at 17:14
  • 1
    Judging by the query parameters in the URL `?page=1&format=json-pretty` is serving up the page assets in JSON format. It might be worth logging that json data out and see what you are getting back. If this JSON data is caching theres not much you can do about that - it might be worth talking to squarespace about this. They will have much more knowledge than me. – Matthew Brent Apr 17 '18 at 17:27
  • That seems to be what is happening - JSON data is loading from disk cache. Bummer that this cannot be stopped! – paulcook Apr 17 '18 at 17:28
  • Seems to be fixed - see my answer below. – paulcook Apr 17 '18 at 17:48
0

The script was relying on the JSON-pretty version of the page, found at www.website.com/gallery-page?page=1&format=json-pretty . This was being cached by the browser, and thus, the script was referring to an outdated list of gallery items and clickthrough URLs.

Adding this script (as described here):

var xhr = new XMLHttpRequest();
xhr.open("GET", uriOfCachedPage, true);
xhr.setRequestHeader("Cache-Control", "max-age=0");
xhr.send();

Where uriOfCachedPage = "https://www.website.com/gallery-page?page=1&format=json-pretty", seems to have avoided the caching and solved the problem after limited testing.

paulcook
  • 49
  • 2
  • 11