Nová verze widgetu je implementována jako skript vkladaný přímo do cílové stránky. Pro použití je potřeba v hlavičce nebo na konci dokumentu uvést:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=cs&key=AIzaSyD20z-t3mKcVciEsS5duCW4hKRsxZuF3zo"></script>
<script src="https://widget.intime.cz/v4/widget-ng.js?key=AIzaSyD20z-t3mKcVciEsS5duCW4hKRsxZuF3zo" type="text/javascript"></script>
nebo ekvivalent, tj. jQuery ideálně verze 1.11, Google Maps API a samotný skript widgetu. Pro spolehlivou funkci ve všech prohlížečích je důležité, aby ke stránce bylo přistupováno protkolem HTTPS. Klíč pro Google Maps API doporučujeme použít vlastní, nebo požádat vašeho obchodního zástupce o povolení vaší domény.
Widget lze vložit přímo do existujícího blokového elementu ve stránce, rozměry widgetu se automaticky přizpůsobi velikosti rodičovského elementu. Po kompletním načtení stránky je widget automaticky vložen do elementů s třídou intime-widget-inline
. Jejich atribut data-selected-name
určuje prvek formuláře, kam bude vyplněn název vybraného cíle zásilky.
<div class="intime-widget-inline" style="width: 1024px; height:512px" data-selected-name="name-input">
</div>
<input type="text" placeholder="Jmeno vybraneho sem" id="name-input">
Elementům s třídou intime-widget-window
je přiřazena událost na kliknutí, která otevře widget v novém okně. Pokud je zadán cílovy prvek formuláře atributem data-selected-name
, toto okno se po výběru cíle automaticky zavře. Dokument v okně je postaven skriptem dynamicky a od nikud se nenačítá.
<input type="text" placeholder="Jmeno vybraneho sem" id="name-input-window">
<button class="intime-widget-window" data-selected-name="name-input-window">V novem okne</button>
Skript definuje konstruktor IntimeWidget(element, callback, options)
, který do zadaného DOM elementu vytvoří uživatelské rozhraní widgetu. Při kliknutí na tlačítko "Vybrat" je vyvolána funkce předaná v argumentu callback
. options
je případný nepovinný objekt pro budoucí možnost podrobnější konfigurace chování widgetu.
Příkladem použití tohoto konstruktoru je integrace s modálními overlayi z JS frameworku cílové stránky.
Funkce IntimeAPI.registerPlacesObserver
umožňuje registrovat funkci, která bude zavolána při každé změně obsahu seznamu cílů zobrazovných widgetem. Funkce je volána s jedním argumentem, kterým je tento seznam rozdělený podle typu. Fukce se volá vždy alespoň jedenkrát (v době registrace s aktuálním stavem seznamu).
Stránka může definovat globální proměnnou
intime_place_types
. Hodnotou je objekt, jehož klíče jsou ID možných
druhů doručení (branches
) a hodnoty jsou boolean
určující, jestli budou daná místa zobrazena, neuvedené se nezobrazují.