Aangepaste pop-ups maken met Snelle weergaven using-quickviews-to-create-custom-pop-ups

Maak een Snelle weergave voor een geüpload element.

Normaal gesproken maakt u een Snelle weergave op hetzelfde moment dat u middelen bewerkt voor gebruik met de viewer die u gebruikt.

Vraag de insluitcode van de viewer aan om de viewer in uw website te integreren.

De viewer die u nu gebruikt, moet weten hoe u de Snelle weergave kunt gebruiken.

Hiervoor gebruikt de viewer een handler met de naam QuickViewActive.

Voorbeeld
Stel dat u de volgende voorbeeldcode voor insluiten op uw webpagina gebruikte voor een interactieve afbeelding:

De handler wordt in de viewer geladen met setHandlers:

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

Met behulp van het voorbeeld van de voorbeeldinsluitcode van bovenaf, hebben we de volgende code:

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

Meer informatie over setHandlers() methode op de volgende wijze:

• Interactieve afbeeldingsviewer: setHandlers
• Interactieve videoviewer: setHandlers

U moet nu de quickViewActivate handler.

De handler quickViewActivate bestuurt de Quickviews in de viewer. De manager bevat de veranderlijke lijst en functievraag voor gebruik met de Snelle mening. De ingebedde code verstrekt afbeelding voor de variabele SKU die in de Snelle mening evenals een de functievraag van voorbeeld loadQuickView wordt geplaatst.

Variabele toewijzen
Wijs variabelen voor gebruik in uw Web-pagina aan de waarde SKU en generische variabelen in de Snelle mening toe:

var *variable1*= inData.*quickviewVariable*

De verstrekte insluitcode heeft een steekproefafbeelding voor de variabele SKU:

var sku=inData.sku

Wijs ook extra variabelen van de Snelle mening, zoals in het volgende toe:

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

Functieaanroep
De manager vereist ook een functievraag voor de Snelle mening om te werken. De functie wordt verondersteld om door uw gastheerpagina toegankelijk te zijn. De insluitcode bevat een voorbeeld van een functieaanroep:

loadQuickView(sku)

De aanroep van de voorbeeldfunctie gaat uit van de functie loadQuickView() bestaat en toegankelijk is.

Meer informatie over de methode quickViewActivate vindt u op de volgende website:

• Interactieve afbeeldingsviewer - Gebeurteniscallbacks
• Interactieve videoviewer - Gebeurteniscallbacks
• Interactieve gegevensondersteuning in de interactieve videoviewer - Interactieve gegevensondersteuning

Ga als volgt te werk:

• Verwijder de commentaarmarkering van de sectie setHandlers van de insluitcode.

• Wijs om het even welke extra variabelen in de Snelle mening toe.

  • Werk de loadQuickView(sku,*var1*,*var2*) Vraag als u extra variabelen toevoegt.

• Maak een eenvoudige loadQuickView-functie () op de pagina, buiten de viewer.

  In het volgende voorbeeld wordt de waarde van sku naar de browserconsole geschreven:

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

• Upload een HTML-pagina voor de test naar een webserver en open deze.

  Met de variabelen van in kaart gebrachte Snelle mening en de functievraag op zijn plaats, schrijft de browser console de veranderlijke waarde aan de browser console gebruikend de verstrekte steekproeffunctie.

U kunt nu een functie gebruiken om een eenvoudige pop-up in de Snelle mening aan te halen. In het volgende voorbeeld wordt een DIV voor een popup.

De pop-up opmaken DIV op de volgende wijze. Voeg desgewenst uw eigen aanvullende opmaak toe.

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

Het pop-upvenster plaatsen DIV in de hoofdtekst van de pagina HTML.

Één van de elementen wordt geplaatst met een identiteitskaart die met sku waarde wordt bijgewerkt wanneer de gebruiker een Snelle mening aanhaalt. Het voorbeeld bevat ook een eenvoudige knop waarmee u de pop-up weer kunt verbergen nadat deze zichtbaar is geworden.

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

Voeg een functie toe om de sku-waarde in pop-up bij te werken; de pop-up zichtbaar maken door de eenvoudige functie te vervangen die in stap 5 wordt gecreeerd. met het volgende:

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

Upload een HTML-pagina voor de test naar uw webserver en open deze. De pop-up wordt weergegeven door de viewer DIV wanneer een gebruiker een Snelle mening aanhaalt.

Het weergeven van de aangepaste pop-up in de modus Volledig scherm

Sommige viewers, zoals de Interactieve Video-viewer, ondersteunen weergave op volledig scherm. Als u de pop-up echter gebruikt zoals in de vorige stappen wordt beschreven, wordt deze achter de viewer weergegeven in de modus Volledig scherm.

Als u de pop-upweergave zowel in de standaardmodus als in de modus Volledig scherm wilt weergeven, koppelt u de pop-up aan de viewercontainer. Hiervoor kunt u een tweede handlermethode gebruiken. initComplete.

De initComplete handler wordt aangeroepen nadat de viewer is geïnitialiseerd.

"initComplete":function() { code block }

Meer informatie over init() methode op de volgende wijze:

• Interactieve afbeeldingsviewer - init
• Interactieve videoviewer - init

Gebruik de volgende code om het pop-up-beschreven in de vorige stappen-aan de kijker vast te maken:

"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);
}

In de bovenstaande code hebben we het volgende gedaan:

• Onze aangepaste pop-up geïdentificeerd.
• Verwijderd uit DOM.
• De viewercontainer geïdentificeerd.
• De pop-up is gekoppeld aan de viewercontainer.

De gehele setHandlers-code moet er nu ongeveer als volgt uitzien (de interactieve videoviewer is gebruikt):

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);
    }
});

Nadat de handlers worden geladen, initialiseert u de kijker:

*viewerInstance.*init()

Voorbeeld
In dit voorbeeld wordt de interactieve afbeeldingsviewer gebruikt.

s7interactiveimageviewer.init()

Nadat u de viewer hebt ingesloten in uw hostpagina, moet u ervoor zorgen dat de viewerinstantie is gemaakt en dat de handlers worden geladen voordat de viewer wordt aangeroepen met init().