Osadzanie komponentów wyszukiwania

Osadź wyszukiwarkę footage.one jako komponenty webowe na swojej stronie internetowej.

Przegląd

footage.one udostępnia komponenty webowe, dzięki którym możesz osadzić wyszukiwarkę mediów bezpośrednio na swojej stronie internetowej. Komponenty łączą się z Twoim kontem footage.one i wyświetlają media z dystrybucji.

Chcesz przetestować komponenty przed integracją? Otwórz https://ork.footage.one/demo i wklej token dystrybucji typu „Wyszukiwanie publiczne" — wyszukiwanie działa wtedy na Twoich danych.

Osadzanie

Załaduj skrypt na swojej stronie HTML:

<script src="https://ork.footage.one/asset-search/main.js"></script>

Konfiguracja

Skonfiguruj połączenie z kontem footage.one. Potrzebujesz hosta i tokena JWT. Token otrzymasz, tworząc Dystrybucję typu „Wyszukiwanie publiczne" — token JWT jest wyświetlany w ustawieniach dystrybucji.

Za pomocą elementu HTML

<foc-config host="https://ork.footage.one" token="twoj-token-jwt" language="pl"></foc-config>

Za pomocą JavaScript

FoComponents.configure('https://ork.footage.one', 'twoj-token-jwt', 'pl');

Dostępne komponenty

foc-result — Wyniki wyszukiwania

Wyświetla aktualną listę wyników:

<foc-result link-format="/detail/%SKU%/%SLUG%"></foc-result>

link-format definiuje wzorzec URL dla stron szczegółowych. Dostępne symbole zastępcze:

Symbol Wartość
%SKU% SKU zasobu, jeśli ma kanoniczną postać — trzy litery, po nich cyfry — w przeciwnym razie UID
%SLUG% Opisowy slug URL w języku zapytania, dostarczany przez backend
%UID% Wewnętrzne UID zasobu

Slug jest opisowy, nie unikalny i nie stały. Powstaje z nazwy zasobu w języku zapytania, więc zmienia się wraz z językiem i przy każdej zmianie nazwy, a różne nazwy dają ten sam slug. Zawsze identyfikuj zasób przez %SKU% lub %UID%: samo /detail/%SLUG% doprowadzi do kolizji. Twoja strona szczegółów wczytuje zasób po SKU i akceptuje inny slug albo przekierowuje na aktualny.

Używaj %SLUG% zamiast tworzyć slug samodzielnie. Dzięki temu lista wyników i strona szczegółów zgadzają się w tym samym języku. Jeśli integracja wygeneruje własny slug, ten sam zasób otrzyma różne adresy URL.

Nakładka ze szczegółami zamiast przejścia na inną stronę

Domyślnie kliknięcie kafelka podąża za jego href. Aby zamiast tego otworzyć nakładkę, ustaw link-navigate="false":

<foc-result link-format="/detail/%SKU%/%SLUG%" link-navigate="false"></foc-result>

Kafelek zachowuje wtedy prawdziwy href w znacznikach, ale kliknięcie zostaje przechwycone i wyzwala jedynie zdarzenie foc:item-click. Kliknięcia z Ctrl/Cmd/Shift/Alt działają bez zmian, więc „otwórz w nowej karcie” i „zapisz link jako” nadal działają.

Obsłuż to zdarzenie, aby otworzyć własną nakładkę. Uwaga: zasób znajduje się w event.data, a nie w event.detail:

document.addEventListener('foc:item-click', (event) => {
  openOverlay(event.data); // pełny zasób: uid, sku, slug, name, thumbnailUrl, …
});

Nigdy nie ustawiaj link-format="javascript:void(0)". Kiedyś był to jedyny sposób na nakładkę, ale pozostawia listę wyników bez ani jednego linku do podążenia — wyszukiwarki nie znajdą wtedy żadnego z Twoich zasobów. link-navigate="false" rozwiązuje ten sam problem bez poświęcania linków.

foc-details — Widok szczegółowy zasobu

Wyświetla pojedynczy zasób. Bez atrybutu sku SKU jest odczytywane z parametru URL sku:

<foc-details sku="DWT000342"></foc-details>

foc-facets — Filtry

Wyświetla dostępne opcje filtrowania (fasetki):

<foc-facets format-counter sort-by-label="codec_norm_s,resolution_ss"></foc-facets>

foc-active-facets — Aktywne filtry

Wyświetla aktualnie aktywne filtry z możliwością ich usunięcia:

<foc-active-facets></foc-active-facets>

foc-pagination — Nawigacja strony

<foc-pagination>
  <span slot="first">Pierwsza</span>
  <span slot="previous">Poprzednia</span>
  <span slot="next">Następna</span>
  <span slot="last">Ostatnia</span>
</foc-pagination>

foc-pagesize — Wyniki na stronie

<foc-pagesize sizes="8,16,32,64" default-size="16"></foc-pagesize>

foc-result-count — Liczba wyników

<foc-result-count format>
  <span slot="before-count">Łącznie </span>
  <span slot="after-count"> wyników</span>
  <span slot="no-result">Nie znaleziono wyników</span>
</foc-result-count>

foc-asset-keywords — Słowa kluczowe zasobu

Wyświetla słowa kluczowe dla zasobu (musi znajdować się wewnątrz foc-details):

<foc-details sku="DWT000342">
  <foc-asset-keywords mode="keywords"></foc-asset-keywords>
</foc-details>

Tryby: keywords, parentKeyword, freewords.

foc-asset-image — Obraz zasobu

<foc-asset-image sku="DWT000342"></foc-asset-image>

API JavaScript

Konfigurację można zmieniać w czasie działania:

FoComponents.changeToken('nowy-token');
FoComponents.changeHost('https://inny-host.footage.one');
FoComponents.changeLanguage('pl');
FoComponents.addFilter('aspect_norm_s', '16x9');
FoComponents.removeFilter('aspect_norm_s', '16x9');

Zdarzenia

Wszystkich zdarzeń można nasłuchiwać na document. Ich dane znajdują się w event.data, a nie w event.detail:

Zdarzenie Opis
foc:result Aktualna lista wyników
foc:result-count Liczba wyników
foc:facet-add Filtr został dodany
foc:facet-remove Filtr został usunięty
foc:facet-changed Lista aktywnych filtrów
foc:search-start Wyszukiwanie rozpoczęte
foc:search-end Wyszukiwanie zakończone
foc:item-click Kliknięto kafelek wyniku (dane: zasób)
ZespołyPrzegląd