{"id":14947,"date":"2018-02-26T17:21:55","date_gmt":"2018-02-26T16:21:55","guid":{"rendered":"https:\/\/www.adventori.com\/fr\/?p=14947"},"modified":"2018-02-27T12:47:34","modified_gmt":"2018-02-27T11:47:34","slug":"carousel-adventori-gwd","status":"publish","type":"post","link":"https:\/\/v4.adventori.com\/fr\/creative-lab-fr\/enabler-google-web-designer-fr\/composants-fr\/carousel-adventori-gwd\/","title":{"rendered":"Carousel ADventori"},"content":{"rendered":"Documentation DCO Enabler -> <\/a>ENABLER GOOGLE WEB DESIGNER -> <\/a>Carousel ADventori<\/a>\r\n

CR\u00c9ER VOTRE CAROUSEL<\/h2>

Vous pouvez cr\u00e9er votre propre Carousel gr\u00e2ce \u00e0 notre enabler et ce de mani\u00e8re tr\u00e8s simple :<\/h3>

 <\/p>

Premi\u00e8re \u00e9tape : <\/strong><\/h3>

Initialisez un projet Non Google Ad et installez notre enabler (plus de d\u00e9tails ici<\/a>).<\/p>

 <\/p>

Deuxi\u00e8me \u00e9tape :<\/strong><\/h3>

Cr\u00e9ez votre banni\u00e8re, pr\u00e9voyez y un container qui accueillera le carousel ADventori.
Donnez un identifiant \u00e0 ce container.<\/p>

\"\"<\/a><\/p>

 <\/p>

Troisi\u00e8me \u00e9tape : <\/strong><\/h3>

Rendez vous dans l’onglet code.<\/strong> Avant la fermeture de la balise body (<\/body>) ins\u00e9rez une balise script. Tout le code javascript n\u00e9cessaire au Carousel ADventori y sera int\u00e9gr\u00e9.<\/p>

\"\"<\/p>

La pr\u00e9visualisation du Carousel n’est pas possible dans l’interface de Google Web Designer, vous devez passer par le mode preview<\/strong> et ainsi afficher la banni\u00e8re contenant votre Carousel dans votre navigateur.<\/p>

 <\/p>\r\n

Initialisation du flux produits :<\/strong><\/h4>

Pour tester notre carrousel , vous pouvez mettre des valeurs par d\u00e9faut apr\u00e8s avoir ins\u00e9r\u00e9 le script. Ces valeurs seront automatiquement remplac\u00e9es par des valeurs dynamiques au moment de l\u2019AdServing.<\/p>\r\n

    var data = ADventori.initData({\r\n        items: [\r\n            {data:{name:\"An Article\",img:\"https:\/\/cf-cdn.adventori.com\/lp\/enabler\/templates\/assets\/310-barbecue.png\",description:\"A description of variable length\",price:\"99,99\",original_price:\"125,00\",url:\"https:\/\/www.google.fr\/?q=test1\",discount:\"-15%\" }},\r\n            {data:{name:\"An Article\",img:\"https:\/\/cf-cdn.adventori.com\/lp\/enabler\/templates\/assets\/101-ventilateur.png\",description:\"A description of variable length\",price:\"149,99\",original_price:\"\",url:\"https:\/\/www.google.fr\/?q=test2\",discount:\"\"}},\r\n            {data:{name:\"An Article\",img:\"https:\/\/cf-cdn.adventori.com\/lp\/enabler\/templates\/assets\/107-Sac-a-outils.png\",description:\"A description of variable length\",price:\"79,99\",original_price:\"\",url:\"https:\/\/www.google.fr\/?q=test3\",discount:\"\"}},\r\n            {data:{name:\"An Article\",img:\"https:\/\/cf-cdn.adventori.com\/lp\/enabler\/templates\/assets\/321-dalle-bois.png\",description:\"A description of variable length\",price:\"79,99\",original_price:\"1000\",url:\"https:\/\/www.google.fr\/?q=test4\",discount:\"-50%\"}}\r\n        ]\r\n    });\r\n<\/pre>\r\n
Le composant attend une collection d\u2019objet nomm\u00e9e items<\/code>. Ici nous avons d\u00e9clar\u00e9 les propri\u00e9t\u00e9s suivantes :<\/p>
  • name<\/code>: Nom du produit<\/li>
  • img<\/code>: L\u2019image du produit<\/li>
  • description<\/code>: Description du produit<\/li>
  • price<\/code>: Prix du produit<\/li>
  • original_price<\/code>: Ancien prix du produit<\/li>
  • url<\/code>: L\u2019url du produit<\/li>
  • discount<\/code>: La r\u00e9duction appliqu\u00e9e<\/li><\/ul>
    Initialisation du mod\u00e8le de Slide :<\/strong><\/h4>
    Vous voulez cr\u00e9er la structure HTML suivante :<\/p>\r\n
    <div class=\"name\">
        Le nom du produit
    <\/div>
    <div class=\"img_container\">
        L'image du produit
    <\/div>
    <div class=\"description\">
        La description du produit
    <\/div>
    <div class=\"price\">
        Le prix du produit
    <\/div>
    <div class=\"original_price\">
     Le prix original du produit
    <\/div>
    <div class=\"discount\">
     Le taux de promotion en pourcentage
    <\/div>
    <div class=\"cta\">
        Le CTA
    <\/div><\/pre>\r\n
    \r\n\r\n
    Maintenant, il faut structurer votre HTML gr\u00e2ce \u00e0 initSlide. Vous devez donc r\u00e9\u00e9crire la fonction initSlide pour qu’elle renvoie votre propre structure HTML tout en \u00e9tant associ\u00e9s \u00e0 votre nouveau initData :<\/p>
    \r\n<\/p>
    ADventori.Carousel.prototype.initSlide = function(data) {
            var result = '';
            var image = data.img;
            result += '<div class=\"name\">' + data.name + '<\/div>';
            result += '<div class=\"img_container\"><span class=\"img_helper\"><\/span><img class=\"photos\" src=\"' + image + '\"><\/div>';
            result += '<div class=\"description\">' + data.description + '<\/div>';
            result += '<div class=\"price\">' + data.price + '<sup>\u20ac<\/sup><\/div>';
            if (data.original_price) result += '<div class=\"original_price\">' + data.original_price + '<sup>\u20ac<\/sup><\/div>';
            if (data.discount) result += '<div class=\"discount\"><div class=\"bgDiscount\"><\/div><div class=\"valueDiscount\">' + data.discount + '<\/div><\/div>'
            result += '<div class=\"textCta\">' + this.conf.cta + '<\/div>';
            return result;
     };\r\n<\/pre>
    Nous allons d\u00e9clarer ce nouveau carousel et le configurer :<\/strong><\/h4>
        var carousel = new ADventori.Carousel({\r\n        items: data.items,
            hSplit: 1,
            vSplit: 2,\r\n        insertHtmlStruct: true,
            carouselContainer:document.getElementById(\"myCarousel\"),
            navPrev:'<div class=\"arrowPrev\"><\/div>',
            navNext:'<div class=\"arrowNext\"><\/div>',
            animation :'translateX',
            hiddenBullets:false,\r\n        cta: '<span id=\"triangle\"> \u25ba <\/span><span id=\"go\"> GO !<\/span>',\r\n        autoStart: true,\r\n        duration : 30000,\r\n        interval : 3000,
            onSlide : function(nSlide) { myCallBack();}\r\n    });\r\n\r\n<\/pre>
    • items<\/code>: Les valeurs dynamique contenues dans data<\/code><\/li>
    • hSplit<\/code>: Nombre de produits par page avec un affichage horizontal<\/li>
    • vSplit<\/code>: Nombre de produits par page avec un affichage vertical<\/li>
    • insertHtmlStruct<\/span><\/code>: ins\u00e8re le squelette du Carousel<\/span><\/li>
    • carouselContainer<\/code>: d\u00e9signe l\u2019endroit o\u00f9 le Carousel sera ins\u00e9r\u00e9 <\/span><\/li>
    • navPrev<\/span><\/code>: ajoute l\u2019\u00e9l\u00e9ment de navigation \u201cpr\u00e9c\u00e9dent\u201d\u00a0 (cela peut \u00eatre une image dans une balise img ou bien un simple caract\u00e8re ASCII)<\/span><\/li>
    • navNext<\/code>:\u00a0ajoute l\u2019\u00e9l\u00e9ment de navigation \u201csuivant\u201d (cela peut \u00eatre une image dans une balise img ou bien un simple caract\u00e8re ASCII)<\/span><\/li>
    • animation<\/span><\/code>: ajoute une animation personnalis\u00e9e lors du changement de slide (animations disponibles : <\/i>none \/ skewY \/ rotateY \/ rotateX \/ scaleLittle \/ scaleBig \/ translateY \/ translateX \/ erase<\/i>)<\/span><\/li>
    • hiddenBullets<\/code>:\u00a0cache les points de navigation pr\u00e9sent sur les slides<\/span><\/li>
    • cta<\/code>: \u00ab Call To Action \u00bb Contenu du bouton<\/li>
    • autoStart<\/code>: Activer\/d\u00e9sactiver le d\u00e9filement<\/li>
    • duration<\/code>: Dur\u00e9e de la banni\u00e8re (en ms)<\/li>
    • interval<\/code>: Dur\u00e9e d\u2019affichage d\u2019un produit (en ms)<\/li>
    • onSlide<\/code>: Appelle une fonction \u00e0 chaque changement de slide<\/li><\/ul>\r\n\r\n\r\n
      \r\n\r\n
      Vous voulez faire vos propres animations ? C’est possible !! :<\/strong><\/h4>\r\n
      Il faut cr\u00e9er 3 class CSS en respectant ces suffixes ( _active \/ _prev \/ _next)<\/span><\/p>\r\n
         \r\nmonAnimation_active{\r\n    left:0;\r\n}\r\nmonAnimation_prev{\r\n    left:-100%;\r\n}\r\nmonAnimation_next{\r\n    left:100%;\r\n}\r\n<\/pre>\r\n\r\n\r\n\r\n
      Pour appeler votre animation il suffit d’indiquer dans la configuration du Carousel : 
      <\/strong>animation<\/span><\/code>: ‘monAnimation’<\/strong><\/p>\r\n

      \r\n
      N’oubliez pas de d\u00e9clarer des styles CSS pour designer votre Carousel !<\/p>\r\n
      \r\n
      R\u00e9sultat :<\/strong><\/h3>\r\n
      \r\n