Some useful developer features for Squarespace

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

So, if you make AJAX requests on the pages and get the necessary content, but none of the custom blocks work, and the images do not load, I ask for the habracat.


The whole Squarespace frontend is spinning on YUI , the library is well-documented, but Squarespace uses a lot of its modules, so even for those who write with YUI , it will take time to figure out what's what. Well, I already spent mine in one project and will gladly share it here, maybe it will help someone, and I won’t forget it myself (I won’t get everything done).

All Squarespace built-in 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 of the form "/ yoursite / mainpage? Format = json", then in the response in data.mainContent we get the html-content of the page. When you add this content to the DOM, custom blocks will not work, and images will not load.

1. Ship the images

Immediately and directly, the problem of loading images is solved, because the documentation says this - you just need to “drive” their loader through all the images with the data-image attribute after loading the content:

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

Further, without unnecessary comments, I give functions that will help to initialize some custom blocks. These functions had to be caught from the code, since there is nothing about them in the documentation, neither on answers.squarespace.com , nor on stackoverflow.com .

2. Initialize forms

So, if forms with lightbox are used on the page (they are opened by clicking on the button), then for everything to work 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 the images that open 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 blocks 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. Cards

For pages with maps, 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 is not very relevant to the themes of the previous ones, but still the thing is necessary, since Squarespace does not support Russian. You can end up using Moment.js or similar libraries for reformatting and localization, but why pull too much or write a bike if YUI itself perfectly supports localization? Therefore, I mainly use such a simple solution, where we specify the element classes needed 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 such a decision on the Squarespace platform, I suggest that it be shared in PM or in the comments, I would have added this to the article.