{"id":2389,"date":"2022-02-24T22:36:32","date_gmt":"2022-02-24T20:36:32","guid":{"rendered":"https:\/\/www.h-hennes.fr\/blog\/?p=2389"},"modified":"2022-03-30T22:15:24","modified_gmt":"2022-03-30T20:15:24","slug":"prestashop-utiliser-les-pages-cms-comme-des-blocks","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2022\/02\/24\/prestashop-utiliser-les-pages-cms-comme-des-blocks\/","title":{"rendered":"Prestashop : Utiliser les pages cms comme des blocks"},"content":{"rendered":"\n<p>Vous souhaitez afficher des contenus \u00e9ditables depuis l&rsquo;administration un peu partout dans votre th\u00e8me ?<br>C&rsquo;est tr\u00e8s facile \u00e0 faire et nous allons voir comment. ( Pour un usage basique directement dans les fichiers smarty )<br>L&rsquo;id\u00e9e est d&rsquo;utiliser les pages cms de Prestashop.<br>Pour les ranger, vous pouvez faire une cat\u00e9gorie cms d\u00e9sactiv\u00e9e \u00ab\u00a0Blocs Cms\u00a0\u00bb et mettre toutes les pages dedans.<br><br>Pour g\u00e9rer l&rsquo;affichage nous allons cr\u00e9er un module hhcmspagewidget<br>Et le contenu de la page de d\u00e9mo sera le suivant.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-2-1024x322.png\" alt=\"\" class=\"wp-image-2391\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-2-1024x322.png 1024w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-2-300x94.png 300w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-2-768x241.png 768w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-2.png 1261w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctionnement basique<\/h3>\n\n\n\n<p>Pour un fonctionnement de base le code suivant sera suffisant<\/p>\n\n\n\n<pre escaped=\"true\" lang=\"php\">class Hhcmspagewidget extends Module implements WidgetInterface\n{\n\n    public function __construct()\n    {\n        $this-&gt;name = 'hhcmspagewidget';\n        $this-&gt;tab = 'others';\n        $this-&gt;version = '0.1.0';\n        $this-&gt;author = 'hhennes';\n        $this-&gt;bootstrap = true;\n        parent::__construct();\n\n        $this-&gt;displayName = $this-&gt;l('Hh Cms page widget');\n        $this-&gt;description = $this-&gt;l('Allow to display cms page as block through a widget');\n    }\n\n\n    \/**\n     * [FRONT OFFICE] Widget utilis\u00e9 pour afficher le bloc cms\n     * @param string $hookName\n     * @param array $configuration\n     * @return string\n     *\/\n    public function renderWidget($hookName = null, array $configuration)\n    {\n        if ( isset($configuration['id_cms']) ){\n            return $this-&gt;getWidgetVariables($hookName,$configuration);\n        }\n\n        return '';\n    }\n\n    \/**\n     * [FRONT OFFICE] Widget utilis\u00e9 pour r\u00e9cup\u00e9rer les informations d'affichage\n     * @param string $hookName\n     * @param array $configuration\n     * @return string\n     *\/\n    public function getWidgetVariables($hookName = null, array $configuration)\n    {\n        try {\n            \n            $idCms = (int)$configuration['id_cms'];\n            $cms = new CMS($idCms,$this-&gt;context-&gt;language-&gt;id);\n\n            \/\/Ex\u00e9cution du hook pour appliquer le filtrage des contenus cms\n            if ( false != $this-&gt;context-&gt;controller) {\n                $cmsVar = $this-&gt;context-&gt;controller-&gt;objectPresenter-&gt;present($cms);\n                $filteredCmsContent = Hook::exec(\n                    'filterCmsContent',\n                    ['object' =&gt; $cmsVar],\n                    null,\n                    false,\n                   true,\n                    false,\n                    null,\n                    true\n                );\n                if (!empty($filteredCmsContent['object'])) {\n                    $cmsVar = $filteredCmsContent['object'];\n                }\n                return $cmsVar['content'];\n            } else {\n                return $cms-&gt;content;\n            }\n        } catch (Exception $e){\n            return '';\n        }\n    }\n\n}\n<\/pre>\n\n\n\n<p>Le module impl\u00e9mente juste une fonctionnalit\u00e9 native des modules Prestashop, les widgets ( cf. <a href=\"https:\/\/devdocs.prestashop.com\/1.7\/development\/components\/smarty-extensions\/#widgets\" target=\"_blank\" rel=\"noopener\">https:\/\/devdocs.prestashop.com\/1.7\/development\/components\/smarty-extensions\/#widgets<\/a> )<br>Ceci nous permettra d\u2019appeler facilement notre module et de charger les pages cms avec la syntaxe suivante dans n&rsquo;importe quel fichier tpl<\/p>\n\n\n\n<pre escaped=\"true\" lang=\"smarty\">{widget name='hhcmspagewidget' id_cms=10}\n<\/pre>\n\n\n\n<p>Et voici le rendu front tout marche comme pr\u00e9vu \ud83d\ude42<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"351\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-3.png\" alt=\"\" class=\"wp-image-2392\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-3.png 560w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-3-300x188.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Optimisation <\/h3>\n\n\n\n<p>Cette m\u00e9thode tr\u00e8s basique est fonctionnelle, mais dans le cas ou on utilise plusieurs instances l&rsquo;utilisation des identifiants techniques va vite poser probl\u00e8me.<br>Car ils peuvent \u00e9voluer de mani\u00e8re ind\u00e9pendante sur chaque instance et comme le code est partag\u00e9 on va se retrouver avec des contenus incoh\u00e9rent.<br><br>Une solution pratique va donc \u00eatre de rajouter un identifiant unique sur les pages via notre module.<br><strong>A partir de la version 1.7.6 <\/strong><br>On peut suivre le tutoriel : <a href=\"https:\/\/www.h-hennes.fr\/blog\/2019\/08\/05\/prestashop-1-7-ajouter-des-champs-dans-un-formulaire-dadministration\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.h-hennes.fr\/blog\/2019\/08\/05\/prestashop-1-7-ajouter-des-champs-dans-un-formulaire-dadministration\/<\/a> <br>Sur l&rsquo;entit\u00e9 <strong>CmsPage<br><br>Version inf\u00e9rieures :<br><\/strong>&nbsp;il faut suivre la logique de ce tutoriel<strong> : <\/strong><a href=\"https:\/\/www.h-hennes.fr\/blog\/2017\/06\/21\/prestashop-ajouter-des-champs-dans-un-formulaire-dadministration\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.h-hennes.fr\/blog\/2017\/06\/21\/prestashop-ajouter-des-champs-dans-un-formulaire-dadministration\/<\/a><strong><br><\/strong><\/p>\n<p>Les captures et le module fournis en exemple ci-dessous ne sont compatibles qu&rsquo;avec <strong>Prestashop 1.7.6 et +<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"885\" height=\"216\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-4.png\" alt=\"\" class=\"wp-image-2396\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-4.png 885w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-4-300x73.png 300w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2022\/02\/image-4-768x187.png 768w\" sizes=\"auto, (max-width: 885px) 100vw, 885px\" \/><\/a><\/figure>\n\n\n\n<p>Une fois ce nouveau champ mis en place , nous pourrons charger le contenu via son identifiant unique.<br \/>Et ainsi \u00eatre s\u00fbr de charger le bon bloc peut importe l&rsquo;environnement \ud83d\ude42<\/p>\n\n\n\n<pre escaped=\"true\" lang=\"smarty\">{widget name='hhcmspagewidget' cms_identifier='demo-blog'}\n<\/pre>\n\n\n\n<p class=\"has-text-align-center has-ast-global-color-0-color has-luminous-vivid-amber-background-color has-text-color has-background\"><a href=\"https:\/\/shop.h-hennes.fr\/fr\/4-prestashop-cms-widget.html\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger le module complet ( et gratuit ) sur la boutique<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous souhaitez afficher des contenus \u00e9ditables depuis l&rsquo;administration un peu partout dans votre th\u00e8me ?C&rsquo;est tr\u00e8s facile \u00e0 faire et nous allons voir comment. ( Pour un usage basique directement dans les fichiers smarty )L&rsquo;id\u00e9e est d&rsquo;utiliser les pages cms de Prestashop.Pour les ranger, vous pouvez faire une cat\u00e9gorie cms d\u00e9sactiv\u00e9e \u00ab\u00a0Blocs Cms\u00a0\u00bb et mettre [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[245],"tags":[110,104,483],"class_list":["post-2389","post","type-post","status-publish","format-standard","hentry","category-prestashop-2","tag-cms","tag-prestashop","tag-prestashop-1-7","prestashop-1-4","prestashop-1-7","prestashop-1-7-7","prestashop-1-7-8","prestashop-8-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/comments?post=2389"}],"version-history":[{"count":10,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2389\/revisions"}],"predecessor-version":[{"id":2445,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2389\/revisions\/2445"}],"wp:attachment":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/media?parent=2389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/categories?post=2389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/tags?post=2389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}