Skapa anpassade popup-fönster med snabbvyn

Standardsnabbvyn används i e-handelsupplevelser där ett popup-fönster visas med produktinformation som driver ett köp. Du kan emellertid utlösa anpassat innehåll som ska visas i popup-fönstren. Beroende på vilket visningsprogram som används kan användarna med den här funktionen markera en hotspot, en miniatyrbild eller en bildschema för att se information eller relaterat innehåll.

Quickview stöds av följande visningsprogram i Dynamic Media:

  • Interaktiv bild (klickbara hotspot-områden)
  • Interaktiv video (klickbara miniatyrbilder vid videouppspelning)
  • Carousel-banderoll (klickbara hotspot-områden eller bildscheman)

Även om funktionerna i de olika visningsprogrammen skiljer sig åt är processen att skapa en snabbvy densamma för alla tre visningsprogram som stöds.

Så här skapar du anpassade popup-fönster med snabbvyn:

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

    Visningsprogram som du använder Följ de här stegen om du vill skapa snabbvyn
    Interaktiva bilder Lägga till aktiveringspunkter i en bildbanderoll.
    Interaktiva videoklipp Lägga till interaktivitet i videon.
    Karusellbanner Lägga till aktiveringspunkter eller bildscheman i en banderoll.
  2. Hämta visningsprogrammets inbäddningskod för att integrera visningsprogrammet på webbplatsen.

    Visningsprogram som du använder
    Följ de här stegen om du vill integrera visningsprogrammet med webbplatsen
    Interaktiv bild Integrera en interaktiv bild med webbplatsen.
    Interaktiv video
    Integrera en interaktiv video med webbplatsen.
    Carousel banner Lägga till en karusellbanderoll på webbsidan.
  3. Visningsprogrammet som du använder nu måste kunna använda snabbvyn.

    Visningsprogrammet använder en hanterare med namnet QuickViewActive.


    ExempelAnta att du använder följande exempelkod för inbäddning på webbsidan för en interaktiv bild:

    chlimage_1-291

    Hanteraren läses in i visningsprogrammet med setHandlers:

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

    Följande kod används i exemplet med den inbäddade koden ovan:

    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 metoden setHandlers() på följande sätt:

  4. Du måste nu konfigurera quickViewActivate-hanteraren.

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

    Variable
    mappingMap-variabler som ska användas på webbsidan till SKU-värdet och generiska variabler som finns i QuickView:

    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 att funktionen loadQuickView() finns och är tillgänglig.

    Läs mer om metoden quickViewActivate på följande sätt:

  5. 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*)-anropet om du lägger till ytterligare variabler.
    • Skapa en enkel loadQuickView ()-funktion på sidan, utanför visningsprogrammet.

      Följande skriver till exempel värdet på SKU till webbläsarkonsolen:

    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • Överför en testsida i HTML-format 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.

  6. 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 ett popup-fönster.

  7. 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>
    
  8. Placera popup-fönstret DIV i HTML-sidans brödtext.

    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>
    
  9. Lägg till en funktion så att du kan uppdatera SKU-vä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>
    
  10. 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.

  11. 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. Använd en andra hanterarmetod, initComplete.

    Hanteraren initComplete anropas efter att visningsprogrammet har initierats.

    "initComplete":function() { code block }
    

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

  12. Om du vill bifoga det popup-fönster 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 följande gjorts:

    • Identifierade det anpassade popup-fönstret.
    • Den togs bort från DOM.
    • Identifierade visningsprogrambehållaren.
    • Popup-fönstret bifogades till visningsbehållaren.
  13. Hela din setHandlers-kod ser ut ungefär som följande (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);
        }
    });
    
  14. När hanterarna har lästs in initierar du visningsprogrammet:

    *viewerInstance.*init()


    ExempelI det här exemplet används visningsprogrammet för interaktiv bild.

    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().

På denna sida