14Sep

Squarespace code injection and page transition, run on script on page reload

Squarespace code injection is a bit limited. You can’t edit the HTML of a template unless if you created your own template from scratch (deploying using FTP). On a couple of different projects, I needed to amend a particular part of a page template in Squarespace websites.

The only available option was to use “code injection” to add CSS and JavaScript to the page.

The issue is Squarespace theme (at least for those two projects I looked at), they have a page transition script on the theme used by my client. This means your JavaScript code injected will run only on the first load, but it won’t be called again when you navigate from pages to pages.
I was stuck a while with this and ended up doing a dirty JavaScript hack. (If you come across something better, please share)

Please note, this page transition is only running when you are viewing of the website URL directly, but not when you are navigating logged into the CMS backend to edits pages.

Squarespace, run injected code after new page loaded

So to track if we change of page, I put a listener event on the navigation (and any other link to internal pages when needed).

Here is an example of the idea I used with jQuery :

$(function() {
    function injectCode() {
        // check you are on the page needed and do what you need
        // your code here
    }

    // run the function on first load of the website
    injectCode();

    // track every time we change of page
    $("body").on('click', ".Header-nav-item", function() {
        setTimeout(function(){
            injectCode();
        }, 500); // add a delay before to run the code again
    });
});

I run the script on the first-page load. And then on every click after a delay to be sure the code is executed after the JavaScript and load of the current page.
This is OK when the elements you are changing are below the fold. In my case, it was the implementation of some image rollover with a title. So it’s not something the user will see right away.

Code injection, be careful not to break the full website

It’s fairly easy to break the full Squarespace, doing an infinite loop does the job. Especially when we play with JavaScript code injection.

Keep in mind your code is called on every page and also in the CMS side, not only in the front-end. So if your code crash one page, it might crash everything front-end and back-end.

I did that, oops […] I stressed for a good 30 minutes until I finally succeeded to amend my code in the CMS loading the page halfway.

In order to avoid this (and develop a bit faster), you can do script includes for your CSS styles and JavaScript. Host those files on your server and serve them from there.

Easy to update. No need to edit and run save in the CMS for every change, and if you break the page you can just change your file without accessing the CMS.

Once you are fully happy, you can copy-paste the code directly into Squarespace CMS.

Hope that can help to save time to some of you. And please share any better idea. 

 

Leave a Reply