<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，Input 组件用于创建一个文本输入框，可以用来收集用户输入的数据。这个组件的常见用途包括创建表单、过滤器、筛选器等等。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">下面是一个示例，展示了如何在 Magento 2 中使用 Input 组件。假设你正在创建一个产品，并希望能够为该产品添加一个名称字段。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，我们需要创建一个用于输入产品名称的 Input 组件。创建一个新的 UI 组件文件 input.xml，并将以下代码添加到其中：</p><pre class="brush:as3;toolbar:false">&lt;field&nbsp;name=&quot;name&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;config&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;label&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;Name&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;componentType&quot;&nbsp;xsi:type=&quot;string&quot;&gt;field&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;formElement&quot;&nbsp;xsi:type=&quot;string&quot;&gt;input&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;dataType&quot;&nbsp;xsi:type=&quot;string&quot;&gt;text&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;dataScope&quot;&nbsp;xsi:type=&quot;string&quot;&gt;name&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;sortOrder&quot;&nbsp;xsi:type=&quot;number&quot;&gt;10&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;validation&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;required-entry&quot;&nbsp;xsi:type=&quot;boolean&quot;&gt;true&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &lt;/field&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在这个组件的代码中，我们首先定义了一个名为 &quot;name&quot; 的字段，用于输入产品名称。在这个字段的配置项中，我们指定了组件的类型为 field，并设置了一些其他属性，例如标签、数据类型、数据范围、排序顺序等等。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 &lt;item name=&quot;validation&quot;&gt; 中，我们指定了一些验证规则，例如必填项。这些规则将确保用户输入的数据符合预期的格式和要求。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">最后，我们需要将这个 Input 组件添加到表单中。假设你正在使用 Magento 2 自带的 form.xml 文件来创建表单，你可以像下面这样添加这个组件：</p><pre class="brush:as3;toolbar:false">&lt;fieldset&nbsp;name=&quot;product-details&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;field&nbsp;name=&quot;name&quot;&gt;...&lt;/field&gt; &nbsp;&nbsp;&nbsp;&nbsp;... &lt;/fieldset&gt;</pre><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;PingFang SC&quot;; white-space: normal;">在这个代码片段中，我们将<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> &lt;field&gt; </span>组件添加到了一个名为<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> &quot;product-details&quot; </span>的字段集中。这个字段集将包含其他组件，例如价格、描述、图片等等。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，ImageUploader 组件用于在前端创建一个上传图片的组件。这个组件可以让用户上传一张或多张图片，并将它们保存到服务器上。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">下面是一个示例，展示了如何在 Magento 2 中使用 ImageUploader 组件。假设你正在创建一个产品，并希望能够上传一张或多张图片。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，我们需要创建一个用于上传图片的 ImageUploader 组件。创建一个新的 UI 组件文件 image_uploader.xml，并将以下代码添加到其中：</p><pre class="brush:as3;toolbar:false">&lt;field&nbsp;name=&quot;images&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;config&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;componentType&quot;&nbsp;xsi:type=&quot;string&quot;&gt;imageUploader&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;elementTmpl&quot;&nbsp;xsi:type=&quot;string&quot;&gt;ui/form/element/uploader/image&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;previewTmpl&quot;&nbsp;xsi:type=&quot;string&quot;&gt;Magento_Catalog/image-preview&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;label&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;Images&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;sortOrder&quot;&nbsp;xsi:type=&quot;number&quot;&gt;30&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;required&quot;&nbsp;xsi:type=&quot;boolean&quot;&gt;false&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;uploaderConfig&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;url&quot;&nbsp;xsi:type=&quot;url&quot;&nbsp;path=&quot;catalog/product_gallery/upload&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;notice&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;Allowed&nbsp;file&nbsp;types:&nbsp;jpg,&nbsp;jpeg,&nbsp;gif,&nbsp;png.&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;dataScope&quot;&nbsp;xsi:type=&quot;string&quot;&gt;images&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &lt;/field&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在这个组件的代码中，我们定义了一个名为 &quot;images&quot; 的字段，用于上传产品图片。在这个字段的配置项中，我们指定了组件的类型为 imageUploader，并设置了一些其他属性，例如标签、排序顺序、是否必填等等。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 &lt;item name=&quot;uploaderConfig&quot;&gt; 中，我们指定了上传图片的相关配置，例如上传图片的 URL。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">最后，我们需要将这个 ImageUploader 组件添加到表单中。假设你正在使用 Magento 2 自带的 form.xml 文件来创建表单，你可以像下面这样添加这个组件：</p><pre class="brush:as3;toolbar:false">&lt;fieldset&nbsp;name=&quot;product-images&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;field&nbsp;name=&quot;images&quot;&gt;...&lt;/field&gt; &nbsp;&nbsp;&nbsp;&nbsp;... &lt;/fieldset&gt;</pre><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;PingFang SC&quot;; white-space: normal;">在这个代码片段中，我们将<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> &lt;field&gt; </span>组件添加到了一个名为<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> &quot;product-images&quot; </span>的字段集中。这个字段集将包含其他组件，例如名称、价格、描述等等。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，ImagePreview 组件用于在前端显示一个预览图片的组件。这个组件可以让用户在上传图片之前预览图片，并可以删除已上传的图片。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">下面是一个示例，展示了如何在 Magento 2 中使用 ImagePreview 组件。假设你已经创建了一个产品，并且已经上传了一些图片。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，我们需要创建一个用于显示预览图片的 ImagePreview 组件。创建一个新的 UI 组件文件 image_preview.xml，并将以下代码添加到其中：</p><pre class="brush:as3;toolbar:false">&lt;container&nbsp;name=&quot;image_preview_container&quot;&nbsp;htmlTag=&quot;div&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;foreach&nbsp;args=&quot;data:&nbsp;currentProduct().images,&nbsp;as:&nbsp;&#39;image&#39;&quot;&nbsp;render=&quot;true&quot;&nbsp;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Framework\View\Element\Template&quot;&nbsp;template=&quot;Magento_Catalog::product/helper/gallery.phtml&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;arguments&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;image&quot;&nbsp;xsi:type=&quot;string&quot;&gt;${image.url}&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;width&quot;&nbsp;xsi:type=&quot;number&quot;&gt;100&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;height&quot;&nbsp;xsi:type=&quot;number&quot;&gt;100&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;label&quot;&nbsp;xsi:type=&quot;string&quot;&gt;${image.label}&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;deleteUrl&quot;&nbsp;xsi:type=&quot;url&quot;&nbsp;path=&quot;catalog/product_gallery/delete&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;scope&quot;&nbsp;xsi:type=&quot;string&quot;&gt;product&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;position&quot;&nbsp;xsi:type=&quot;number&quot;&gt;${image.position}&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/arguments&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/block&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/foreach&gt; &lt;/container&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在这个组件的代码中，我们使用了一个 foreach 循环来遍历产品的图片列表。对于每张图片，我们创建了一个新的 Magento\Framework\View\Element\Template 块，并将图片的相关信息作为参数传递给它。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在这个块中，我们使用了 Magento_Catalog::product/helper/gallery.phtml 模板来显示图片。这个模板将显示图片的预览图，并提供了一个 &quot;删除&quot; 按钮，以便用户可以删除已上传的图片。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">最后，我们需要将这个 ImagePreview 组件添加到产品页面中。在你的产品布局文件中，添加以下代码：</p><pre class="brush:as3;toolbar:false">&lt;referenceBlock&nbsp;name=&quot;product.info.media&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Framework\View\Element\Template&quot;&nbsp;template=&quot;Vendor_Module::image_preview.phtml&quot;/&gt; &lt;/referenceBlock&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在这个代码片段中，我们将 Magento\Framework\View\Element\Template 块添加到了名为 &quot;product.info.media&quot; 的布局块中。这个布局块包含了产品页面中显示图片的相关组件，例如产品主图、缩略图、相册等等。</p><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; min-height: 17px; white-space: normal;"><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，HtmlContent 组件用于在前端显示一个 HTML 内容的组件。这个组件可以让你在产品页面、类别页面、CMS 页面等任何页面上添加自定义的 HTML 内容。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">下面是一个示例，展示了如何在 Magento 2 中使用 HtmlContent 组件。假设你想要在某个产品页面上添加一个自定义的 HTML 内容块。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，我们需要创建一个用于显示 HTML 内容的 HtmlContent 组件。创建一个新的 UI 组件文件 html_content.xml，并将以下代码添加到其中：</p><pre class="brush:as3;toolbar:false">&lt;container&nbsp;name=&quot;custom_html_container&quot;&nbsp;htmlTag=&quot;div&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Framework\View\Element\Template&quot;&nbsp;template=&quot;Vendor_Module::custom_html.phtml&quot;/&gt; &lt;/container&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在这个组件的代码中，我们创建了一个 Magento\Framework\View\Element\Template 块，并将 custom_html.phtml 模板作为其模板。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">然后，我们需要创建一个 custom_html.phtml 模板文件，并将要显示的 HTML 内容添加到其中。例如，以下是一个简单的示例 HTML 内容块：</p><pre class="brush:as3;toolbar:false">&lt;div&nbsp;class=&quot;custom-html&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Custom&nbsp;HTML&nbsp;Content&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This&nbsp;is&nbsp;some&nbsp;custom&nbsp;HTML&nbsp;content&nbsp;that&nbsp;can&nbsp;be&nbsp;displayed&nbsp;on&nbsp;a&nbsp;product&nbsp;page.&lt;/p&gt; &lt;/div&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">最后，我们需要将这个 HtmlContent 组件添加到产品页面中。在你的产品布局文件中，添加以下代码：</p><pre class="brush:as3;toolbar:false">&lt;referenceContainer&nbsp;name=&quot;product.info.main&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Framework\View\Element\Template&quot;&nbsp;template=&quot;Vendor_Module::html_content.phtml&quot;/&gt; &lt;/referenceContainer&gt;</pre><p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;PingFang SC&quot;; white-space: normal;">在这个代码片段中，我们将<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> Magento\Framework\View\Element\Template </span>块添加到了名为<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;Helvetica Neue&quot;;"> &quot;product.info.main&quot; </span>的布局块中。这个布局块包含了产品页面中显示产品信息的相关组件，例如产品名称、价格、描述等等。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，GridDataProvider 组件用于为网格组件提供数据。这个组件可以让你从数据库、API、其他数据源中获取数据，并将数据呈现在网格组件中。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">下面是一个示例，展示了如何在 Magento 2 中使用 GridDataProvider 组件。假设你想要在某个自定义的模块中创建一个网格组件来显示所有订单数据。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，我们需要创建一个用于提供订单数据的 GridDataProvider 组件。创建一个新的 PHP 类文件 OrderGridDataProvider.php，并将以下代码添加到其中：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;Vendor\Module\Model; use&nbsp;Magento\Framework\App\Request\DataPersistorInterface; use&nbsp;Magento\Framework\App\RequestInterface; use&nbsp;Magento\Framework\Exception\LocalizedException; use&nbsp;Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface; class&nbsp;OrderGridDataProvider&nbsp;implements&nbsp;DataProviderInterface { &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$collection; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$dataPersistor; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$request; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$loadedData&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;__construct( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$name, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$primaryFieldName, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$requestFieldName, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\Vendor\Module\Model\ResourceModel\Order\CollectionFactory&nbsp;$collectionFactory, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RequestInterface&nbsp;$request, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DataPersistorInterface&nbsp;$dataPersistor &nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;name&nbsp;=&nbsp;$name; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;primaryFieldName&nbsp;=&nbsp;$primaryFieldName; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;requestFieldName&nbsp;=&nbsp;$requestFieldName; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;collection&nbsp;=&nbsp;$collectionFactory-&gt;create(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;dataPersistor&nbsp;=&nbsp;$dataPersistor; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;request&nbsp;=&nbsp;$request; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getData() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isset($this-&gt;loadedData))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this-&gt;loadedData; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$items&nbsp;=&nbsp;$this-&gt;collection-&gt;getItems(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$order)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;loadedData[$order-&gt;getId()]&nbsp;=&nbsp;$order-&gt;getData(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$data&nbsp;=&nbsp;$this-&gt;dataPersistor-&gt;get(&#39;module_order&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!empty($data))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$order&nbsp;=&nbsp;$this-&gt;collection-&gt;getNewEmptyItem(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$order-&gt;setData($data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;loadedData[$order-&gt;getId()]&nbsp;=&nbsp;$order-&gt;getData(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;dataPersistor-&gt;clear(&#39;module_order&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this-&gt;loadedData; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;addFilter(\Magento\Framework\Api\Filter&nbsp;$filter) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;addOrder($field,&nbsp;$direction) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;setLimit($offset,&nbsp;$size) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;"><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">在这个组件的代码中，我们首先注入了</span> Vendor\Module\Model\ResourceModel\Order\CollectionFactory <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">对象，并使用它来获取订单数据集合。然后，我们实现了</span> DataProviderInterface <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">接口，并在其中定义了</span> getData() <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">方法，用于获取并返回所有订单数据。我们还在这个方法中使用了</span> DataPersistorInterface <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">对象来缓存订单数据，并在需要时将缓存的数据添加到已加载的数据中。</span></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">在 Magento 2 中，FormDataProvider 组件用于为表单组件提供数据。这个组件可以让你从数据库、API、其他数据源中获取数据，并将数据呈现在表单组件中。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">下面是一个示例，展示了如何在 Magento 2 中使用 FormDataProvider 组件。假设你想要在某个自定义的模块中创建一个表单组件来编辑订单数据。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">首先，我们需要创建一个用于提供订单数据的 FormDataProvider 组件。创建一个新的 PHP 类文件 OrderFormDataProvider.php，并将以下代码添加到其中：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;Vendor\Module\Model; use&nbsp;Magento\Framework\App\Request\DataPersistorInterface; use&nbsp;Magento\Framework\App\RequestInterface; use&nbsp;Magento\Framework\Exception\LocalizedException; use&nbsp;Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface; class&nbsp;OrderFormDataProvider&nbsp;implements&nbsp;DataProviderInterface { &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$collection; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$dataPersistor; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$request; &nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;$loadedData&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;__construct( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$name, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$primaryFieldName, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$requestFieldName, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\Vendor\Module\Model\ResourceModel\Order\CollectionFactory&nbsp;$collectionFactory, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RequestInterface&nbsp;$request, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DataPersistorInterface&nbsp;$dataPersistor &nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;name&nbsp;=&nbsp;$name; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;primaryFieldName&nbsp;=&nbsp;$primaryFieldName; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;requestFieldName&nbsp;=&nbsp;$requestFieldName; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;collection&nbsp;=&nbsp;$collectionFactory-&gt;create(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;dataPersistor&nbsp;=&nbsp;$dataPersistor; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;request&nbsp;=&nbsp;$request; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getData() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$data&nbsp;=&nbsp;$this-&gt;dataPersistor-&gt;get(&#39;module_order&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!empty($data))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$orderId&nbsp;=&nbsp;isset($data[&#39;order_id&#39;])&nbsp;?&nbsp;$data[&#39;order_id&#39;]&nbsp;:&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($orderId)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$order&nbsp;=&nbsp;$this-&gt;collection-&gt;getItemById($orderId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($order)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;loadedData[$order-&gt;getId()]&nbsp;=&nbsp;$order-&gt;getData(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;dataPersistor-&gt;clear(&#39;module_order&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this-&gt;loadedData; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;addFilter(\Magento\Framework\Api\Filter&nbsp;$filter) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;addOrder($field,&nbsp;$direction) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;setLimit($offset,&nbsp;$size) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;save($data) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Save&nbsp;data&nbsp;to&nbsp;database &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;"><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">在这个组件的代码中，我们首先注入了</span> Vendor\Module\Model\ResourceModel\Order\CollectionFactory <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">对象，并使用它来获取订单数据集合。然后，我们实现了</span> DataProviderInterface <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">接口，并在其中定义了</span> getData() <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">方法，用于获取并返回订单数据。我们还在这个方法中使用了</span> DataPersistorInterface <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">对象来缓存订单数据，并在需要时将缓存的数据添加到已加载的数据中。</span></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">FiltersChips 组件是 Magento 2 中的一个 UI 组件，用于在用户使用过滤器时，在顶部显示应用的过滤器标签。此组件将所有过滤器值集中在一起，并根据它们的值动态创建相应的标签。它还允许用户删除特定的过滤器标签。</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">以下是 FiltersChips 组件的示例代码：</p><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">XML 布局文件：</p><pre class="brush:as3;toolbar:false">&lt;listing&nbsp;...&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;filters&nbsp;name=&quot;listing_filters&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;config&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;filters_applied&quot;&nbsp;xsi:type=&quot;boolean&quot;&gt;false&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;chipsConfig&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;provider&quot;&nbsp;xsi:type=&quot;string&quot;&gt;your_grid_listing.your_grid_listing_data_source&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;name&quot;&nbsp;xsi:type=&quot;string&quot;&gt;sales_order_grid_filter&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/filters&gt; &lt;/listing&gt;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;">JS 组件文件：</p><pre class="brush:as3;toolbar:false">define([ &nbsp;&nbsp;&nbsp;&nbsp;&#39;uiComponent&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&#39;Magento_Ui/js/grid/filters/chips&#39; ],&nbsp;function&nbsp;(Component,&nbsp;Chips)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&#39;use&nbsp;strict&#39;; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;Component.extend({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initialize:&nbsp;function&nbsp;(config)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._super(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chips(config.chipsConfig,&nbsp;&#39;[data-role=filters-chips]&#39;,&nbsp;config.provider); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: &quot;Helvetica Neue&quot;; white-space: normal;"><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">在</span> XML <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">布局文件中，可以看到</span> filters <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">元素的</span> data <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">部分包含</span> FiltersChips <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">组件的配置。其中，</span>filters_applied <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">用于指示是否应用过滤器，</span>chipsConfig <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">用于设置组件的配置。在</span> JS <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">组件文件中，使用</span> Chips <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">来初始化组件，并将</span> chipsConfig <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">和</span> provider <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: normal; font-family: &quot;PingFang SC&quot;;">传递给它。</span></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>Magento 2中的UI组件是一种灵活的工具，可用于创建交互式的用户界面。其中一个UI组件是过滤器组件，用于在网格视图中添加过滤器。下面是过滤器组件的代码示例：</p><p><span style="color: #808080;"></span></p><pre class="brush:as3;toolbar:false">&lt;listingToolbar&nbsp;name=&quot;listing_top&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;filters&nbsp;name=&quot;listing_filters&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;filterSelect&nbsp;name=&quot;status&quot;&nbsp;provider=&quot;${&nbsp;$.provider&nbsp;}&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;settings&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;caption&nbsp;translate=&quot;true&quot;&gt;Status&lt;/caption&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;options&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;name=&quot;all&quot;&nbsp;value=&quot;&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;name=&quot;enabled&quot;&nbsp;value=&quot;1&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;name=&quot;disabled&quot;&nbsp;value=&quot;0&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/options&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/settings&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/filterSelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;filterRange&nbsp;name=&quot;created_at&quot;&nbsp;provider=&quot;${&nbsp;$.provider&nbsp;}&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;settings&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;caption&nbsp;translate=&quot;true&quot;&gt;Created&nbsp;At&lt;/caption&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;range&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;field&nbsp;date&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;${&nbsp;$.$data.fromLabel&nbsp;}&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;control&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datetimepicker&nbsp;class=&quot;admin__field-date&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;valueformat=&quot;yyyy-MM-dd&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeformat=&quot;HH:mm:ss&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timezone=&quot;${&nbsp;$.$data.storeTimeZone&nbsp;}&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;{{&nbsp;$.$data.from&nbsp;}}&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-role=&quot;datetimepicker&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/datetimepicker&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;field&nbsp;date&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;${&nbsp;$.$data.toLabel&nbsp;}&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;control&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;datetimepicker&nbsp;class=&quot;admin__field-date&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;valueformat=&quot;yyyy-MM-dd&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeformat=&quot;HH:mm:ss&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timezone=&quot;${&nbsp;$.$data.storeTimeZone&nbsp;}&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;{{&nbsp;$.$data.to&nbsp;}}&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-role=&quot;datetimepicker&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/datetimepicker&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/template&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/settings&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/filterRange&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/filters&gt; &lt;/listingToolbar&gt;</pre><p><span style="color: #808080;"></span><br/></p><p>在这个示例中，我们创建了两个过滤器，一个是select过滤器，另一个是range过滤器。select过滤器允许用户从预定义的选项中选择一个值，而range过滤器允许用户指定一个范围。</p><p>要添加过滤器组件，我们首先创建一个名为listingToolbar的父组件，并在其中创建一个名为filters的子组件。然后我们添加两个过滤器：一个是select过滤器，名为status，另一个是range过滤器，名为created_at。</p><p>对于每个过滤器，我们可以指定其名称、提供者和设置。例如，对于select过滤器，我们设置了一个标题和三个选项，分别是“全部”、“启用”和“禁用”。而对于range过滤器，我们设置了一个标题和一个模板，该模板定义了两个日期选择器，一个用于起始日期，另一个用于结束日期。</p><p>需要注意的是，这只是一个过滤器组件的示例，您可以根据您的需求添加或修改过滤器的设置和选项。</p><p><br/></p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>在 Magento 2 中，您可以使用文件上传器组件来向后端上传文件并将其保存到服务器上。文件上传器组件支持多种文件类型和文件大小，并提供了实时上传进度和错误处理功能。下面是一个文件上传器组件的代码示例：</p><p><span style="color: #808080;"></span></p><pre class="brush:as3;toolbar:false">&lt;field&nbsp;name=&quot;file_upload&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;config&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;formElement&quot;&nbsp;xsi:type=&quot;string&quot;&gt;fileUploader&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;previewTmpl&quot;&nbsp;xsi:type=&quot;string&quot;&gt;Magento_Theme/image-preview&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;uploaderConfig&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;url&quot;&nbsp;xsi:type=&quot;url&quot;&nbsp;path=&quot;route/to/upload/file&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;allowedExtensions&quot;&nbsp;xsi:type=&quot;string&quot;&gt;jpg&nbsp;jpeg&nbsp;gif&nbsp;png&nbsp;pdf&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;maxFileSize&quot;&nbsp;xsi:type=&quot;number&quot;&gt;1048576&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &lt;/field&gt;</pre><p>在这个示例中，我们创建了一个名为file_upload的文件上传器组件。在该组件中，我们指定了以下配置：</p><p>formElement: 指定该组件是一个文件上传器。</p><p>previewTmpl: 指定文件上传后的预览模板，这里使用了一个默认的图片预览模板。</p><p>uploaderConfig: 指定上传文件时要发送的配置信息，其中url属性指定了文件上传的路径。</p><p>allowedExtensions: 指定允许上传的文件类型，多个类型用空格隔开。</p><p>maxFileSize: 指定允许上传的文件最大大小，单位为字节。</p><p>需要注意的是，在实际使用中，您需要根据自己的需求修改这些配置。另外，您还需要编写后端代码来处理上传的文件并将其保存到服务器上。</p><p><br/></p>

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发 》</a></h5> <div class="image-container"> <p> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>在 Magento 2 中，您可以使用文件组件来向后端上传文件并将其保存到服务器上。文件组件支持多种文件类型和文件大小，并提供了实时上传进度和错误处理功能。下面是一个文件组件的代码示例：</p><p><span style="color: #808080;"></span></p><pre class="brush:as3;toolbar:false">&lt;field&nbsp;name=&quot;file_upload&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;data&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;config&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;formElement&quot;&nbsp;xsi:type=&quot;string&quot;&gt;fileUploader&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;previewTmpl&quot;&nbsp;xsi:type=&quot;string&quot;&gt;Magento_Theme/image-preview&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;uploaderConfig&quot;&nbsp;xsi:type=&quot;array&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;url&quot;&nbsp;xsi:type=&quot;url&quot;&nbsp;path=&quot;route/to/upload/file&quot;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;allowedExtensions&quot;&nbsp;xsi:type=&quot;string&quot;&gt;jpg&nbsp;jpeg&nbsp;gif&nbsp;png&nbsp;pdf&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;maxFileSize&quot;&nbsp;xsi:type=&quot;number&quot;&gt;1048576&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/item&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/argument&gt; &lt;/field&gt;</pre><p><span style="color: #808080;"></span><br/></p><p>在这个示例中，我们创建了一个名为file_upload的文件上传器组件。在该组件中，我们指定了以下配置：</p><p>formElement: 指定该组件是一个文件上传器。</p><p>previewTmpl: 指定文件上传后的预览模板，这里使用了一个默认的图片预览模板。</p><p>uploaderConfig: 指定上传文件时要发送的配置信息，其中url属性指定了文件上传的路径。</p><p>allowedExtensions: 指定允许上传的文件类型，多个类型用空格隔开。</p><p>maxFileSize: 指定允许上传的文件最大大小，单位为字节。</p><p>需要注意的是，在实际使用中，您需要根据自己的需求修改这些配置。另外，您还需要编写后端代码来处理上传的文件并将其保存到服务器上。</p><p><br/></p>