Magento 2 创建 Widget

Widget是一个更好的工具,可以将内容插入或编辑到CMS页面块或页面中。

什么是小部件?

小部件是Magento 2配置中的强大功能。作为商店管理员,您可以利用小部件来改善生动界面下的店面。小部件允许显示静态信息或动态内容营销。我想说明一些Magento小部件的实现,例如:

  • 动态产品数据
  • 最近查看的产品的动态列表
  • 促销横幅
  • 交互式导航元素和动作块
  • 插入内容页面的动态Flash元素

如何在Magento 2中创建小部件?

在Magento 2中创建小部件的概述

  • 第1步:声明小部件
  • 第2步:创建窗口小部件模板文件
  • 第3步:创建小部件Block类
  • 第4步:刷新缓存和帖子

第1步:声明小部件

自定义 HelloWorld 主题下 :创建etc/widget.xml包含以下内容的文件

复制代码
<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:helloworld:Magento_Widget:etc/widget.xsd">
    <widget class="Mageplaza\HelloWorld\Block\Widget\Posts" id="mageplaza_helloworld_posts">
        <label>Blog Posts</label>
        <description>Posts</description>
        <parameters>
            <parameter name="posts" sort_order="10" visible="true" xsi:type="text">
                <label>Custom Posts Label</label>
            </parameter>
        </parameters>
    </widget>
</widgets>
复制代码

第2步:创建窗口小部件模板文件

自定义 HelloWorld 主题下 :文件: view/frontend/templates/widget/posts.phtml

 

<?php if($block->getData('posts')): ?>
    <h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
    <p>This is sample widget. Perform your code here.</p>
<?php endif; ?>

 

第3步:创建小部件Block类

自定义 HelloWorld 主题下 :创建块文件: Block/Widget/Posts.php

 

复制代码
<?php 
namespace Mageplaza\HelloWorld\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface; 
 
class Posts extends Template implements BlockInterface {

    protected $_template = "widget/posts.phtml";

}
复制代码

 

第4步:刷新缓存和帖子

去 admin panel > Content > Pages > Home page > Edit

Content选项卡中,单击Insert Widget图标

 

 您将看到Blog posts小部件列表

 

插入成功。

posted @   徐锅  阅读(355)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南

点击右上角即可分享
微信分享提示