{"id":3541,"date":"2021-06-25T13:59:57","date_gmt":"2021-06-25T13:59:57","guid":{"rendered":"https:\/\/www.majory-cubizolles.fr\/blog\/?p=3541"},"modified":"2021-07-27T16:14:37","modified_gmt":"2021-07-27T16:14:37","slug":"creer-un-theme-enfant-avec-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/creer-un-theme-enfant-avec-prestashop-1-7\/","title":{"rendered":"Cr\u00e9er un th\u00e8me enfant avec PrestaShop 1.7"},"content":{"rendered":"

Qu\u2019est ce qu\u2019un th\u00e8me enfant\u00a0?<\/span> <\/strong><\/h2>\n

Un th\u00e8me Prestashop est un ensemble de fichiers qui permet de g\u00e9rer les fonctionnalit\u00e9s et le visuel d \u2018un site PrestaShop. Si vous apportez des modifications \u00e0 votre th\u00e8me, la mise \u00e0 jour vers de nouvelles versions peut les \u00e9craser. C\u2019est dans ce contexte qu\u2019entre la notion\u00a0 de th\u00e8me enfant. <\/strong><\/p>\n

Un th\u00e8me enfant <\/strong>h\u00e9rite des fonctionnalit\u00e9s et du visuel du th\u00e8me parent. Vous pouvez apporter toutes les modifications\u00a0 que vous d\u00e9sirez dans le th\u00e8me enfant, les mises \u00e0 jour ne supprimeront pas vos modifications<\/p>\n

<\/p>\n

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

Avant toutes modifications, il est important de cr\u00e9er une sauvegarde de votre PrestaShop et base de donn\u00e9e <\/strong><\/span><\/p>\n

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

Comment installer le th\u00e8me enfant ?
\n<\/strong><\/h2>\n

Dans notre exemple, on va utiliser le th\u00e8me par d\u00e9faut de PrestaShop qui se nomme \u00ab\u00a0classic\u00a0\u00bb. Il est tr\u00e8s important que votre th\u00e8me parent se situe dans le dossier \u00ab\u00a0themes \u00bb<\/p>\n

Etape 1 )<\/strong><\/span> Cr\u00e9er un dossier que vous allez nommer \u00ab\u00a0classicchild\u00a0\u00bb. Ce dossier doit-\u00eatre au m\u00eame endroit que le dossier parent soit dans \u00ab\u00a0th\u00e8mes\u00a0\u00bb<\/p>\n

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

Etape 2 )<\/strong><\/span> A l\u2019int\u00e9rieur de ce dossier, vous allez cr\u00e9er un dossier \u00ab\u00a0config\u00a0\u00bb puis un fichier qui se nommera\u00a0 \u00ab\u00a0theme.yml\u00a0\u00bb<\/p>\n

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

Etape 3 )<\/strong> Dans ce fichier vous allez ins\u00e9rer les informations suivantes<\/p>\n

parent: classic\r\nname: classicchild\r\ndisplay_name: My first child Theme\r\nversion: 1.0.0\r\nassets:\r\n   use_parent_assets: true<\/pre>\n
Parent\u00a0:<\/strong> le nom du th\u00e8me parent, dans notre cas le th\u00e8me par d\u00e9faut \u00ab\u00a0classic\u00a0\u00bb
\nName\u00a0:<\/strong> le nom que vous allez donner au dossier de votre th\u00e8me enfant, dans cet exemple j\u2019ai cr\u00e9e un dossier qui se nomme \u00ab\u00a0classicchild \u00a0\u00bb
\nDisplay Name\u00a0<\/strong>: le nom que vous d\u00e9sirez donner \u00e0 votre th\u00e8me enfant
\nVersion<\/strong>\u00a0: la version du th\u00e8me,
\nAssets\u00a0:<\/strong> si vous d\u00e9sirez que le th\u00e8me enfant reprend le css et le js du th\u00e8me parent, il est important de mettre true \u00e0 \u00ab\u00a0use_parent_assets. Si vous ne le d\u00e9sirez pas, mettez simplement false<\/p>\n
Etape 4 ) <\/strong>Copier le fichier \u00ab\u00a0preview.png\u00a0\u00bb qui se situe dans le th\u00e8me parent \u00ab\u00a0classic\u00a0\u00bb pour le coller dans le dossier du theme enfant \u00ab\u00a0classicchild\u00a0\u00bb. Vous pouvez aussi cr\u00e9er votre propre image. 
\n<\/strong><\/p>\n
\"\"<\/a><\/p>\n
Etape 5 ) <\/strong>Allez dans le back-office de votre PrestaShop puis Apparence > th\u00e8me & logo, scrollez un peu vers le bas, et s\u00e9lectionnez votre th\u00e8me enfant en cliquant sur \u00ab\u00a0utiliser ce th\u00e8me\u00a0\u00bb
\n<\/strong><\/p>\n
\"\"<\/a><\/p>\n
Et voila votre nouveau th\u00e8me est install\u00e9 !<\/p>\n
Comment modifier le th\u00e8me enfant ? <\/strong><\/h2>\n
A) Exemple 1
\n<\/strong><\/span><\/p>\n
Pour cette exemple nous allons modifier la page de contact. Il est important de recr\u00e9er le m\u00eame chemin que dans le theme parent . La page contact dans PrestaShop 1.7 se situe dans themes\/lenomdevotretheme\/templates\/contact.tpl<\/p>\n
Nous allons donc dans le th\u00e8me enfant, cr\u00e9er un dossier\u00a0 templates puis un fichier contact.tpl<\/p>\n
\"\"<\/a><\/p>\n
Par exemple vous d\u00e9sirez ajouter du texte au dessus du formulaire de contact :<\/p>\n
Vous allez ouvrir le fichier contact.tpl qui se situe dans le theme enfant \u00ab\u00a0classicchild\u00a0\u00bb et ins\u00e9rez le code suivant qui signifie en qq sorte qu’on fait appel au fichier parent<\/p>\n
{extends file='parent:contact.tpl'}<\/pre>\n
Ensuite, si vous regardez dans le fichier contact.tpl qui se situe dans le theme parent \u00ab\u00a0classic\u00a0\u00bb, vous avez ce code :<\/p>\n
{block name='page_content'}\r\n  {widget name=\"contactform\"}\r\n{\/block}<\/pre>\n
Nous d\u00e9sirons dans cet exemple, ajoutez du texte en dessus du formulaire de contact, pour cela nous allons ins\u00e9rer \u00ab\u00a0append\u00a0\u00bb dans la balise \u00ab\u00a0block\u00a0\u00bb<\/p>\n
{block name='page_content' append}\r\nPut any content here.\r\n{\/block}<\/pre>\n
Vous pouvez allez consulter cette page afin de connaitre les sp\u00e9cificit\u00e9s du \u00ab\u00a0block\u00a0\u00bb en smarty : https:\/\/www.smarty.net\/docs\/en\/language.function.block.tpl<\/a><\/strong><\/p>\n
RESULTAT FINAL<\/strong><\/p>\n
\"\"<\/a><\/p>\n
B) Exemple 2
\n<\/strong><\/span><\/p>\n
Dans cette exemple; nous allons supprimer la banni\u00e8re de la page cat\u00e9gorie pour afficher seulement le nom de la cat\u00e9gorie<\/p>\n
Pour cela, nous allons donc dans le th\u00e8me enfant, cr\u00e9er le chemin suivant : themes\/lenomtheme\/templates\/catalog\/listing\/category.tpl<\/strong><\/p>\n
On va ins\u00e9rez le code suivant qui signifie donc qu’on fait appel au fichier parent<\/p>\n
{extends file='parent:catalog\/listing\/category.tpl'}<\/code><\/pre>\n
Ensuite, si vous regardez dans le fichier category.tpl<\/code> qui se situe dans le theme parent \u00ab\u00a0classic\u00a0\u00bb, vous avez ce code :<\/p>\n
{block name='product_list_header'}\r\n    {include file='catalog\/_partials\/category-header.tpl' listing=$listing category=$category}\r\n{\/block}<\/pre>\n
Afin de supprimer la banni\u00e8re et d’afficher que le nom de la cat\u00e9gorie, nous allons le remplacer par<\/p>\n
{block name='product_list_header'}\r\n  <h1 class=\"h1\">{$category.name}<\/h1>\r\n{\/block}<\/pre>\n
RESULTAT FINAL<\/strong><\/p>\n
\"\"<\/a><\/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   Pourquoi il ne faut pas rechercher ses mots cl\u00e9s Adwords sur Google  
views 202<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie explique pourquoi il ne faut pas de saisir sur Google, \u00a0ses requ\u00eates sur laquelle nous avons plac\u00e9 une ench\u00e8re.\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   La taille des images sur les r\u00e9seaux sociaux  
views 721<\/div><\/a>\n\t\t\t\t\t\t\t\tLe blog setupablogtoday.com a publi\u00e9 une infographie r\u00e9capitulant les diff\u00e9rentes tailles des principaux espaces sur les r\u00e9seaux sociaux pour l'ann\u00e9e 2015\r\n\r\n----------\r\nImages Facebook\r\nImage de couverture : 851 x 315 pixels (taille minimum de 399 x 150 pixels qui sera \u00e9largie)\r\nPhoto de profil : 180 x 180 pixels\r\nImage partag\u00e9e : 1 200 x 900 pixels (taille minimum de 399 x 150 pixels)\r\nImage pou...<\/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   R\u00e9ussir les tests d\u2019A\/B testing gr\u00e2ce aux donn\u00e9es | Infographie  
views 169<\/div><\/a>\n\t\t\t\t\t\t\t\t1) Qu'est ce que l'A\/B testing\r\nIl s\u2019agit simplement de tester plusieurs versions de vos pages pour savoir laquelle d\u2019entre-elles donne les meilleurs r\u00e9sultats : plus de ventes, plus d\u2019inscriptions, plus de clics, etc\u2026\r\n2) Voici les astuces abord\u00e9es dans\u00a0cette infographie pour collecter les donn\u00e9es \u00a0et d\u00e9finir un plan d'action\r\n\r\n\t1) Analyse heuristique : \u00c9value les exp\u00e9riences du contenu et de l'...<\/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 les taxes |  Astuce Prestashop 1.6  
views 1653<\/div><\/a>\n\t\t\t\t\t\t\t\tSi vous d\u00e9sirez d\u00e9sactiver les taxes dans prestashop, suivez les deux \u00e9tapes suivantes\r\n\r\n1) Allez dans pr\u00e9f\u00e9rences > taxes\r\n\r\n\r\n\r\n\r\n2) Options des taxes > Activer les taxes : non\r\n\r\n\r\n\r\nEh voila c'\u00e9tait tout simple les taxes sont d\u00e9sactiv\u00e9es.<\/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 278<\/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<\/div>  ","protected":false},"excerpt":{"rendered":"
Qu\u2019est ce qu\u2019un th\u00e8me enfant\u00a0? Un th\u00e8me Prestashop est un ensemble de fichiers qui permet de g\u00e9rer les fonctionnalit\u00e9s et le visuel d \u2018un site PrestaShop. Si vous apportez des modifications \u00e0 votre th\u00e8me, la mise \u00e0 jour vers de nouvelles versions peut les \u00e9craser. C\u2019est dans ce contexte qu\u2019entre […]<\/p>\n","protected":false},"author":1,"featured_media":3572,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3541"}],"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=3541"}],"version-history":[{"count":1,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions"}],"predecessor-version":[{"id":3777,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions\/3777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/3572"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=3541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=3541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=3541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}