Firemné údaje SK/CZ pre e-shopy

Integrácia Autoform SK/CZ pomocou JS snippetu

JS snippet je najjednoduchší spôsob, ako pripojiť Autoform SK/CZ k vášmu e-shopu alebo webu.
Stačí pridať meta tag s licenciou do <head>, nastaviť globálnu konfiguráciu window.RPO_AUTOCOMPLETE_CONFIG a vložiť loader skript.

Ak používate PrestaShop alebo WooCommerce, nemusíte nič manuálne nastavovať — máme pre vás hotové moduly. Kliknite sem a prejdete na ich sekciu.

Ak chcete integrovať Autoform SK/CZ do vlastného riešenia (PHP, Laravel, Nette, vlastné CMS alebo e-shop), pripravili sme pre vás prehľadnú technickú dokumentáciu s plnými PHP príkladmi. Kliknite sem a prejdete na dokumentáciu k API.

Krok 1 Pridajte meta tag s licenciou do `<head>`

Meta tag slúži na identifikáciu vašej licencie a domény. V administrácii získate licenčný kľúč, ktorý vložíte do atribútu content.

	<meta name="rpo-license" content="META_KOD">

Typický príklad umiestnenia v šablóne:

	<head>
	  <meta charset="utf-8">
	  <title>Môj e-shop</title>

	  <meta name="rpo-license" content="META_KOD">
	  <!-- ďalšie meta / CSS / skripty -->
	</head>

Krok 2 Nastavte konfiguráciu a vložte snippet na stránku

Stačí vložiť nasledujúci snippet do šablóny – ideálne do layoutu s košíkom / objednávkou tesne pred koniec </body>. Prvá časť nastaví konfiguráciu v window.RPO_AUTOCOMPLETE_CONFIG (API kľúč, tému vzhľadu, režim adresy, mapovanie polí, zaoblenie rohov, šírku dropdownu a VIES kontrolu IČ DPH). Druhá časť načíta aktuálnu verziu snippetu z Api-data.eu a pripojí autocomplete k vašim poliam. Ak sa nechcete trápiť s mapovaním, pre najväčšie SK/CZ e-shop riešenia máme hotové presety nižšie – pozrite si ich v sekcii nižšie.

Ukážka konfigurácie

	window.RPO_AUTOCOMPLETE_CONFIG = {
	  apiKey: 'VAS_API_KEY_TU',

	  // Téma vzhľadu:
	  //  - 'light', 'dark', 'corporate', ...
	  //  - 'custom' alebo 'custom-template' = vlastné farby z objektu customTheme nižšie
	  theme: 'dark',

	  // Voliteľné – vlastná farebná schéma pre theme: 'custom' / 'custom-template'
	  // Ak ju nepoužívate, tento blok môžete vynechať.
	  customTheme: {
		bg:        '#0b1120', // pozadie dropdownu
		bgHover:   '#020617', // pozadie položky pri hover
		border:    '#1e293b', // rámik
		text:      '#e5e7eb', // hlavný text
		textMuted: '#94a3b8', // sekundárny text (IČO, adresa, footer)
		highlight: '#38bdf8', // zvýraznenie (logo, scrollbar hover)
		shadow:    '0 22px 50px rgba(15,23,42,0.9)' // tieň dropdownu
	  },

	  // režim adresy: 'split' = zvlášť ulica / č. domu
	  //               'combined' = ulica a č. domu v jednom inpute
	  addressMode: 'split',

	  // VIES kontrola IČ DPH:
	  //  'on'  = IČ DPH sa overuje vo VIES (po doplnení firmy + pri opustení poľa IČ DPH)
	  //  'off' = žiadne volanie na VIES, pole len doplníme z RPO/ARES
	  vies: 'on',

	  dropdown: {
		width: 'min'   // default: min-width = šírka inputu, môže byť širšie
	  },

	  fields: {
		// Môžete použiť akýkoľvek platný CSS selektor:
		//  - podľa ID:   '#billCompany'
		//  - podľa name: 'input[name="company"]'
		company:     '#billCompany',
		ico:         '#companyId',
		dic:         '#demo-dic',
		vat:         '#vatId',

		street:      '#billStreet',
		descriptive: '#billHouseNumber',

		city:        '#billCity',
		postal:      '#billZip',

		// pri addressMode: 'combined' môžete použiť aj:
		// fullAddress: '#addressLine'   // jeden input pre celú adresu
	  },

	  // voliteľné – select/field s krajinou (na rozlíšenie SK/CZ logiky)
	  // countrySelect: '#CountryId',

	  radius: {
		top: 0,
		bottom: 8
	  }
	};

	// loader skript — vložte tesne pred </body>
	<script src="https://api-data.eu/api/js/rpo_ares_autocomplete_inc.js" defer></script>

Mapovanie polí

Každá položka v fields je obyčajný CSS selektor. Môžete teda mapovať:
- podľa ID – napr. #billCompany, #companyId
- podľa name – napr. input[name="company"], input[name="InvoiceAddress.Firm"]
- alebo aj zložitejšie selektory – napr. form#checkout input[name="company"]
company – názov firmy alebo obchodné meno
ico – IČO (identifikačné číslo organizácie)
dic – DIČ (ak je dostupné)
vat – IČ DPH (overované aj cez EÚ VIES)
street, descriptive – ulica a číslo domu (pri režime split)
city, postal – mesto a PSČ
fullAddress – kompletná adresa v jednom texte (používa sa pri addressMode: 'combined')

Režimy adresy

addressMode: 'combined' – najčastejšie používaný režim – jedno pole „Ulica a číslo“, preto sa ulica + číslo domu doplní ako jeden celok (napr. „Hlavná 12“).
addressMode: 'split' – alternatívny režim pre formuláre, ktoré majú ulicu a číslo domu vo svojich vlastných oddelených poliach. API doplní street a descriptive zvlášť.

Téma vzhľadu a vlastné farby

theme – môžete použiť jednu z predpripravených tém ('light', 'dark', 'corporate', …).
Ak nastavíte theme: 'custom' alebo 'custom-template', farby dropdownu sa načítajú z objektu customTheme – viete si tak zladiť autocomplete presne s vaším dizajnom (Tailwind/DaisyUI, vlastná paleta, firemné farby).

VIES kontrola IČ DPH

vies: 'on' – po doplnení firmy (RPO/ARES) sa pri SK/CZ firme automaticky spustí kontrola IČ DPH vo VIES. Rovnako sa spustí pri opustení poľa IČ DPH (blur). Pri načítaní vidí používateľ ikonku načítavania, po úspešnom overení zelenú fajku, pri neplatnom IČ DPH červené X.
vies: 'off' – VIES sa vôbec nevolá. IČ DPH sa doplní len z RPO/ARES a ďalšia kontrola sa nerobí (vhodné, ak nechcete závisieť od dostupnosti VIES, alebo riešite striktne vlastnú logiku).

Zaoblenie a štýl dropdownu

Pomocou objektu radius môžete ovplyvniť zaoblenie horných a dolných rohov – napríklad pri napojení na vlastné inputy s prispôsobeným border-radiusom.

Šírka dropdownu

dropdown.width: 'min' – predvolené správanie. Dropdown má minimálnu šírku ako input, ale môže byť o niečo širší (vhodné pri užších poliach, aby bol text čitateľný).
dropdown.width: 'match' – šírka dropdownu je vždy presne rovnaká ako šírka vstupného poľa.
Číselná hodnota (napr. 420) – pevná šírka v pixeloch bez ohľadu na šírku inputu.

Výber vzhľadu (témy)

V konfigurácii môžete nastaviť vlastnosť theme, ktorá určuje farby a vzhľad dropdownu. Môžete použiť konkrétnu tému (napr. 'dark', 'dracula', 'cupcake') alebo zvoliť theme: 'auto'. Režim auto sa sám prispôsobí vašej stránke – ak je web v tmavom režime alebo používa DaisyUI/Tailwind/Bootstrap dark mód, zobrazí tmavý štýl, inak svetlý.

Okrem vstavaných tém môžete použiť aj vlastnú farebnú schému cez theme: 'custom' alebo theme: 'custom-template'. V takom prípade sa farby dropdownu načítajú z objektu customTheme v konfigurácii (pozri príklad vyššie v časti „Ukážka konfigurácie“) – viete si tak autocomplete doladiť presne na mieru vášmu dizajnu (firemné farby, vlastný Tailwind/DaisyUI motív a pod.).

Témy si môžete priamo vyskúšať aj na tomto webe – hore v menu kliknite na ikonku palety, zvoľte ľubovoľný template a následne na úvodnej stránke otestujte formulár s autocomplete. Dropdown sa automaticky prispôsobí aktuálnej téme stránky.

Zobraziť zoznam podporovaných tém

light dark cupcake bumblebee emerald corporate synthwave retro cyberpunk valentine halloween garden forest aqua lofi pastel fantasy wireframe black luxury dracula cmyk autumn business acid lemonade night coffee winter dim sunset nord

Tému zmeníte jednoducho v konfigurácii snippetu, napr.: theme: 'dracula' alebo theme: 'sunset'. Pre vlastné farby použite theme: 'custom' alebo 'custom-template' a doplňte objekt customTheme (bg, border, text, highlight, shadow…).

Hotové presety pre e-shop riešenia

Pre najčastejšie používané platformy máme pripravené prednastavené konfigurácie snippetu. Stačí vybrať vašu platformu, skopírovať kód a vložiť ho do šablóny. Ak používate iné riešenie, vieme vám pripraviť preset podľa HTML štruktúry vášho košíka.

Konkrétny snippet pre vašu platformu

// Vyberte platformu vyššie a zobrazí sa konkrétny snippet…

Krok 1 Pridajte meta tag s licenciou do <head>