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

Maak een Snelle weergave voor een geüpload element.

Normaal gesproken maakt u een QuickView op hetzelfde moment dat u een element 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 gebruikt, moet weten hoe u de Snelle weergave kunt gebruiken.

De viewer gebruikt 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 met setHandlers in de viewer geladen:

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

Gebruikend de steekproef inbedt codevoorbeeld van hierboven, hebt u de volgende code:

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

Ga als volgt te werk voor meer informatie over de methode setHandlers() :

• De interactieve kijker van het Beeld - zenders
• De interactieve Videokijker - zethandlers

Configureer nu de handler quickViewActivate .

De quickViewActivate handler bestuurt de QuickView 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 wordt geplaatst. Er wordt ook een voorbeeldfunctie loadQuickView aangeroepen.

Veranderlijke afbeelding
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 andere variabelen van de Snelle mening toe, zoals in het volgende:

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

de vraag van de Functie
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 ervan uit dat de functie loadQuickView() bestaat en toegankelijk is.

Ga als volgt te werk voor meer informatie over de methode quickViewActivate :

• De interactieve kijker van het Beeld - callbacks van de Gebeurtenis
• De interactieve Videokijker - callbacks van de Gebeurtenis
• Interactieve gegevenssteun in Interactieve Videokijker - Interactieve gegevenssteun

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 bij als u meer variabelen toevoegt.

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

  Bijvoorbeeld, schrijft het volgende de waarde van SKU aan de browser console:

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

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

  De variabelen in de Snelle weergave worden toegewezen. De functieaanroep is ingesteld. En de browser console schrijft de veranderlijke waarde aan de browser console. Dit doet hij met behulp van de meegeleverde voorbeeldfunctie.

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 pop-up gebruikt.

Maak het pop-upmenu DIV op de volgende manier op. Voeg desgewenst extra stijlen toe.

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

Plaats de pop-up DIV in het lichaam van uw pagina van de HTML.

Één van de elementen wordt geplaatst met een identiteitskaart die met waarde SKU 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>

Als u de SKU-waarde in het pop-upvenster wilt bijwerken, voegt u een functie toe. Maak het pop-upvenster zichtbaar door de eenvoudige functie te vervangen die in stap 5 is gemaakt:

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

Upload een HTML-pagina voor de test naar uw webserver en open deze. De viewer geeft het pop-upvenster DIV weer wanneer een gebruiker een Snelle weergave aanroept.

hoe te om het douane pop-up venster op volledige het schermwijze te tonen

Sommige viewers, zoals de Interactieve Video-viewer, ondersteunen weergave in de modus 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 het pop-upvenster in de modi Standaard en Volledig scherm wilt weergeven, koppelt u het pop-upvenster aan de viewercontainer. In dit geval gebruikt u de tweede handlermethode, initComplete .

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

"initComplete":function() { code block }

Ga als volgt te werk voor meer informatie over de methode init() :

• De interactieve kijker van het Beeld - init
• De 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 hebt u het volgende gedaan:

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

De gehele setHandlers-code is vergelijkbaar met de volgende code (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 controleren of de viewer-instantie is gemaakt. Zorg er ook voor dat de handlers worden geladen voordat de viewer wordt aangeroepen met init() .