Erstellen benutzerdefinierter Popups mithilfe der Schnellansicht using-quickviews-to-create-custom-pop-ups

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 verwenden.

Um den Viewer in Ihre Website zu integrieren, rufen Sie den Viewer-Einbettungs-Code ab.

Der von Ihnen verwendete Viewer muss wissen, wie die Schnellansicht zu verwenden ist.

Der Viewer verwendet einen Handler mit dem Namen QuickViewActive.

Beispiel
Angenommen, Sie verwenden auf Ihrer Web-Seite für ein interaktives Bild den folgenden Einbettungs-Code:

Der Handler wird mit setHandlers in den Viewer geladen:

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

Mit dem obigen Einbettungs-Code-Beispiel erhalten Sie folgenden Code:

s7interactiveimageviewer.setHandlers({
    quickViewActivate": function(inData) {
        var sku=inData.sku;
        var genericVariable1=inData.genericVariable1;
        var genericVariable2=inData.genericVariable2;
       loadQuickView(sku,genericVariable1,genericVariable2);
    }
})

Weitere Informationen zur setHandlers() finden Sie unter:

• Interaktiver Bild-Viewer – Sethandler
• Interaktiver Video-Viewer – Sethandler

Konfigurieren Sie jetzt den quickViewActivate-Handler.

Der Handler quickViewActivate steuert die Schnellansichten im Viewer. Der Handler enthält die Variablenliste und die Funktionsaufrufe, die mit der Schnellansicht verwendet werden. Der Einbettungs-Code stellt eine Zuordnung für die SKU-Variable bereit, die in der Schnellansicht festgelegt wurde. Er führt auch einen Beispielfunktionsaufruf loadQuickView durch.

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

var *variable1*= inData.*quickviewVariable*

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

var sku=inData.sku

Ordnen Sie weitere Variablen aus der Schnellansicht wie folgt zu:

var <i>variable2</i>= inData.<i>quickviewVariable2</i>
 var <i>variable3</i>= inData.<i>quickviewVariable3</i>

Funktionsaufruf
Der Handler benötigt außerdem einen Funktionsaufruf, damit die Schnellansicht funktioniert. Die Host-Seite muss auf diese Funktion zugreifen können. Der Einbettungs-Code 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.

Weitere Informationen zur quickViewActivate finden Sie unter:

• Interaktiver Bild-Viewer – Ereignisrückrufe
• Interaktiver Video-Viewer – Ereignisrückrufe
• Unterstützung interaktiver Daten im interaktiven Video-Viewer – Unterstützung interaktiver Daten

Gehen Sie folgendermaßen vor:

• Entfernen Sie im Einbettungs-Code die Auskommentierung des Abschnitts „setHandlers“.

• Ordnen Sie alle weiteren Variablen zu, die in der Schnellansicht enthalten sind.

  • Aktualisieren Sie den loadQuickView(sku,*var1*,*var2*)-Aufruf, 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 Browser-Konsole:

function loadQuickView(sku){
    console.log ("quickview sku value is " + sku);
}

• Laden Sie eine HTML-Testseite auf einen Webserver hoch und öffnen Sie sie.

  Die Variablen aus der Schnellansicht werden zugeordnet. Der Funktionsaufruf ist vorhanden. Die Browser-Konsole zeigt den Variablenwert an. Diese Funktionalität wird mithilfe der bereitgestellten Beispielfunktion erreicht.

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-Fenster verwendet.

Gestalten Sie das Popup-Fenster DIV wie folgt. Fügen Sie nach Wunsch zusätzliches Styling hinzu.

<style type="text/css">
    #quickview_div{
        position: absolute;
        z-index: 99999999;
        display: none;
    }
</style>

Platzieren Sie das Popup-Fesnter DIV im Textbereich Ihrer HTML-Seite.

Für eines der Elemente ist eine ID festgelegt, die mit dem 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>

Um den SKU-Wert im Popup-Fenster zu aktualisieren, fügen Sie eine Funktion hinzu. Machen Sie das Popup-Fenster sichtbar, indem Sie die in Schritt 5 erstellte einfache Funktion durch die folgende 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 pop-up
    }
</script>

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.

Anzeigen des benutzerdefinierten Popup-Fensters im Vollbildmodus

Einige Viewer, wie der interaktive Video-Viewer, unterstützen die Anzeige im Vollbildmodus. Wird das Popup-Fenster jedoch wie in den vorherigen Schritten beschrieben verwendet, wird es im Vollbildmodus hinter dem Viewer angezeigt.

Damit das Popup-Fenster im Standard- und im Vollbildmodus angezeigt wird, verknüpfen Sie das Popup-Fenster mit dem Viewer-Container. Verwenden Sie in diesem Fall eine zweite Handler-Methode initComplete.

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

"initComplete":function() { code block }

Weitere Informationen zur init() finden Sie unter:

• Interaktiver Bild-Viewer – init
• Interaktiver Video-Viewer – init

Um das in den vorherigen Schritten beschriebene Popup-Fenster 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);
}

Der obige Code führt die folgenden Aktionen aus:

• Identifizieren Sie Ihr benutzerdefiniertes Popup-Fenster.
• Entfernen Sie sie aus dem DOM.
• Identifizieren Sie den Viewer-Container.
• Hängen Sie das Popup-Fenster an den Viewer-Container an.

Ihr fertiger setHandlers-Code sieht etwa wie folgt aus (für den interaktiven Video-Viewer):

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var sku=inData.sku;
        loadQuickView(sku);

Nachdem die Handler geladen wurden, initialisieren Sie den Viewer:

*viewerInstance.*init()

Beispiel
In diesem Beispiel wird der interaktive Bild-Viewer verwendet.

s7interactiveimageviewer.init()

Nachdem Sie den Viewer in Ihre Host-Seite eingebettet haben, stellen Sie sicher, dass die Viewer-Instanz erstellt wurde. Stellen Sie außerdem sicher, dass die Handler geladen werden, bevor der Viewer mit init() aufgerufen wird.