Sie können aus statischen Bildern ganz einfach ansprechende Erlebnisse für Kunden machen, indem Sie Hotspots mit Shopping-Funktion auf ein Bild ziehen und dort ablegen. Hotspots mit Shopping-Funktion kombinieren zusätzliche Informationen über ein Produkt oder eine Dienstleistung mit einer direkten POS-Funktion, wie „In den Einkaufswagen legen“ oder „Kaufen“. Kunden können diese Hotspots auswählen und direkt mit dem Produkt oder Service verknüpft, zum Warenkorb hinzugefügt oder mit einer Webseite verknüpft werden. Direkte Erlebnisse wie diese erhöhen die Kundeninteraktionen und Konversionen auf Ihrer Website.
Die folgende Abbildung zeigt ein Banner mit Shopping-Funktion mit einem Schnellansichts-Popup. Ein Benutzer aktiviert die Schnellansicht, indem er den Kreis oder den Hotspot im Modell auswählt.
Zeigen Sie die interaktiven Bilder in Aktion auf der oben gezeigten Webseite an, indem Sie Folgendes aufrufen:
Führen Sie eine exemplarische Anleitung dazu durch, wie interaktive Bildbanner erstellt werden🔗 (10 Minuten und 33 Sekunden). Außerdem erfahren Sie, wie Sie interaktive Bild-Banner in der Vorschau betrachten, bearbeiten und bereitstellen können.
Die folgende schrittweise Workflow-Beschreibung soll Ihnen dabei helfen, interaktive Bilder in Adobe Experience Manager Assets einzurichten und schnell auszuführen.
Suchen Sie nach der Überschrift Beispiele in einigen der Schnellstartaufgaben. Hier finden Sie ein kurzes Tutorial, das auf der folgenden Beispielwebseite basiert, der noch keine interaktiven Bilder hinzugefügt wurden:
Das Tutorial veranschaulicht die Schritte zur Integration von interaktiven Bildern auf Ihrer eigenen Website.
Schritte zum Erstellen interaktiver Bilder:
(Optional) Ermitteln Sie Hotspot-Variablen : Wenn Sie Experience Manager Assets und Dynamic Media eigenständig verwenden, ermitteln Sie zunächst die dynamischen Variablen, die in Ihrer vorhandenen Schnellansichtsimplementierung verwendet werden. Anschließend können Sie beim Erstellen des interaktiven Bildes Hotspot-Daten eingeben. Siehe (Optional) Ermitteln von Hotspot-Variablen.
Wenn Sie jedoch Adobe Experience Manager Sites, Adobe Experience Manager eCommerce oder beides verwenden, ist dieser Schritt nicht erforderlich.
Siehe eCommerce-Konzepte in Experience Manager Assets.
(Optional) Erstellen Sie eine Viewer-Vorgabe für interaktive Bilder - Passen Sie das Grafikbild an, das zur Darstellung von Hotspots verwendet wird. Die Erstellung Ihrer eigenen Viewer-Vorgabe für interaktive Bilder ist nicht erforderlich, wenn Sie stattdessen die standardmäßig bereitgestellte Viewer-Vorgabe für interaktive Bilder namens Shoppable_Banner
(Banner mit Shopping-Funktion) verwenden möchten.
Siehe (Optional) Erstellen einer Viewer-Vorgabe für interaktive Bilder.
Hochladen eines Bildbanners : Laden Sie Bildbanner hoch, die interaktiv sein sollen.
Siehe Hochladen eines Bildbanners.
Hinzufügen von Hotspots zu einem Bildbanner : Fügen Sie einem Bildbanner einen oder mehrere Hotspots hinzu und weisen Sie jedem eine Aktion wie einen Hyperlink, eine Schnellansicht oder ein Experience Fragment zu. Nachdem Sie Hotspots hinzugefügt haben, schließen Sie diese Aufgabe ab, indem Sie das interaktive Bild veröffentlichen.
Fügen Sie ein interaktives Bild zu Ihrer Website hinzu: Wenn Sie Experience Manager Sites, eCommerce oder beides verwenden, können Sie das interaktive Bild zu einer Web-Seite in Experience Manager hinzufügen. Ziehen Sie die interaktive Medienkomponente auf die Seite. Siehe Hinzufügen von Dynamic Media-Assets zu Seiten.
Wenn Sie Experience Manager Assets und Dynamic Media eigenständig verwenden, müssen Sie den Einbettungscode auf Ihrer Website kopieren und in Ihre Schnellansicht integrieren. Siehe Integrieren eines interaktiven Bildes auf Ihrer Website.
Wenn Sie einen Drittanbieter-WCM (Web Content Manager) verwenden, müssen Sie das neue interaktive Video in die vorhandene Schnellansichtsimplementierung integrieren, die auf Ihrer Website verwendet wird. Siehe Integrieren eines interaktiven Bildes in einer Schnellansicht.
Diese Aufgabe ist nur erforderlich, wenn Folgendes zutrifft:
Wenn Ihre Experience Manager-Implementierung E-Commerce nutzt, können Sie diese Aufgabe überspringen und mit der nächsten Aufgabe fortfahren.
Ermitteln Sie zunächst die dynamischen Variablen, die von Ihrer vorhandenen Schnellansichtsimplementierung verwendet werden, damit Sie Hotspot-Daten eingeben können, um das interaktive Bild zu erstellen.
Wenn Sie Hotspots zu einem Bannerbild in Experience Manager Assets hinzufügen, müssen Sie jedem Hotspot eine SKU (Stock Keeping Unit, Lagereinheit) und optional zusätzliche Variablen zuweisen. Anhand dieser Hotspot-Variablen werden Hotspots später mit Schnellansichtsinhalten abgeglichen.
Sie müssen die Anzahl und den Typ der Variablen für die Verknüpfung mit Hotspot-Daten korrekt identifizieren. Jeder dem Bannerbild hinzugefügte Hotspot muss ausreichend Informationen enthalten, um das Produkt im vorhandenen Backend-System eindeutig zu identifizieren.
Sie können ein Set aus Variablen für Hotspot-Daten auf mehrere Arten ermitteln.
Manchmal ist es ausreichend, IT-Experten zu konsultieren, die für die vorhandene Schnellansichtsimplementierung verantwortlich sind. IT-Spezialisten wissen wahrscheinlich, was der Mindestsatz an Daten ist, die zur Identifizierung von Schnellansichten im System erforderlich sind. Es jedoch auch möglich, einfach das vorhandene Verhalten des Frontend-Codes zu analysieren.
Die meisten Schnellansichtsimplementierungen verwenden das folgende Paradigma:
Dann werden verschiedene Bereiche der vorhandenen Website besucht, auf denen die Schnellansichtsfunktion implementiert ist. Anschließend wird die Schnellansicht Trigger und die Ajax-URL erfasst, die von der Webseite zum Laden der Schnellansichtsdaten oder -inhalte gesendet wurde.
Normalerweise müssen Sie keine speziellen Debugging-Tools verwenden. Moderne Webbrowser verfügen über Web-Inspektoren, die dafür ausreichend sind. Die folgenden Webbrowser beispielsweise umfassen Web-Inspektoren:
Um alle ausgehenden HTTP-Anforderungen in Google Chrome anzuzeigen, drücken Sie F12, um den Bereich für Entwicklertools zu öffnen, und wählen Sie dann die Registerkarte "Netzwerk"aus.
Drücken Sie auf einem Mac Befehlstaste+Wahltaste+I, um den Bereich für Entwicklertools zu öffnen, und wählen Sie dann die Registerkarte "Netzwerk"aus.
In Firefox können Sie entweder durch Drücken von F12 das Firebug-Plug-in aktivieren und dessen Registerkarte „Netzwerk“ verwenden oder das integrierte Inspektor-Tool und dessen Registerkarte „Netzwerk“ einsetzen.
Drücken Sie auf einem Mac Befehlstaste+Wahltaste+I, um den Bereich für Entwicklertools zu öffnen, und wählen Sie dann die Registerkarte "Inspektor"aus.
Wenn die Netzwerküberwachung im Browser aktiviert ist, lösen Sie die Schnellansicht auf der Seite aus.
Suchen Sie nun die Schnellansichts-Ajax-URL im Netzwerkprotokoll und kopieren Sie die aufgezeichnete URL für die zukünftige Analyse. Normalerweise werden beim Trigger der Schnellansicht zahlreiche Anfragen an den Server gesendet. In der Regel ist die Schnellansichts-Ajax-URL die erste URL in der Liste. Sie weist einen Teil oder Pfad mit einer komplexen Abfragezeichenfolge auf und ihr MIME-Typ lautet entweder text/html
, text/xml
oder text/javascript
.
Während dieses Vorgangs müssen Sie verschiedene Bereiche der Website mit verschiedenen Produktkategorien und -typen besuchen. Der Grund dafür ist, dass Schnellansichts-URLs Teile enthalten können, die für eine bestimmte Website-Kategorie häufig sind, sich aber nur ändern, wenn Sie einen anderen Bereich der Website besuchen.
Im einfachsten Fall ist der einzige variable Teil der Schnellansichts-URL die Produkt-SKU. In diesem Fall ist der SKU-Wert das einzige Datenteil, das Sie benötigen, um dem Bannerbild Hotspots hinzuzufügen.
In komplexen Fällen verfügt die Schnellansichts-URL jedoch zusätzlich zur SKU über verschiedene Elemente, wie Kategorie-ID, Farbcode und Größencode. In diesen Fällen ist jedes Element eine separate Variable in der Hotspot-Datendefinition der Funktion für interaktive Bilder mit Shopping-Funktion in Experience Manager Assets.
Im Folgenden finden Sie einige Beispiele für Schnellansichts-URLs und die resultierenden Hotspot-Variablen:
Einzelne SKU, befindet sich in der Abfragezeichenfolge. |
Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:
Der einzige variable Teil der URL ist der Wert des Abfrageparameters „productId=“ und ist offensichtlich ein SKU-Wert. Daher benötigen Ihre Hotspots nur SKU-Felder, die mit Werten wie |
Einzelne SKU, befindet sich im URL-Pfad. |
Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:
Der variable Teil befindet sich im letzten Abschnitt des Pfads und wird zum SKU-Wert der Hotspots: |
SKU und Kategorie-ID in der Abfragezeichenfolge. |
Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:
In diesem Fall liegen zwei abweichende Teile in der URL vor. Die SKU wird im Im eigentlichen Sinne handelt es sich bei Hotspot-Definitionen um Paare. Also einen SKU-Wert und eine zusätzliche Variable mit dem Namen
|
Beispiel
Sie können den in den drei oben genannten Beispielen verwendeten Ansatz auch auf die Demo-Web-Seite anwenden:
Die Demo-Web-Seite enthält mehrere Produkt-Miniaturansichten. Jede davon verfügt über eine Schnellansichts-Schaltfläche mit der Bezeichnung „Mehr anzeigen“. Wenn das Debugging-Tool Ihres Webbrowsers noch aktiviert ist, wählen Sie jede Schaltfläche aus und notieren Sie sich die aufgezeichneten Schnellansichts-URLs. Nachdem Sie alle vier Produktschnellansichtsanforderungen aktiviert haben, die auf der Seite verfügbar sind, erhalten Sie die folgende Liste mit den an das Backend gesendeten Schnellansichtsanforderungen:
/datafeed/Male-Windbreaker.json
/datafeed/Male-SimpleHenley.json
/datafeed/Male-CamoPullover.json
/datafeed/Female-QuiltedDownJacket.json
Wenn Sie sich die Server-Aufrufe ansehen, sehen Sie, dass produktspezifische Informationen nur im Anfragepfad vorhanden sind. Beachten Sie außerdem, dass die Abfragezeichenfolge überhaupt nicht verwendet wird und zwei unterschiedliche Typen von Datenteilen beteiligt sind:
Mit diesen Informationen hat die gesamte Schnellansichts-URL das folgende Muster:
/datafeed/$categoryId$-$SKU$.json
Auf Grundlage einer solchen Analyse würden Sie categoryId
und SKU
für Hotspots verwenden.
Sie können jetzt ein Bildbanner hochladen und ihm Hotspots mit der Funktion für interaktive Bilder mit Shopping-Funktion in Experience Manager Assets hinzufügen.
Sie können die standardmäßige Viewer-Vorgabe für interaktive Bilder mit dem Namen Shoppable_Banner
verwenden, die im Lieferumfang von Experience Manager-Assets enthalten ist. Sie können auch eine eigene benutzerdefinierte Viewer-Vorgabe für interaktive Bilder erstellen.
Wenn Sie eine benutzerdefinierte Viewer-Vorgabe für interaktive Bilder erstellen, können Sie das Erscheinungsbild von Hotspots auf dem Bildbanner bestimmen. Bei der Erstellung der Viewer-Vorgabe können Sie eine Hotspot-Grafik aus einer Galerie mit vordefinierten Bildern verwenden.
Nachdem Sie die Viewer-Vorgabe gespeichert haben, wird sie automatisch auf der Listenseite "Viewer-Vorgabe"in Experience Manager-Assets aktiviert (aktiviert). Diese Funktionalität bedeutet, dass sie in der interaktiven Medienkomponente sowie dann sichtbar ist, wenn Sie ein Asset anzeigen. Um jedoch ein interaktives Banner mit dieser Viewer-Vorgabe bereitzustellen, müssen Sie publish auch Ihre Viewer-Vorgabe veröffentlichen. Diese Regel gilt für benutzerdefinierte oder vordefinierte Viewer-Vorgaben.
So erstellen Sie eine Viewer-Vorgabe für interaktive Bilder:
Navigieren Sie in der linken Leiste zu Tools > Assets > Viewer-Vorgaben.
Wählen Sie in der rechten oberen Ecke der Seite Erstellen aus.
Geben Sie im Dialogfeld „Neue Viewer-Vorgabe“ einen Namen ein, um die Viewer-Vorgabe für interaktive Banner zu beschreiben.
Der Titel wird nach dem Speichern auf der Listenseite "Viewer-Vorgabe"angezeigt.
Wählen Sie im Pulldown-Menü „Rich-Media-Typ“ die Option Interaktives Bild aus.
Wählen Sie Erstellen.
Wählen Sie auf der Seite Viewer-Vorgabe bearbeiten die Registerkarte Erscheinungsbild aus.
Führen Sie einen der folgenden Schritte aus:
Wählen Sie in der rechten oberen Ecke der Seite Speichern aus.
Stellen Sie sicher, die neue Viewer-Vorgabe zu veröffentlichen.
Informationen finden Sie unter Veröffentlichen der von Ihnen hinzugefügten Viewer-Vorgaben.
Sie sind nun bereit, ein Bildbanner hochzuladen.
Wenn Sie die gewünschten Bilder bereits hochgeladen haben, fahren Sie mit dem nächsten Schritt fort: Hinzufügen von Hotspots zu einem Bildbanner.
So laden Sie ein Bildbanner hoch:
Laden Sie Bildbanner hoch, die interaktiv sein sollen.
Informationen hierzu finden Sie unter Hochladen von Assets.
Sie können jetzt dem Bildbanner Hotspots hinzuzufügen. Anweisungen dazu finden Sie in der folgenden Aufgabe.
Sie können einem Bildbanner Hotspots hinzufügen, indem Sie den Editor auf der Seite „Hotspot-Verwaltung“ verwenden.
Beim Hinzufügen von Hotspots können Sie sie als eine Schnellansichts-Popup-Anzeige, als einen Hyperlink oder als Experience Fragment definieren.
Weitere Informationen finden Sie unter Experience Fragments.
Im interaktiven Bild werden die Tools zur Freigabe in Social Media nicht unterstützt, wenn Sie den Viewer in ein Experience Fragment einbetten. Um dies zu vermeiden, können Sie Viewer-Vorgaben verwenden oder erstellen, die keine Tools zur Freigabe in Social Media aufweisen. Mit diesen Viewer-Vorgaben können Sie sie erfolgreich in Experience Fragments einbetten.
Die Optionen „Rückgängig“ und „Wiederholen“ in der Nähe der oberen rechten Ecke der Seite werden während der aktuellen Erstellungs-/Bearbeitungssitzung unterstützt.
Wenn Sie die Erstellung des interaktiven Bildes abgeschlossen haben, können Sie eine Vorschau anzeigen, um das interaktive Bild aus der Perspektive der Kunden zu betrachten.
Siehe (Optional) Anzeigen einer Vorschau für interaktive Bilder.
Wenn Sie einem Bild in einem interaktiven Bild oder einem Karussell-Banner Hotspots hinzufügen, werden die Hotspot-Informationen am selben Metadaten-Speicherort gespeichert. Dieser Ort ist relativ zum Speicherort des Bildes, unabhängig davon, ob es sich um ein interaktives Bild oder ein Karussellbanner handelt. Das bedeutet, dass Sie dasselbe Bild zusammen mit den definierten Hotspot-Daten in beiden Viewern einfach wiederverwenden können.
Karussellbanner unterstützen Imagemaps auf Bildern, die auch Hotspots enthalten können. Interaktive Bilder nicht. Beachten Sie diese Regel, wenn Sie ein interaktives Bild oder ein Karussellbanner erstellen möchten, das dasselbe Bild verwendet. Sie können interaktive Bilder und Karussellbanner erstellen, indem Sie stattdessen separate Kopien desselben Bildes verwenden.
Weitere Informationen finden Sie unter Karussellbanner.
Wenn Sie interaktive Bilder mit Hotspots bearbeiten, um das Bild zu beschneiden, werden die Hotspots entfernt.
So fügen Sie einem Bildbanner Hotspots hinzu:
Navigieren Sie in der Ansicht „Assets“ zu dem Bildbanner, das interaktiv sein soll.
Führen Sie einen der folgenden Schritte aus:
Bewegen Sie den Mauszeiger über das Bild und wählen Sie Auswählen (Häkchensymbol). Wählen Sie in der Symbolleiste Bearbeiten aus.
Bewegen Sie den Mauszeiger über das Bild und wählen Sie Weitere Aktionen (Symbol mit drei Punkten) Bearbeiten.
Wählen Sie das Bild aus, damit Sie es auf der Seite Detailansicht öffnen können. Wählen Sie in der Symbolleiste Bearbeiten aus.
Wählen Sie links oben auf der Seite Hotspot hinzufügen (Fingertipp-Symbol) aus, um die Hotspot-Verwaltungsseite zu öffnen.
Wählen Sie links oben auf der Seite Hotspot aus.
Geben Sie im Textfeld „Name“ den Namen des Hotspots ein. Dieser Name wird auch in der Dropdownliste „Ausgewählter Hotspot“ angezeigt.
Führen Sie einen der folgenden Schritte aus:
Wählen Sie Schnellansicht aus.
Wenn Sie Experience Manager Sites oder eCommerce-Kunde sind, wählen Sie das Produktauswahlsymbol (Lupe) aus, um die Seite " auswählen"zu öffnen. Wählen Sie das Produkt aus, das Sie verwenden möchten, und klicken Sie dann oben rechts auf der Seite auf Wählen Sie, damit Sie zur Seite "Hotspot-Verwaltung"zurückkehren können.
Wenn Sie kein Experience Manager Sites- oder E-Commerce-Kunde sind, gehen Sie wie folgt vor:
category=Males
eine hinzugefügte Variable.Wählen Sie Hyperlink aus.
Vergessen Sie nicht anzugeben, ob der Link auf einer neuen Browser-Registerkarte (empfohlener Standard) oder auf derselben Registerkarte geöffnet werden soll.
Weitere Informationen finden Sie unter Arbeiten mit Selektoren .
Wählen Sie Experience Fragment aus.
Wenn Sie Experience Manager Sites-Kunde sind, wählen Sie das Suchsymbol (Lupe) aus, um die Seite "Experience Fragment"zu öffnen. Wählen Sie das Experience Fragment aus, das Sie verwenden möchten, und klicken Sie dann oben rechts auf der Seite auf Wählen Sie , um zur Seite "Hotspot-Verwaltung"zurückzukehren.
Weitere Informationen finden Sie unter Experience Fragments.
Legen Sie die Breite und Höhe des Experience Fragment fest, so wie es im Banner angezeigt werden soll.
Im interaktiven Bild werden die Tools zur Freigabe in Social Media nicht unterstützt, wenn Sie den Viewer in ein Experience Fragment einbetten. Um dies zu vermeiden, können Sie Viewer-Vorgaben verwenden oder erstellen, die keine Tools zur Freigabe in Social Media aufweisen. Mit diesen Viewer-Vorgaben können Sie sie erfolgreich in Experience Fragments einbetten.
Wählen Sie Save aus, um Ihre Arbeit zu speichern und zur Seite "Durchsuchen"zurückzukehren.
Veröffentlichen Sie das interaktive Bild. Durch die Veröffentlichung kann das Banner über die Cloud bereitgestellt werden. Außerdem wird Einbettungscode generiert, wenn Sie die Integration mit einer Drittanbieter-Website benötigen.
Siehe Veröffentlichen von Assets.
Nachdem Sie Hotspots hinzugefügt und das interaktive Bild veröffentlicht haben, können Sie es jetzt einer vorhandenen Website hinzufügen.
Siehe Integrieren eines interaktiven Bildes auf Ihrer Website.
Wenn Sie interaktive Bilder mit Hotspots bearbeiten, um das Bild zu beschneiden, werden die Hotspots entfernt.
Sie können die Vorschau verwenden, um eine Darstellung davon anzuzeigen, wie Ihr interaktives Bild Kunden angezeigt wird, und um die Hotspots des Bildes zu testen, um sicherzustellen, dass sie sich wie erwartet verhalten.
Wenn das interaktive Bild Ihren Vorstellungen entspricht, können Sie es veröffentlichen.
Siehe Einbetten des Video- oder Bild-Viewers auf einer Web-Seite.
Siehe Verknüpfen von URLs mit einer Webanwendung. Die URL-basierte Verknüpfungsmethode ist nicht möglich, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, insbesondere über Links zu Seiten in Adobe Experience Manager Sites.
Siehe Hinzufügen von Dynamic Media-Assets zu Seiten.
So zeigen Sie eine Vorschau für interaktive Bilder an:
Weitere Informationen zum Veröffentlichen interaktiver Bild-Assets finden Sie unter Veröffentlichen von Assets .
Nachdem Sie ein Bannerbild hochgeladen, Hotspots hinzugefügt und das interaktive Bild veröffentlicht haben, können Sie es jetzt auf Ihrer Website hinzufügen.
Wenn Sie Experience Manager Sites-Kunde sind, können Sie das interaktive Bild hinzufügen, indem Sie die interaktive Medienkomponente auf Ihre Seite ziehen. Siehe Hinzufügen von Dynamic Media-Assets zu Seiten.
Wenn Sie nur Experience Manager Assets verwenden, können Sie das interaktive Bild manuell zu Ihrer Website hinzufügen, wie in diesem Abschnitt beschrieben.
Kopieren Sie den Einbettungs-Code des veröffentlichten interaktiven Bildes.
Siehe Einbetten des Video- oder Bild-Viewers auf einer Web-Seite.
Fügen Sie den kopierten Einbettungs-Code auf dem gewünschten Bereich innerhalb der Web-Seite hinzu.
Der kopierte Einbettungs-Code ist für eine responsive Umgebung ausgelegt, sodass die Anpassung an den zugewiesenen Bereich automatisch erfolgt.
Beispiel
Verwenden der Demo-Website als ein Beispiel:
Beachten Sie, dass das Bild der drei Männer ein statisches IMG
-Tag ist:
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">
Die Integration ist so einfach wie das Entfernen des IMG
-Tags und dessen Ersetzung durch den kopierten Einbettungscode aus Experience Manager Assets. Sie können das Ergebnis in der folgenden URL anzeigen, die ein interaktives Bild mit Shopping-Funktion auf der Seite mit drei Kreis-Hotspots anzeigt:
An dieser Stelle dienen die Hotspots auf dem interaktiven Bild mit Shopping-Funktion auf der Demowebsite nur zu Anzeigezwecken. sie sind noch nicht in die Schnellansicht integriert.
Um einen "Zuschnitt"auf ein interaktives Bild mit Shopping-Funktion für eine responsive Umgebung anzuwenden, können Sie das Konfigurationsattribut für interaktive Bilder ZoomView.iscommand
in den Pfad einbeziehen. Die Komponente ZoomView
wird aufgerufen und iscommand
ist der Image Serving-Befehl "Zuschneiden", den Sie anwenden.
Informationen hierzu finden Sie im Thema über das Konfigurationsattribut ZoomView.iscommand.
Informationen finden Sie unter Image-Serving-Befehl.
Jetzt können Sie das interaktive Bild in eine vorhandene Schnellansicht auf Ihrer Website integrieren.
Diese Aufgabe ist nur relevant, wenn Sie ein eigenständiger Kunde von Experience Manager Assets sind.
Der letzte Schritt in diesem Prozess ist die Integration des interaktiven Bildes in eine vorhandene Schnellansichtsimplementierung auf Ihrer Website. Es gibt keine Lösung für die Integration, die für alle Fälle funktioniert. Jede Schnellansichtsimplementierung ist einzigartig und es ist ein spezifischer Ansatz erforderlich. Wahrscheinlich ist dabei die Unterstützung eines Frontend-IT-Mitarbeiters erforderlich.
Die vorhandene Schnellansichtsimplementierung stellt normalerweise eine Kette von untereinander verknüpften Aktionen dar, die auf der Web-Seite in der folgenden Reihenfolge stattfinden:
Diese Aufrufe stellen keine unabhängigen öffentlichen API-Aufrufe dar, die durch die Web-Seitenlogik in einem beliebigen Schritt aufgerufen werden können. Vielmehr handelt es sich um einen verketteten Aufruf, in dem der jeweils nächste Schritte in der letzten Phase (Callback) des vorherigen Schritts ausgeblendet ist.
Während das interaktive Bild mit Shopping-Funktion Schritt 1 und teilweise Schritt 2 ersetzt, wenn ein Benutzer einen Hotspot innerhalb des Shop-fähigen Bildes auswählt, wird diese Benutzerinteraktion vom Viewer verarbeitet. Der Viewer gibt ein Ereignis an die Webseite zurück, das alle Hotspot-Daten enthält, die zuvor zu Experience Manager Assets hinzugefügt wurden.
In einem solchen Ereignis-Handler nimmt der Frontend-Code Folgendes vor:
Der von Experience Manager Assets zurückgegebene Einbettungscode verfügt bereits über einen einsatzbereiten Ereignishandler, der auskommentiert ist, wie im folgenden hervorgehobenen Codefragment zu sehen ist:
var s7interactiveimageviewer = new s7viewers.InteractiveImage({
"containerId" : "s7interactiveimage_div",
"params" : {
"serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
"contenturl" : "https://aodmarketingna.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Media",
"asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
})
/* // Example of interactive image event for Quickview.
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku; //SKU for product ID
//To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
loadQuickView(sku); //Replace this call with your Quickview plugin
//Please refer to your Quickviewer plugin for the Quickview call
},
});
*/
s7interactiveimageviewer.init();
Daher ist es nur erforderlich, die Auskommentierung des Codes aufzuheben und den Platzhalter-Handler-Text durch den Code zu ersetzen, der für die bestimmte Web-Seite spezifisch ist.
Der Prozess der Erstellung der Schnellansichts-URL ist das Gegenteil des Prozesses, der zur Identifizierung der zuvor behandelten Hotspot-Variablen verwendet wird.
Siehe Ermitteln von Hotspot-Variablen.
Anhand der vorherigen Beispiele für Schnellansichts-URLs können Sie in den folgenden Beispielen sehen, wie die Schnellansichts-URL in jedem Fall erstellt wird:
Einzelne SKU, befindet sich in der Abfragezeichenfolge. |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100";
},
}); |
Einzelne SKU, befindet sich im URL-Pfad. |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/product/" + inData.sku;
},
}); |
SKU und Kategorie-ID in der Abfragezeichenfolge. |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku;
},
}); |
Der letzte Schritt besteht darin, die Schnellansichts-URL auszulösen, und für das Aktivieren des Schnellansichtsbereichs ist höchstwahrscheinlich die Unterstützung eines Frontend-IT-Mitarbeiters aus Ihrer IT-Abteilung erforderlich. Er verfügt am ehesten über das entsprechende Fachwissen, um die Schnellansichtsimplementierung aus dem entsprechenden Schritt entsprechend auszulösen, um über eine einsatzbereite Schnellansichts-URL zu verfügen.
Sie können sehen, wie diese Schritte auf die Demo-Website angewendet werden, sodass ein interaktives Bild mit Shopping-Funktion mit dem Schnellansichts-Code voll integriert wird. Die Struktur der Schnellansichts-URL wurde bereits wie folgt ermittelt:
/datafeed/$categoryId$-$SKU$.json
Um diese URL innerhalb der Handlers quickViewActivate
zu rekonstruieren, können Sie die Felder categoryId
und SKU
verwenden, die im Objekt inData
verfügbar sind, das durch den Code des Viewers an den Handler übergeben wird:
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
Auf der Demo-Website wird die Anzeige des Schnellansichtsdialogfelds durch einen einfachen loadQuickView()
-Funktionsaufruf ausgelöst. Diese Funktion akzeptiert als einziges Argument die Schnellansichtsdaten-URL. Der letzte Schritt bei der Integration des interaktiven Bildes mit Shopping-Funktion besteht darin, dem quickViewActivate
-Handler die folgende Code-Zeile hinzuzufügen:
loadQuickView(quickViewUrl);
Im Folgenden finden Sie den vollständigen Quell-Code:
var s7interactiveimageviewer = new s7viewers.InteractiveImage({
"containerId" : "s7interactiveimage_div",
"params" : {
"serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
"contenturl" : "https://aodmarketingna.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Media",
"asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
})
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
loadQuickView(quickViewUrl);
},
});
s7interactiveimageviewer.init();
Die endgültige Demowebsite mit dem vollständig integrierten interaktiven Bild hat folgendes Aussehen:
Siehe Erstellen benutzerdefinierter Popups mit der Schnellansicht.