Fakturačné adresy

Účelom rozšírenia je rýchle vkladanie fakturačných údajov bez nutnosti vyplňovania všetkých adresných polí formulára na webovej stránke alebo v mobilnej aplikácii.

Podporované prehliadače

Inštalácia

Ponúkame viacero spôsobov ako môžete integrovať službu Swiftyper Business WebAPI do Vašej aplikácie.

CDN <script>

JavaScriptová knižnica je dostupná na platforme jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/swiftyper.js@1.0.6"></script>

<form>
  <div>
    <input type="text" id="subjekt" placeholder="Názov organizácie" />
  </div>
  <div>
    <input type="text" id="ico" placeholder="IČO" />
  </div>
  <div>
    <input type="text" id="ic_dph" placeholder="IČ DPH" />
  </div>
  <div>
    <input type="text" id="dic" placeholder="DIČ" />
  </div>
  <div>
    <input type="text" id="ulica" placeholder="Ulica, číslo" />
  </div>
  <div>
    <input type="text" id="psc" placeholder="PSČ" />
  </div>
  <div>
    <input type="text" id="mesto" placeholder="Mesto" />
  </div>
  <div>
    <input type="text" id="krajina" placeholder="Krajina" />
  </div>
</form>

<script>
  var businessAutocomplete = new swiftyper.business({
    selectors: {
      name: document.querySelector('#subjekt'),
      cin: document.querySelector('#ico'),
      tin: document.querySelector('#dic'),
      vatin: document.querySelector('#ic_dph'),
      street: document.querySelector('#ulica'),
      municipality: document.querySelector('#mesto'),
      postalCode: document.querySelector('#psc'),
      country: document.querySelector('#krajina'),
    },
    apiKey: 'v6S9BbdkN817Rvaw15RLsaVo7bZCBNH63wgPgTcqaxO9',
  })
</script>

npm

Nájdete nás aj na npm.

Na inštaláciu stačí zadať príkaz:

npm install swiftyper.js --save

Príklad použitia v HTML:

<form>
  <div>
    <input type="text" id="subjekt" placeholder="Názov organizácie" />
  </div>
  <div>
    <input type="text" id="ico" placeholder="IČO" />
  </div>
  <div>
    <input type="text" id="ic_dph" placeholder="IČ DPH" />
  </div>
  <div>
    <input type="text" id="dic" placeholder="DIČ" />
  </div>
  <div>
    <input type="text" id="ulica" placeholder="Ulica, číslo" />
  </div>
  <div>
    <input type="text" id="psc" placeholder="PSČ" />
  </div>
  <div>
    <input type="text" id="mesto" placeholder="Mesto" />
  </div>
  <div>
    <input type="text" id="krajina" placeholder="Krajina" />
  </div>
</form>

Príklad použitia v JavaScripte:

const { business } = require('swiftyper.js')

const businessAutocomplete = new business({
  selectors: {
    name: '#subjekt',
    cin: '#ico',
    tin: '#dic',
    vatin: '#ic_dph',
    street: '#ulica',
    municipality: '#mesto',
    postalCode: '#psc',
    country: '#krajina',
  },
  apiKey: 'v6S9BbdkN817Rvaw15RLsaVo7bZCBNH63wgPgTcqaxO9',
})

Nastavenia

Popis nastavení ktoré môžete použiť v metóde business({ nastavenia }).

Popis nastavení

Name
apiKey
Type
string
Description
Prístupový API kľúč.
Name
selectors.name
Type
DOM Element
Description
Element obsahujúci názov subjektu.
Name
selectors.cin
Type
DOM Element
Description
Element obsahujúci IČO.
Name
selectors.tin
Type
DOM Element
Description
Element obsahujúci DIČ.
Name
selectors.vatin
Type
DOM Element
Description
Element obsahujúci IČ DPH.
Name
selectors.address
Type
DOM Element
Description
Element obsahujúci adresu.
Name
selectors.street
Type
DOM Element
Description
Element obsahujúci ulicu a číslo.
Name
selectors.streetName
Type
DOM Element
Description
Element obsahujúci iba názov ulice.
Name
selectors.streetNumber
Type
DOM Element
Description
Element obsahujúci iba číslo ulice.
Name
selectors.municipality
Type
DOM Element
Description
Element obsahujúci obec.
Name
selectors.postalCode
Type
DOM Element
Description
Element obsahujúci PSČ.
Name
selectors.country
Type
DOM Element
Description
Element obsahujúci krajinu.
Name
suggestions
Type
string[]
Description
Zoznam polí pre ktoré sa budú zobrazovať návrhy vyhľadávania, hodnoty môžu byť name, cin.
Name
endpoint
Type
string
Description
Adresa na ktorú je požiadavka smerovaná.
Name
active
Type
string
Description
Filtrovanie existujúcich (nezaniknutých) subjektov. Predvolene sa zobrazujú všetky subjekty.
Name
nextFocus
Type
bool, DOM Element
Description
Nastavenie focus na ďalšie pole formulára po výbere adresy.
Name
highlight
Type
bool
Description
Nastavenie zobrazenia zvýraznenia zhodnej časti s dopytom vyhľadávania.
Name
showNoResults
Type
bool
Description
Zobrazenie upozornenia v prípade nenájdených výsledkov.
Name
events
Type
string[]
Description
Typy udalostí na ktoré bude reagovať vyhľadávanie.
Name
limit
Type
integer
Description
Počet zobrazených výsledkov. Hodnota môže byť v rozmedzí 1 až 20. Predvolená hodnota je 7 výsledkov.
Name
minlength
Type
integer
Description
Minimálna dĺžka výrazu na začatie vyhľadávania.
Name
debounce
Type
integer
Description
Minimálna pauza pred začatím vyhľadávania cez API, počas zadávania výrazu sa časovač vynuluje. Predvolená hodnota je 250 (ms).
Name
theme
Type
string
Description
Téma rozšírenia, môže byť modern-light (predvolené), modern-dark alebo classic.
Name
htmlAutocomplete
Type
bool
Description
Nastavenie HTML atribútu autocomplete, predvolene pole nastavujeme na autocomplete=off
Name
itemTemplate
Type
function
Description
Funkcia na formátovanie položky vyhľadávania.

Udalosti

Rozšírenie používa určité udalosti, ktoré si môžete prispôsobiť.

Popis udalostí

Name
change
Type
Description
Zavolá sa, keď sa zvolí adresa zo zoznamu vyhľadaných subjektov.
Name
suggestions
Type
string
Description
Zavolá sa, keď sa načíta zoznam vyhľadaných subjektov. Táto udalosť sa zavolá aj v prípade, že sa nenájdu žiadne výsledky.
Name
limit
Type
Description
Zavolá sa, keď bude presiahnutý mesačný limit.
Name
error
Type
Description
Zavolá sa, keď sa vyskytne problém s vyhľadaním subjektu alebo ak bude presiahnutý mesačný limit.

Metódy

Popis metód ktoré môžete použiť po inicializácii metódy business().

Popis metód

Name
configure
Type
Description
Zmena nastavení rozšírenia.
Name
on
Type
Description
Nastavenie udalostí.
Name
destroy
Type
Description
Zrušenie funkcií rozšírenia.

Štýlovanie

Rozšírenie používa niekoľko základných CSS tried a tágov ktoré si môžete pre vašu aplikáciu prispôsobiť.

CSS triedy a tágy

Name
swiftyper_wrapper
Type
Description
.swiftyper_wrapper je rodičovskou triedou vyhľadávacieho poľa
Name
swiftyper_list
Type
Description
Trieda .swiftyper_list obsahuje zoznam návrhov vyhľadávania
Name
swiftyper_result
Type
Description
Trieda .swiftyper_result obsahuje každý jeden návrh vyhľadávania
Name
<em>
Type
Description
Tág <em> v zozname výsledkov sa používa na zvýraznenie zhodných častí s dopytom vyhľadávania

Príklady použitia

Poštovú adresu je možné zadať niekoľkými spôsobmi, v týchto príkladoch použitia uvádzame tie najpoužívanejšie.

Formulár hľadajúci podľa názvu a IČO

<form>
    <div>
        <input type="text" id="subjekt" placeholder="Názov organizácie" />
    </div>
    <div>
        <input type="text" id="ico" placeholder="IČO" />
    </div>
    <div>
        <input type="text" id="ic_dph" placeholder="IČ DPH" />
    </div>
    <div>
        <input type="text" id="dic" placeholder="DIČ" />
    </div>
    <div>
        <input type="text" id="ulica" placeholder="Ulica, číslo" />
    </div>
    <div>
        <input type="text" id="psc" placeholder="PSČ" />
    </div>
    <div>
        <input type="text" id="mesto" placeholder="Mesto" />
    </div>
    <div>
        <input type="text" id="krajina" placeholder="Krajina" />
    </div>
</form>

Formulár hľadajúci iba podľa názvu

<form>
    <div>
        <input type="text" id="subjekt" placeholder="Názov organizácie" />
    </div>
    <div>
        <input type="text" id="ico" placeholder="IČO" />
    </div>
    <div>
        <input type="text" id="ic_dph" placeholder="IČ DPH" />
    </div>
    <div>
        <input type="text" id="dic" placeholder="DIČ" />
    </div>
    <div>
        <input type="text" id="ulica" placeholder="Ulica, číslo" />
    </div>
    <div>
        <input type="text" id="psc" placeholder="PSČ" />
    </div>
    <div>
        <input type="text" id="mesto" placeholder="Mesto" />
    </div>
    <div>
        <input type="text" id="krajina" placeholder="Krajina" />
    </div>
</form>