JavaScript hozzáadása az oldal frontendjéhez

A frontenden megjelenő űrlapokkal együttműködő JavaScriptet többféleképpen is hozzáadhatsz az oldalhoz. Bármelyik módot választod, a kódot általában a DOMContentLoaded eseményre kötött függvénybe írd.

Figyelj arra, hogy a téma cseréje vagy frissítése felülírhatja a téma mappáját, így az ott végzett módosításaid elvesznek. Készíts rendszeres mentést, és használj gyermektémát.

1. mód: wp_print_footer_scripts

Ha a PHP-kódot harmadik féltől származó bővítménnyel (kódrészlet-kezelővel) adod hozzá, a legegyszerűbb a wp_print_footer_scripts WordPress-akció használata. Egyes témák init.js vagy custom.js fájlt is adnak, oda is beteheted a kódot.

add_action( 'wp_print_footer_scripts', function() { ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            // saját kód
        });
    </script>
<?php } );

2. mód: HTML-mező

Ha a JavaScriptet csak egyetlen űrlaphoz akarod futtatni, beleírhatod közvetlenül az űrlap egy HTML mezőjébe. Ennek az az előnye, hogy a kód az űrlap exportjával együtt elkíséri az űrlapot.

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // saját kód
    });
</script>

3. mód: harmadik féltől származó bővítmény

Külső bővítmények és témaeszközök is futtathatnak extra JavaScriptet az űrlap mellett. Ilyen például a Code Chest nevű ingyenes bővítmény, amely az űrlaphoz tartozó JavaScriptet és CSS-t pontosan oda tölti be, ahol kell. Ezeknél az eszközöknél sokszor nincs szükség a <script> blokkra, elég a függvény:

document.addEventListener('DOMContentLoaded', function () {
    // saját kód
});

A harmadik féltől származó megoldásokat a Gravity Forms nem vizsgálja és nem támogatja: te felelsz azért, hogy megfelelnek-e a funkcionális, biztonsági, jogi és költségigényeidnek.

4. mód: a GFAddOn keretrendszer

Saját kiegészítő írásakor a keretrendszer lehetővé teszi a szkriptek és stílusok betöltését. A betöltés feltételét a field_types tulajdonság szerint is megadhatod, vagyis csak akkor töltődik be, ha az űrlapon van ilyen típusú mező. A keretrendszer a függőségek tömbjét is fogadja.

Különleges szempontok

Függőségek

Gondoskodj róla, hogy a kódod előtt betöltődjenek azok a szkriptek, amelyekre épít. A 4. módszer paraméterében megadhatod azoknak a szkripteknek az azonosítóját, amelyeknek előbb kell betöltődniük.

A Gravity Forms frontend-szkriptjeitől függő kódot a gform/theme/scripts_loaded esemény hatására indítsd. Így biztos, hogy a többi Gravity Forms szkript már elérhető, és a kódod látja a JavaScript gform objektumot.

Feltételes betöltés

Érdemes a szkriptet csak azokon az oldalakon betölteni, ahol szükség van rá. Betöltés előtt ellenőrizd, melyik oldalt töltik éppen.