Přeskočit na hlavní obsah

🧩 Nasazení Upsearch komponent na váš web

Tento návod popisuje, jak připojit dvě hlavní komponenty UpSearchu:

  • Autocomplete (upSearchSuggest) – našeptávač ve vstupním poli
  • Výsledky vyhledávání (upSearchResults) – komponenta s kompletním výpisem výsledků

🗝 Co budete potřebovat​

1. API Token​

Získáte jej v administraci UpSearch:

Menu → Credentials → API Token

2. Režim prostředí (env)​

  • 'production' → ostré nasazení (https://api.upsearch.cz) (výchozí, není třeba vyplňovat)
  • 'test' → testovací prostředí (https://api.upsearch.praguebest.cz)

3. Stav konfigurace (status)​

  • 'draft' → návrh z Designeru (náhled, testovací režim)
  • 'published' → nasazená, ostrá verze z Designeru (výchozí, není třeba vyplňovat)

🔍 Autocomplete komponenta (Suggest)​

HTML hlavička a tělo​

Do <head> vložte styly a skript pro výsledkovou komponentu:

<link href="https://cdn.upsearch.cz/upsearch.css" rel="stylesheet">
<script src="https://cdn.upsearch.cz/upSearchResults.js"></script>

HTML struktura​

Vložte na stránku do místa, kde chcete zobrazit vstupní pole s autocomplete:

<div id="upSearchSuggest"></div>

Skript s inicializací​

Upravte skript podle vašeho prostředí a API tokenu:

<script>
  let config = {
    env: 'production',        // nebo 'test'
    status: 'published',      // nebo 'draft'
    apiToken: 'VAŠE_API_TOKEN'
  };

  window.upSearchSuggest('#upSearchSuggest', config);
</script>

📄 Výsledky vyhledávání (Results)​

HTML hlavička a tělo​

Do <head> vložte styly a skript pro výsledkovou komponentu:

<link href="https://cdn.upsearch.cz/upsearch.css" rel="stylesheet">
<script src="https://cdn.upsearch.cz/upSearchResults.js"></script>

Do <body> vložte kontejner:

<div id="upSearchResults"></div>

Skript s inicializací​

<script>
  window.upSearchResults('#upSearchResults', {
    env: 'production',         // nebo 'test'
    status: 'published',       // nebo 'draft'
    apiToken: 'VAŠE_API_TOKEN'
  });
</script>

✅ Kompletní příklad (produkční režim)​

<head>
  <link href="https://cdn.upsearch.cz/upsearch.css" rel="stylesheet">
  <script src="https://cdn.upsearch.cz/upSearchResults.js"></script>
  <script src="https://cdn.upsearch.cz/upSearchSuggest.js"></script>
</head>
<body>

  <!-- Autocomplete -->
  <div id="upSearchSuggest"></div>

  <!-- Výsledky -->
  <div id="upSearchResults"></div>

  <script>
    const config = {
      env: 'production',
      status: 'published',
      apiToken: 'VAŠE_API_TOKEN'
    };

    window.upSearchSuggest('#upSearchSuggest', config);
    window.upSearchResults('#upSearchResults', config);
  </script>
</body>

🧪 Testovací prostředí​

Pro testování použijte místo production hodnotu test a případně status: 'draft':

env: 'test',
status: 'draft'

🛠 Doporučený postup​

  1. Přihlaste se do UpSearch administrace.
  2. Ujistěte se, že máte nastavený návrh v Designeru.
  3. Získejte svůj API token z menu Credentials.
  4. Vložte komponenty na váš web dle návodu výše.
  5. Otestujte funkčnost (doporučujeme začít s status: 'draft').
  6. Jakmile vše funguje, přepněte na status: 'published'.

❓ Potřebujete pomoc?​

Kontaktujte náš tým podpory:
📧 support@upsearch.cz