[Magento 2 定制化开发] 之九:顶部页眉 header 添加联系电话

更新日期: 2024-12-12 阅读次数: 76 字数: 384 分类: magento

想在 Magento 2 主题的顶部增加一个额外的 header 部分,即页眉。里面放上联系电话。

关键词是什么

从官方主题 demo 的 HTML 代码中,可以看到这个 header 部分的标识是:

header-panel-info

配置文件

vendor/swissup/theme-frontend-breeze-blank/Magento_Theme/layout/default.xml

默认配置

<!-- CMS block inside header panel -->
<referenceContainer name="header.panel">
	<block class="Magento\Cms\Block\Block" name="header_panel_info" after="skip_to_content">
		<arguments>
			<argument name="block_id" xsi:type="string">header_panel_info</argument>
		</arguments>
	</block>
</referenceContainer>

可以看到 header_panel_info 是默认启用的。只需要去 magento admin 后台去新建一个 block 即可。

怎么自定义 block 呢?

mageno admin 后台的 content - blocks 新建一个 block。

这个直接使用 html 即可。

<p class="header-panel-info" style="margin-bottom: 0;">
	<a href="mailto:sales@breezefront.com"><svg xmlns="http://www.w3.org/2000/svg" class="icon" style="display: block;" viewBox="0 0 20 20" fill="currentColor">
	  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
	  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
	</svg>
	test@x.com
	</a>

	<a href="tel:916-814-5395"><svg xmlns="http://www.w3.org/2000/svg" class="icon" style="display: block;" viewBox="0 0 20 20" fill="currentColor">
	  <path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
	</svg>
	+86-xxxx
	</a>
</p>

唯一不爽的地方

Page Builder 的 row 的宽度是个迷,设置了 full width 并没有生效。

继续阅读 🌳

Magento 2 主题定制化开发系列教程

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式