使用Magento Page Builder入门
使用Magento Page Builder入门

使用Magento Page Builder入门

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

不是你的祖父’s WYSIWYG Editor

对于那些在Magento 2的Page Builder中提供零经验的文章,这是一个简要介绍了页面福彩网首页器的页面。 Page Builder是一种拖放接口,用于创建丰富风格的动态内容,而无需编写任何CSS,JavaScript或HTML。这使得Page Builder成为想要创造良好的动态内容的商家的完美实用程序,而无需在房屋开发人员中雇用,或支付代理商以福彩网首页,风格和维护他们的内容。除了基本文本样式之外,页面福彩网首页器通过添加自定义内容类型,从更传统的WYSIWYG编辑器分支。这些是页面福彩网首页器中包含的内容类型。

  • 柱子
  • 标签
  • 文本
  • 标题
  • 纽扣
  • 分配器
  • HTML代码
  • 图像
  • 视频
  • 横幅
  • 滑块
  • 地图
  • 堵塞
  • 动态块
  • 产品

在大多数用例中,这些组件就足够了。然而,可能是客户或一个想要页面福彩网首页器的雄心勃勃的营销人员所做的功能请求,以便做一些它不起作用的事情’开箱即用。幸运的是,佩奇的建设者延长了最小的努力。如果你’没有开发人员,这篇文章的其余部分是’这对你有用。我建议审查 玛托托’页面福彩网首页器的良好的用户指南 如果您是内容创建者或需要了解如何使用页面福彩网首页器一般。它详细介绍了所有本机组件,以及如何使用这些组件来福彩网首页丰富的风格,动态内容。

如果您是开发人员,或者只是有兴趣了解Page Builder的体系结构的人,则本文的其余部分适合您。我是 不是 要解释如何创建自定义组件。为此,Magento已经提供了 创建自定义页面福彩网首页器组件的详细文档。他们的文档做了一个很好的工作,让您通过创建自定义组件,但在没有任何对页面福彩网首页器的情况下进入它可能会有点令人沮丧’S建筑。存在本文以填补知识中的差距,以便您可以使用更多的理解阅读文档。

插入数据

首先,它’s important to understand how the data 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 in 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 ones. For a comprehensive overview of UI components, I recommend reading through 艾伦风暴’S关于该主题的一系列文章.

如果您计划将字段添加到页面福彩网首页器组件的表单,并且您aren’确保如何执行此操作,请确保您是否在后端的其他地方使用现有字段,甚至在本机页面福彩网首页器组件中使用。我没有’T又添加了一个没有的字段类型’T已经存在于Magento的其他地方。

预览和掌握

一旦您有一个插入数据的地方,您必须将其放在某处。在页面福彩网首页器的情况下,数据存储在内容中。了解页面福彩网首页器体系结构的关键措施是在前端呈现组件所需的标记,功能和样式, 一般来说 需要复制 to render the component in the backend. This duplication of styles is required because a component may need to look or behave differently in the frontend then it does in 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

我说“一般来说 需要复制”在本节之前,由于有选择仅为每个问题编写其中一个文件。大多数本机页面福彩网首页器组件遵循将标记和样式分隔到其各自区域的模式,同时仅将自定义j添加到preview.js文件。 Master.js文件可用于非常复杂的组件,并且根据Magento的说法很少必要。如果您的组件足够简单,您还可以选择将单个HTML文件设置为预览和主模板。至于风格,“base” area in a module’S视图目录适用于前端和后端的样式。如果您的模块足够简单,您可能只能逃脱,只能在本基地区的写入样式。

数据存储和检索

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

通过表单字段插入标记的所有数据将用于标记中这四种目的中的一个。

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

转换器和质量转换器

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

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

如果所有这一切都有点令人困惑,请以名称暗示的方式思考质量转换器。转换器是一个直接的一对一转换,而质量转换器是其他一切。转换器是Page Builder的令人信说功能,可能需要最多的时间和体验到掌握。需要花费足够的时间来查看现有的转换器,以便您可以看到他们的工作方式。

结论

到目前为止,您应该了解如何在页面福彩网首页器组件中放在一起的一切。您已经了解了数据如何使用表单字段插入标记,并使用转换器修改在模板中呈现,并从标记检索进行编辑。如果你仍然觉得你是aren’T Grasping Page Builder足以开始查看文档,看看 玛托托’s example components。示例组件比包含页面福彩网首页器的内容更简单且直接向前,因此它们应该更容易掌握。通过这些示例中的一个或两个看,然后回来并重读这篇文章。

我希望这篇文章一直在启发。如果您有任何疑问,请随意发表评论。 Page Builder是一个仍在进行许多更改的项目,其中一些文章可能会过时。如果您注意到错误,请告诉我,以便我可以做出必要的更改。

2 Comments

  1. 布莱恩 说:

    在网站的不同部分使用页面福彩网首页器时是否有任何真理将导致网站速度的问题?

    在从M1转移到M2的过程中,我们的Dev说了他们避风港的原因’在页面福彩网首页器功能上打开它是导致站点速度的问题。

    • 内森托姆斯 说:

      Page Builder主要只是后端的工具,以创建和编辑稍后将在前端呈现的内容。页面福彩网首页器生成在前端呈现的内容不应导致任何站点速度问题,而不是开发人员生成的内容。您的DEV可能会谈论滑块需要几毫秒才能初始化和渲染。这是一个问题,目前有页面福彩网首页器,但它是可以通过聪明的造型轻松修复的问题。

发表评论

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

本网站使用AkisMet减少垃圾邮件。 了解如何处理评论数据.

最近的帖子查看全部
3月1日,2021年

Covid的巨大加速要求再次欺诈和消费者虐待警惕

2月3日,2021年

社交媒体在科迪德自然时期的增长’s One

1月5日,2021年

替代社交媒体

您是否注意到您的Facebook和Instagram内容似乎越来越少,并且每次通过都会越来越少?用于达到的帖子 […]