{"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   Installer manuellement un module PrestaShop  
views 3716<\/div><\/a>\n\t\t\t\t\t\t\t\tVoici un petit tuto pour vous permettre d'installer manuellement votre module PrestaShop\r\n\r\nPour ce tuto, nous allons partir du fait que vous avez achet\u00e9 un module depuis le addons de Prestashop\r\n\r\n\r\n1) Etape 1\r\n\r\nDepuis le back-office de votre compte \"Addons PrestaShop\", cliquez sur l'onglet \"T\u00e9l\u00e9chargement\"\r\n\r\n\r\n\r\n\r\n2) Etape 2\r\n\r\nCliquer sur l'icone \"fl\u00e8che\" du module que vous d\u00e9sirez t\u00e9l\u00e9charge...<\/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 faire apparaitre une deuxi\u00e8me photo de vos produits au survol des images  
views 5049<\/div><\/a>\n\t\t\t\t\t\t\t\tVoici un petit tutoriel qui va vous permettre de faire apparaitre la deuxi\u00e8me image de votre produit au passage de la souris.\r\n\r\nUPDATE : j'ai trouv\u00e9 ce module qui est gratuit : cliquez-ci\u00a0\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n1) Cr\u00e9ez un fichier nomm\u00e9 \u00ab Category.php\u00a0\u00bb dans le dossier \u00ab\u00a0override\/classes\u00a0\u00bb et ajoutez-le code suivant:\r\n\r\n\r\n\r\n1) Cr\u00e9ez un fichier nomm\u00e9 \u00ab Produ...<\/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 augmenter la taille de la description courte dans Prestashop  
views 4209<\/div><\/a>\n\t\t\t\t\t\t\t\tLors de la cr\u00e9ation de la fiche produit sur Prestashop, vous serez\u00a0peut-\u00eatre \u00eatre bloqu\u00e9 par la limitation du nombre de caract\u00e8res de la description courte (maximum 400 caract\u00e8res)\r\n\r\n\r\n\r\n\r\n\r\nBonne nouvelle, pas besoin d'aller dans le code, une simple manipulation \u00e0 faire dans le back-office de Prestashop\r\nComment modifie t-on le nombre de caract\u00e8re ?\u00a0\r\nA) Connectez-vous dans le back-office de Pre...<\/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   D\u00e9sactiver \u00ab\u00a0Recevez les offres sp\u00e9ciales de nos partenaires\u00a0\u00bb |  Astuce Prestashop 1.6...  
views 2917<\/div><\/a>\n\t\t\t\t\t\t\t\tCette phrase \u00a0\"Recevez les offres sp\u00e9ciales de nos partenaires\" \u00a0apparait lors de la cr\u00e9ation d'un compte comme vous pouvez le voir sur la photo ci-dessous\r\n\r\n\r\n\r\n\r\nSous quel terme se trouve cette option dans\u00a0le back-office de Prestashop\u00a0\r\nDans le back office de Prestashop, cette phrase est englob\u00e9e\u00a0sous le terme \"Opt-in\"\r\nComment supprimer cette option dans le back-office de Prestashop\u00a0\r\nVoici la...<\/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   Votre boutique Prestashop est-il compatible mobile ?  
views 1283<\/div><\/a>\n\t\t\t\t\t\t\t\tGoogle ayant mis en place son label\u00a0\u00ab\u00a0Mobile Friendly\u00a0\u00bb, dans ses r\u00e9sultats de recherche, il devient maintenant incontournable d'avoir un site version mobile. Il faut noter aussi qui si votre site n'est pas responsive ou compatible Mobile, vous allez perdre des places dans les pages de r\u00e9sultats de Google.\r\n\r\nGoogle \u00e0 mise \u00e0 votre disposition un outil tr\u00e8s simple pour tester la comptabilit\u00e9 de vot...<\/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 Quelques variables qui peuvent vous aider pour votre mise en page […]<\/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}]}}