服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > magento教程 >

Magento2定制布局示例

时间:2016-10-13 22:25来源:未知 作者:最模板 点击:
本文将一步一步演示如何进行布局的定制任务。也就是说,将演示如何改变Magento页面头部中顾客账户链接的布局。 移动顾客账户链接 在Orange主题中,OrangeCo想要把头部链接转换成下拉

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

移动顾客账户链接

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

magento2 layout customization

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

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

magento2 layout customization

需要变成这样:

magento2 layout customization

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

现在,顾客链接看起来如下:

magento2 layout customization

最后是添加样式:

magento2 layout customization
(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容