Magento2定制布局示例

redmaomail 2024-07-24 18:13 阅读数 63 #Magento

本章内容

本文将一步一步演示如何进行布局的定制任务。也就是说，将演示如何改变Magento页面头部中顾客账户链接的布局。

移动顾客账户链接

在Orange主题中，OrangeCo想要把头部链接转换成下拉菜单，Magento Luma主题中完成的方式是这样的：

要实现该效果，需要将头部链接用一个容器包住并在列表前添加一个箭头。

默认的头部链接看起来是这样的：

需要变成这样：

步骤1：定义块

OrangeCo应用了Luma主题。使用《Magento2定位模板，布局和样式》中的方法。找到显示头部链接的块被定义在：

<Magento_Customer_module_dir>/view/frontend/layout/default.xml:

...
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="top.links">
            <block class="Magento\Customer\Block\Account\Link" name="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">My Account</argument>
                </arguments>
            </block>
            <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Register</argument>
                </arguments>
            </block>
            <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link" template="account/link/authorization.phtml"/>
        </referenceBlock>
    </body>
</page>

步骤2：定义模板

与上一步定义布局的同样方法相同，OrangeCo定义用来重新排列链接的模板：

<Magento_Customer_module_dir>/view/frontend/templates/account/customer.phtml

<?php if($this->customerLoggedIn()): ?>
    <li class="customer welcome customer-welcome">
        <span class="customer name" data-mage-init='{"dropdown":{}}' data-toggle="dropdown">
            <span><?php echo $this->getCustomerName(); ?></span>
            <button type="button" class="action switch"><span><?php echo __('Change')?></span></button>
        </span>
        <?php if($this->getChildHtml()):?>
        <div class="customer menu customer-menu" data-target="dropdown">
            <?php echo $this->getChildHtml();?>
        </div>
        <?php endif; ?>
    </li>
<?php endif; ?>

步骤3：扩展base布局来增加一个块

OrangeCo需要在容器header.panel中新建一个名为header.links的块用来移动链接。由于链接可以在不同模型中被添加，最好是在Magento_Theme模型的页面配置default.xml中添加这个块。

所以下面的扩展布局被添加在Orange主题中：

app/design/frontend/OrangeCo/orange/Magento_Theme/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.panel">
            <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

步骤4：移动链接

要移动链接到header.links块，OrangeCo添加一个扩展布局：

app/design/frontend/OrangeCo/orange/Magento_Customer/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="header.links">
                <block class="Magento\Customer\Block\Account\Customer" name="customer" template="account/customer.phtml" before="-"/>
                <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login" template="account/link/authorization.phtml"/>
            </referenceBlock>
            <move element="register-link" destination="header.links"/>
            <move element="top.links" destination="customer"/>
            <move element="authorization-link" destination="top.links" after="-"/>
        </body>
    </page>

现在，顾客链接看起来如下：