Importer un template (Phtml) et bloc statique

octobre 8, 2009 4 Commentaires

Importer un Phtml que l’on rattache à un bloc statique est une bonne solution pour créer une page découpée en plusieurs parties, entièrement administrable dans le back-office. Dans ce tutoriel, nous allons voir comment créer une page statique et la découper en plusieurs blocs.

  1. Créez un dossier mapage et un phtml nommé page-haut.phtml que vous placerez dans
    app\design\frontend\default\default\template\mapage\page-haut.phtml
  2. Créez une nouvelle page statique admin => CMS => gestion des pages => ajoutez une nouvelle page
  3. Dans la partie contenu, placez ce code pour importer le PHTML page-haut.phtml tutoriel import de PHTML
  4. {{block  type="core/template" template="mapage/page-haut.phtml"}}
  5. Créez un bloc statique. Pour cela, allez dans CMS => blocs statiques => ajouter un nouveau bloc
    Titre du bloc : haut
    Identifiant : haut
    Contenu : tapez le contenu du haut de votre page.
  6. Revenir dans le phtml crée à l’étape 1 page-haut.phtml, il faut placer à l’intérieur un code qui le lie au bloc statique
    <?php echo $this-> getLayout()->createBlock('cms/block')->setBlockId('haut')->toHtml() ?>

A présent votre page est liée à un bloc statique. Dans ce tutoriel nous avons vu comment gérer le haut de la page.

contenu du bloc statique

contenu du bloc statique

Vous pouvez rajouter d’autres blocs statiques pour le milieu ou le bas de page et ainsi rendre tout administrable par le back-office, en rajoutant :

{{block  type="core/template" template="mapage/page-mileu.phtml"}}
{{block  type="core/template" template="mapage/page-bas.phtml"}}

Le contenu du texte n’est pas formaté, aucune mise en forme n’est possible si vous n’avez pas de wysiwyg installé. Vous pouvez tout de même mettre en forme le texte grâce au sélecteur CSS. Pour cela, dans le phtml entourez le code d’une div avec un id :

<?php  echo $this->getLayout()->createBlock('cms/block')->setBlockId('haut')->toHtml() ?>

Ensuite dans votre CSS
#haut-page{border:solid 1px; padding:10px;}
#haut-page h1 {font-size:18px;}

bloc statique et css

Bloc statique et CSS

Votre haut de page est entièrement administrable dans le back office, à vous de la mettre en forme avec le CSS et rajouter d’autres blocs.

Cette procédure permet de rendre une page administrable par le back office. Un client peut modifier le texte du haut de page, ou celui du bas sans avoir à rentrer dans le code de magento, ou encore dans la partie contenu d’une page CMS, qui peut devenir  incompréhensible pour un novice.

contenu-page-CMS

Code
4 commentaires : “Importer un template (Phtml) et bloc statique”
  1. david dit :

    salut
    je n’arrive pas à faire le tutoriel magento m’affiche
    Fatal error: Call to undefined function getLayout()

  2. admin dit :

    Salut
    il manque echo $this-> devant la ligne, je viens de le rectifier.
    code complet
    < ?php echo $this-> getLayout()->createBlock(‘cms/block’)->setBlockId(‘haut’)->toHtml() ?>

  3. david dit :

    Merci
    J’ai rajouté mon bloc statique et je peux l’utiliser avec le back office. C’est plus pratique mais un peux lent quand on développe du CSS, les enregistrements du back-office sont lent. C’est quand même mieux que d’upper un fichier sur le serveur. C’est écrit petit aussi difficile de bien voir le code.

  4. admin dit :

    Salut David
    Oui c’est le problème c’est plus lent que de travailler sur notepad ou autre éditeur.
    Pour mieux voir le code tu peux zoomer avec firefox ctrl +

Poster un commentaire

(obligatoire)

(obligatoire)