{"id":1380,"date":"2016-04-12T11:41:59","date_gmt":"2016-04-12T11:41:59","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=1380"},"modified":"2017-01-23T18:25:54","modified_gmt":"2017-01-23T18:25:54","slug":"ajouter-des-tabs-dans-une-page-cms-astuce-prestashop","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/ajouter-des-tabs-dans-une-page-cms-astuce-prestashop\/","title":{"rendered":"Ajouter des tabs dans une page cms | Astuce Prestashop 1.6"},"content":{"rendered":"

Ce tutorial va vous permettre d’ins\u00e9rer des tabs dans vos pages cms<\/p>\n

Astuce Prestashop 1.6<\/p>\n

————————————–<\/p>\n

1) Ins\u00e9rer une tab horizontal sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n

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

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

<\/p>\n

1.2 Ins\u00e9rez le code suivant<\/p>\n

<div class=\"tabbable\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#one\">One<\/a><\/li>\r\n<li><a href=\"#two\">Two<\/a><\/li>\r\n<li><a href=\"#three\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"one\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"two\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"three\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
1.3 Enregistrer et visualiser<\/p>\n
\"Ins\u00e9rer<\/a><\/p>\n
1.4 Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
2) Ins\u00e9rer une tab sur le c\u00f4t\u00e9 gauche sur la page cms de Prestashop\u00a0<\/span><\/strong><\/h3>\n
2.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
2.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-left\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
2.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-left > .nav-tabs > li {\r\n\tfloat: none;\r\n}\r\n.tabs-left > .nav-tabs > li > a {\r\n\tmin-width: 74px;\r\n\tmargin-right: 0;\r\n\tmargin-bottom: 3px;\r\n}\r\n.tabs-left > .nav-tabs {\r\n\tfloat: left;\r\n\tmargin-right: 19px;\r\n\tborder-right: 1px solid #ddd;\r\n\tborder-bottom:none\r\n}\r\n.tabs-left > .nav-tabs > li {\r\n\tdisplay: block\r\n}\r\n.tabs-left > .nav-tabs > li > a {\r\n\tmargin-right: -1px;\r\n\t-webkit-border-radius: 4px 0 0 4px;\r\n\t-moz-border-radius: 4px 0 0 4px;\r\n\tborder-radius: 4px 0 0 4px;\r\n}\r\n.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {\r\n\tborder-color: #eeeeee #dddddd #eeeeee #eeeeee;\r\n}\r\n.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {\r\n\tborder-color: #ddd transparent #ddd #ddd;\r\n *border-right-color: #ffffff;\r\n}<\/pre>\n
2.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
2.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
3) Ins\u00e9rer une tab sur le c\u00f4t\u00e9 droite\u00a0<\/span><\/strong>sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n
3.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
3.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-right\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
3.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-right > .nav-tabs > li {\r\n\tfloat: none;\r\n}\r\n.tabs-right > .nav-tabs > li > a {\r\n\tmin-width: 74px;\r\n\tmargin-right: 0;\r\n\tmargin-bottom: 3px;\r\n}\r\n\r\n.tabs-right > .nav-tabs {\r\n\tfloat: right;\r\n\tmargin-left: 19px;\r\n\tborder-left: 1px solid #ddd;\r\n\tborder-bottom:none\r\n}\r\n.tabs-right > .nav-tabs > li > a {\r\n\tmargin-left: -1px;\r\n\t-webkit-border-radius: 0 4px 4px 0;\r\n\t-moz-border-radius: 0 4px 4px 0;\r\n\tborder-radius: 0 4px 4px 0;\r\n}\r\n.tabs-right > .nav-tabs > li {\r\n\tdisplay: block\r\n}\r\n.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {\r\n\tborder-color: #eeeeee #eeeeee #eeeeee #dddddd;\r\n}\r\n.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {\r\n\tborder-color: #ddd #ddd #ddd transparent;\r\n *border-left-color: #ffffff;\r\n}\r\n<\/pre>\n
3.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
3.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
4) Ins\u00e9rer une tab en bas\u00a0<\/span><\/strong>sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n
4.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
4.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-below\">\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\n
4.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {\r\n\tborder-bottom: 0;\r\n}\r\n.tab-content > .tab-pane, .pill-content > .pill-pane {\r\n\tdisplay: none;\r\n}\r\n.tab-content > .active, .pill-content > .active {\r\n\tdisplay: block;\r\n}\r\n.tabs-below > .nav-tabs {\r\n\tborder-top: 1px solid #ddd;\r\n\t margin-top: 25px;\r\n}\r\n.tabs-below > .nav-tabs > li {\r\n\tmargin-top: -1px;\r\n\tmargin-bottom: 0;\r\n}\r\n.tabs-below > .nav-tabs > li > a {\r\n\t-webkit-border-radius: 0 0 4px 4px;\r\n\t-moz-border-radius: 0 0 4px 4px;\r\n\tborder-radius: 0 0 4px 4px;\r\n}\r\n.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {\r\n\tborder-top-color: #ddd;\r\n\tborder-bottom-color: transparent;\r\n}\r\n.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {\r\n\tborder-color: transparent #ddd #ddd #ddd;\r\n}\r\n<\/pre>\n
4.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
4.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<script><\/span><\/p>\n
$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
———————————–<\/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 faire apparaitre une deuxi\u00e8me photo de vos produits au survol des images  
views 4980<\/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   Greffer le module bloc social dans displayNav |  Astuce Prestashop 1.6  
views 2882<\/div><\/a>\n\t\t\t\t\t\t\t\tCe tutoriel va vous permettre de greffer le module \"bloc social\" dans displayNav\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n--------------------------------------------------------\r\n\r\nOn va dans un premier temps\u00a0modifier le fichier\u00a0blocksocial.php\r\n\r\n1) Pour cela allez dans modules > blocksocial> blocksocial.php. Tout \u00e0\u00a0la fin du code, juste avant la derni\u00e8re accolade coll...<\/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 tendances du WebDesign en 2016 | Infographie  
views 265<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie vous mettre les tendances du webdesign en 2016.\r\n\r\nOn peut noter que le visuel est toujours aussi important avec les images en full-width.\r\n\r\nLe Split layout va aussi monter mais il ne s'appliquera pas \u00e0 tous les environnements\r\n\r\nCette infographie montre aussi que l'exp\u00e9rience utilisateur est au centre du web design.\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\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   6 erreurs de d\u00e9veloppement \u00e0 \u00e9viter en e-commerce.  
views 196<\/div><\/a>\n\t\t\t\t\t\t\t\tL'agence web\u00a0Kiwik\u00a0\u00a0r\u00e9alise sa troisi\u00e8me infographie sur 6 erreurs de d\u00e9veloppement \u00e0 \u00e9viter en e-commerce.\r\nVoici les points abord\u00e9s :\r\n1) Avoir un site trop lent\r\n2) Avoir un site non pr\u00e9par\u00e9 \u00e0 prendre de la charge\r\n3) Ne pas choisir la bonne plateforme\r\n4) Avoir un site qui n'a pas \u00e9t\u00e9 test\u00e9 en profondeur\r\n5) Avoir un site non adopt\u00e9 aux usages mobiles\r\n6) Avoir un site non adapt\u00e9 aux usages de...<\/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 bien poster sur Instagram | Infographie  
views 423<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie vous montre comment am\u00e9liorer vos posts sur Instagram pour augmenter votre visibilit\u00e9 sur la toile.\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":"
Ce tutorial va vous permettre d’ins\u00e9rer des tabs dans vos pages cms Astuce Prestashop 1.6 ————————————– 1) Ins\u00e9rer une tab horizontal sur la page cms de Prestashop\u00a0 1.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code Articles similaires Bouton Suivant\/Pr\u00e9cedent sur la page produit | Astuce Prestashop […]<\/p>\n","protected":false},"author":1,"featured_media":1384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,11],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1380"}],"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=1380"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/1384"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=1380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=1380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}