Aangepaste pop-ups maken met Snelle weergave

Laatste update: 2023-11-08
  • Onderwerpen:
  • Viewers
    Meer informatie over dit onderwerp
  • Gemaakt voor:
  • User
    Admin

De standaard Snelle mening wordt gebruikt in e-commerceervaringen waarbij pop-up met productinformatie wordt getoond om een aankoop te drijven. U kunt echter aangepaste inhoud activeren om weer te geven in de pop-ups. Afhankelijk van de viewer kunnen gebruikers met deze functionaliteit een hotspot, miniatuurafbeelding of een afbeelding met hyperlinks selecteren om informatie of verwante inhoud te zien.

QuickView wordt ondersteund door de volgende viewers in Dynamic Media:

  • Interactieve afbeelding (klikbare hotspots)
  • Interactieve video (aanklikbare miniatuurafbeeldingen tijdens het afspelen van video)
  • Carrouselbanner (aanklikbare hotspots of afbeeldingen met hyperlinks)

Hoewel de functionaliteit van elke viewer verschilt, is het proces voor het maken van een QuickView hetzelfde voor alle drie ondersteunde viewers.

Aangepaste pop-ups maken met Snelle weergave:

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

    Viewer die u gebruikt Voer de volgende stappen uit als u de Snelle weergave wilt maken
    Interactieve afbeeldingen Hotspots toevoegen aan een afbeeldingsbanner.
    Interactieve video's Interactiviteit toevoegen aan uw video.
    Carousel-banners Hotspots of afbeeldingen met hyperlinks toevoegen aan een banner.

  2. Vraag de insluitcode van de viewer aan om de viewer in uw website te integreren.

    Viewer die u gebruikt
    		 Voer de volgende stappen uit als u de viewer wilt integreren met uw website
    Interactieve afbeelding Een interactieve afbeelding met uw website integreren.
    Interactieve video
    		 Een interactieve video integreren met uw website.
    Carousel banner Een carrouselbanner toevoegen aan uw websitepagina.

  3. 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 gebruikt voor een interactieve afbeelding:

    chlimage_1-291

    De handler wordt in de viewer geladen met setHandlers:

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

    Met behulp van het voorbeeld van de voorbeeldinsluitcode hierboven, is er 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:

  4. U moet de 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 en een steekproef wordt geplaatst 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 extra variabelen van de Snelle mening, zoals in het volgende toe:

    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:

  5. 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 extra 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.

      Met de variabelen van in kaart gebrachte Snelle mening en de functievraag op zijn plaats, schrijft de browser console de veranderlijke waarde aan de browser console gebruikend de verstrekte steekproeffunctie.

  6. 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 popup.

  7. De pop-up opmaken DIV op de volgende wijze. Voeg desgewenst uw eigen aanvullende opmaak toe.

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

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

  9. Voeg een functie toe zodat u de SKU-waarde in de pop-up kunt bijwerken. Maak de pop-up zichtbaar door de eenvoudige functie te vervangen die in stap 5 wordt gemaakt. met het volgende:

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

  11. Het weergeven van de aangepaste pop-up 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 de pop-upweergave zowel in de standaardmodus als in de modus Volledig scherm wilt weergeven, koppelt u de pop-up aan de viewercontainer. Een tweede handlermethode gebruiken 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:

  12. Gebruik de volgende code om het pop-upvenster dat in de vorige stappen is beschreven, aan de viewer te koppelen:

    "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 is het volgende gedaan:

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

  13. De gehele setHandlers-code ziet er ongeveer als volgt uit (Interactive Video Viewer 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);
    }
});

  14. 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 ervoor zorgen dat de viewerinstantie is gemaakt en dat de handlers worden geladen voordat de viewer wordt aangeroepen met init().

Vorige pagina
Next page

Op deze pagina