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.

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('shoptet.global.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('shoptet.global.showPopupWindow', function(args) {
        console.log(
            'Jsem callback funkce "shoptet.global.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
    });

Vlastní funkce před odesláním formuláře

Máte také možnost, jak s vlastním scriptem vstoupit do procesu odeslání formuláře – týká se jak odeslání objednávky, tak například odeslání příspěvku do diskuze, přihlášení k odběru newsletteru nebo dotazu k produktu.

Pokud vytvoříte funkci shoptet.custom.postSuccessfulValidation, bude tato zavolána po úspěšné validaci formuláře těsně předtím, než bude formulář odeslán. Funkce musí vracet buď true, čímž se formulář odešle, nebo false, čímž se odeslání formuláře zastaví – v tom případě se musíte o odeslání formuláře postarat sami.

Funkce shoptet.custom.postFailedValidation bude oproti tomu zavolána po neúspěšné validaci formuláře. Tato funkce nemusí vracet žádnou hodnotu.

Obě funkce obdrží jediný parametr form, který obsahuje aktuálně validovaný formulář.

/*
* This function will be called after successful validation, right before form submit.
* Argument "form" is currently validated form
* Function has to return true (to submit form) or false (to interrupt form submitting)
*/
shoptet.custom.postSuccessfulValidation = function(form) {
    // Do your stuff here...
    return true;
};
/*
* This function will be called after unsuccessful validation, right before the form submitting is interrupted.
* Argument "form" is currently validated form
*/
shoptet.custom.postFailedValidation = function(form) {
    // Do your stuff here...
};

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