Guide pratique de la mise en page personnalisée et de la conception des modèles Magento

1. Introduction

Magento est une plate-forme de commerce électronique open source populaire avec de puissantes capacités de personnalisation, en particulier dans la conception de la mise en page et du modèle. Cet article présentera en détail comment implémenter la mise en page et la conception de modèles personnalisés via Magento pour répondre aux besoins de développement personnalisés.

2. Personnalisez la mise en page

2.1 Créer un fichier de mise en page personnalisé

Dans Magento, la première étape de la personnalisation d'une mise en page consiste à créer un fichier de mise en page. Magento attribue une poignée de page unique à chaque page, et vous pouvez définir différentes structures de mise en page en fonction de la poignée.

 
<!-- Personnaliser les fichiers de mise en page de page，Nommé my_layout.xml -->
<?xml version="1.0"?>
<layout version="1.0">
  <default>
    <reference name="head">
      <action method="addItem">
        <type>skin_css</type>
        <name>css/custom.css</name>
      </action>
    </reference>
  <block type="core/template" name="custom_block" template="custom/custom.phtml" />
</reference>

Le code ci-dessus définit un fichier de disposition nommé my_layout.xml , qui contient des CSS personnalisés et un bloc de modèle. Veuillez noter que chaque poignée de page correspond à un fichier de mise en page. Si vous devez configurer une mise en page pour différentes pages, vous pouvez créer plusieurs fichiers de mise en page.

2.2 Appliquer la disposition personnalisée

Après avoir créé le fichier de mise en page, vous devez charger et appliquer la mise en page dans le contrôleur pour le faire prendre effet.

 
<?php
class Custom_Module_IndexController extends Mage_Core_Controller_Front_Action
{
  public function indexAction()
  {
    $this->loadLayout('my_layout');
    $this->renderLayout();
  }
}

Le code de contrôleur ci-dessus charge le fichier de mise en page personnalisé via LoadLayout ('my_layout') , puis rend la mise en page de page pour réaliser l'effet de page personnalisé.

3. Conception de modèle personnalisée

3.1 Créer un fichier de modèle personnalisé

Les modèles Magento sont généralement des fichiers PHTML, combinant le code HTML et PHP pour implémenter des pages vues. Voici un exemple de modèle personnalisé simple:

 
<!-- Fichiers de modèle personnalisés，Nommé custom.phtml -->
<div>
  <h1>Custom Template</h1>
  <p>This is my custom template.</p>
  <?php echo $this->__('Some text.'); ?>
</div>

Ce fichier de modèle contient des éléments HTML standard et des résultats du texte via la méthode de traduction magento $ this -> __ () , ce qui facilite le support international.

3.2 Fichiers de modèle personnalisé de référence

Après avoir créé un modèle, vous pouvez ajouter un bloc au fichier de mise en page, en faisant référence au fichier de modèle pour afficher le contenu:

 
<!-- Réviser My_Extension de local.xml document -->
<?xml version="1.0"?>
<layout version="1.0">
  <default>
    <reference name="content">
      <block type="core/template" name="custom_block" template="custom/custom.phtml" />
    </reference>
  </default>
</layout>

Le code de mise en page ci-dessus ajoute un nouveau bloc à la zone de contenu de la page, qui utilise le modèle créé précédemment pour implémenter l'appel et le rendu du modèle.

Grâce aux étapes ci-dessus, vous avez maîtrisé comment créer et appliquer des dispositions et des fichiers de modèles personnalisés dans Magento pour aider à créer un site Web de commerce électronique personnalisé et riche en fonctionnalités.