Vous consultez actuellement l'aide de la version:

L’aperçu rapide par défaut est utilisé dans les expériences de commerce électronique où une fenêtre contextuelle s’affiche avec des informations sur le produit afin de générer un achat. Cependant, vous pouvez déclencher le contenu personnalisé à afficher dans les fenêtre contextuelles. Selon la visionneuse que vous utilisez, cette fonctionnalité permet aux utilisateurs de cliquer sur une zone réactive, une image miniature ou une zone cliquable pour afficher des informations ou du contenu connexe.

Les aperçus rapides sont pris en charge par les visionneuses suivantes dans Dynamic Media :

  • Images interactives (zones réactives cliquables)
  • Vidéo interactive (miniatures cliquables pendant la lecture vidéo)
  • Bannières carrousel (zones réactives cliquables 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 utiliser des aperçus rapides en vue de la création de fenêtres contextuelles,

  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.

     

    Visionneuse utilisée Procédez comme suit pour créer l’aperçu rapide
    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 de zones cliquables à une bannière.
  2. Obtenez le code d’intégration de visionneuse afin d’intégrer la visionneuse à votre site web.

    Visionneuse utilisée
    Procédez comme suit pour intégrer la visionneuse à votre site web
    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 actuellement doit savoir comment prendre en charge l’aperçu rapide.

    Pour ce faire, la visionneuse 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

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

    viewerInstance.setHandlers({ gestionnaire 1, gestionnaire 2}, ...

    Exemple
    En utilisant l’exemple de code d’intégration ci-dessus, nous obtenons le code suivant :

    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 à la page suivante :

     

  4. Vous devez maintenant configurer 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 d’intégration fournit une correspondance pour la variable SKU définie dans l’aperçu rapide, ainsi qu’un exemple d’appel de fonction loadQuickView.

    Correspondances 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 des variables à partir de l’aperçu rapide également, comme dans ce qui suit :

    var variable2= inData.quickviewVariable2
    var variable3= inData.quickviewVariable3

    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 votre page hôte. Le code d’intégration 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, consultez les ressources suivantes :

  5. Procédez comme suit :

    • Décommentez la section setHandlers du code d’intégration.
    • Mappez toutes les variables supplémentaires contenues dans l’aperçu rapide.
      • Mettez à jour l’appel loadQuickView (sku,var1,var2) si vous ajoutez des variables supplémentaires.
    • 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 :

     

    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    • Téléchargez une page HTML de test sur un serveur web et ouvrez-la.
      Avec les variables mappées à partir de l’aperçu rapide et l’appel de fonction défini, la console du navigateur affiche la valeur de la variable à l’aide de l’exemple de fonction fourni.
  6. Vous pouvez désormais utiliser la fonction pour appeler une fenêtre contextuelle simple dans l’aperçu rapide. L’exemple suivant utilise une balise DIV pour une fenêtre contextuelle.

  7. Mettez en forme la balise DIV de la fenêtre contextuelle comme suit. Ajoutez votre propre style supplémentaire comme vous le souhaitez.

    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
  8. Placez la balise DIV de la fenêtre contextuelle 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 la fenêtre contextuelle une fois qu’elle devient visible.

    <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. Ajoutez une fonction pour mettre à jour la valeur SKU dans la fenêtre contextuelle ; activez la visibilité de cette dernière en remplaçant la fonction simple créée à l’étape 5 par ce qui suit :

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

  11. Comment afficher la fenêtre contextuelle personnalisée en mode plein écran
    Certaines visionneuses, telles que la visionneuse Vidéo interactive, prennent en charge l’affichage en mode plein écran. Toutefois, l’utilisation de la fenêtre contextuelle comme décrit dans les étapes précédentes provoque l’affichage de celle-ci derrière la visionneuse en mode plein écran.

    Pour que la fenêtre contextuelle puisse s’afficher dans les modes standard et plein écran, vous devez la joindre au conteneur de la visionneuse. Pour ce faire, vous pouvez utiliser une deuxième méthode de gestionnaire, initComplete

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

    "initComplete":function() { code block }

    Pour en savoir plus sur la méthode init(), consultez les ressources suivantes :

     

     

  12. Pour associer la fenêtre contextuelle (décrite dans les étapes précédentes) à la visionneuse, utilisez le code suivant :

    "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, nous avons effectué ce qui suit :

    • Identification de notre fenêtre contextuelle personnalisée.
    • Suppression de celle-ci du DOM.
    • Identification du conteneur de la visionneuse.
    • Association de la fenêtre contextuelle au conteneur de la visionneuse.
  13. Votre code complet de setHandlers doit maintenant ressembler à ceci (la visionneuse de vidéo interactive a été utilisée) :

    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 intégré la visionneuse dans votre page hôte, assurez-vous que l’instance de la visionneuse est créée et que les gestionnaires sont chargés avant l’appel de celle-ci à l’aide de init().

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne