{"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 augmenter la taille de la description courte dans Prestashop  
views 4228<\/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   Afficher les disponibilit\u00e9s sur la liste de produits |  Astuce Prestashop 1.6  
views 3708<\/div><\/a>\n\t\t\t\t\t\t\t\tCe tutorial va vous permettre d'afficher les disponibilit\u00e9s (en stock....)\u00a0sur la liste des produits du bloc Populaire , Nouveaux Produits, Meilleures Ventes ....,\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n-------------------------------\r\n\r\n1)\u00a0Modification du fichier\u00a0product-list.tpl.\r\n\r\nOuvrez le fichier product-list qui se situe \u00e0 l'int\u00e9rieur de votre th\u00e8me est ins\u00e9r\u00e9\u00a0le code...<\/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 frais de port dans le block panier |  Astuce Prestashop 1.6  
views 6155<\/div><\/a>\n\t\t\t\t\t\t\t\tPour \u00e9viter toute confusion, je pr\u00e9f\u00e8re d\u00e9sactiver les frais de port dans le block panier.\r\n\r\nEn effet, si le client n'est pas connect\u00e9 \u00e0 son compte, Prestashop indiquera les frais de port les moins chers.\r\n\r\nHors si le client habite aux Etats-Unis, les frais de port\u00a0peuvent consid\u00e9rablement varier et entrainer ainsi un risque d'abandon \u00a0lors de la finalisation de la commande. (voir depuis le d\u00e9bu...<\/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   Contact SAV \/ Adresse  boutique  \u2013 Prestashop 1.7  
views 1262<\/div><\/a>\n\t\t\t\t\t\t\t\tLa partie contact SAV et magasins dans Prestashop 1.7 et dans le m\u00eame onglet : Param\u00e8tres de la boutique > Contact \r\n\r\n1) Onglet Contacts\r\n\r\nCet onglet vous permet de param\u00e9trer les mails que vous d\u00e9sirez pour le SAV. Par d\u00e9faut, 2 contacts sont d\u00e9j\u00e0 ins\u00e9r\u00e9s : service client \/ webmaster. Vous pouvez en ajouter \/ supprimer\r\n\r\n\r\n\r\n\u00a0\r\n\r\n\r\n\r\n\u00a0\r\n\r\nVous pouvez voir apparaitre les contacts d...<\/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   L\u2019action de scroller sur un site e-commerce permet-il d\u2019augmenter les conversi...  
views 613<\/div><\/a>\n\t\t\t\t\t\t\t\tLes chiffres de cette infographie , r\u00e9alis\u00e9e par Content Square,\u00a0 ont \u00e9t\u00e9 obtenus en analysant pr\u00e8s de 50 millions de visites r\u00e9parties sur plus de 100 sites E-commerce, tous secteurs d\u2019activit\u00e9 confondus.\r\nPour rappel : scroller consiste \u00e0 faire d\u00e9filer les pages de votre site internet de haut en bas.\r\n\r\n1) Evolution du comportement du scroll\r\nEn 2014, on peut noter une augmentation du taux de sc...<\/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}]}}