Several useful features for the developer under Squarespace

As I wrote earlier , Squarespace offers us a lot of things out of the box, giving us the opportunity to quickly “turn around” and create a blog, gallery, store (though only using Stripe ). You can also easily quickly create a mobile application, since each page (blog, gallery, some kind of custom collection) can be addressed and get an answer in JSON-e. This can also be used when building more serious applications with dynamic content loading. But a lot of functions in Squarespace (loading and resizing images, initialization and operation of embedded markup units, galleries, forms, social network widgets, etc.) work on the client, interacting with the server part, and since the developer part is still in beta, then there is no documentation for their API, no description of the work of built-in functions - you have to go yourself, delving into their code.

So, if you make AJAX requests on the pages and get the necessary content, but nothing from the custom blocks does not work, and the images are not loaded - I ask for a habrak.


The whole Squarespace frontend is spinning on YUI , the library is well documented, but Squarespace uses many of its modules, so even for those who write with YUI , you have to take the time to understand what's what. Well, I have already spent my time in one project and will willingly share it here, maybe it will help someone, and I will not forget myself (I will not manage everything).
')
All embedded Squarespace blocks from which you or the client builds the page are initialized after the page loads. That is, if you request a page with an AJAX request with an address like "/ yoursite / mainpage? Format = json", then in the response in data.mainContent we get the html content of the page. When adding this content to the DOM, custom blocks will not work, and the images will not load.

1. Ship images

Immediately and in the forehead, the problem with downloading images is solved, since the documentation says so - you just need to “run” their content through all images with the data-image attribute after downloading the content:

new Y.Squarespace.Loader({ img: Y.all('img[data-image]') }); 

Further, without undue comments, I provide functions that will help initialize some custom blocks. These functions already had to be caught from the code, since there is nothing about them either in the documentation or on the answers.squarespace.com or on stackoverflow.com .

2. Initialize forms

So, if the page uses lightbox forms (open by clicking on the button), then so that everything works after AJAX, call this function:

 function initFormLightBox() { Y.all('.form-block').each(function () { var h = this; if (h.one(".form-wrapper")) { var b = h.one(".form-wrapper").remove().removeClass("hidden"); h = h.one(".lightbox-handle"); if (!h.getData("lightbox")) { var g = b.cloneNode(!0), d = new Y.Squarespace.Widgets.FormLightbox({ content: g, render: Y.one("body") }); Y.Squarespace.FormRenderingUtils.checkPreSubmit(g); d.on("close", function () { var c = b.cloneNode(!0); d.set("content", c); Y.Squarespace.FormRenderingUtils.checkPreSubmit(c) }, this); h.setData("lightbox", d) } h.detach("click"); h.on("click", function (a) { a.halt(); d.open() }, this) } }); } }); 

3. Images in lightboxes

To initialize images that are expanded in lightboxes, we use the following:

  function initImageLightBox() { Y.all('.image-block-wrapper.lightbox').each(function () { var e = this; if (b = e.one("img[data-image]")) if (b = b.loader) { e.get("parentNode"); b = { content: b.getBareElement() }; if (c = e.getAttribute("data-description")) b.meta = c; e.plug(Y.Squarespace.Lightbox2Plug, { lightboxOptions: b }) } }); } 

4. Galleries, videos

To initialize galleries, Instagram, Flickr, 500px, and video blocks:

  function initGallery() { Y.all(".sqs-block.gallery-block, .sqs-block.flickr-block, .sqs-block.instagram-block, .sqs-block.fivehundredpix-block, .sqs-block.video-block").each(function (b) { Y.Squarespace.GalleryManager.initializeBlock(b) }) } 

5. Maps

For pages with maps we use the following function:

 function initMap() { Y.all(".sqs-block.map-block[data-block-json]").each(function (b) { Y.Squarespace.Rendering.renderMap(b.one(".sqs-block-content"), Y.JSON.parse(b.getAttribute("data-block-json"))) }); } 

For some reason, Squarespace decided that the grayscale filter in Google maps is stylish, and stuck it into the constructor without parameters, so either insert maps through the Code block, or rewrite the standard renderMap () without creating a filter or using your own .

6. Internationalization and formatting of dates on the site

This item does not really relate to the themes of the previous ones, but it’s still a necessary thing, because Squarespace does not support Russian. You can end up using Moment.js or similar libraries for reformatting and localization, but why pull on too much or write a bicycle if YUI itself supports localization? Therefore, I mainly use such a simple solution, where we indicate the classes of elements necessary for reformatting:

 function formatTime() { Y.Intl.add("datatype-date-format", "ru-RU", { "a": ["", "", "", "", "", "", ""], "A": ["", "", "", "", "", "", ""], "b": [".", ".", "", ".", "", "", "", ".", ".", ".", ".", "."], "B": ["", "", "", "", "", "", "", "", "", "", "", ""], "c": "%a, %d %b %Y %k:%M:%S %Z", "p": ["AM", "PM"], "P": ["am", "pm"], "x": "%d.%m.%y", "X": "%k:%M:%S" }); Y.Intl.setLang("datatype-date-format", "ru-RU"); Y.all('time.published').each(function () { var time = new Date(this.getAttribute('datetime')); var format = Y.Date.format(time, {format: "%d %b, %Y"}); this.setHTML(format); } ); Y.all('time.summary-metadata-item--date').each(function () { var time = new Date(this.getAttribute('datetime')); var format = Y.Date.format(time, {format: "%d %b, %Y"}); this.setHTML(format); } ); } 

PS

If someone has accumulated a similar decision on the Squarespace-platform, I suggest sharing it in a personal or in the comments, I would add it to the article.