Shoptet developers tools

Abychom externím kodérům usnadnili úpravy našich šablon, vznikl nástroj Shoptet developer tools. Tento soubor JavaScriptových funkcí je dostupný v šablonách Techno, Tango, Waltz, Classic a Step (a v dalších šablonách, které teprve vzniknou).

Informativní úloha Shoptet developers tools

Otevřete-li si nyní v prohlížeči konzoli (F12), uvidíte následující hlášku:

Shoptet developers tools version 0.1.2
Events monitoring is disabled.
To enable events monitoring, run shoptet.dev.enableEventsMonitoring()

Zadáním příkazu shoptet.dev.enableEventsMonitoring() zapnete monitorování funkcí a událostí (do dalšího reloadu stránky). Dojde-li nyní k spuštění jakékoli podporované funkce, vypíšou se do konzole informace o této funkci spolu s případnými parametry funkce.

Debugovací režim na delší období můžete zapnout jednoduše přímo z konzole vytvořením cookie:

// 10 = počet dní platnosti cookie
shoptet.cookie.create('monitorJSEvents', '1', {days: 10})

Tímto způsobem získáte přehled o tom, co se děje „na pozadí“, jaké funkce jsou spouštěny a jak jsou mezi sebou provázány. Logování můžete vypnout reverzním příkazem shoptet.dev.disableEventsMonitoring() či vytvořením cookie monitorJSEvents se zápornou platností (např. days: -1). Monitorování funkcí by nemělo být nikdy zapínáno globálně.

Úprava funkčnosti pomocí Shoptet developers tools

Nejmocnější zbraní Shoptet developers tools je možnost odchytávat eventy spouštěných funkcí, přidávat funkcím vlastní callbacky a reagovat na změny DOMu.

Podporované funkce

Zadáním příkazu shoptet.scripts.monitoredFunctions zjistíte seznam momentálně podporovaných funkcí (postupně budou přibývat). Po vykonání každé z těchto funkcí se vypálí stejnojmenný event, tedy např. showPopupWindow.

Funkce uvozené shoptet.NAZEV_MODULU. jsou považovány za stabilní, o jejich případných změnách budete s předstihem informováni prostřednictvím tohoto blogu.

Budete-li tedy chtít zareagovat na každé volání určité funkce, např. showPopupWindow, můžete to udělat takto:

    document.addEventListener('showPopupWindow', function () {
        // kód, který se vykoná při každém volání funkce showPopupWindow
    });

Můžete také předat vlastní funkci jako callback kterékoli z podporovaných funkcí. V tomto callbacku máte přístup k argumentům, se kterými byla funkce volána:

    shoptet.scripts.setCustomCallback(showPopupWindow, function(args) {
        console.log(
            'Jsem callback funkce "showPopupWindow", která byla volána s argumenty: '
        );
        console.log(args);
    });

Shoptet eventy při změně DOMu

Příkazem shoptet.scripts.availableDOMLoadEvents vypíšete seznam eventů, které se dějí při načtení nové části DOMu a které momentálně umožňujeme využít. Událost ShoptetDOMContentLoaded je obecná a bude vypálena při každém AJAXovém načtení části DOMu spolu s událostí upřesňující konkrétní změnu, např. ShoptetDOMCartContentLoaded.

Další události, na které můžete reagovat, jsou v shoptet.scripts.availableDOMUpdateEvents a shoptet.scripts.availableCustomEvents. Události budeme postupně přidávat.

Pokud použiju příklad z praxe, tak po znovunačtení obsahu košíku je mnohdy potřeba znovu vykonat nějaké individuální úpravy. Doposud bylo možné naslouchat jen na obecnou ajaxComplete událost, nyní můžete vaše úpravy provádět cíleně při každém novém načtení obsahu košíku:

    document.addEventListener('ShoptetDOMCartContentLoaded', function () {
        // kód, který se vykoná po načtení obsahu košíku
    });

Pokud pracujete s JavaScriptem a víte o funkci nebo události, která by vám pomohla, napište mi na vracovsky@shoptet.cz. Pokud to bude možné a využitelné globálně pro naše klienty, pokusíme se vám vyjít vstříc.

Facebook
Twitter