Reka bentuk dan reka bentuk templat tersuai dengan Magento

Dalam bahagian pertama siri ini, kami mempelajari asas pembangunan modul Magento, termasuk struktur direktori Magento, struktur modul tersuai dan mencipta modul asas "Hello World" untuk memahami cara pengawal berfungsi dalam Magento .

Dalam artikel ini, kita akan belajar cara membuat blok dan fail susun atur. Secara khusus, kita akan melihat cara fail susun atur dan fail blok berfungsi dalam Magento, dan kita akan belajar tentang pemaparan fail susun atur.

Mencari penyelesaian cepat?

Jika anda sedang mencari penyelesaian pantas, terdapat banyak tema dan templat Magento di Pasaran Envato. Ini ialah cara terbaik untuk membina koleksi item poli rendah berkualiti tinggi dengan cepat untuk projek anda.

Tetapi, mari teruskan tutorial! Mula-mula, kami akan memahami apakah fail susun atur dan fail sekat dan cara ia berguna apabila memaparkan halaman hadapan dalam Magento, dan kemudian kami akan melihat cara memasukkannya dalam modul tersuai kami.

Apakah itu fail susun atur?

Seperti namanya, fail susun atur sangat berguna apabila memaparkan halaman utama Magento. Fail reka letak ialah fail XML yang terdapat dalam Apl > Reka Bentuk > Frontend > Antara Muka > Tema > Reka Letak . Di sini anda dapat melihat bahawa terdapat banyak fail susun atur untuk mana-mana modul tertentu. Setiap modul Magento mempunyai fail susun atur sendiri, sama seperti modul pelanggan mempunyai customer.xmlcustomer.xml  布局文件一样，目录模块有 catalog.xml  布局文件等。这些布局文件包含结构块和内容块。

如果您想知道为什么 Magento 需要这些块，您可以在本系列的第一部分中了解更多信息。

让我们深入研究布局文件

让我们通过一个示例来深入了解布局文件。转到应用 > 设计 > 前端 > 基础 > 布局 并打开 customer.xml 我>文件。在这里，所有块都围绕主 <layout></layout>  标记。您可以看到不同的 <tag></tag> 其中包含特定块。

请参阅以下代码片段：

<!--
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>

句柄

句柄是 Magento 在调用特定模块时识别要加载的块的主要实体。 <customer_account_create> 是模块特定的句柄。当有人打开客户注册页面时会触发此句柄。

每个处理特定于页面的内容嵌套块。某些布局文件包含 <default>  句柄。在此阶段，您可能会询问模块特定句柄和默认句柄之间的区别。简而言之，特定于模块的句柄仅在浏览器中呈现该模块时呈现其内部的块，而默认句柄会在大部分页面中加载。

<块>

句柄内部有不同的块，它们指定调用该块时要渲染的模板文件。块有两种类型：

1. 构建块
2. 内容块

在布局文件中，我们仅定义内容块 ，然后将它们包装在结构器块中。 例如，如果有人正在调用客户注册页面，并且我们希望将其加载到左侧、右侧、内容或页脚，我们会将该块包装在其各自的结构块中。在这里，我们在“内容”块内包装了两个块，这是一个结构块。

块包含如下属性：

1. type定义了我们可以在其中定义不同功能的块类
2. 名称定义 特定块的唯一名称，以便其他块可以按名称引用现有块并扩展它
3. before/after是我们可以设置的属性，允许我们定义块在结构块内的位置
4. 模板定义实际的 phtml 文件名以及 HTML 和 PHP 代码所在的路径
5. action允许我们使用此属性触发任何操作，例如加载 JavaScript 等。
6. as是一个属性，主要用于结构块

<参考>

<reference> 标签用于扩展已经存在的块。在本例中，我们扩展了内容块并将我们自己的块插入其中。您必须使用要扩展的正确块名称。

<删除>

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

子<块>

当您将一个块包装在另一个块下时，该包装块称为子块。每当我们的模块调用父块时，就会自动调用子块。

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

您也可以在模板文件中使用以下语法单独调用子块 echo $this->getChildHtml('child');

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

<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>

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

<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>

<!--
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>

<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 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>

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

<?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>

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