flbInit - Integrace do webů

Jednou z možností jak integrovat zdroje a akce do webových stránek poskytovatele je využití předdefinovaných javascriptových komponent, které obsahují potřebnou funkčnost pro koncové zákazníky. Tyto komponenty poskytovatel umístí na libovolné místo do svých stránek a veškerá funkčnost je potom automaticky zajištěna.

JavaScriptové komponenty lze upravovat

vzhledově pomocí specifického CSS, které je schopné předefinovat defaultní CSS, které dodáváme s JavaScript komponentami
funkčně pomocí parametrů v rámci JSON konfigurace jednotlivých FlexBook JavaScript komponent a nebo v rámci FlexBook backofficu, kde je také možné ovlivnit funkcionalitu i způsob zobrazení

Integrační postup

FlexBookové JavaScriptové komponenty jsou založeny na komponentách JQuery rozšířených o FlexBook funkcionalitu. Z toho důvodu je potřeba před použitím vložit následující JQuery a FlexBook JavaScriptové knihovny a kaskádové styly. Integrátor si velmi pravděpodobně připojí i svůj CSS soubor, kterým customizuje vzhled HTML výstupu z FlexBookových JavaScript komponent.

<!-- FlexBook JavaScripts -->
<script src="https://www.flexbook.cz/jq/jquery.js"></script>
<script src="https://www.flexbook.cz/flbv2.js"></script>

<!-- Integrator's custom CSS -->
<link rel="stylesheet" type="text/css" href="example.css" />

Dále je nutné inicializovat komponenty pro daného poskytovatele voláním funkce flbInit.

flbInit(
  'https://www.flexbook.cz/ajax.php', 
  kod_poskytovatele,
  [array of FlexBook Components],
  { globalní parametry }
);

Pozn.: Pro integraci lze použít jak protokol HTTP, tak zabezpečený protokol HTTPS. Pro produkční nasazení doporučujeme používat zabezpečený protokol HTTPS.

První parametr (string) je URL FlexBook API endpointu.

Druhý parametr (number) je kód FlexBook poskytovatelem který lze zjistit v administračním rozhraní rezervačního systému FlexBook.

Třetí parametr (array of JSONs) je pole FlexBook komponent, které může obsahovat libovolný počet FlexBook komponent (flbProfile, flbReservationList, flbEventList, flbResourceList, flbEventDetail, flbResourceDetail, flbResourceCalendar, apod.) včetně jejich specifické parametrizace.

Čtvrtý parametr (JSON) je volitelný a může obsahovat default parametry pro jednotlivé typy FlexBook komponent. Parametry komponent tudíž nemusí být explicitně specifikovány v rámci třetího parametru u definice jednotlivých konkrétních instancí FlexBook komponent, lze tedy hromadně zadat default parametry všem GUI komponentám definovaným v rámci třetího parametru funkce flbInit. V rámci čtvrtého parametru je možné kromě všech FlexBook koomponent použít navíc JSON parametry flbEnvironment a flbAll.

flbAll - parametr, kterým se definují defaultní parametry všech FlexBook komponent použitých v rámci flbInit
- Příklad nastavení anglického jazyka pro všechny komponenty v rámci flbInit
  - flbAll: { language: 'en' }
flbEnvironment - parametr, kterým je možné nastavovat chování celého FlexBook front-end prostředí
- debug: [0,1] ... true/false

Příklad inicializace a hromadné parametrizace a vyrendrování FlexBook komponent:

<html>
  <head>
    <!-- FlexBook JavaScripts -->
    <script src="https://www.flexbook.cz/jq/jquery.js"></script>
    <script src="https://www.flexbook.cz/flbv2.js"></script>

    <!-- Integrator's custom CSS -->
    <link rel="stylesheet" type="text/css" href="example.css" />
  </head>
  <body>
    <h1>PROFILE</h1>
    <div id="flexbook_profile">&nbsp;</div>
    <h1>RESOURCE LIST</h1>
    <div id="flexbook_resource_list">&nbsp;</div>
    <h1>EVENT LIST</h1>
    <div id="flexbook_event_list">&nbsp;</div>
    <script>
    flbInit('https://www.flexbook.cz/ajax.php',4,
      [
        {
          type: 'flbProfile',
          placeHolder: 'flexbook_profile',
          params: {
            buttons: ['login','logout','profile','password','reservation','registration','credit','sendPassword'],
            extraDiv: 1,
          },
        },
        {
          type: 'flbResourceList',
          placeHolder: 'flexbook_resource_list',
        },
        {
          type: 'flbEventList',
          placeHolder: 'flexbook_event_list',
        },
      ],
      {
        flbEnviroment: { 
          debug: 1,
        },
        flbAll: {
          language: 'en',
        },
        flbProfile: {
          format: { 
            datetime: 'd.m. Y H:i',
            date: 'd.m. Y',
            time: 'H:i'
          },
          language: 'cz',
          externalAccount: 1,
          checkAttributeMandatory: '1',
        },
      }
    );
    </script>
  </body>
</html>

V rámci inicializace komponent je tedy možné předefinovat parametry jednotlivých FlexBook komponent a to v JSON formátu. Výstup těchto komponent se pak automaticky vyrendruje do place holderů (DIVů) ve vašich HTML stránkách. Placeholder se definuje pomocí id Vašeho DIVu. Každá FlexBooková komponenta má tedy takovýto formát ...

type: 'flbComponent',
placeHolder: 'flexbook_component',
params: {
  component-param: 'param-value',
},

Placeholder je ID DIVu v HTML kódu, do kterého se bude komponenta renderovat. Bez tohoto parametru se komponenta nezobrazí na Vaší HTML stránce.

Params jsou parametry předané ve formátu JSON. Parametry jsou volitelné a zadávají se v následujícím JSON formátu

{
  parameter1 : value,
  parameter2 : value
}

Parametry dostupné ve všech JavaScriptových FlexBook komponentách

Parametry dostupné ve všech FlexBook komponentách jsou

language: možnost volby jazykové verze textů v komponentě - aktuálně podporované hodnoty jsou
- 'cz' - Český jazyk
- 'en' - Anglický jazyk
format: format, který lze použít pro vlastní nastavení formátování výstupních dat:
- formátovat lze tyto typy výstupních dat datetime, date, time
- formát se specifikuje obdobně funkci date v jazyce PHP
- formátovací znaky
- j - den v měsíci 1,2,3, až 31
- d - dvouciferný den v měsíci 01 až 31
- n - měsíc v roce 1,2,3, ... až 12
- m - dvouciferný měsíc v roce 01 až 12
- M - třípísmený měsíc v roce Led až Pro
- H - dvouciferná hodina ve 24 hodinovém módu 00 až 23
- h - dvouciferná hodina ve 12 hodinovém módu 01 až 12
- i - dvouciferná minuta 00 až 59
- s - dvouciferná vteřina 00 až 59
- l - den v týdnu Pondělí až Neděle
- D - třípísmený den v týdnu Pon až Ned
- příklad: flbProfile('f_4', { format: { datetime: 'd.M H:i' }});
  - všechny datové typy datetime budou vypadat takto: 21.May 16:00

Parametry dostupné ve flbEnvironment

Parametry dostupné v rámci flbEnvironment ve čtvrtém parametru flbInit.

debug mod: v případě zapnutého debug modu, se debug hlášky zapisují do JavaScript konzole. Použití debug modu je uvedeno v příkladu výše. Podporované hodnoty jsou:
- 0 (disabled) - default
- 1 (enabled)

PreviousOn-line platební brány NextflbProfile

Last updated 4 years ago