Sie sehen sich Hilfeinhalte der folgenden Version an:

Die standardmäßige Schnellansicht wird in eCommerce-Anwendungen eingesetzt, in denen ein Popupfenster mit Produktinformationen angezeigt wird, um eine Kaufentscheidung zu fördern. Sie können jedoch benutzerdefinierte Inhalte auslösen, die in Popups angezeigt werden. Abhängig von dem von Ihnen verwendeten Viewer, können Benutzer mit dieser Funktion auf einen Hotspot, ein Miniaturbild oder auf eine Imagemap klicken, um Informationen oder zugehörige Inhalte anzuzeigen.

Schnellansichten werden in Dynamic Media von folgenden Viewern unterstützt:

  • Interaktive Bilder (klickbare Hotspots)
  • Interaktives Video (klickbare Miniaturbilder während der Videowiedergabe)
  • Karussell-Banner (klickbare Hotspots oder Imagemaps)

Auch wenn die Funktionalität der Viewer unterschiedlich ist, ist der Prozess zum Erstellen einer Schnellansicht für alle drei unterstützten Viewer identisch.

Verfahren Sie wie folgt, um Schnellansichten zu verwenden, um benutzerdefinierte Popups zu erstellen

  1. Erstellen Sie eine Schnellansicht für ein hochgeladenes Asset.

    In der Regel erstellen Sie eine Schnellansicht, wenn Sie ein Asset zur Verwendung mit dem Viewer bearbeiten, den Sie benutzen.

     

    Derzeit verwendeter Viewer Führen Sie die folgenden Schritte aus, um die Schnellansicht zu erstellen
    Interaktive Bilder Hinzufügen von Hotspots zu einem Bildbanner.
    Interaktive Videos Hinzufügen von Interaktivität zum Video.
    Karussellbanner Hinzufügen von Hotspots oder Imagemaps zu einem Bildbanner.
  2. Rufen Sie den Einbettungscode für den Viewer ab, um den Viewer in Ihre Website zu integrieren.

    Verwendeter Viewer
    Führen Sie die folgenden Schritte aus, um den Viewer in Ihre Website zu integrieren
    Interaktives Bild Integration eines interaktiven Bildes in Ihre Website.
    Interaktives Video
    Integrieren eines interaktiven Videos in Ihre Webseite.
    Karussell-Banner Hinzufügen eines Karussell-Banners zur Ihrer Website.
  3. Der Viewer, den Sie verwenden, muss jetzt erfahren, wie die Schnellansicht verwendet werden soll.

    Hierzu nutzt der Viewer einen Handler namens QuickViewActive.

    Beispiel
    Angenommen, Sie verwenden auf Ihrer Webseite für ein interaktives Bild den folgenden Einbettungscode:

     

    chlimage_1

    Der Handler wird mit setHandlers in den Viewer geladen:

    viewerInstance.setHandlers({ handler 1, handler 2}, ...

    Beispiel
    Mit dem obigen Einbettungscodebeispiel erhalten wir folgenden Code:

    s7interactiveimageviewer.setHandlers({
        quickViewActivate": function(inData) {
            var sku=inData.sku;
            var genericVariable1=inData.genericVariable1;
            var genericVariable2=inData.genericVariable2;
           loadQuickView(sku,genericVariable1,genericVariable2);
        }
    })
  4. Jetzt müssen Sie den Handler quickViewActivate konfigurieren.

    Der Handler quickViewActivate steuert die Schnellansichten im Viewer. Der Handler enthält die Variablenliste und die Funktionsaufrufe, die mit der Schnellansicht verwendet werden. Der Einbettungscode stellt die Zuordnung für das SKU-Variablenset in der Schnellansicht sowie ein Beispiel für einen Aufruf der Funktion loadQuickView bereit.

    Variablenzuordnung
    Ordnen Sie den in der Schnellansicht enthaltenen SKU-Wert- und allgemeinen Variablen für die Verwendung auf Ihrer Webseite zu:

    var variable1= inData.quickviewVariable

    Der bereitgestellte Einbettungscode enthält ein Zuordnungsbeispiel für die SKU-Variable:

    var sku=inData.sku

    Ordnen Sie weitere Variablen aus der Schnellansicht wie folgt zu:

    var variable2= inData.quickviewVariable2
    var variable3= inData.quickviewVariable3

    Funktionsaufruf
    Der Handler benötigt außerdem einen Funktionsaufruf, damit die Schnellansicht funktioniert. Die Hostseite muss auf diese Funktion zugreifen können. Der Einbettungscode bietet ein Beispiel für einen Funktionsaufruf:

    loadQuickView(sku)

    Im Beispiel für einen Funktionsaufruf wird davon ausgegangen, dass die Funktion loadQuickView() vorhanden und verfügbar ist.

  5. Gehen Sie folgendermaßen vor:

    • Entfernen Sie im Einbettungscode die Auskommentierung des Abschnitts „setHandlers“.
    • Ordnen Sie alle weiteren Variablen zu, die in der Schnellansicht enthalten sind.
      • Aktualisieren Sie den Aufruf loadQuickView(sku,var1,var2), wenn Sie weitere Variablen hinzufügen.
    • Erstellen Sie auf der Seite eine einfache loadQuickView()-Funktion außerhalb des Viewers.
      Die folgende Funktion schreibt z. B. den SKU-Wert in die Browserkonsole:

     

    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    • Laden Sie eine HTML-Testseite auf einen Webserver hoch und öffnen Sie sie.
      Mit den zugeordneten Variablen aus der Schnellansicht und dem Funktionsaufruf schreibt die Browserkonsole den Variablenwert mithilfe der Beispielfunktion in die Browserkonsole.
  6. Sie können jetzt eine Funktion verwenden, um ein einfaches Popup in der Schnellansicht aufzurufen. Im folgenden Beispiel wird ein DIV für ein Popup verwendet.

  7. Gestalten Sie das Popup-DIV wie folgt. Fügen Sie gegebenenfalls Ihren eigenen Stil hinzu.

    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
  8. Platzieren Sie das Popup-DIV im Body-Bereich Ihrer HTML-Seite.

    Für eines der Elemente ist eine ID festgelegt, die mit den SKU-Wert aktualisiert wird, wenn der Benutzer eine Schnellansicht aufruft. Das Beispiel beinhaltet auch eine einfache Schaltfläche, um das Popup-Fenster wieder auszublenden.

    <div id="quickview_div" >
        <table>
            <tr><td><input id="btnClosePopup" type="button" value="Close"        onclick='document.getElementById("quickview_div").style.display="none"' /><br /></td></tr>
            <tr><td>SKU</td><td><input type="text" id="txtSku" name="txtSku"></td></tr>
        </table>
    </div>
  9. Fügen Sie eine Funktion hinzu, um den SKU-Wert im Popupfenster zu aktualisieren. Machen Sie das Popupfenster sichtbar, indem Sie die in Schritt 5 erstellte einfache Funktion durch Folgendes ersetzen:

    <script type="text/javascript">
        function loadQuickView(sku){
            document.getElementById("txtSku").setAttribute("value",sku); // write sku value
            document.getElementById("quickview_div").style.display="block"; // show popup
        }
    </script>
  10. Laden Sie eine HTML-Testseite auf Ihren Webserver hoch und öffnen Sie sie. Der Viewer zeigt das Popup-DIV an, wenn ein Benutzer eine Schnellansicht aufruft.

  11. Benutzerdefiniertes Popupfenster im Vollbildmodus anzeigen
    Einige Viewer, wie der Viewer für interaktive Videos, unterstützen die Anzeige im Vollbildmodus. Wenn Sie das Popupfenster jedoch verwenden, wie in den vorherigen Schritten beschrieben, wird es im Vollbildmodus hinter dem Viewer angezeigt.

    Damit das Popupfenster sowohl im Standard- als auch im Vollbildmodus im Vordergrund angezeigt wird, müssen Sie das Popup mit dem Viewer-Container verbinden. Hierzu können Sie eine zweite Handlermethode nutzen, initComplete

    Der Handler initComplete wird aufgerufen, nachdem der Viewer initialisiert wurde.

    "initComplete":function() { code block }
  12. Um das in den vorherigen Schritten beschriebene Popupfenster mit dem Viewer zu verbinden, verwenden Sie den folgenden Code:

    "initComplete":function() {
        var popup = document.getElementById('quickview_div');
        popup.parentNode.removeChild(popup);
        var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
        var inner_container = document.getElementById(sdkContainerId);
        inner_container.appendChild(popup);
    }

    Im obigen Code haben wir Folgendes gemacht:

    • Unser benutzerdefiniertes Popupfenster identifiziert.
    • Es aus dem DOM entfernt.
    • Den Viewer-Container identifiziert.
    • Das Popup mit dem Viewer-Container verbunden.
  13. Ihr fertiger setHandlers-Code sollte nun etwa wie folgt aussehen (für den interaktiven Video-Viewer):

    s7interactivevideoviewer.setHandlers({
        "quickViewActivate": function(inData) {
            var sku=inData.sku;
            loadQuickView(sku);
      
        },
        "initComplete":function() {
            var popup = document.getElementById('quickview_div'); // get custom quick view container
            popup.parentNode.removeChild(popup); // remove it from current DOM
            var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
            var inner_container = document.getElementById(sdkContainerId);
            inner_container.appendChild(popup);
        }
    });
  14. Nachdem die Handler geladen wurden, initialisieren Sie den Viewer:

    viewerInstance.init()

    Beispiel
    Dieses Beispiel verwendet den interaktiven Bild-Viewer.

    s7interactiveimageviewer.init()

    Nachdem Sie den Viewer in Ihre Hostseite eingebettet haben, prüfen Sie, ob die Viewer-Instanz erstellt wird und die Handler geladen werden, bevor der Viewer mit init() aufgerufen wird.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie