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

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 du använder kan kunderna välja en aktiveringspunkt, en miniatyrbild eller ett bildschema för att se information eller relaterat innehåll.

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

  • Interaktiva bilder (valbara aktiveringspunkter)
  • Interaktiv video (valbara miniatyrbilder vid videouppspelning)
  • Carousel Banners (markeringsbara 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 som ska användas med det visningsprogram du använder.

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Visningsprogram som du använder Så här skapar du snabbvyn:
    Interaktiva bilder Lägga till aktiveringspunkter i en bildbanderoll.
    Interaktiva videoklipp Lägga till interaktivitet i videon.
    Carousel Banners Lägga till aktiveringspunkter eller bildscheman i en banderoll.
  2. Hämta visningsprogrammets inbäddningskod för att integrera visningsprogrammet på webbplatsen.

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Visningsprogram som du använder Följ de här stegen för att 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 du använder måste kunna använda snabbvyn.

    Visningsprogrammet använder 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:

    chlimage_1-291

    Hanteraren läses in i visningsprogrammet med setHandlers:

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

    Om du använder exemplet med den inbäddade koden ovan har du följande kod:

    code language-xml
    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:

  4. Konfigurera nu quickViewActivate hanterare.

    The quickViewActivate -hanteraren styr snabbvyn 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. Den gör också ett prov 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 andra variabler från snabbvyn också, som i följande exempel:

    code language-xml
    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 quickViewActivate metod 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*) anropa om du lägger till fler variabler.
    • Skapa en enkel loadQuickView () på sidan, utanför visningsprogrammet.

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

    code language-xml
    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • Ladda upp en testsida för HTML till en webbserver och öppna den.

      Variablerna från snabbvyn mappas. Funktionsanropet är på plats. Och webbläsarkonsolen skriver variabelvärdet till webbläsarkonsolen. Detta görs med den exempelfunktion som finns.

  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 extra formatering efter behov.

    code language-xml
    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
    
  8. 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.

    code language-xml
    <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. Om du vill uppdatera SKU-värdet i popup-fönstret lägger du till en funktion. Gör popup-fönstret synligt genom att ersätta den enkla funktionen som skapades i steg 5 med följande:

    code language-xml
    <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>
    
  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. Så här visar du 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 standardläge och helskärmsläge kopplar du popup-fönstret till visningsbehållaren. I det här fallet använder du en andra hanterarmetod, initComplete.

    The initComplete hanteraren anropas efter att visningsprogrammet har initierats.

    code language-xml
    "initComplete":function() { code block }
    

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

    • Interaktiv bildläsare - init
    • Interaktiv videoläsare - init
  12. Om du vill bifoga popup-fönstret, som beskrivs i föregående steg, till visningsprogrammet använder du följande kod:

    code language-xml
    "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 du gjort följande:

    • Identifierade ditt anpassade popup-fönster.
    • Den togs bort från DOM.
    • Identifierade visningsprogrambehållaren.
    • Popup-fönstret bifogades till visningsbehållaren.
  13. Hela din setHandlers-kod liknar följande (Interactive Video Viewer användes):

    code language-xml
    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()

    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. Se även till att hanterarna läses in innan visningsprogrammet anropas med init().

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab