Saját Google Maps integráció készítése

A Google Maps sokféleképp kerülhet az oldalra: térképbővítménnyel, a témába épített térképblokkal, oldalépítővel vagy kézzel beírt kóddal. A Complianz a legnépszerűbb megvalósításokhoz kész integrációt tartalmaz, ami blokkolja a térképet, és helyőrzőt tesz a helyére. Ha a tiéd nem tartozik ide, az alábbi módszerrel saját integrációt készíthetsz. Ehhez némi hibakeresés és egyedi kód kell.

A módszer akkor is jó, ha a meglévő integráció működik, de máshogy szeretnéd blokkolni, feloldani vagy helyőrzővel ellátni a térképet.

A tipikus hiba: „Google is not defined”

Gyakori eset, hogy a böngésző konzolja függőségi hibát ír. A hiba a szkript blokkolását vagy a hozzájárulás utáni betöltését is érintheti. A példában a hozzájárulás utáni betöltés romlik el, és ez a hibaüzenet jelenik meg:

Google is not defined

Ez azt jelenti, hogy egy fájl a Google Maps API-t keresi, de ezt a hívást a Complianz blokkolja. A fájl viszont függ az API-tól, ezért a térkép nem működik rendesen.

A teendők

A saját integrációhoz három dolgot kell megoldani:

1. a hibát okozó fájl blokkolása, hogy hozzájárulás előtt ne fusson;
2. a fájlok helyes sorrendű betöltése hozzájárulás után;
3. helyőrző beállítása a térkép tárolóelemére.

Mindhárom lépés egyetlen MU-pluginben (a /wp-content/mu-plugins/ mappába kerülő PHP-fájlban) megy. Ha a mappa nincs meg, hozd létre. A részleteket a MU-pluginek és szűrők fejezet írja le.

1. A hibát okozó fájl blokkolása

A példában egy beágyazott jQuery-szkript, benne egy mapOptions nevű függvénnyel okozza a hibát. Ezt a függvénynevet teszed a blokkolólistára. A felelős szkript megkereséséhez nézd meg annak az oldalnak a forrását, ahol a térkép van, és keress olyan beágyazott szkriptet, amely hibát dobhat, ha a Google nem érhető el. Ilyen például az, amelyik fedőréteget, infóablakot vagy jelölőket ad a térképhez. A mapOptions más név is lehet: az egyedi térképeknél éppen ez a nehézség.

<?php
/**
 * A szkript és a 'mapOptions' szöveget tartalmazó beágyazott szkript blokkolása.
 */
function cmplz_custom_googlemaps_script( $tags ) {
  $tags[] = array(
    'name'     => 'google-maps',
    'category' => 'marketing',
    'urls'     => array(
      'maps.googleapis.com/maps/api/js',
      'mapOptions',
    ),
  );
  return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

2. Függőség megadása a hozzájárulás utáni betöltéshez

A mapOptions azért hibázik, mert szüksége van a betöltött Google API-ra. A megoldás egy függőség: az enable_dependency és a dependency tulajdonsággal megadod, hogy a mapOptions várjon a Google API-ra.

<?php
function cmplz_custom_googlemaps_script( $tags ) {
  $tags[] = array(
    'name'              => 'google-maps',
    'category'          => 'marketing',
    'placeholder'       => 'google-maps',
    'urls'              => array(
      'maps.googleapis.com/maps/api/js',
      'mapOptions',
    ),
    'enable_dependency' => '1',
    'dependency'        => [
      // 'amire-varni-kell' => 'ami-varakozik'
      'mapOptions' => 'maps.googleapis.com/maps/api/js',
    ],
  );
  return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

3. Helyőrző a térkép tárolóelemére

A helyőrzőhöz egy CSS-osztály kell, amelyre a Complianz a képet teheti. Két lehetőséged van:

• a térkép tárolóelemének meglévő CSS-osztályát használod;
• saját CSS-osztályt adsz a térkép tárolóelemének.

A meglévő osztályt úgy találod meg, hogy a térképen jobb gombbal a böngésző elemvizsgálóját nyitod meg, és megnézed az elem class értékét.

A helyőrzőhöz két tulajdonságot adsz az előző kódhoz: az enable_placeholder értéke 1, a placeholder_class pedig a talált osztály (a példában wpb_wrapper).

<?php
function cmplz_custom_googlemaps_script( $tags ) {
  $tags[] = array(
    'name'               => 'google-maps',
    'category'           => 'marketing',
    'placeholder'        => 'google-maps',
    'urls'               => array(
      'maps.googleapis.com/maps/api/js',
      'mapOptions',
    ),
    'enable_placeholder' => '1',
    'placeholder_class'  => 'wpb_wrapper',
    'enable_dependency'  => '1',
    'dependency'         => [
      'mapOptions' => 'maps.googleapis.com/maps/api/js',
    ],
  );
  return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

4. A load esemény újraindítása (nem mindig kell)

Ha a térkép szkriptje a dokumentum betöltésekor (load vagy ready) inicializálja magát, hozzájárulás után a térkép nem indul el, mert ez az esemény addigra már lefutott. Ilyenkor a cmplz_run_after_all_scripts esemény után újra elsüthető a load esemény. Add ezt az integrációdhoz:

<?php
/**
 * A load esemény újraindítása hozzájárulás után.
 * Nem mindig szükséges: csak akkor kell, ha a térkép a dokumentum betöltésekor indul.
 */
function cmplz_custom_maps_initDomContentLoaded() {
  ob_start();
  ?>
  <script>
    document.addEventListener("cmplz_run_after_all_scripts", cmplz_fire_domContentLoadedEvent);
    function cmplz_fire_domContentLoadedEvent() {
      dispatchEvent(new Event('load'));
    }
  </script>
  <?php
  $script = ob_get_clean();
  $script = str_replace( array( '<script>', '</script>' ), '', $script );
  wp_add_inline_script( 'cmplz-cookiebanner', $script );
}
add_action( 'wp_enqueue_scripts', 'cmplz_custom_maps_initDomContentLoaded', PHP_INT_MAX );

A teljes MU-plugin

A négy lépés együtt egyetlen fájl: a blokkolás, a függőség és a helyőrző egy cmplz_known_script_tags szűrőben, alatta az opcionális esemény-újraindítás. Mentsd például cmplz-custom-googlemaps.php néven, és töltsd fel a /wp-content/mu-plugins/ mappába.

<?php
function cmplz_custom_googlemaps_script( $tags ) {
  $tags[] = array(
    'name'               => 'google-maps',
    'category'           => 'marketing',
    'urls'               => array(
      'maps.googleapis.com/maps/api/js',
      'mapOptions',
    ),
    'enable_placeholder' => '1',
    'placeholder_class'  => 'wpb_wrapper',
    'enable_dependency'  => '1',
    'dependency'         => [
      'mapOptions' => 'maps.googleapis.com/maps/api/js',
    ],
  );
  return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

function cmplz_custom_maps_initDomContentLoaded() {
  ob_start();
  ?>
  <script>
    document.addEventListener("cmplz_run_after_all_scripts", cmplz_fire_domContentLoadedEvent);
    function cmplz_fire_domContentLoadedEvent() {
      dispatchEvent(new Event('load'));
    }
  </script>
  <?php
  $script = ob_get_clean();
  $script = str_replace( array( '<script>', '</script>' ), '', $script );
  wp_add_inline_script( 'cmplz-cookiebanner', $script );
}
add_action( 'wp_enqueue_scripts', 'cmplz_custom_maps_initDomContentLoaded', PHP_INT_MAX );

A tulajdonságok jelentése és a teljes integrációs API a Integráció fejlesztése harmadik feleknek fejezetben van. A kész, konkrét térképmegoldásokhoz (WoodMart, Leaflet és mások) a Térkép- és témaintegrációk MU-pluginnal fejezet ad MU-plugineket.