Magento ajouter un template agencement : gestion de la home page 1/2

octobre 31, 2009 17 Commentaires

Magento après l’installation possède quatre template d’agencement accessibles dans le back-office au travers du champ design personnalisé (1column.phtml , 2columns-left.phtml 2columns-right.phtml, 3columns.phtml). Il est parfois nécessaire d’un rajouter un pour par exemple un design personnalisé de la page d’accueil. Dans ce premier tutoriel consacré a la homepage, nous allons voir comment ajouter un template de gabarit dans le but de personnaliser la page d’accueil. Dans un 2e tutoriel nous verrons comment designer la page d’accueil à partir de ce nouveau template.

Ajout d’un template d’agencement déclaration du module

Il faut pour cela rajouter un petit module comprenant notre nouveau template d’agencement. Ajouter la déclaration du module dans le dossier :

 app\etc\modules

Rajoutez dans se dossier un fichier « Mesmodules_Homegabarit » contenant ce code, qui déclare le nouveau module.

<?xml version="1.0"?>
 
<config>
    <modules>
        <Mesmodules_Homegabarit>
            <active>true</active>
            <codePool>local</codePool>
        </Mesmodules_Homegabarit>
    </modules>
</config>

Ce code et assez explicite on déclare le nouveau module a magento, le nom du module, s’il est actif ou pas, ainsi que le dossier où l’on va ranger les dossiers du module, ici local ce qui correspond au dossier :

app\code\local

Ajouter les dossiers nécessaires dans le dossier local

Dans le dossier local s’il ne le contient pas déjà ajouter un dossier Mage. Dans ce dossier Mage ajouter un dossier ect ce qui donne :

app\code\local\Mesmodules\Homegabarit\etc

Ajouter un fichier config.xml dans le dossier etc => app\code\local\Mesmodules\Homegabarit\etc\config.xml

<config>
<global>
         <cms>
            <layouts>
               <new_template1>
                 <label>Homepage</label>
                 <template>page/agencement_home.phtml</template>
		<layout_handle>page_homepage</layout_handle>
               </new_template1>
            </layouts>
       </cms>
     </global>
</config>

Ce code déclare le nom du template d’agencement et le chemin vers celui ci. Il s’appelle Agencement Homepage et il est rangé dans le même dossier que vos autres template d’agencement => app\design\frontend\default\default\template\page

Ajouter le fichier d’agencement

Pour que magento trouve le fichier d’agencement il fut le rajouter dans votre thème :

app\design\frontend\default\default\template\page\agencement_home.phtml

Pour le rajouter rapidement dupliquez le fichier 3colums.phtml et renommez le « agencement_home.phtml ».

Videz le cache de magento supprimer le contenu du dossier cache situé dans var/cache/

Il est à présent actif est disponible dans le back-office au travers de l’onglet design personnalisé => Gabarit de page (Dans CMS gestion des page , ou catalogue catégorie design personnalisé).

Le template d'agencement est disponible dans le back office de magento

Le template d'agencement est disponible dans le back office de magento

Vous pouver rajouter du css ou autre pour modifier le design de la homepage comme cette super promotion rajouter dans une div sous la div contenant la classe « middle-container »

 <div class="middle-container"> 
<div class="superpromo">  ... </div>

voici le résultat de la super promo en image :

Ajout de code CSS spécifique à la homepage

Ajout de code CSS spécifique à la homepage

A vous de modifier le design de homepage à votre convenance. Dans le prochain tutoriel consacré à la page d’accueil nous verrons comment modifier complètement la page d’accueil.

Code
17 commentaires : “Magento ajouter un template agencement : gestion de la home page 1/2”
  1. choussamaster dit :

    /app/code/core/Mage/Page/etc/config.xml

  2. cédric rousset dit :

    salut
    Il manque une partie de ton code.j’ai fais une erreur dans le chemin du template ? Envois moi le code par mail sinon il faut que tu entoures ton code de

    Si j’en crois la fin de ton message tu fais fausses route ilne faut pas modifier le core de magento. c’est pour ça que j’ai crée un module magento pour gérer le template. Ainsi pas besoin de toucher au noyaux de magento. Ainsi les mises à jours se feront sans problème :)

  3. escaflore dit :

    Salut, merci beaucoup pour ce tuto très bien construit, j’ai cependant besoin d’une petit précision, j’ai créer une page d’accueil et j’aimerai y rajouter le bloc de la newsletter, mais je ne sais pas comment faire… une idée ?

  4. cédric rousset dit :

    Salut,
    J’ai fait un tutoriel sur l’ajout de la newsletter dans le footer, c’est le même principe pour la page d’accueil de magento. Il suffit de préciser ou tu veux ajouter la newsletter , pour toi dans la partie contenu.
    http://bloggento.fr/footer-magento-/2796

  5. escaflore dit :

    arf je n’avais pas vu ce tuto, c exactement ce que je voulais ! merci !

  6. IL faut remplacer default par base dans le chemin du template :-) merci encore pour le tuto

  7. lsga dit :

    Et où est la deuxième partie du tuto ???? :?

    Dans un 2e tutoriel nous verrons comment designer la page d’accueil à partir de ce nouveau template.

  8. benjion dit :

    ouai, ou est -t-elle cette deuxième partie?

  9. Cerda Florian dit :

    bonjour j’ai suivis cette démarche pour ajouter un template d’agencement pour ma page catalogue mais la page 2 de ce catalogue se charge mais ne s’ouvre pas et la classification par nom ou prix non plus.

    Pour ce type de template le code a inseré dans le config.xml est-il le meme ? la balise m’interpel.

    si oui a tu une idée d’ou peut venir mon probleme ? merci.

  10. cédric rousset dit :

    Bonjour,
    La démarche est la même
    Dans catalog.xml il faut rajouter
    setTemplate….agencement_home.phtml
    Ou via le back office ( via le back office cela pose problème sur certaines versions de magento)

  11. Cerda Florian dit :

    désolé mais j’ai énormement de mal avec les layouts a quel endroit dans le catalog.xml il faut rajouter le setTemplate ? et peux tu me donné la ligne complete ?

  12. cédric rousset dit :

    Tu trouvera des infos sur le tutoriel layout
    http://bloggento.fr/les-layout-/1084
    ou

      <reference name="root">
                <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            </reference>

    A mettre dans le noeud xml des catégories

  13. Cerda Florian dit :

    j’ai fait la modification mais mon probleme persiste… :( je suis un peut perdu la

  14. [...] suivi les indications de bloggento (http://bloggento.fr/magento-ajouter-un-template-agencement-gestion-de-la-home-page-12-/2437) et son module pour créer les nouveaux agencements. Vous pouvez télécharger le module [...]

  15. Chocolat dit :

    Bonjour Cedric, je ne sais pas si vous assurez toujours les réponses sur ce post mais j’ai une interrogation.

    Je me suis servi de votre tuto pour créer un agencement servant à faire des landing pages. cet agencement a pour but d’être ultra simple et surtout rapide a charger. De plus je n’ai pas besoin de faire appel à tous les fichiers JS et css de mon theme.J’aimerai quand m^me garder le top menu.

    je créée donc une page cms dans mon back office et sélectionne l’agencement. Avec getChildHtml(‘head’) ?, j’appelle tous les blocks. J’aimerai pouvoir choisir ce que je souhaite voir.Ils sont tous dans le handle default mais j’aimerai qu’il ne s’applique pas à mon agencement landing page mais le conserver pour le page2colonnes.phtml.

    Comment puis je faire ?

    merci

  16. cédric rousset dit :

    Bonjour,
    Tu peux via les layout décharger les js que tu ne veux pas avec ce code :

    skin_jsjs/tonjs.js

    Idem pour les css

  17. jaafar dit :

    Bonjour tout le monde,

    je veux créer un slide dans la home page ou je peux défiler un catégorie de produit et je trouve pas de solution

Poster un commentaire

(obligatoire)

(obligatoire)