Mise en page personnalisée et conception de modèles avec Magento

Dans la première partie de cette série, nous avons appris les bases du développement de modules Magento, y compris la structure de répertoires Magento, la structure des modules personnalisés, et avons créé un module de base "Hello World" pour comprendre le fonctionnement des contrôleurs dans Magento.

Dans cet article, nous apprendrons comment créer des fichiers de blocs et de mise en page. Plus précisément, nous verrons comment fonctionnent les fichiers de mise en page et les fichiers de bloc dans Magento, et nous en apprendrons davantage sur le rendu des fichiers de mise en page.

Vous cherchez une solution rapide ?

Si vous recherchez une solution rapide, il existe des tonnes de thèmes et de modèles Magento sur Envato Market. C'est un excellent moyen de créer rapidement une collection d'éléments low-poly de haute qualité pour votre projet.

Mais passons au tutoriel ! Tout d’abord, nous comprendrons ce que sont les fichiers de mise en page et les fichiers de bloc et comment ils sont utiles lors du rendu des pages frontales dans Magento, puis nous verrons comment les inclure dans nos modules personnalisés.

Qu'est-ce qu'un fichier de mise en page ?

Comme leur nom l'indique, les fichiers de mise en page sont très utiles lors du rendu de la page d'accueil de Magento. Les fichiers de mise en page sont des fichiers XML situés dans Application > Conception > Frontend > Interface > Thèmes > Mises en page . Ici, vous pouvez voir qu'il existe de nombreux fichiers de mise en page pour un module donné. Chaque module Magento possède son propre fichier de mise en page, tout comme le module client a customer. Les modules incluent des <code class="inline">catalog.xmlcustomer.xml  布局文件一样，目录模块有 catalog.xml fichiers de mise en page. , etc. Ces fichiers de mise en page contiennent des blocs de structure et des blocs de contenu.

Si vous vous demandez pourquoi Magento nécessite ces blocs, vous pouvez en apprendre davantage dans la première partie de cette série.

Plongeons dans les fichiers de mise en page

Examinons de plus près les fichiers de mise en page avec un exemple. Accédez à Application > Design > Frontend > Basics > Layout

et ouvrez le fichier customer.xmlcustomer.xml 我>文件。在这里，所有块都围绕主 <layout></layout>  标记。您可以看到不同的 <tag></tag>

. Ici, tous les blocs entourent la balise principale <layout></layout>

. Vous pouvez voir différents <tag></tag> qui contiennent des blocs spécifiques.

<customer_account_create></customer_account_create>Voir l'extrait de code ci-dessous :

<!--
New customer registration
-->

    <customer_account_create translate="label">
        <label>Customer Account Registration Form</label>
        <!-- Mage_Customer -->
        <remove name="right"/>
        <remove name="left"/>

        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
                <block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">
                    <label>Form Fields Before</label>
                </block>
            </block>
        </reference>
    </customer_account_create>

poignée

Handle est l'entité principale par laquelle Magento identifie le bloc à charger lors de l'appel d'un module spécifique. <default></default> est une poignée spécifique au module. Ce gestionnaire est déclenché lorsque quelqu'un ouvre la page d'enregistrement du client.

Chaque bloc imbriqué gère le contenu spécifique à la page. Certains fichiers de mise en page contiennent des poignées . À ce stade, vous pouvez poser des questions sur la différence entre les handles spécifiques au module et les handles par défaut. En bref, un handle spécifique au module restitue uniquement les blocs qu'il contient lorsque le module est rendu dans le navigateur, alors que le handle par défaut se charge dans la plupart des pages.

2. Il y a différents blocs à l'intérieur du handle qui spécifient le fichier modèle à rendre lorsque le bloc est appelé. Il existe deux types de blocs :

Blocs de construction Blocs de contenu Dans le fichier de mise en page, nous définissons uniquement des blocs de contenu

, puis nous les enveloppons dans des

blocs de construction

.
1. Par exemple, si quelqu'un appelle la page d'enregistrement client et que nous voulons qu'elle se charge à gauche, à droite, dans le contenu ou en pied de page, nous envelopperons ce bloc dans son bloc de structure respectif. Ici, nous avons enveloppé deux blocs dans un bloc « contenu », qui est un bloc structurel. Le bloc contient les attributs suivants :
2. type définit une classe de bloc dans laquelle nous pouvons définir différentes fonctionnalités
3. Nom Définition
Un nom unique pour un bloc spécifique afin que d'autres blocs puissent faire référence au bloc existant par son nom et l'étendre
4. before/afterphtml sont des propriétés que nous pouvons définir et qui nous permettent de définir la position du bloc dans le bloc de structure
5. Modèledéfinit le
nom de fichier et le chemin où réside le code HTML et PHP
6. action
nous permet d'utiliser cet attribut pour déclencher n'importe quelle action, comme le chargement de JavaScript, etc.

as est un attribut, principalement utilisé pour les blocs de structure

<reference></reference>

La balise

est utilisée pour étendre un bloc déjà existant. Dans cet exemple, nous étendons le bloc de contenu et y insérons notre propre bloc. Vous devez utiliser le nom de bloc correct pour développer.

<remove></remove> 标签用于删除特定块。例如，假设您不想在帐户注册页面上显示右栏和左栏。在这种情况下，您可以使用以下语法简单地删除该块：<remove name="your block name">.</remove>

子

echo $this->getChildHtml('child');

🎜Lorsque vous enveloppez un bloc sous un autre bloc, le bloc enveloppé est appelé un sous-bloc. Chaque fois que notre module appelle le bloc parent, le bloc enfant est automatiquement appelé. 🎜

<block type='core/template' name='parent' template='parent.phtml'>
<block type='core/template' name='child' template='child.phtml'/>
</block>

🎜Vous pouvez également appeler des sous-blocs individuellement en utilisant la syntaxe suivante dans un fichier modèle 🎜🎜

根

打开page.xml 布局文件，你会发现<root></root> 块看起来像下面这样

 <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Magento 从根块开始渲染。所有其他块都是根块的子块。根块定义页面的结构。在这里，您可以看到当前它设置为 3columns.phtml，您可以将其更改为 1column.phtml、2columns-right.phtml 或2columns-left.phtml.

将 CSS 和 JavaScript 添加到布局 XML

对于任何特定页面，您可以将 CSS 和 JavaScript 文件添加到布局标记中，如下所示：

<customer_account_create>
 <reference name='head'>
  <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
  <action method="addJs"><script>varien/js.js</script></action>
 </reference>
</customer_account_create>

在这里您可以看到我们在客户帐户页面的 head 中添加了一个 CSS 文件和一个 JavaScript 文件。

什么是块类？

块类用于定义特定于特定块的功能。块类文件位于应用程序>代码>本地/社区/核心>您的模块命名空间>您的模块名称>块目录中。这些文件包含我们可以直接与 $this 块特定模板文件中的关键字。让我们通过一个例子来了解块类。

转到位于 app > design > frontend > base > default > layout 目录中的 review.xml 文件，并找到以下代码行：

<!--
Customer account home dashboard layout
-->

    <customer_account_index>

        <!-- Mage_Review -->
        <reference name="customer_account_dashboard">
            <block type="review/customer_recent" name="customer_account_dashboard_info1" as="info1" template="review/customer/recent.phtml"/>
        </reference>

</customer_account_index>

在这里您可以看到引用模板 review/customer_recent  的块 review/customer_recent ">最近.phtml。 转到应用 > 设计 > 前端 > 基础 > 默认 > 模板 > 审核 > 客户 并打开 最近的.phtml。

在此文件中，您可以看到使用 $this 关键字调用两个函数。它们是 $this->getCollection() 和 $this->count()。 这些函数在其块类文件 recent.php  中定义，该文件位于 应用 > 代码 > 核心 > Mage > 审查 > 阻止 > 客户 目录。

这里，块 type = "review/customer_recent" 指的是在 recent. 文件中定义的 Mage_Review_Block_Customer_Recent 块类。无论您在此类中定义什么函数，都可以直接在相应的模板文件中使用 $this 来使用它。

创建自定义模块布局和块文件

最后，我们留下了带有控制器的自定义“Hello World”模块。在这里，我们创建了自定义模块的布局文件。所以让我们创建它。

要创建布局文件，我们需要首先创建块类文件。在添加类文件之前，我们需要告诉模块我们正在包含块文件。因此，转到 app > code > local > Chiragdodia > Mymodule > etc > config.xml  并添加以下内容代码行：

<frontend>
<layout>
        <updates>
            <mymodule>
                <file>mymodule.xml</file> <!-- Our layout file name-->
            </mymodule>
        </updates>
</layout>
</frontend>
<global>
        <blocks>
            <mymodule>
                <class>Chiragdodia_Mymodule_Block</class>
            </mymodule>
        </blocks>
</global>

最终的 XML 文件包含以下代码行：

<?xml version="1.0"?>
<config>
    <modules>
        <Chiragdodia_Mymodule>
            <version>0.1.0</version>    <!-- Version of module -->
        </Chiragdodia_Mymodule>
    </modules>
    <frontend>
        <routers>
            <mymodule>
                <use>standard</use>
                <args>
                    <module>Chiragdodia_Mymodule</module>
                    <frontName>mymodule</frontName>
                </args>
            </mymodule>
        </routers>
         <layout>
            <updates>
                <mymodule>
                    <file>mymodule.xml</file> <!-- Our layout file name-->
                </mymodule>
            </updates>
         </layout>
    </frontend>
    <global>
        <blocks>
            <mymodule>
                <class>Chiragdodia_Mymodule_Block</class>
            </mymodule>
        </blocks>
    </global>
</config>

创建块类文件

接下来，转到 app > code > local > Chiragdodia > Mymodule > Block 并创建文件 Mymodule.php 包含以下代码行

<?php
class Chiragdodia_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
    public function myfunction()
    {
        return "Hello tuts+ world";
    }
}

这里我们声明了类 Chiragdodia_Mymodule_Block_Mymodule ，其中包含函数 myfunction ，我们可以直接从布局模板文件中调用它。

创建布局 XML 文件

转到app > design > frontend > default > default > layout 并创建 mymodule.xml 文件，其中包含以下代码行

<?xml version="1.0"?>
<layout version="0.1.0">
    <mymodule_index_index>
        <reference name="content">
            <block type="mymodule/mymodule" name="mymodule" template="mymodule/mymodule.phtml" />
        </reference>
    </mymodule_index_index>
</layout>

创建模板文件

转到应用 > 设计 > 前端 > 默认 > 默认 > 模板 并创建 mymodule.phtml 文件。在此文件中，我们将调用我们在块类中声明的函数 myfunction 。

<?php
    echo $this->myfunction();
?>

如果到目前为止一切都正确，您将通过访问 URL yoursite.com/index.php/mymodule/index 看到具有三列布局的输出。

在某些 Magento 版本中，默认主题不包含布局和模板目录。在这种情况下，您可以在app > design > frontend > base 目录中创建布局和模板文件。

这就是 Magento 中布局的工作原理。在上一篇文章中，我们创建了简单的“Hello World”模块，在本文中我们使用布局文件创建它。 Magento 的布局结构一开始有点难以理解，但是一旦你开始修改它，你就会很容易地理解它背后的想法。

Dans cet article, j'ai joint le fichier de démonstration du module que nous avons créé jusqu'à présent. Si vous avez des questions sur ce problème particulier, n'hésitez pas à laisser un commentaire pour toute question.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!