Magento Page Builder入门

Magento Page Builder入门

2019年10月15日发布 in 发展历程
通过废弃的购物车电子邮件避免废弃的收入
十月3,2019
将重点放在购买后:完善交易电子邮件活动的指南
十月28,2019

不是你的祖父’s WYSIWYG Editor

对于那些对Magento 2的Page Builder零经验的读者,这里简要介绍一下Page Builder是什么。 Page Builder是一个拖放界面,用于创建样式丰富的动态内容,而无需编写任何CSS,JavaScript或HTML。对于想要创建美观动态内容而不需要雇用内部开发人员或向代理商付费以为其创建,样式化和维护内容的商户而言,这使Page Builder成为理想的实用工具。 Page Builder通过添加基本内容样式之外的自定义内容类型,从更传统的所见即所得(WYSIWYG)编辑器中分支出来。这些是现成的页面构建器中包含的内容类型。

  • 标签
  • 文本
  • 标题
  • 纽扣
  • 分频器
  • HTML代码
  • 图片
  • 视频
  • 旗帜
  • 滑杆
  • 地图
  • 动态块
  • 产品展示

在大多数使用情况下,这些组件就足够了。但是,可能是由客户或雄心勃勃的营销人员提出的功能请求,他们希望Page Builder做一些它不能做的事情’开箱即用。幸运的是,Page Builder的扩展工作量很小。如果你’不是开发人员,本文其余部分是’不会对您有用。我建议复习 Magento’精心编写的Page Builder用户指南 如果您是内容创建者,或者需要全面了解如何使用Page Builder。它详细介绍了所有本机组件,以及如何使用这些组件来构建样式丰富的动态内容。

如果您是开发人员,或者只是对理解Page Builder的架构感兴趣的人,那么本文的其余部分都适合您。我是 将解释如何创建自定义组件。为此,Magento已经提供了 有关创建自定义Page Builder组件的详细文档。他们的文档在引导您完成自定义组件方面做得很好,但是如果不了解Page Builder,可能会有些沮丧。’的体系结构。本文旨在填补知识空白,因此您可以多一点理解程度来阅读文档。

插入资料

首先,’s important to understand how the 数据 used to generate the content is sourced. Page Builder uses the same UI component forms and form fields that Magento uses throughout the backend. The form configuration files for existing Page Builder components can be found 在 the directory vendor/Magento/module-page-builder/view/adminhtml/ui_component. Since Page Builder utilizes the same UI component form architecture, you can find a lot of helpful blog posts and tutorials covering how to build your UI components and use existing 上es. For a comprehensive overview of UI components, I recommend reading through 艾伦·斯托姆’关于该主题的系列文章.

如果您打算将字段添加到页面构建器组件的表单中,’确定如何执行此操作,请确保您查看后端是否在其他地方甚至在本机Page Builder组件中使用了现有字段。我没有’尚未添加没有’Magento的其他地方已经不存在。

预览和掌握

一旦有插入数据的地方,就必须将其放置在某处。对于Page Builder,数据将存储在内容中。了解Page Builder体系结构的关键是,在前端呈现组件所需的标记,功能和样式, 通常 需要复制 to render the component 在 the backend. This duplication of 风格s is required because a component may need to look or behave differently 在 the frontend then it does 在 the backend. Magento calls the backend look and behavior “preview” and the frontend “master.”Magento通过允许单独的HTML模板呈现标记,单独的JS组件文件(用于控制行为)以及单独的CSS文件(用于设置标记样式)来划分这些区域。将所有这三个方面分离的页面构建器组件的文件结构如下所示:

标记

前端: view/adminhtml/web/template/content-type/component-name/appearance-name/master.html

后端: view/adminhtml/web/template/content-type/component-name/appearance-name/preview.html

行为

前端: view/adminhtml/web/js/content-type/component-name/master.js

后端: view/adminhtml/web/js/content-type/component-name/preview.js

款式

前端: view/frontend/web/css/source/_module.less

后端: view/adminhtml/web/css/source/_module.less

我说“通常 需要复制”本节前面的内容是因为可以为每个问题仅写入其中一个文件。大多数本机Page Builder组件都遵循将标记和样式分为各自区域的模式,而仅将自定义JS添加到Preview.js文件中。 主。js文件可用于非常复杂的组件,据Magento所述,很少需要。如果您的组件足够简单,则还可以选择将单个HTML文件设置为预览模板和主模板。至于款式,“base” area 在 a module’s view directory applies 风格s to both frontend and backend. If your module is simple enough, you might be able to get away with 上ly writing the 风格s 在 this 基础 area.

数据存储与检索

标记和表单字段之间的数据桥是内容类型配置文件。查看Magento_PageBuilder扩展,您’ll find these config files 在 the directory view/adminhtml/pagebuilder/content_type/. The content types config file defines the source of the 数据. It is also where converters are assigned to manipulate the 数据 as it’在标记和表单字段之间传递。

通过表单字段插入到标记中的所有数据将在标记中用于以下四个目的之一。

In the 预习 and master knockout templates, the 数据 for these fields can be seen represented as 数据.element.dataType. For example, if a field outputs its 数据 as HTML 在 an element named container, the templates would have the object 数据.container.html, and the 预习.js and 主。js components would render that object using any converters assigned to that particular field.

转换器和质量转换器

有时,字段包含的值需要先解析为其他值,然后才能放入标记中。例如,如果您有一个输入字段来定义CSS样式的像素值,则可能需要将该字段验证为数字。但是,该CSS样式仍然需要该值以像素值的形式出现(例如10px),因此您需要添加一个转换器‘px’当它的价值’s being parsed 在 the HTML and remove it when retrieved from the HTML. Magento created a converter that does precisely this 在 the file view/adminhtml/web/js/converter/style/remove-px.js.

Mass converters serve the same purpose as converters 在 that they convert some value 在to a modified value. The difference is that mass converters are 通常 used to create a single output from multiple 在puts or vice versa. They are useful when you need to convert a form field value, or multiple field values, 在to something that cannot convert back 在to its original value. A mass converter also allows you to place the original value of a field 在to a 数据 属性 while converting the new value to what it needs to be 在 the dom. For example, the 背景-images mass converter converts the mobile and desktop 背景 图片 在to media directives ({{media url='wisiwyg/background.jpg';}}). These media directives get saved to the markup to be parsed by PHP, but the original 背景 image URLs also get saved to the markup 在 the form of a 数据 属性:

If all this is a bit confusing, think of mass converters 在 the way the name implies. A converter is a straightforward 上e-to-one conversion, while a mass converter is everything else. Converters are a compelling feature of Page Builder and possibly require the most time and experience to 主。 Take plenty of time to review the existing converters so you can see how they work.

结论

到目前为止,您应该对如何在Page Builder组件中将所有内容组合在一起有很好的了解。您已经了解了如何将数据插入带有表单字段的标记中,如何使用转换器进行修改,如何在模板中呈现以及如何从标记中检索数据进行编辑。如果你仍然觉得自己不在’掌握足够的Page Builder,以开始阅读文档,看看 Magento’s example components。示例组件比Page Builder附带的组件更简单明了,因此应该更容易理解。浏览其中一个或两个示例,然后返回并重新阅读本文。

我希望这篇文章对您有所启发。如有任何疑问,请在下面发表评论。 Page Builder是一个仍在进行许多更改的项目,本文中的某些内容可能最终会过时。如果您发现错误,请告诉我,以便我进行必要的更改。

2 评论

  1. 布赖恩 说:

    在网站的不同部分上使用页面构建器时,是否会引起网站速度问题?

    从m1迁移到m2的过程在哪里,我们的开发人员说了他们逃避的原因’t启用页面构建器功能是因为它会导致网站速度出现问题。

    • 内森·古姆斯 说:

      Page Builder主要只是后端中的工具,用于创建和编辑内容,这些内容随后将在前端中呈现。与前端开发人员生成的内容相比,在前端呈现的Page Builder生成的内容不应引起任何网站速度问题。您的开发人员可能在谈论滑块需要花费几毫秒的时间来初始化和渲染。目前,这是Page Builder的问题,但可以通过巧妙的样式轻松解决。

发表评论 取消回复

您的电子邮件地址不会被公开。 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日

Covid世界中的假日销售:应对挑战

毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 […]
2020年8月7日

涡轮增压ZZPerformance的付费搜索

2020年7月30日

Intermix Beats M1 End of Life with 优雅的骆马Accelerator