{"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   Comment modifier le message de Copyright en bas de page | Prestashop 1.7 ?  
views 20844<\/div><\/a>\n\t\t\t\t\t\t\t\tLors du param\u00e9trage de votre boutique Prestashop, vous d\u00e9sirez peut-\u00eatre modifier le message de Copyright en bas de page.\r\n\r\nPar d\u00e9faut, le message est le suivant :\u00a0\u00a9 2016 \u2013 Ecommerce software by PrestaShop\u2122. Lorsque nous\u00a0cliquons sur lien, \u00a0on est transf\u00e9r\u00e9\u00a0sur le site de Prestashop.\r\n\r\nDans un premier temps, nous verrons comment modifier le message et dans un deuxi\u00e8me temps, comment modif...<\/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   Le pouvoir du hashtag  
views 272<\/div><\/a>\n\t\t\t\t\t\t\t\tLe hashtag connu par ce petit signe\u00a0\u00ab\u00a0#\u00a0\u00bb, permet de suivre un fil de discussion associ\u00e9 au sujet du symbole.\r\n\r\nCette infographie fait donc une r\u00e9trospectif de ce petit symbole au\u00a0pouvoir immense.\r\n\r\n\r\n\r\n\r\n\r\n\u00a0<\/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 269<\/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   SPAM PRESTASHOP FORMULAIRE DE CONTACT  
views 3731<\/div><\/a>\n\t\t\t\t\t\t\t\tDepuis qq temps, des robots de SPAM utilisent le formulaire de contact des boutiques PrestaShop pour envoyer des mails.\r\n\r\nVoici deux astuces\u00a0 (les deux versions ont \u00e9t\u00e9 test\u00e9es)\u00a0 pour la version Prestashop 1.6\r\n- astuce 1 : I'm not a robot de google\r\n- astuce 2 : captcha invisible\r\n\r\nASTUCE 1 \r\n\r\n1) Allez google Re-capcha : https:\/\/www.google.com\/recaptcha\/intro\/invisible.html\r\n\r\n- En haut \u00e0 droi...<\/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 recherche d\u2019informations sur Google et le SEO en 2016  
views 209<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie propos\u00e9 aujourd'hui par\u00a0OnCrawl\u00a0nous montre quelques chiffres la recherche d'informations sur Google et le r\u00e9f\u00e9rencement naturel.\r\n1. Savez-vous que sur Google, il y a \u00a0\u00a0\r\n\r\n \tPlus de 100 milliards de recherches par mois soit 3,5 milliards par jour\r\n \tPlus des 50% des recherches proviennent d'appareils mobiles (d'o\u00f9 l'importance d'avoir un site responsive aujourd'hui)\r\n \t16% \u00e0 20...<\/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}]}}