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 kijker gebruikt een manager genoemd 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 voor het insluiten van code 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);
    }
})

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

• Interactieve afbeeldingsviewer - zeegrepen
• Interactieve videoviewer - zeegrepen

Vorm nu quickViewActivate handler.

De quickViewActivate De manager controleert de Snelle mening in de kijker. 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 monster genomen loadQuickView functieaanroep.

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

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 quickViewActivate methode op de volgende wijze:

• 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 meer variabelen toevoegt.

• Eenvoudig maken loadQuickView () 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.

De pop-up opmaken DIV op de volgende wijze. Voeg desgewenst extra stijlen 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 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 pop-up wordt weergegeven door de viewer DIV wanneer een gebruiker een Snelle mening aanhaalt.

Het aangepaste pop-upvenster weergeven in de modus Volledig scherm

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 een tweede handlermethode, 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 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().