<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 API也可以使用cURL库进行访问，以下是使用cURL访问Magento 2 API的示例代码：</p><pre class="brush:as3;toolbar:false">//&nbsp;设置Magento&nbsp;2&nbsp;API的基本URL和访问令牌 $baseUrl&nbsp;=&nbsp;&#39;https://example.com&#39;; $accessToken&nbsp;=&nbsp;&#39;your_access_token&#39;; //&nbsp;创建cURL资源 $ch&nbsp;=&nbsp;curl_init(); //&nbsp;设置请求URL和请求头 curl_setopt($ch,&nbsp;CURLOPT_URL,&nbsp;$baseUrl&nbsp;.&nbsp;&#39;/rest/V1/customers/1&#39;); curl_setopt($ch,&nbsp;CURLOPT_HTTPHEADER,&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&#39;Authorization:&nbsp;Bearer&nbsp;&#39;&nbsp;.&nbsp;$accessToken, &nbsp;&nbsp;&nbsp;&nbsp;&#39;Content-Type:&nbsp;application/json&#39; ]); //&nbsp;执行请求并获取响应结果 curl_setopt($ch,&nbsp;CURLOPT_RETURNTRANSFER,&nbsp;true); $response&nbsp;=&nbsp;curl_exec($ch); //&nbsp;检查请求是否成功 if&nbsp;($response&nbsp;===&nbsp;false)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;&#39;Error:&nbsp;&#39;&nbsp;.&nbsp;curl_error($ch); }&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;打印响应结果 &nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;$response; } //&nbsp;关闭cURL资源 curl_close($ch);</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;">在此示例中，我们使用curl_init()函数创建了一个cURL资源。然后，我们设置了请求URL和请求头，并将CURLOPT_RETURNTRANSFER选项设置为true，以便获取响应结果。最后，我们使用curl_exec()函数执行请求，并检查是否有错误发生。如果请求成功，我们将打印响应结果。</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 class="p3" 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;;">API</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 API请求的示例代码：</p><pre class="brush:as3;toolbar:false"> //&nbsp;设置Magento&nbsp;2&nbsp;API的基本URL和访问令牌 $baseUrl&nbsp;=&nbsp;&#39;https://example.com&#39;; $accessToken&nbsp;=&nbsp;&#39;your_access_token&#39;; //&nbsp;创建请求参数 $requestData&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&#39;entity&#39;&nbsp;=&gt;&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;name&#39;&nbsp;=&gt;&nbsp;&#39;New&nbsp;Product&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;sku&#39;&nbsp;=&gt;&nbsp;&#39;new-product-sku&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;price&#39;&nbsp;=&gt;&nbsp;10.00, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;status&#39;&nbsp;=&gt;&nbsp;1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;visibility&#39;&nbsp;=&gt;&nbsp;4, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;type_id&#39;&nbsp;=&gt;&nbsp;&#39;simple&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;attribute_set_id&#39;&nbsp;=&gt;&nbsp;4, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;weight&#39;&nbsp;=&gt;&nbsp;0.5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;custom_attributes&#39;&nbsp;=&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;&#39;attribute_code&#39;&nbsp;=&gt;&nbsp;&#39;description&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;value&#39;&nbsp;=&gt;&nbsp;&#39;New&nbsp;product&nbsp;description&#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;&#39;attribute_code&#39;&nbsp;=&gt;&nbsp;&#39;manufacturer&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;value&#39;&nbsp;=&gt;&nbsp;&#39;New&nbsp;product&nbsp;manufacturer&#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;创建cURL资源 $ch&nbsp;=&nbsp;curl_init(); //&nbsp;设置请求URL和请求头 curl_setopt($ch,&nbsp;CURLOPT_URL,&nbsp;$baseUrl&nbsp;.&nbsp;&#39;/rest/V1/products&#39;); curl_setopt($ch,&nbsp;CURLOPT_HTTPHEADER,&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&#39;Authorization:&nbsp;Bearer&nbsp;&#39;&nbsp;.&nbsp;$accessToken, &nbsp;&nbsp;&nbsp;&nbsp;&#39;Content-Type:&nbsp;application/json&#39; ]); //&nbsp;设置请求体 curl_setopt($ch,&nbsp;CURLOPT_POST,&nbsp;true); curl_setopt($ch,&nbsp;CURLOPT_POSTFIELDS,&nbsp;json_encode($requestData)); //&nbsp;执行请求并获取响应结果 curl_setopt($ch,&nbsp;CURLOPT_RETURNTRANSFER,&nbsp;true); $response&nbsp;=&nbsp;curl_exec($ch); //&nbsp;检查请求是否成功 if&nbsp;($response&nbsp;===&nbsp;false)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;&#39;Error:&nbsp;&#39;&nbsp;.&nbsp;curl_error($ch); }&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;打印响应结果 &nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;$response; } //&nbsp;关闭cURL资源 curl_close($ch);</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 2 API的基本URL和访问令牌。然后，我们创建了一个包含新产品信息的请求参数。接下来，我们使用cURL库创建了一个cURL资源，并设置了请求URL和请求头。我们还设置了请求体，将请求方法设置为POST。最后，我们执行请求，并打印响应结果。</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 class="p3" 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;;">API</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中，API的安全性是通过访问令牌（Access Token）和角色权限控制实现的。以下是一个示例代码，演示如何使用访问令牌来访问Magento 2 API并确保安全性：</p><pre class="brush:as3;toolbar:false">//&nbsp;设置Magento&nbsp;2&nbsp;API的基本URL和访问令牌 $baseUrl&nbsp;=&nbsp;&#39;https://example.com&#39;; $accessToken&nbsp;=&nbsp;&#39;your_access_token&#39;; //&nbsp;创建cURL资源 $ch&nbsp;=&nbsp;curl_init(); //&nbsp;设置请求URL和请求头 curl_setopt($ch,&nbsp;CURLOPT_URL,&nbsp;$baseUrl&nbsp;.&nbsp;&#39;/rest/V1/customers/1&#39;); curl_setopt($ch,&nbsp;CURLOPT_HTTPHEADER,&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&#39;Authorization:&nbsp;Bearer&nbsp;&#39;&nbsp;.&nbsp;$accessToken, &nbsp;&nbsp;&nbsp;&nbsp;&#39;Content-Type:&nbsp;application/json&#39; ]); //&nbsp;执行请求并获取响应结果 curl_setopt($ch,&nbsp;CURLOPT_RETURNTRANSFER,&nbsp;true); $response&nbsp;=&nbsp;curl_exec($ch); //&nbsp;检查请求是否成功 if&nbsp;($response&nbsp;===&nbsp;false)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;&#39;Error:&nbsp;&#39;&nbsp;.&nbsp;curl_error($ch); }&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;打印响应结果 &nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;$response; } //&nbsp;关闭cURL资源 curl_close($ch);</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 2 API的基本URL和访问令牌，并将访问令牌作为请求头的Authorization字段发送。在Magento 2中，您可以使用令牌管理页面来管理访问令牌。令牌管理页面允许您创建、编辑和删除令牌，并为每个令牌分配特定的角色。角色是一组API操作的集合，可以控制令牌的访问权限。</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 class="p3" 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 2 API</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;;">SSL</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;;">IP</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;;">API</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;;">Magento 2</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中，可以使用TinyMCE编辑器来提供更丰富的文本编辑功能。以下是如何配置TinyMCE编辑器以及如何在Magento 2中使用它的代码示例：</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 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中配置TinyMCE编辑器</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中启用WYSIWYG编辑器。打开Magento 2的后台，依次单击“Stores”&gt;“Configuration”&gt;“General”&gt;“Content Management”，在“WYSIWYG Options”下，将“Enable WYSIWYG Editor”设置为“Yes”。</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 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;">然后，将TinyMCE作为默认编辑器。在“WYSIWYG Options”下，将“Editor”设置为“TinyMCE”。</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 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;">最后，根据需要进行其他设置，例如设置编辑器的宽度和高度，启用/禁用某些按钮等。完成后，单击“Save Config”保存更改。</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 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中使用TinyMCE编辑器</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中使用TinyMCE编辑器非常简单。只需在需要使用编辑器的文本区域中添加以下代码：</p><pre class="brush:as3;toolbar:false">&lt;textarea&nbsp;id=&quot;editor&quot;&nbsp;name=&quot;editor&quot;&gt;&lt;/textarea&gt; &lt;script&gt; require([&#39;jquery&#39;,&#39;mage/adminhtml/wysiwyg/tiny_mce/setup&#39;],&nbsp;function($){ &nbsp;&nbsp;&nbsp;tinyMceWysiwygSetup.prototype.baseStaticUrl&nbsp;=&nbsp;$(&#39;#base-url&#39;).attr(&#39;href&#39;)+&#39;pub/static/frontend/Magento/luma/en_US/Magento_Cms/&#39;; &nbsp;&nbsp;&nbsp;tinyMceWysiwygSetup.prototype.baseMediaUrl&nbsp;=&nbsp;$(&#39;#base-url&#39;).attr(&#39;href&#39;)+&#39;pub/media/&#39;; &nbsp;&nbsp;&nbsp;tinyMceWysiwygSetup.prototype.settings&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_buttons1&nbsp;:&nbsp;&#39;bold,italic,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,|,image,media&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_buttons2&nbsp;:&nbsp;&#39;&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_buttons3&nbsp;:&nbsp;&#39;&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_buttons4&nbsp;:&nbsp;&#39;&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_statusbar_location&nbsp;:&nbsp;&#39;bottom&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_resizing&nbsp;:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme_advanced_resize_horizontal&nbsp;:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;apply_source_formatting&nbsp;:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;:&nbsp;&#39;100%&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;:&nbsp;&#39;250px&#39; &nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;new&nbsp;tinyMceWysiwygSetup(&#39;editor&#39;,&nbsp;{}); }); &lt;/script&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;">这将在指定的textarea元素上初始化TinyMCE编辑器，并设置其选项。</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 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的默认主题（Luma）。如果您使用的是自定义主题，请相应地更改代码中的路径。此外，如果您要在多个文本区域中使用TinyMCE编辑器，请为每个文本区域指定唯一的id和name。</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 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>在Magento 2中添加自定义编辑器可以通过以下步骤完成：</p><p>在你的Magento 2主题文件夹的下面创建一个新文件夹，例如：app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/web/js/ckeditor</p><p>下载和解压CKEditor编辑器的最新版本并将其放在刚刚创建的文件夹中。</p><p>在你的Magento 2主题文件夹的下面创建一个新文件夹，例如：app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/web/js/tinymce</p><p>下载和解压TinyMCE编辑器的最新版本并将其放在刚刚创建的文件夹中。</p><p>在你的Magento 2主题文件夹的下面创建一个新文件夹，例如：app/design/frontend/&lt;Vendor&gt;/&lt;Theme&gt;/web/js/my-editor</p><p>在这个新文件夹中创建一个新的JavaScript文件，例如：editor.js</p><p>编辑这个JavaScript文件并添加以下代码：</p><pre class="brush:as3;toolbar:false">define([&#39;jquery&#39;,&nbsp;&#39;tinymce&#39;,&nbsp;&#39;ckeditor&#39;],&nbsp;function&nbsp;($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&#39;use&nbsp;strict&#39;; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;function&nbsp;(config,&nbsp;element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(config.editor&nbsp;===&nbsp;&#39;tinymce4&#39;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tinymce.init({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selector:&nbsp;&#39;#&#39;&nbsp;+&nbsp;element.id, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plugins:&nbsp;&#39;link&nbsp;image&nbsp;code&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toolbar:&nbsp;&#39;undo&nbsp;redo&nbsp;|&nbsp;bold&nbsp;italic&nbsp;|&nbsp;alignleft&nbsp;aligncenter&nbsp;alignright&nbsp;|&nbsp;code&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;500 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(config.editor&nbsp;===&nbsp;&#39;ckeditor4&#39;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CKEDITOR.replace(element.id,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;500, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeButtons:&nbsp;&#39;Subscript,Superscript&#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;}; });</pre><p>现在，你可以在Magento 2的CMS页面中使用此自定义编辑器了。在你的CMS页面中，打开要编辑的区域，例如：Content &gt; Pages &gt; Edit，并在WYSIWYG编辑器的设置中选择Custom Editr。接下来，在“Custom Editor”字段中输入“my-editor/editor”（这里的“my-editor”是你在第5步中创建的文件夹的名称，“editor”是你在第6步中创建的JavaScript文件的名称）。保存后，刷新页面并查看结果。</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>ListingToolbar组件是Magento 2中用于在产品列表页面（如类别页面和搜索结果页面）中添加工具栏的组件。它提供了许多有用的功能，如产品排序、分页和过滤器等。</p><p>下面是一个简单的Magento 2 ListingToolbar组件示例：</p><p>首先，创建一个新的Magento 2模块（如果你还没有创建）。</p><p>在你的模块目录中创建一个新的PHP类，例如：My_Module_Block_Product_ListingToolbar</p><p>在这个PHP类中，添加以下代码：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;My\Module\Block\Product; use&nbsp;Magento\Catalog\Block\Product\ProductList\Toolbar&nbsp;as&nbsp;ToolbarParent; class&nbsp;ListingToolbar&nbsp;extends&nbsp;ToolbarParent { &nbsp;&nbsp;&nbsp;&nbsp;/** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Retrieve&nbsp;available&nbsp;page&nbsp;sizes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@return&nbsp;array &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getAvailableLimit() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;[10&nbsp;=&gt;&nbsp;10,&nbsp;20&nbsp;=&gt;&nbsp;20,&nbsp;50&nbsp;=&gt;&nbsp;50]; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p>这个PHP类继承了Magento 2中的Magento\Catalog\Block\Product\ProductList\Toolbar类，并覆盖了其中的getAvailableLimit()方法。在这个方法中，我们返回了可用的产品数量限制。</p><p>在你的模块目录中创建一个新的布局XML文件，例如：my_module_product_listing_toolbar.xml，并将以下代码添加到该文件中：</p><pre class="brush:as3;toolbar:false">&lt;page&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&nbsp;xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View/Layout/etc/page_configuration.xsd&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;referenceContainer&nbsp;name=&quot;content&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;My\Module\Block\Product\ListingToolbar&quot;&nbsp;name=&quot;product_list_toolbar&quot;&nbsp;template=&quot;Magento_Catalog::product/list/toolbar.phtml&quot;&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/referenceContainer&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt; &lt;/page&gt;</pre><p>这个布局文件将我们刚刚创建的ListingToolbar块添加到产品列表页面的content容器中，并使用Magento 2的默认product/list/toolbar.phtml模板来呈现工具栏。</p><p>最后，创建一个新的PHTML文件，例如：my_module_product_listing.phtml，并将以下代码添加到该文件中：</p><pre class="brush:as3;toolbar:false">&lt;?php /** &nbsp;*&nbsp;@var&nbsp;$block&nbsp;\My\Module\Block\Product\ListingToolbar &nbsp;*/ ?&gt; &lt;div&nbsp;class=&quot;products-toolbar&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;products-toolbar-title&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;strong&gt;&lt;?=&nbsp;$block-&gt;getPagerHtml()&nbsp;?&gt;&lt;/strong&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;products-toolbar-actions&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;limit&quot;&nbsp;class=&quot;products-toolbar-limit&quot;&nbsp;onchange=&quot;setLocation(this.value)&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($block-&gt;getAvailableLimit()&nbsp;as&nbsp;$key&nbsp;=&gt;&nbsp;$value)&nbsp;:&nbsp;?&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&lt;?=&nbsp;$block-&gt;getPagerUrl([&#39;limit&#39;&nbsp;=&gt;&nbsp;$key])&nbsp;?&gt;&quot;&nbsp;&lt;?=&nbsp;($block-&gt;getLimit()&nbsp;==&nbsp;$key)&nbsp;?&nbsp;&#39;selected=&quot;selected&quot;&#39;&nbsp;:&nbsp;&#39;&#39;&nbsp;?&gt;&gt;&lt;?=&nbsp;$value&nbsp;?&gt;&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;endforeach;&nbsp;?&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;/div&gt;</pre><p>这个PHTML文件呈现了一个简单的工具栏，其中包含产品数量限制下拉列表和分页导航。</p><p>现在，当你打开Magento 2产品列表页面时，你应该会看到我们刚刚创建的工具栏。你可以在getAvailableLimit()方法中添加更</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中的TimelineColumn组件是用于在后台管理区域中显示时间线的组件。它通常用于订单、客户、产品等列表页面中，以显示项目的创建日期和时间。</p><p>下面是一个简单的Magento 2 TimelineColumn组件示例：</p><p>首先，创建一个新的Magento 2模块（如果你还没有创建）。</p><p>在你的模块目录中创建一个新的PHP类，例如：My_Module\Block\Adminhtml\Order\TimelineColumn</p><p>在这个PHP类中，添加以下代码：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;My\Module\Block\Adminhtml\Order; use&nbsp;Magento\Backend\Block\Widget\Grid\Column; class&nbsp;TimelineColumn&nbsp;extends&nbsp;Column { &nbsp;&nbsp;&nbsp;&nbsp;/** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Get&nbsp;the&nbsp;creation&nbsp;time&nbsp;of&nbsp;the&nbsp;order&nbsp;item &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;&nbsp;\Magento\Sales\Model\Order\Item&nbsp;$item &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@return&nbsp;string &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getCreationTime($item) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$item-&gt;getCreatedAt(); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;/** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Render&nbsp;the&nbsp;column&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;&nbsp;\Magento\Framework\DataObject&nbsp;$row &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@return&nbsp;string &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;_getValue(\Magento\Framework\DataObject&nbsp;$row) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$value&nbsp;=&nbsp;parent::_getValue($row); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($this-&gt;getIndex()&nbsp;==&nbsp;&#39;creation_time&#39;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$value&nbsp;=&nbsp;$this-&gt;getCreationTime($row); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$value; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p>这个PHP类继承了Magento <span style="color: #b5cea8;">2</span>中的Magento\Backend\Block\Widget\Grid\Column类，并覆盖了其中的_getValue()方法。在这个方法中，我们检查列的索引是否为creation_time，如果是，我们使用getCreationTime()方法来获取订单项的创建时间。</p><p>在你的模块目录中创建一个新的布局XML文件，例如：my_module_order_listing.xml，并将以下代码添加到该文件中：</p><pre class="brush:as3;toolbar:false">&lt;page&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&nbsp;xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View/Layout/etc/page_configuration.xsd&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;referenceContainer&nbsp;name=&quot;content&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Sales\Block\Adminhtml\Order\Grid&quot;&nbsp;name=&quot;adminhtml.sales.order.grid&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;id&quot;&nbsp;xsi:type=&quot;string&quot;&gt;sales_order_grid&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;dataSource&quot;&nbsp;xsi:type=&quot;object&quot;&gt;Magento\Sales\Model\ResourceModel\Order\Grid\Collection&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;default_sort&quot;&nbsp;xsi:type=&quot;string&quot;&gt;created_at&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;default_dir&quot;&nbsp;xsi:type=&quot;string&quot;&gt;desc&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;save_parameters_in_session&quot;&nbsp;xsi:type=&quot;string&quot;&gt;1&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&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;block&nbsp;class=&quot;My\Module\Block\Adminhtml\Order\TimelineColumn&quot;&nbsp;name=&quot;adminhtml.sales.order.grid.column.creation_time&quot;&nbsp;as=&quot;creation_time&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;header&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;Creation&nbsp;Time&lt;/argument&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;argument&nbsp;name=&quot;index&quot;&nbsp;xsi:type=&quot;string&quot;&gt;creation_time&lt;/argument&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;argument&nbsp;name=&quot;sortable&quot;&nbsp;xsi:type=&quot;string&quot;&gt;true&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;/block&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/block&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/referenceContainer&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt; &lt;/page&gt;</pre><p>这个布局文件将我们刚刚创建的TimelineColumn块添加到订单列表页面的<span style="color: #ce9178;">`adminhtml.sales.order</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中的ThumbnailColumn组件是用于在后台管理区域中显示缩略图的组件。它通常用于产品、类别等列表页面中，以显示相关项目的图片。</p><p>下面是一个简单的Magento 2 ThumbnailColumn组件示例：</p><p>首先，创建一个新的Magento 2模块（如果你还没有创建）。</p><p>在你的模块目录中创建一个新的PHP类，例如：My_Module\Block\Adminhtml\Product\ThumbnailColumn</p><p>在这个PHP类中，添加以下代码：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;My\Module\Block\Adminhtml\Product; use&nbsp;Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer; use&nbsp;Magento\Framework\DataObject; class&nbsp;ThumbnailColumn&nbsp;extends&nbsp;AbstractRenderer { &nbsp;&nbsp;&nbsp;&nbsp;/** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Render&nbsp;the&nbsp;column&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;&nbsp;\Magento\Framework\DataObject&nbsp;$row &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@return&nbsp;string &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;render(DataObject&nbsp;$row) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$imageUrl&nbsp;=&nbsp;$this-&gt;_getValue($row); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!$imageUrl)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$thumbnailUrl&nbsp;=&nbsp;$this-&gt;_storeManager-&gt;getStore()-&gt;getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)&nbsp;.&nbsp;&#39;catalog/product&#39;&nbsp;.&nbsp;$imageUrl; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&#39;&lt;img&nbsp;src=&quot;&#39;&nbsp;.&nbsp;$thumbnailUrl&nbsp;.&nbsp;&#39;&quot;&nbsp;/&gt;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;} }</pre><p>这个PHP类继承了Magento 2中的Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer类，并覆盖了其中的render()方法。在这个方法中，我们首先检查列的值是否存在，如果不存在，我们返回空字符串。否则，我们使用Magento的存储管理器来获取产品图像的缩略图URL，并将其包装在&lt;img&gt;标记中返回。</p><p>在你的模块目录中创建一个新的布局XML文件，例如：my_module_product_listing.xml，并将以下代码添加到该文件中：</p><pre class="brush:as3;toolbar:false">&lt;page&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&nbsp;xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View/Layout/etc/page_configuration.xsd&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;referenceContainer&nbsp;name=&quot;content&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Catalog\Block\Adminhtml\Product\Grid&quot;&nbsp;name=&quot;adminhtml.catalog.product.grid&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;id&quot;&nbsp;xsi:type=&quot;string&quot;&gt;productGrid&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;dataSource&quot;&nbsp;xsi:type=&quot;object&quot;&gt;Magento\Catalog\Model\ResourceModel\Product\Grid\Collection&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;default_sort&quot;&nbsp;xsi:type=&quot;string&quot;&gt;entity_id&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;default_dir&quot;&nbsp;xsi:type=&quot;string&quot;&gt;desc&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;save_parameters_in_session&quot;&nbsp;xsi:type=&quot;string&quot;&gt;1&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&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;block&nbsp;class=&quot;My\Module\Block\Adminhtml\Product\ThumbnailColumn&quot;&nbsp;name=&quot;adminhtml.catalog.product.grid.column.thumbnail&quot;&nbsp;as=&quot;thumbnail&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;header&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;Thumbnail&lt;/argument&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;argument&nbsp;name=&quot;index&quot;&nbsp;xsi:type=&quot;string&quot;&gt;thumbnail&lt;/argument&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;argument&nbsp;name=&quot;frame_callback&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;My_Module_Block_Adminhtml_Product_ThumbnailColumn&quot;&nbsp;xsi:type=&quot;string&quot;&gt;getThumbnail&lt;/item&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;item&nbsp;name=&quot;Magento\Backend\Block\Widget\Grid\Column&quot;&nbsp;xsi:type=&quot;string&quot;&gt;decorateDataWithVarienObject&lt;/item&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;/argument&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;argument&nbsp;name=&quot;sortable&quot;&nbsp;xsi:type=&quot;string&quot;&gt;&lt;/argument&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;argument&nbsp;name=&quot;filter&quot;&nbsp;xsi:type=&quot;string&quot;&gt;false&lt;/argument&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;argument&nbsp;name=&quot;renderer&quot;&nbsp;xsi:type=&quot;string&quot;&gt;My\Module\Block\Adminhtml\Product\ThumbnailColumn&lt;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;/block&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Add&nbsp;other&nbsp;columns&nbsp;here&nbsp;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Backend\Block\Widget\Grid\Export&quot;&nbsp;name=&quot;adminhtml.catalog.product.grid.export&quot;&nbsp;as=&quot;grid.export&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;argument&nbsp;name=&quot;exportTypes&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;csv&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;value&quot;&nbsp;xsi:type=&quot;string&quot;&gt;csv&lt;/item&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;item&nbsp;name=&quot;label&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;CSV&lt;/item&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;/item&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;item&nbsp;name=&quot;excel&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;item&nbsp;name=&quot;value&quot;&nbsp;xsi:type=&quot;string&quot;&gt;excel&lt;/item&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;item&nbsp;name=&quot;label&quot;&nbsp;xsi:type=&quot;string&quot;&nbsp;translate=&quot;true&quot;&gt;Excel&lt;/item&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;/item&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;/argument&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;/block&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/block&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/referenceContainer&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt; &lt;/page&gt; ```</pre><p>这个XML文件定义了Magento 2后台管理区域中产品列表的布局。我们在其中定义了一个My\Module\Block\Adminhtml\Product\ThumbnailColumn类的实例，并将其作为产品列表的一列进行渲染。我们还为这一列定义了标题、索引和渲染器。</p><p>最后，在Magento 2中注册你的模块并刷新缓存。</p><p>这样，Magento 2后台管理区域中的产品列表页面将包含一个缩略图列，其中显示了每个产品的缩略图。</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中，文本框组件用于在后台管理区域中添加文本框。这个组件可以用于添加或编辑商品、类别或CMS页面等。</p><p>下面是一个在后台管理区域中添加文本框的示例：</p><p>在你的Magento 2模块中创建一个布局文件，例如my_module_product_edit.xml。该文件定义了在商品编辑页面中添加文本框的布局。</p><pre class="brush:as3;toolbar:false">&lt;?xml&nbsp;version=&quot;1.0&quot;?&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;referenceBlock&nbsp;name=&quot;product_form&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&nbsp;class=&quot;Magento\Framework\View\Element\Html\Text&quot;&nbsp;name=&quot;my_module_product_text&quot;&nbsp;after=&quot;-&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;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;&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;My&nbsp;Custom&nbsp;Text&nbsp;Field&lt;/item&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;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;&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;&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;my_module_product.custom_text_field&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&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;/referenceBlock&gt; &lt;/body&gt;</pre><p>在布局文件中，我们使用Magento\Framework\View\Element\Html\Text类创建了一个文本框组件。这个组件有几个重要的属性：</p><p>label：指定文本框旁边显示的标签。</p><p>formElement：指定文本框的表单元素类型，可以是input、textarea或其他表单元素。</p><p>dataType：指定文本框的数据类型，可以是text、int、boolean等。</p><p>dataScope：指定文本框的数据存储位置。</p><p>在Magento 2中注册你的模块并刷新缓存。</p><p>现在，当你编辑一个商品时，你将看到一个新的文本框，它位于基本信息选项卡中，并包含在你的自定义属性组中。当你保存商品时，你的文本框的值将被保存到catalog_product_entity_varchar表中，其中attribute_id是你的自定义属性ID。</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中，input组件用于在表单中创建输入框。下面是一个简单的示例代码，演示如何在Magento 2中创建一个input组件：</p><pre class="brush:as3;toolbar:false">&lt;?php namespace&nbsp;Vendor\Module\Block; use&nbsp;Magento\Framework\View\Element\Template; class&nbsp;MyBlock&nbsp;extends&nbsp;Template { &nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;getMyInput() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$input&nbsp;=&nbsp;$this-&gt;getLayout()-&gt;createBlock(&#39;Magento\Framework\View\Element\Html\Text&#39;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&gt;setData([ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;name&#39;&nbsp;=&gt;&nbsp;&#39;my_input&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;id&#39;&nbsp;=&gt;&nbsp;&#39;my_input&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;class&#39;&nbsp;=&gt;&nbsp;&#39;my-input-class&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;value&#39;&nbsp;=&gt;&nbsp;&#39;Default&nbsp;Value&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$input-&gt;getHtml(); &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;">在上面的示例代码中，我们创建了一个名为&quot;MyBlock&quot;的自定义模板块，其中包含了一个名为&quot;getMyInput&quot;的公共方法。该方法使用Magento的布局系统来创建一个input组件，并设置了一些常用的属性，例如&quot;name&quot;、&quot;id&quot;和&quot;class&quot;。然后，它返回该组件的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;">在模板文件中，您可以使用以下方式来调用该方法：</p><pre class="brush:as3;toolbar:false">&lt;form&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;echo&nbsp;$block-&gt;getMyInput();&nbsp;?&gt; &lt;/form&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;">这将在表单中输出一个input元素，其名称为&quot;my_input&quot;，ID为&quot;my_input&quot;，类为&quot;my-input-class&quot;，默认值为&quot;Default Value&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>