Skapa anpassade popup-fönster med snabbvyer using-quickviews-to-create-custom-pop-ups

Skapa en snabbvy för en överförd resurs.

Vanligtvis skapar du en snabbvy samtidigt som du redigerar en resurs för användning med det visningsprogram du använder.

Hämta visningsprogrammets inbäddningskod för att integrera visningsprogrammet på webbplatsen.

Visningsprogrammet som du använder behöver nu veta hur du använder snabbvyn.

För att göra detta använder visningsprogrammet en hanterare som kallas QuickViewActive.

Exempel
Anta att du använde följande exempelkod för inbäddning på webbsidan för en interaktiv bild:

Hanteraren läses in i visningsprogrammet med setHandlers:

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

Med exempelkoden för inbäddning ovan har vi följande kod:

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

Läs mer om setHandlers() metod på följande sätt:

• Interaktivt bildvisningsprogram: setHandlers
• Interaktivt visningsprogram för video: setHandlers

Nu måste du konfigurera quickViewActivate hanterare.

Hanteraren quickViewActivate styr snabbvyerna i visningsprogrammet. Hanteraren innehåller variabellistan och funktionsanrop som kan användas med snabbvyn. Inbäddningskoden innehåller mappning för SKU-variabeluppsättningen i snabbvyn samt ett exempel på loadQuickView-funktionsanrop.

Variabelmappning
Mappa variabler för användning på webbsidan till SKU-värdet och generiska variabler som finns i snabbvyn:

var *variable1*= inData.*quickviewVariable*

Angiven inbäddningskod har en exempelmappning för SKU-variabeln:

var sku=inData.sku

Mappa ytterligare variabler från snabbvyn, som i följande exempel:

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

Funktionsanrop
Hanteraren kräver också ett funktionsanrop för att snabbvyn ska fungera. Funktionen antas vara tillgänglig för värdsidan. Inbäddningskoden innehåller ett exempel på funktionsanrop:

loadQuickView(sku)

Samplingsfunktionsanropet förutsätter funktionen loadQuickView() finns och är tillgänglig.

Läs mer om metoden quickViewActivate här:

• Interaktiv bildläsare - Händelseåteranrop
• Interaktiv videoläsare - Händelseåteranrop
• Stöd för interaktiva data i Interactive Video Viewer - Stöd för interaktiva data

Gör följande:

• Avkommentera avsnittet setHandlers i den inbäddade koden.

• Mappa eventuella ytterligare variabler som finns i snabbvyn.

  • Uppdatera loadQuickView(sku,*var1*,*var2*) anropa om du lägger till ytterligare variabler.

• Skapa en enkel loadQuickView ()-funktion på sidan, utanför visningsprogrammet.

  Följande skriver till exempel värdet för sku till webbläsarkonsolen:

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

• Ladda upp en testsida för HTML till en webbserver och öppna den.

  När variablerna från snabbvyn är mappade och funktionsanropet är på plats, skriver webbläsarkonsolen variabelvärdet till webbläsarkonsolen med den angivna exempelfunktionen.

Du kan nu använda en funktion för att anropa ett enkelt popup-fönster i snabbvyn. I följande exempel används en DIV för en popup.

Formatera popup-fönstret DIV på följande sätt. Lägg till egen formatering efter behov.

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

Placera popup-fönstret DIV på HTML-sidan.

Ett av elementen anges med ett ID som uppdateras med SKU-värdet när användaren anropar en snabbvy. Exemplet innehåller också en enkel knapp som döljer popup-fönstret igen när det är synligt.

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

Lägg till en funktion för att uppdatera skalvärdet i popup-fönstret; göra popup-fönstret synligt genom att ersätta den enkla funktionen som skapades i steg 5. med följande:

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

Ladda upp en testsida för HTML till webbservern och öppna den. Visningsprogrammet visar popup-fönstret DIV när en användare anropar en snabbvy.

Visa det anpassade popup-fönstret i helskärmsläge

Vissa visningsprogram, till exempel Interactive Video Viewer, stöder visning i helskärmsläge. Om du däremot använder popup-fönstret enligt beskrivningen i föregående steg visas det bakom visningsprogrammet i helskärmsläge.

Om du vill att popup-fönstret ska visas i både standardläge och helskärmsläge, kopplar du popup-fönstret till visningsbehållaren. För att uppnå detta kan du använda en andra hanterarmetod, initComplete.

The initComplete hanteraren anropas när visningsprogrammet har initierats.

"initComplete":function() { code block }

Läs mer om init() metod på följande sätt:

• Interaktiv bildläsare - init
• Interaktiv videoläsare - init

Om du vill bifoga popup-fönstret, som beskrivs i föregående steg, till visningsprogrammet använder du följande kod:

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

I koden ovan har vi gjort följande:

• Identifierade vårt anpassade popup-fönster.
• Den togs bort från DOM.
• Identifierade visningsprogrambehållaren.
• Popup-fönstret bifogades till visningsbehållaren.

Hela din setHandlers-kod ska nu se ut ungefär så här (Interactive Video Viewer användes):

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

När hanterarna har lästs in initierar du visningsprogrammet:

*viewerInstance.*init()

Exempel
I det här exemplet används visningsprogrammet för interaktiva bilder.

s7interactiveimageviewer.init()

När du har bäddat in visningsprogrammet på värdsidan måste du se till att visningsprograminstansen skapas och att hanterarna läses in innan visningsprogrammet anropas med init().