Création de pop-ups personnalisés à l’aide de l’aperçu rapide using-quickviews-to-create-custom-pop-ups

L’aperçu rapide par défaut est utilisé dans les expériences de commerce électronique où une fenêtre contextuelle s’affiche avec les informations sur les produits pour générer un achat. Cependant, vous pouvez déclencher le contenu personnalisé à afficher dans les pop-ups. En fonction de la visionneuse que vous utilisez, les clients peuvent sélectionner une zone réactive, une image miniature ou une zone cliquable pour afficher des informations ou du contenu associé.

L’aperçu rapide est pris en charge par les visionneuses suivantes dans Dynamic Media :

  • Images interactives (zones réactives sélectionnables)
  • Vidéo interactive (miniatures sélectionnables pendant la lecture vidéo)
  • Bannières carrousel (zones réactives sélectionnables ou zones cliquables)

Bien que chaque visionneuse ait un mode de fonctionnement distinct, le processus de création d’un aperçu rapide est identique pour les trois visionneuses prises en charge.

Pour créer des pop-ups personnalisés à l’aide de l’aperçu rapide :

  1. Créez un aperçu rapide pour une ressource téléchargée.

    En général, vous créez un aperçu rapide durant l’édition d’une ressource exploitable avec la visionneuse en cours.

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Visionneuse utilisée Pour créer l’aperçu rapide, procédez comme suit :
    Images interactives Ajout de zones réactives à une bannière d’image.
    Vidéos interactives Ajout d’interactivité à votre vidéo.
    Bannières de carrousel Ajout de zones réactives ou cliquables à une bannière.
  2. Procurez-vous le code intégré de la visionneuse pour intégrer la visionneuse à votre site web.

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Visionneuse utilisée Pour intégrer la visionneuse à votre site web, procédez comme suit :
    Image interactive Intégration d’une image interactive à votre site web.
    Vidéo interactive Intégration d’une vidéo interactive à votre site web.
    Bannière de carrousel Ajout d’une bannière de carrousel à votre page web.
  3. La visionneuse que vous utilisez doit savoir comment utiliser l’aperçu rapide.

    Le lecteur utilise un gestionnaire appelé QuickViewActive.

    Exemple Supposons que vous utilisiez le code d’intégration suivant dans votre page web pour une image interactive :

    chlimage_1-291

    Le gestionnaire est chargé dans la visionneuse à l’aide de setHandlers :

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

    En utilisant l’exemple de code d’intégration ci-dessus, vous obtenez le code suivant :

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

    Pour en savoir plus sur la méthode setHandlers(), rendez-vous sur la page suivante :

  4. Configurez maintenant le gestionnaire quickViewActivate.

    Le gestionnaire quickViewActivate contrôle les aperçus rapides dans la visionneuse. Le gestionnaire contient les appels de la liste de variables et de fonctions utilisables avec l’aperçu rapide. Le code incorporé fournit le mappage pour le jeu de variables SKU dans l’aperçu rapide. Il effectue également un exemple d’appel de fonction loadQuickView.

    Correspondance de variables Mappez les variables utilisables dans votre page web avec la valeur de SKU et les variables génériques dans l’aperçu rapide :

    var *variable1*= inData.*quickviewVariable*

    Le code d’intégration fourni comporte un exemple de mise en correspondance pour la variable SKU :

    var sku=inData.sku

    Mappez d’autres variables à partir de l’aperçu rapide également, comme dans ce qui suit :

    code language-xml
    var <i>variable2</i>= inData.<i>quickviewVariable2</i>
     var <i>variable3</i>= inData.<i>quickviewVariable3</i>
    

    Appel de fonction Le gestionnaire nécessite également un appel de fonction pour que l’aperçu rapide fonctionne. La fonction est supposée être accessible par la page hôte. Le code incorporé fournit un exemple d’appel de fonction :

    loadQuickView(sku)

    L’exemple d’appel de fonction suppose que la fonction loadQuickView() existe et qu’elle est accessible.

    Pour en savoir plus sur la méthode quickViewActivate, rendez-vous sur la page suivante :

  5. Procédez comme suit :

    • Supprimez les commentaires de la section setHandlers du code incorporé.

    • Mappez toutes les variables supplémentaires contenues dans l’aperçu rapide.

      • Mettez à jour l’appel loadQuickView(sku,*var1*,*var2*) si vous ajoutez d’autres variables.
    • Créez une fonction loadQuickView () simple sur la page, à l’extérieur de la visionneuse.

      Par exemple, le code suivant écrit la valeur de SKU dans la console du navigateur :

    code language-xml
    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • Chargez une page HTML de test sur un serveur web et ouvrez-la.

      Les variables de l’aperçu rapide sont mappées. L’appel de fonction est en place. Et la console du navigateur écrit la valeur de la variable dans la console du navigateur. Cette opération s’appuie sur l’exemple de fonction fourni.

  6. Vous pouvez désormais utiliser la fonction pour appeler un pop-up simple dans l’aperçu rapide. L’exemple suivant utilise une DIV pour une fenêtre contextuelle.

  7. Mettez en forme la balise DIV du pop-up comme suit. Ajoutez un style supplémentaire selon vos besoins.

    code language-xml
    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
    
  8. Placez la balise DIV du pop-up dans le corps de la page HTML.

    L’un des éléments est défini avec un ID qui est mis à jour avec la valeur de SKU lorsque l’utilisateur appelle un aperçu rapide. L’exemple comprend également un bouton unique pour masquer à nouveau le pop-up une fois qu’il devient visible.

    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. Pour mettre à jour la valeur SKU dans la fenêtre pop-up, ajoutez une fonction. Rendez la fenêtre pop-up visible en remplaçant la fonction simple créée à l’étape 5 par ce qui suit :

    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. Téléchargez une page HTML de test sur votre serveur Web et ouvrez-la. La visionneuse affiche le séparateur DIV du pop-up lorsqu’un utilisateur appelle un aperçu rapide.

  11. Affichage de la fenêtre pop-up personnalisée en mode plein écran

    Certaines visionneuses, comme la visionneuse de vidéos interactives, prennent en charge l’affichage en mode plein écran. Toutefois, l’utilisation du pop-up comme décrit dans les étapes précédentes provoque l’affichage de celui-ci derrière la visionneuse en mode plein écran.

    Pour que la fenêtre pop-up s’affiche dans les modes standard et plein écran, joignez-la au conteneur de la visionneuse. Dans ce cas, utilisez une deuxième méthode de gestionnaire, initComplete.

    Le gestionnaire initComplete est appelé après l’initialisation de la visionneuse.

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

    Pour en savoir plus sur la méthode init(), rendez-vous sur la page suivante :

    • Visionneuse d’image interactive – init
    • Visionneuse de vidéo interactive – init
  12. Pour associer le pop-up (décrit dans les étapes précédentes) à la visionneuse, utilisez le code suivant :

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

    Dans le code ci-dessus, vous avez effectué ce qui suit :

    • Identification de la fenêtre pop-up personnalisée.
    • Suppression de la bibliothèque du modèle DOM.
    • Identification du conteneur de la visionneuse.
    • Ajout de la fenêtre contextuelle au conteneur de la visionneuse.
  13. Votre code complet de setHandlers ressemble à ceci (la visionneuse de vidéo interactive a été utilisée) :

    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. Une fois les gestionnaires chargés, vous initialisez la visionneuse :

    *viewerInstance.*init()

    Exemple Cet exemple utilise la visionneuse d’images interactives.

    s7interactiveimageviewer.init()

    Après avoir incorporé la visionneuse dans votre page hôte, assurez-vous que l’instance de visionneuse est créée. Veillez également à ce que les gestionnaires soient chargés avant l’appel de la visionneuse à l’aide de init().

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