TQM5 Posted September 2, 2016 Share Posted September 2, 2016 On a “York” template [index] page, I use jQuery {Header Code Injection} to modify the URL of a [Page] link on that [index], allowing me to effectively add a [Link] to an [index] with a photo background that is displayed with the rest of the content on the [index]. The code works fine when the [index] loads or is hard-refreshed by the browser. It does not work after Ajax is used to soft-refresh only the [index] page content and not the <head>, <footer>, or other surrounding elements. This happens consistently when users navigate around the site. Squarespace notes this Ajax usage in the “York” template docs, specifying it cannot be removed. (See: https://support.squarespace.com/hc/en-us/articles/218212297-York-structure-and-style#toc-page-loading) My question: How do you detect an [index] Ajax reload in Squarespace and subsequently re-run {Header/Footer Code Injection} using jQuery (or an alternate method)? For clarity when talking about traditional web and Squarespace features simultaneously: “Squarespace proper names "[ Squarespace page types ]{ Squarespace settings }< Standard HTML > Link to comment
digitalfreelancer Posted September 5, 2016 Share Posted September 5, 2016 Hi, the only way I can see (I'd love it if someone can suggest a better way) is to disable the ajax loading. A massive thank you to Jason Barone for pointing this out on Twitter: Add this to code injection footer. <script>window.Template.Constants.AJAXLOADER = false;</script> Hope that helps. It helped me! Although I do miss the quick, smooth page loading Andrew Squarespace Expert Link to comment
olesund Posted September 11, 2016 Share Posted September 11, 2016 This works, but yes, I wish there was a way to keep the smooth loading. Link to comment
XaQQhcQtEhfdzDvpDdQb Posted September 11, 2016 Share Posted September 11, 2016 This is very easy to solve. Simply modify the AjaxLoader prototype to add an additional custom init function right along side of where Squarespace runs their own block init. This assumes you've bound some sort of custom object that holds your init function(s). Sometimes to better to use some sort of custom event emitter for this, but that would be some additional dev. This seems much easier. window.onload = function() { this.AjaxLoader.prototype.initializeSqsBlocks = function () { window.SQS.Lifecycle.init(); console.log( "Foo!" ); window.CUSTOM.YourCustomInitFunction(); } }; The end result is that when the ajaxloader fires, it will trigger the initializeSqsBlocks init as usual, which you've now hijacked to add your own additional init function. --Jason BaroneFounder at Squarefront and Talk Squarespace. Host of Talk Squarespace Live Code and Talking Squarespace.Designer, developer, creator of all things Squarespace. Link to comment
TQM5 Posted September 15, 2016 Author Share Posted September 15, 2016 Blunt but effective for manually disabling Ajax on Squarespace templates that do not otherwise give you the option to do so (which, as of September 2016 are York, Artesia, Harris, Lange, Jasper, or Shibori). Link to comment
TQM5 Posted September 15, 2016 Author Share Posted September 15, 2016 Thanks for your help—this solves the problem. Is there any difference in result whether this runs in the Header, Footer, or per-page code injection? Link to comment
TQM5 Posted September 26, 2016 Author Share Posted September 26, 2016 As noted in the original question some newer themes do not allow Ajax loading do be disabled via the Squarespace Style Editor (as of September 2016). From the Squarespace docs: Unlike other templates, Ajax can’t be disabled for York, Artesia, Harris, Lange, Jasper, or Shibori. Source: https://support.squarespace.com/hc/en-us/articles/218212297-York-structure-and-style#toc-page-loading Link to comment
TQM5 Posted September 26, 2016 Author Share Posted September 26, 2016 As of September 2016 this appears to be the case. The original answer now generates this error in the console: TypeError: undefined is not an object (evaluating 'this.AjaxLoader.prototype') Link to comment
TQM5 Posted September 26, 2016 Author Share Posted September 26, 2016 This re-solves the problem. Accepted after the original answer's solution was rendered moot by Squarespace changes to site-bundle.js, per octopus' comment. Link to comment
TQM5 Posted October 17, 2016 Author Share Posted October 17, 2016 Thanks for the heads up and the ultimately correct answer! Link to comment
therobhayes Posted March 14, 2017 Share Posted March 14, 2017 @octopus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template. In my header I am injecting: <style> .tweak-show-footer .site-footer { display: none; } </style> <div class='footer'> <a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png"> </div> Link to comment
therobhayes Posted March 14, 2017 Share Posted March 14, 2017 @octopus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template. In my header I am injecting: <style> .tweak-show-footer .site-footer { display: none; } </style> <div class='footer'> <a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png"> </div> Link to comment
therobhayes Posted March 14, 2017 Share Posted March 14, 2017 @octopus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template. In my header I am injecting: <style> .tweak-show-footer .site-footer { display: none; } </style> <div class='footer'> <a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png"> </div> https://carvelcreative.squarespace.com/ Link to comment
therobhayes Posted March 14, 2017 Share Posted March 14, 2017 @octupus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template. If I understand the code above - drop window.addEvent... in the header code injection between , and place all of your header code to be injected where it says "// do stuff". Am I on the right track there? If so, I have tried that to no avail. In my header I am injecting: <style> .tweak-show-footer .site-footer { display: none; } </style> <div class='footer'> <a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png"> </div> Any guidance on how to make this work? URL for reference: https://carvelcreative.squarespace.com/ Thanks Link to comment
therobhayes Posted March 15, 2017 Share Posted March 15, 2017 Gotchya - applies to JS injections only. Thanks Link to comment
therobhayes Posted March 16, 2017 Share Posted March 16, 2017 @octopus - I have figured out a work around for my comment above. But I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely <script> window.addEventListener("mercury:load", function(){ $(window).load(function() { }); function show() { console.log('inside show'); $('.loader').delay(1000).hide(); $('body').fadeIn(); }; setTimeout(function(){ $(".loader").fadeOut("slow"); }, 3000 ); }); </script> https://carvelcreative.squarespace.com/ Link to comment
therobhayes Posted March 16, 2017 Share Posted March 16, 2017 I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely <script> window.addEventListener("mercury:load", function(){ $(window).load(function() { }); function show() { console.log('inside show'); $('.loader').delay(1000).hide(); $('body').fadeIn(); }; setTimeout(function(){ $(".loader").fadeOut("slow"); }, 3000 ); }); </script> Link to comment
therobhayes Posted March 16, 2017 Share Posted March 16, 2017 I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely <script> window.addEventListener("mercury:load", function(){ $(window).load(function() { }); function show() { console.log('inside show'); $('.loader').delay(1000).hide(); $('body').fadeIn(); }; setTimeout(function(){ $(".loader").fadeOut("slow"); }, 3000 ); }); </script> Link to comment
therobhayes Posted March 16, 2017 Share Posted March 16, 2017 I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely <script> window.addEventListener("mercury:load", function(){ $(window).load(function() { }); function show() { console.log('inside show'); $('.loader').delay(1000).hide(); $('body').fadeIn(); }; setTimeout(function(){ $(".loader").fadeOut("slow"); }, 3000 ); }); </script> Link to comment
therobhayes Posted March 16, 2017 Share Posted March 16, 2017 I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely <script> window.addEventListener("mercury:load", function(){ $(window).load(function() { }); function show() { console.log('inside show'); $('.loader').delay(1000).hide(); $('body').fadeIn(); }; setTimeout(function(){ $(".loader").fadeOut("slow"); }, 3000 ); }); </script> Link to comment
barrcodes Posted July 11, 2017 Share Posted July 11, 2017 Jason, thank you for taking the time to respond. It looks like the architecture has changed, causing this to fail. There is no window.AjaxLoader, and the only reference to SQS I can find is Y.SQS, which has no Lifecycle object. I realize this answer was given several months ago, how can we hijack the ajax loader now? And what can we do to future-proof our solution? Link to comment
willryan042 Posted July 15, 2017 Share Posted July 15, 2017 I'm also looking for a solution to this problem. It seems disabling Ajax loading in the style editor solves the problem, but I'd rather not do that as I have some lengthy image-heavy pages where Ajax loading seems like it'd be beneficial. Link to comment
digitalfreelancer Posted July 17, 2017 Share Posted July 17, 2017 Folks, this is the answer that currently works for me, as provided by @Octopus. <script> document.addEventListener('DOMContentLoaded', init); window.addEventListener('mercury:load', init); function init(){ // javscript goes here } </script> Andrew -Digital Freelancer Link to comment
raglan Posted December 15, 2017 Share Posted December 15, 2017 Thanks Andrew, this worked a charm for me on the Clay template! I used it to add the same Additional Info to every product. Link to comment
SirTophamSmack Posted December 18, 2018 Share Posted December 18, 2018 I've worked out a solution for this that works in December 2018. The solution is a little inelegant, but effective. I'm using Mutation Observers to see when the title of a page changes and re-running my JS when it sees that happen. Your code gets put into this twice: once to call it on page load, and next to call it inside the Mutation Observer. There may be better ways to accomplish this, so if you can improve on this I'd be curious to see what you do. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function() { var dom_observer = new MutationObserver(function(mutation) { // YOUR CODE HERE }); var container = document.querySelector('title'); console.log(container); var config = { attributes: true, childList: true, subtree: true, characterData: true }; dom_observer.observe(container, config); }); </script> <script> // YOUR CODE HERE </script> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.