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.

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="/details.html?sku=%SKU%"></foc-result>

link-format definiuje wzorzec URL dla stron szczegółowych. %SKU% jest zastępowany przez ID zasobu.

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>

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

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

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

Wszystkie zdarzenia są wywoływane na document:

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

Zespoły Przegląd