IN TIME Widget v.4

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.

Použití přímo ve stránce

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">     

Příklad:

Použití na tlačítko

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>      

Příklad:

Nízkoúrovňový konstruktor

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.

Přímý přístup k seznamu cílů

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).

Omezení dostupných typů výdejních míst

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í.