E-Katalog-Suche ecatalog-search

eCatalog Search Viewer ist ein Katalog-Viewer, der elektronische Broschüren in einer Spread by Spread oder Seite für Seite anzeigt. Mit eCatalog können Benutzer mithilfe zusätzlicher Elemente der Benutzeroberfläche oder des dedizierten Miniaturbildmodus durch den Katalog navigieren. Benutzer können auch auf jede Seite zoomen, um mehr Details zu erhalten.

Dieser Viewer arbeitet mit E-Katalogen und unterstützt optionale Imagemaps und Tools für die Freigabe in sozialen Netzwerken. Es verfügt über Zoom-Tools, Katalog-Navigations-Tools, Vollbildunterstützung, Miniaturansichten und eine optionale Schaltfläche zum Schließen. Der Viewer unterstützt auch Tools zur gemeinsamen Nutzung in sozialen Netzwerken sowie die Optionen Drucken, Herunterladen und Favoriten. Es wurde für Desktop-PCs und mobile Geräte entwickelt.

Der Benutzer kann auch eine schlüsselwort- oder textpasswortbasierte Suche über die Kataloginhalte durchführen.

Viewer-Typ 513.

Siehe Systemanforderungen und Voraussetzungen.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/

Verwenden des E-Katalog-Viewers section-e6c68406ecdc4de781df182bbd8088b4

Der eCatalog Search Viewer stellt eine JavaScript-Hauptdatei und einen Satz Hilfsdateien (ein einziges JavaScript Include mit allen Viewer-SDK-Komponenten, die von diesem bestimmten Viewer verwendet werden, Assets, CSS) dar, die vom Viewer zur Laufzeit heruntergeladen wurden

Sie können den eCatalog Search Viewer im Popup-Modus mit einer produktionsbereiten HTML-Seite verwenden, die mit IS-Viewers bereitgestellt wird, oder im eingebetteten Modus, wo er mithilfe der dokumentierten API in die Ziel-Web-Seite integriert wird.

Konfiguration und Skinning sind mit denen der anderen Viewer vergleichbar. Die gesamte Skin-Verwaltung erfolgt über benutzerdefiniertes CSS.

Siehe Für alle Viewer gemeinsame Befehlsreferenz - Konfigurationsattribute und Für alle Viewer gemeinsame Befehlsreferenz - URL

Interagieren mit dem E-Katalog-Such-Viewer section-642e66ca38cd4032992840ec6c0b0cd2

Der E-Katalog-Such-Viewer unterstützt die folgenden Touch-Gesten, die in anderen Mobile Apps üblich sind.

Es ist möglich, einen realistischen Animationseffekt zum Spiegeln der Seite für die Navigation zwischen Katalogseiten zu aktivieren. In solchen Fällen kann ein Benutzer die Ecke einer Seite gedrückt halten und ziehen und die Seite umdrehen.

Dieser Viewer unterstützt auch Touch-Eingaben und Mauseingaben auf Windows-Geräten mit Touchscreen und Maus. Diese Unterstützung ist jedoch auf Chrome, Internet Explorer 11 und Edge-Webbrowser beschränkt.

Tools zur Freigabe in Social Media mit dem E-Katalog-Such-Viewer section-eb575084a99647c3a9591f439f40b412

Der E-Katalog-Such-Viewer unterstützt Tools zur gemeinsamen Nutzung in sozialen Netzwerken. Sie sind als Schaltfläche in der Hauptsteuerleiste verfügbar, die sich zu einer Freigabesymbolleiste erweitert, wenn Benutzende darauf klicken oder tippen.

Die Freigabesymbolleiste enthält Symbole für jeden unterstützten Freigabekanaltyp, einschließlich Facebook, Twitter, E-Mail-Freigabe, Einbettungs-Code-Freigabe und Link-Freigabe. Wenn die Tools E-Mail-Freigabe, Einbettungsfreigabe oder Linkfreigabe aktiviert sind, zeigt der Viewer ein modales Dialogfeld mit einem entsprechenden Dateneingabeformular an. Wenn Facebook oder Twitter aufgerufen wird, leitet der Viewer den Benutzer von einem Social-Media-Service zu einem Standarddialogfeld für die Freigabe um. Freigabetools sind aufgrund von Sicherheitsbeschränkungen des Webbrowsers nicht im Vollbildmodus verfügbar.

Die Suchfunktion des Viewers ist als Lookglass-Symbol in der Hauptsymbolleiste verfügbar. Durch Klicken oder Tippen auf das Symbol wird das Suchfeld mit einem Eingabefeld aktiviert. Nach Eingabe eines Keywords oder einer Phrase und Drücken der Eingabetaste rendert der Viewer Suchergebnisse im Bedienfeld und markiert gefundene Wörter in der Hauptansicht.

Einbetten des E-Katalog-Such-Viewers section-6bb5d3c502544ad18a58eafe12a13435

Verschiedene Web-Seiten haben unterschiedliche Anforderungen an das Viewer-Verhalten. Manchmal enthält eine Web-Seite einen Link, der bei Auswahl den Viewer in einem separaten Browser-Fenster öffnet. In anderen Fällen ist es erforderlich, den Viewer direkt in die Hosting-Seite einzubetten. Im letzteren Fall kann die Web-Seite über ein statisches Seiten-Layout verfügen oder ein responsives Design verwenden, das auf verschiedenen Geräten oder für verschiedene Browser-Fenstergrößen unterschiedlich angezeigt wird. Um diesen Anforderungen gerecht zu werden, unterstützt der Viewer drei primäre Betriebsmodi: Popup, Einbettung mit fester Größe und Einbetten von responsivem Design.

Über den Popup-Modus

Im Popup-Modus wird der Viewer in einem separaten Fenster oder einer separaten Registerkarte des Webbrowsers geöffnet. Sie nimmt den gesamten Browser-Fensterbereich und passt sich an, falls die Größe des Browsers geändert oder die Ausrichtung eines Mobilgeräts geändert wird.

Der Popup-Modus ist der gängigste für Mobilgeräte. Die Web-Seite lädt den Viewer mithilfe window.open() JavaScript-Aufrufs, eines ordnungsgemäß konfigurierten HTML-Elements A einer anderen geeigneten Methode.

Es wird empfohlen, eine vorkonfigurierte HTML-Seite für den Popup-Betriebsmodus zu verwenden. In diesem Fall wird sie als eCatalogSearchViewer.html bezeichnet und befindet sich im html5/ Unterordner Ihrer standardmäßigen IS-Viewer-Bereitstellung:

<s7viewers_root>/html5/eCatalogSearchViewer.html

Sie können die visuelle Anpassung erreichen, indem Sie benutzerdefiniertes CSS anwenden.

Im Folgenden finden Sie ein Beispiel für HTML-Code, der den Viewer in einem neuen Fenster öffnet:

<a href="https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/" target="_blank">Open pop-up viewer</a>

Über den Einbettungsmodus für feste Größe und den Einbettungsmodus für responsives Design

Im eingebetteten Modus wird der Viewer zur vorhandenen Web-Seite hinzugefügt, die möglicherweise bereits einige Kundeninhalte enthält, die nicht mit dem Viewer verknüpft sind. Der Viewer belegt normalerweise nur einen Teil des Grundbesitzes einer Web-Seite.

Die wichtigsten Anwendungsfälle sind Web-Seiten, die für Desktops oder Tablet-Geräte ausgerichtet sind, sowie responsive Design-Seiten, deren Layout automatisch an den Gerätetyp angepasst wird.

Einbetten in fester Größe wird verwendet, wenn der Viewer seine Größe nach dem ersten Laden nicht ändert. Dies ist die beste Wahl für Web-Seiten mit statischem Layout.

Beim Einbetten des responsiven Designs wird davon ausgegangen, dass der Viewer zur Laufzeit je nach Größenänderung seiner Container-DIV möglicherweise die Größe ändern muss. Der häufigste Anwendungsfall ist das Hinzufügen eines Viewers zu einer Web-Seite, die ein flexibles Seiten-Layout verwendet.

Im responsiven Design-Einbettungsmodus verhält sich der Viewer unterschiedlich, je nachdem, wie die Größe der Web-Seite seinen Container-DIV bestimmt. Wenn die Web-Seite nur die Breite des Container-DIV festlegt und seine Höhe nicht eingeschränkt wird, wählt der Viewer automatisch seine Höhe entsprechend dem Seitenverhältnis des verwendeten Assets aus. Diese Funktion stellt sicher, dass das Asset perfekt in die Ansicht passt, ohne dass an den Seiten ein Abstand vorhanden ist. Dieser Anwendungsfall ist der häufigste bei Web-Seiten, die responsive Layout-Frameworks wie Bootstrap, Foundation usw. verwenden.

Wenn die Web-Seite jedoch sowohl die Breite als auch die Höhe für die Container-DIV des Viewers festlegt, füllt der Viewer nur diesen Bereich aus und folgt der Größe, die das Web-Seiten-Layout bereitstellt. Ein gutes Beispiel ist das Einbetten des Viewers in eine modale Überlagerung, bei der die Größe der Überlagerung an die Fenstergröße des Webbrowsers angepasst ist.

Einbetten in fester Größe

Sie können den Viewer wie folgt zu einer Web-Seite hinzufügen:

<s7viewers_root>/html5/js/eCatalogSearchViewer.js

Sie können einen relativen Pfad verwenden, wenn der Viewer auf einem der Adobe-Dynamic Media-Server bereitgestellt wird und er von derselben Domain bereitgestellt wird. Andernfalls geben Sie einen vollständigen Pfad zu einem der Adobe-Dynamic Media-Server an, auf denen die IS-Viewer installiert sind.

Der relative Pfad sieht wie folgt aus:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogSearchViewer.js"></script>

Responsives Design mit unbegrenzter Höhe

Beim Einbetten eines responsiven Designs verfügt die Web-Seite normalerweise über ein flexibles Layout, das die Laufzeitgröße der Container-DIV des Viewers bestimmt. Nehmen wir für die Zwecke dieses Beispiels an, dass die Web-Seite dem Container-DIV des Viewers ermöglicht, 40 % der Fenstergröße des Webbrowsers zu verwenden, wobei seine Höhe nicht beschränkt wird. Der resultierende HTML-Code der Web-Seite sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Das Hinzufügen des Viewers zu einer solchen Seite ähnelt dem Einbetten in fester Größe, mit dem einzigen Unterschied, dass Sie die Viewer-Größe nicht explizit definieren müssen.

Alle oben genannten Schritte sind dieselben wie bei der Einbettung in fester Größe. Fügen Sie die Container-DIV zum vorhandenen DIV „Halter“ hinzu. Der folgende Code ist ein vollständiges Beispiel. Sie können sehen, wie sich die Viewer-Größe ändert, wenn der Browser skaliert wird, und wie das Seitenverhältnis des Viewers mit dem Asset übereinstimmt.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/",
 "searchserverurl":"https://s7search1.scene7.com/s7search/"
}
}).init();
</script>
</body>
</html>

Die folgende Beispielseite zeigt weitere Anwendungsfälle responsiven Designs mit unbegrenzter Höhe in der Praxis:

Live-Demos

Flexible Einbettung mit definierter Breite und Höhe

Bei Einbettungen mit flexibler Größe und definierter Breite und Höhe ist der Web-Seiten-Stil anders. Das heißt, sie stellt dem DIV „Halter“ beide Größen zur Verfügung und zentriert ihn im Browser-Fenster. Außerdem legt die Web-Seite die Größe des HTML- und BODY auf 100 % fest:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Die restlichen Einbettungsschritte sind identisch mit der responsiven Designeinbettung mit unbegrenzter Höhe. Das daraus resultierende Beispiel lautet:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/",
 "searchserverurl":"https://s7search1.scene7.com/s7search/"
}
}).init();
</script>
</body>
</html>

Einbetten mithilfe der Setter-basierten API

Anstelle der Verwendung der JSON-basierten Initialisierung ist es möglich, eine Setter-basierte API und einen Nicht-Args-Konstruktor zu verwenden. Bei diesem API-Konstruktor übernimmt kein Parameter und Konfigurationsparameter werden mithilfe von setContainerId()-, setParam()- und setAsset()-API-Methoden mit separaten JavaScript-Aufrufen angegeben.

Das folgende Beispiel zeigt die Einbettung fester Größe mit einer Setter-basierten API:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script>
<style type="text/css">
#s7viewer.s7ecatalogsearchviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer();
eCatalogSearchViewer.setContainerId("s7viewer");
eCatalogSearchViewer.setParam("serverurl", "https://s7d1.scene7.com/is/image/");
eCatalogSearchViewer.setParam("searchserverurl", "https://s7search1.scene7.com/s7search/");
eCatalogSearchViewer.setAsset("Viewers/Pluralist");
eCatalogSearchViewer.init();
</script>
</body>
</html>