{"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   Les tendances SEO en 2015  
views 167<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par\u00a0 CJG Digital Marketing \u00e0 la fin de l\u2019ann\u00e9e 2014,\u00a0 permet de d\u00e9couvrir les 8 tendances \u00e0 suivre pour un bon r\u00e9f\u00e9rencement en 2015 :\r\n\r\n1) Un contenu cibl\u00e9 et de qualit\u00e9,\r\n2) Les signaux sociaux auront un r\u00e9el impact,\r\n2) La s\u00e9curit\u00e9 de votre site internet,\r\n3) Le mobile friendly prendra de l'importance,\r\n4) La recherche conversationnelle,\r\n5) Le link-building ou netl...<\/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   5 profils de cyberconsommateurs  
views 352<\/div><\/a>\n\t\t\t\t\t\t\t\tSoon Soon Soon a d\u00e9crypt\u00e9 cinq profils de shoppers :\r\n\r\n- le \"Vigi-Shopper\" ou le watcher qui repr\u00e9sente 35% de la population\r\n\r\n- le \"Slow-Shopper\" ou le careshopper qui repr\u00e9sente 14% de la population\r\n\r\n- le \"Social-Shopper\" ou l'influenceur qui repr\u00e9sente 7% de la population\r\n\r\n\r\n\r\n- \"l'Emo-shopper\" ou le \"Whaou-addict\" qui repr\u00e9sente 12% de la population\r\n\r\n- l'Alter-Shopper ou le norm-cor qu...<\/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   Quels sont les modules utilis\u00e9s sur la page d\u2019accueil ? |\u00a0Prestashop 1.7  
views 17994<\/div><\/a>\n\t\t\t\t\t\t\t\tPar rapport \u00e0 Prestashop 1.6, la page d'accueil a totalement \u00e9t\u00e9 relook\u00e9 et le nom et le hook des modules ont\u00a0\u00e9t\u00e9 modifi\u00e9s.\r\n\r\nVoici une check-list des modules utilis\u00e9s par d\u00e9faut pour la page d'accueil.\r\n\r\nVous trouverez:\r\n- le nom du hook sur lequel le module est positionn\u00e9;\r\n- le nom du module utilis\u00e9 dans le back-office;\r\n- le nom\u00a0que porte le module dans le dossier \"modules' situ\u00e9 dans votre ...<\/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   Quel nom de domaine pour mon site e-commerce  
views 239<\/div><\/a>\n\t\t\t\t\t\t\t\t MON NOM DE DOMAINE\r\n \r\nLe choix du nom de domaine est la premi\u00e8re d\u00e9cision importante lorsque vous d\u00e9cidez de cr\u00e9er un site e-commerce ou un site vitrine.\r\n\r\nIl est tr\u00e8s important de r\u00e9fl\u00e9chir \u00e0 celui-ci avant de faire votre choix car il a un impact direct sur votre image de marque sur le web et sur la facilit\u00e9 avec laquelle les internautes trouveront votre site sur les moteurs de recherche.\r\n\r\n\r...<\/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 la couleur affecte le taux de conversion  
views 169<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par Kissmetrics , met en avant l\u2019importance du choix des couleurs pour am\u00e9liorer la conversion sur votre site e-commerce. En effet, les couleurs ont une grande importance psychologique sur le cerveau humain.\r\n\r\n---------\r\n\r\nVoici quelques donn\u00e9es qui ressortent de cette infographie :\r\n\r\n- 92,6 % des personnes d\u00e9clarent que l\u2019aspect visuel est le crit\u00e8re N\u00b0 1 pour prendr...<\/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}]}}