Note about XHR requests

We do not like unnecessary XHR requests due to amplification of requests. Please consider carefully, if it’s really necessary to create new XHR request. If so, try to cache the results and not to make these requests with every page load.

Below is simplified example how to do it. It works on 3rd generation templates (the principle is same in all templates, also all functions shown below you can use in all templates, limitation is only because of element we are looking for in response) – try to type shoptet.abilities.about.generation in console, you can use it in your script to target specifically. Also try shoptet.config.orderingProcess.step to avoid the request on /kosik/ page.

document.addEventListener('DOMContentLoaded', function() {
    // for example, you want to get heading of box
    // from /kosik/ (cart) page
    if (shoptet.cookie.get('myCustomCookie')) {
        // if cookie already exists,
        // do your stuff with this text
        console.log(shoptet.cookie.get('myCustomCookie'));
    } else {
        shoptet.ajax.makeAjaxRequest(
            '/kosik/',
            shoptet.ajax.requestTypes.get,
            '',
            {
                'success': function(response) {
                    // get payload from request
                    var payload = response.getPayload();
                    // but payload is a string, we need to create HTML document from it
                    // let's use our helper function to do that
                    var cartContent = shoptet.common.createDocumentFromString(payload);
                    var helpBoxHeading = cartContent.querySelector('.checkout-box-wrapper h4').innerText;
                    if (helpBoxHeading) {
                        // do your stuff with this text
                        console.log(helpBoxHeading);
                        // then save it to cookie -
                        // first you need to set expiration of cookie
                        // you can use years, months, days, hours, minutes and seconds
                        var expiration = {
                            months: 1
                        }
                        // save help box heading to cookie
                        // please remember, that size of cookie
                        // is limited to 4096 bytes!
                        shoptet.cookie.create(
                            'myCustomCookie',
                            helpBoxHeading,
                            expiration
                        )
                    }
                }
            }
        );
    }
});

API partners

Api partners have opportunity to use template-include endpoint to make the caching and user editing of addon more sophisticated. We strongly recommend to require approval of these endpoint for your addons which requires HTML injection to templates. More information how to correctly use these endpoint in upcoming article.

Homework 🙂

Explore the shoptet and abilities structure and look to https://github.com/shoptet/templates-assets how these data structures are used by us. You’ll be surprised how many information you can easily receive.

Post navigation