{"id":1393,"date":"2016-06-07T17:25:27","date_gmt":"2016-06-07T17:25:27","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=1393"},"modified":"2017-01-23T18:25:30","modified_gmt":"2017-01-23T18:25:30","slug":"ajouter-un-accordeon-dans-une-page-cms-astuce-prestashop","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/ajouter-un-accordeon-dans-une-page-cms-astuce-prestashop\/","title":{"rendered":"Ajouter un accord\u00e9on dans une page cms | Astuce Prestashop 1.6"},"content":{"rendered":"

Gr\u00e2ce \u00e0 ce tuto tr\u00e8s simple, vous pourrez ajouter un accord\u00e9on dans votre page CMS<\/p>\n

Astuce Prestashop 1.6<\/p>\n

————————————————-<\/p>\n

Solution 1 (ne fonctionne pas toujours)<\/strong><\/span><\/h2>\n

1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n

\"Ajouter<\/a><\/p>\n

<\/p>\n

2. Ins\u00e9rez le code suivant<\/p>\n

div class=\"panel-group\" id=\"accordion\">\r\n<div class=\"panel panel-default\">\r\n<div class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\"> Collapsible Group 1<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse1\" class=\"panel-collapse collapse in\">\r\n<div class=\"panel-body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse2\"> Collapsible Group 2<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse2\" class=\"panel-collapse collapse\">\r\n<div class=\"panel-body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse3\"> Collapsible Group 3<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse3\" class=\"panel-collapse collapse\">\r\n<div class=\"panel-body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
3 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
<\/h2>\n
Solution 2
\n<\/strong><\/span><\/h2>\n
1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Capture<\/a><\/p>\n
2. Ins\u00e9rez le code suivant<\/p>\n
<div id=\"accordion\">\r\n<p class=\"accordion-toggle minus-cercle\">Accordion 1<\/p>\r\n<div class=\"accordion-content default\">\r\n<p>Cras malesuada ultrices augue molestie risus.<\/p>\r\n<\/div>\r\n<p class=\"accordion-toggle\">Accordion 1<\/p>\r\n<div class=\"accordion-content\">\r\n<p>Lorem ipsum dolor sit amet mauris eu turpis.<\/p>\r\n<\/div>\r\n<p class=\"accordion-toggle\">Accordion 3<\/p>\r\n<div class=\"accordion-content\">\r\n<p>Vivamus facilisisnibh scelerisque laoreet.<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
3) Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
   $(document).ready(function($) {\r\n    $('#accordion').find('.accordion-toggle').click(function(){\r\n\r\n      \/\/Expand or collapse this panel\r\n      $(this).next().slideToggle();\r\n\t\t\/\/Hide the other panels\r\n      $(\".accordion-content\").not($(this).next()).slideUp();\r\n\t  $(this).toggleClass('minus-cercle').siblings().removeClass(\"minus-cercle\");;\r\nreturn false;\r\n    });\r\n  });<\/pre>\n
4) Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.accordion-content {\r\n\tdisplay: none;\r\n\tpadding: 10px 20px;\r\n\tfont-size: 14px\r\n}\r\n.accordion-content.default {\r\n\tdisplay: block;\r\n}\r\n.accordion-toggle {\r\n\tbackground-color: #f5f5f5;\r\n\tborder: 1px solid #ccc;\r\n\tcolor: #343738;\r\n\tcursor: pointer;\r\n\tfont-size: 15px;\r\n\tpadding: 10px 15px;\r\n}\r\n.accordion-toggle:before {\r\n\tfont-family: \"FontAwesome\";\r\n\tfont-size: 14px;\r\n\tmargin-right: 8px;\r\n\tcontent: \"\\f196\";\r\n\tdisplay: inline-block;\r\n\tvertical-align: top\r\n}\r\n.accordion-toggle.minus-cercle:before {\r\n\tcontent: \"\\f147\";\r\n}\r\n<\/pre>\n
5)\u00a0 R\u00e9sultat<\/p>\n
\"Ajouter<\/a><\/p>\n
Attention: lorsque vous touchez les fichiers .tpl .css, si vous ne voyez pas de changements, n’oubliez pas de nettoyer votre cache Prestashop !<\/strong><\/span><\/p>\n
Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Comment am\u00e9liorer votre taux de transformation ?  
views 425<\/div><\/a>\n\t\t\t\t\t\t\t\tIl est \u00e0 noter que 7 clients sur 10 abonnent leur commande en cours de route pour diff\u00e9rentes raisons :\r\n- Des co\u00fbts suppl\u00e9mentaires au moment du paiement,\r\n- L\u2019obligation de cr\u00e9er un compte,\r\n- La difficult\u00e9 \u00e0 renseigner les coordonn\u00e9es sur un smartphone ou une tablette Un processus de commande trop long et\/ou trop complexe ,\r\n- Des messages bloquants non compris par l\u2019internaute ,\r\n- L\u2019inqui\u00e9tud...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Comment cr\u00e9er une fiche Produit sur Prestashop 1.7  
views 10663<\/div><\/a>\n\t\t\t\t\t\t\t\tDans ce tutoriel, nous allons voir comment cr\u00e9er une fiche produit dans Prestashop 1.7.\r\n\r\nComme vous pourrez le constater, cette page diff\u00e8re totalement de Prestashop 1.6. Elle a \u00e9t\u00e9 totalement repens\u00e9e afin de la rendre plus all\u00e9g\u00e9e et plus facile d\u2019utilisation.\r\n\r\nEtant encore en cours de d\u00e9veloppement, les traductions ne sont pas encore finies et il reste encore des soucis de mise en page.\r\n\r\n...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Les Fran\u00e7ais, le e-commerce et les mobiles  
views 133<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par Content Square, met en avant les comportements de navigation et d\u2019achats des fran\u00e7ais sur mobile, en France.\r\n\r\nLes chiffres viennent d'une \u00e9tude r\u00e9alis\u00e9e d\u2019ao\u00fbt 2013 \u00e0 septembre 2014, sur 50 millions de visites sur tablette et plus de 100 sites e-commerce leaders fran\u00e7ais, multisectoriels.\r\n\r\nA noter : Selon la Fevad, 29,4 millions de personnes sont mobinautes en F...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Google Analytics et Prestashop : Installation et configuration  
views 11135<\/div><\/a>\n\t\t\t\t\t\t\t\tDans ce tutoriel, \u00a0nous allons voir comment installer Google Analytics sur son site Prestashop\r\nA) Qu'est-ce que Google Analytics ?\r\nGoogle Analytics est un service gratuit d'analyse d'audience d'un site Web.\r\n\r\nIl vous permet d'obtenir un grand nombre d'informations comme :\r\n\r\n \tle nombre de personnes qui visitent votre site ;\r\n \tla localisation g\u00e9ographique de vos visiteurs ;\r\n \tle taux de rebon...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Raccourcis claviers Suite Adobe  
views 409<\/div><\/a>\n\t\t\t\t\t\t\t\tLes raccourcis claviers \u00a0sont un\u00a0gain de temps incroyable.\u00a0Ils rendent le travail plus facil, plus rapide et plus simple.\r\n\r\nCependant, il peut-\u00eatre difficile de m\u00e9moriser tous les raccourcis\u00a0 de tous les logiciels.\r\n\r\nC'est pour cela que je trouve cette infographie tr\u00e8s pratique .\r\n\r\n\r\n\r\n<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  ","protected":false},"excerpt":{"rendered":"
Gr\u00e2ce \u00e0 ce tuto tr\u00e8s simple, vous pourrez ajouter un accord\u00e9on dans votre page CMS Astuce Prestashop 1.6 ————————————————- Solution 1 (ne fonctionne pas toujours) 1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code Articles similaires Guide de La psychologie de la couleur pour les webdesigners views […]<\/p>\n","protected":false},"author":1,"featured_media":1400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1393"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=1393"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1393\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/1400"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=1393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=1393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=1393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}