Such-Komponenten einbinden

Binde die footage.one Suche als Web Components in deine Website ein.

Überblick

footage.one stellt Web Components bereit, mit denen du eine Mediensuche direkt in deine eigene Website einbinden kannst. Die Komponenten verbinden sich mit deinem footage.one-Account und zeigen die Medien einer Distribution an.

Einbindung

Lade das Script in deine HTML-Seite:

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

Konfiguration

Konfiguriere die Verbindung zu deinem footage.one-Account. Du benötigst den Host und einen JWT-Token. Den Token erhältst du, indem du eine Distribution vom Typ „Öffentliche Suche" erstellst — der JWT-Token wird in den Distributionseinstellungen angezeigt.

Per HTML-Element

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

Per JavaScript

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

Verfügbare Komponenten

foc-result — Suchergebnisse

Zeigt die aktuelle Ergebnisliste an:

<foc-result link-format="/details.html?sku=%SKU%"></foc-result>

Das link-format definiert das URL-Muster für Detailseiten. %SKU% wird durch die Asset-ID ersetzt.

foc-details — Asset-Detailansicht

Zeigt ein einzelnes Asset an. Ohne sku-Attribut wird die SKU aus dem URL-Parameter sku gelesen:

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

foc-facets — Filter

Zeigt verfügbare Filteroptionen (Facetten) an:

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

foc-active-facets — Aktive Filter

Zeigt die aktuell aktiven Filter mit Möglichkeit zur Entfernung:

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

foc-pagination — Seitennavigation

<foc-pagination>
  <span slot="first">Erste</span>
  <span slot="previous">Zurück</span>
  <span slot="next">Weiter</span>
  <span slot="last">Letzte</span>
</foc-pagination>

foc-pagesize — Ergebnisse pro Seite

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

foc-result-count — Ergebnisanzahl

<foc-result-count format>
  <span slot="before-count">Insgesamt </span>
  <span slot="after-count"> Ergebnisse</span>
  <span slot="no-result">Keine Ergebnisse gefunden</span>
</foc-result-count>

foc-asset-keywords — Asset-Keywords

Zeigt Keywords für ein Asset an (muss innerhalb von foc-details stehen):

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

Modi: keywords, parentKeyword, freewords.

foc-asset-image — Asset-Bild

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

JavaScript API

Konfiguration kann zur Laufzeit geändert werden:

FoComponents.changeToken('neuer-token');
FoComponents.changeHost('https://anderer-host.footage.one');
FoComponents.changeLanguage('en');
FoComponents.addFilter('aspect_norm_s', '16x9');
FoComponents.removeFilter('aspect_norm_s', '16x9');

Events

Alle Events werden auf document ausgelöst:

Event Beschreibung
foc:result Aktuelle Ergebnisliste
foc:result-count Anzahl der Ergebnisse
foc:facet-add Ein Filter wurde hinzugefügt
foc:facet-remove Ein Filter wurde entfernt
foc:facet-changed Liste der aktiven Filter
foc:search-start Suche gestartet
foc:search-end Suche abgeschlossen
TeamsÜbersicht