chatgpt,aigc,云计算,大数据,php,java,go,javascript,python,mysql,redis,linux技术文件分享

magento2中的knockoutjs的使用与初始化详细讲解

Magento
magento, magento教程, magento二次开发, magento中文教程, php
27194 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>你好模型，视图，查看模型了解KnockoutJS的最快方法是一个基本的例子。首先，让我们创建以下 HTML 页面<pre class="brush:bash;toolbar:false">   <!DOCTYPE html> <html lang="en"> <head>     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>     <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>     </head> <body> <div id="main">     <h1></h1>      </div> </body> </html></pre>从 cloudflare CDN 加载 KnockoutJS 库从 jQuery 代码 CDN 加载 jQuery 库设置一个空的 DOM 节点结构您不需要从 CDN 加载 jQuery 和 KnockoutJS，但如果您这样做，则在本教程中它是最简单的。如果在浏览器中加载此页面，它将完全空白。那是因为我们需要添加创建视图模型并应用 KnockoutJS 绑定的 JavaScript 代码将视图代码添加到从视图模型读取的 HTML 页面解决其中的第一个问题，让我们将第三个javascript文件添加到我们的页面。我们将创建一个以以下内容命名的文件ko-init.js<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     viewModel = {         title:"Hello World",         content:"So many years of hello world"     };     ko.applyBindings(viewModel); });</pre> 然后使用第三个脚本标签添加到我们的页面。ko-init.js<pre class="brush:bash;toolbar:false"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>     <script type="text/javascript" src="ko-init.js"></script> 最后，更改 and 标记，使其包含以下属性。h1pdata-bind  <div id="main">     <h1 data-bind="text:title"></h1>     <p data-bind="text:content"> </div></pre>完成上述操作后，重新加载页面，您应该会看到标题和内容已呈现。<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     viewModel = {         title:"Hello World",         content:"So many years of hello world"     };      ko.applyBindings(viewModel); }); //File: ko-init.js viewModel = {     title:"Hello World",     content:"So many years of hello world" };     <div id="main">     <h1 data-bind="text:title"></h1>     <p data-bind="text:content"> </div> value = viewModel['title']; textNode = document.createTextNode(value); h1.appendChild(textNode);</pre><pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     var viewModelConstructor = function()     {         this.getTitle = function()         {             return "Hello Method World";         }        this.content = "So many years of hello world";             }     viewModel = new viewModelConstructor;     ko.applyBindings(viewModel); });</pre> 在这里，我们使用了一个javascript构造函数来创建一个简单的对象，并带有一个方法。如果我们更改视图以调用该方法，您将看到它按预期工作getTitlegetTitle<pre class="brush:bash;toolbar:false">   <div id="main">     <h1 data-bind="text:getTitle()"></h1>     <p data-bind="text:content"> </div></pre>考虑绑定参数的另一种方法是，它们是访问视图模型的值和方法的临时、有限的 JavaScript 范围。### 其他绑定虽然此示例很简单，但您可以开始了解这个基本构建块如何实现更复杂的视图逻辑。更新 DOM 的业务留给了 ings，更新模型的业务留给了纯非 DOM JavaScript 代码。data-bind你可以开始看到它与其他绑定的价值。例如，让我们在我们的theValueviewModelConstructor<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     var viewModelConstructor = function()     {         this.getTitle = function()         {             return "Hello World";         }        this.content = "So many years of hello world";                this.theValue = "2";     }     viewModel = new viewModelConstructor;     ko.applyBindings(viewModel);         });</pre>，然后添加具有新绑定的输入标记。<pre class="brush:bash;toolbar:false">   <div id="main">     <h1 data-bind="text:getTitle()"></h1>     <p data-bind="text:content">     <input type="text" data-bind="value:theValue"/>         </div></pre>重新加载页面，您将看到值为 .2<pre class="brush:bash;toolbar:false">data-bind="value:theValue"          <div id="main">     <h1 data-bind="text:getTitle()"></h1>     <p data-bind="text:content">     <select data-bind="value:theValue">         <option value="">-- Choose --</option>         <option value="1">First</option>         <option value="2">Second</option>                 <option value="3">Third</option>                     </select>       </div></pre>虽然这个例子很简单，但它背后的概念却不是。无需更改任何 javascript 应用程序代码，绑定允许我们更改 UI。value### 可观察量到目前为止，我们看到的是一个强大的客厅技巧。整洁，也许有用，但它只为KnockoutJS真正的“淘汰”功能——可观察量奠定了基础。同样，我们将通过一个例子进行深入研究。更改视图，使其与以下内容匹配<pre class="brush:bash;toolbar:false"> <div id="main">     <p data-bind="text:theValue">     <select data-bind="value:theValue">         <option value="">-- Choose --</option>         <option value="1">First</option>         <option value="2">Second</option>                 <option value="3">Third</option>                     </select>         <input type="text" data-bind="value:theValue"/>     <div>          <button id="button">Do It</button>     </div> </div></pre>并更改视图模型和绑定，使其与以下内容匹配。<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     var viewModelConstructor = function()     {          this.theValue = ko.observable("1");     }     window.viewModel = new viewModelConstructor;     ko.applyBindings(window.viewModel);         });</pre>如果您重新加载页面，您将看到我们已将的值绑定到 our and 标记。到目前为止，我们的观点没有什么新东西——这与我们以前所做的那种绑定相同。但是，您会注意到我们在视图模型中做了一些不同的事情。1<input/><pre class="brush:bash;toolbar:false">//File: ko-init.js this.theValue = ko.observable("1");</pre>我们没有设置为硬编码值或自定义函数，而是将值设置为 KnockoutJS 称之为可观察量的值。可观察量是一种特殊的吸气者和二传手。theValue如果你打开你的javascript控制台，并键入以下内容，你会看到我们可以通过将其作为函数调用来获取可观察量的值（可以通过控制台获得，因为我们将其定义为对象的全局对象）<pre class="brush:bash;toolbar:false">viewModelwindow > viewModel.theValue()     > "1"</pre>我们可以通过传入参数在可观察量上设置一个值。下面介绍了如何设置可观察量，然后获取可观察量的值。<pre class="brush:bash;toolbar:false">> viewModel.theValue("3") //... > viewModel.theValue() > "3"</pre>然而，可观察量的真正力量在于我们将可观察量绑定到的 DOM 节点会发生什么。尝试通过控制台更改观察器的值并观察浏览器窗口<pre class="brush:bash;toolbar:false">> viewModel.theValue("3"); > viewModel.theValue("2"); > viewModel.theValue("1"); > viewModel.theValue("10");</pre>更新可观察量的值时，绑定节点的值会实时更改。同样，作为开发人员，我们不必担心 DOM 节点如何更新——一旦我们在模型上设置了值，这个值就会自动反映在用户界面中。虽然它超出了本文的范围，但当我们的视图模型包含方法时，您可以看到它如何组合在一起形成复杂的 JavaScript 应用程序。<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     var viewModelConstructor = function()     {           this.theValue = ko.observable("1");         var that = this;         this.pickRandomValue = function(){             var val = Math.floor(Math.random() * (3));             that.theValue(val);         };     }     window.viewModel = new viewModelConstructor;     ko.applyBindings(window.viewModel);         });</pre>并且您使用 KnockoutJS 的事件绑定，例如click<pre class="brush:bash;toolbar:false">   <button data-bind="click:pickRandomValue">Do It</button></pre>我们将把解析作为读者的练习### 模板绑定另一个需要理解的重要绑定是 KnockoutJS 的模板绑定。考虑这样的视图模型<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){     var viewModelConstructor = function()     {           this.first = {             theTitle:ko.observable("Hello World"),             theContent:ko.observable("Back to Hello World")         };         this.second = {             theTitle:ko.observable("Goodbye World"),             theContent:ko.observable("We're sailing west now")                     };                 }     viewModel = new viewModelConstructor;     ko.applyBindings(viewModel);         });</pre>在这里，我们创建了一个标准视图模型，但具有嵌套的数据对象。如果将其与这样的视图相结合<pre class="brush:bash;toolbar:false"> <div id="main">     <div id="one" data-bind="template:{'name':'hello-world','data':first}"></div>     <div id="two" data-bind="template:{'name':'hello-world','data':second}">     </div>     <script type="text/html" id="hello-world">         <h1 data-bind="text:theTitle"></h1>         <p data-bind="text:theContent">     </script> </div></pre>模板绑定接受 javascript 对象作为参数<pre class="brush:bash;toolbar:false"> <div id="one" data-bind="template:{'name':'hello-world','data':first}"></div></pre>data 参数是我们想要用来渲染模板的视图模型的属性。模板的名称就是这样 — 要查找和呈现的模板名称。向系统添加命名模板的最基本方法是添加带有 of 的标记。<script/>typetext/html<pre class="brush:bash;toolbar:false"> <script type="text/html" id="hello-world">     <h1 data-bind="text:theTitle"></h1>     <p data-bind="text:theContent"> </script></pre>如果你以前从未见过这个，它可能看起来很奇怪/陌生，但许多现代JavaScript框架使用非标签作为将非渲染（但DOM可访问）内容添加到页面的一种方式。模板只是一组带有 KnockoutJS 绑定的标准 HTML 节点。text/javascript<script/>### 组件我们将要进行的最后一个绑定是组件绑定。组件是一种将 KnockoutJS 模板和 KnockoutJS 视图文件打包在一起的方法。这意味着您可以有一个相对简单的视图<pre class="brush:bash;toolbar:false">       <div data-bind="component:'component-hello-world'"></div></pre>这隐藏了已注册组件的复杂性。<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){         var viewModelConstructor = function()     {           this.message = "Hello World";     }       var theTemplate = "<h1 data-bind=\"text:message\"></h1>";         ko.components.register('component-hello-world', {         viewModel:viewModelConstructor,         template:theTemplate     });         ko.applyBindings();         });</pre> 组件对象的函数需要组件的名称，然后是 KnockoutJS 组件对象。组件对象是具有两个属性的 JavaScript 脚本对象。该属性需要一个视图模型构造函数，并且该属性应该是带有 KnockoutJS 模板的字符串。注册后，可以通过将组件的名称（作为字符串）传递到绑定中使用组件。registerviewModeltemplate<pre class="brush:bash;toolbar:false">   <div data-bind="component:'component-hello-world'"></div></pre>如果您不想使用语法 — KnockoutJS 使您能够根据组件名称插入具有自定义标记名称的组件。在您的视图/HTML 文件中尝试此操作data-bind<pre class="brush:bash;toolbar:false">   <component-hello-world></component-hello-world></pre>这只触及了KnockoutJS可能的表面。官方文档对组件绑定有一个很好的概述。### 自定义绑定我们今天要讨论的最后一个 KnockoutJS 功能是自定义绑定功能。KnockoutJS使javascript开发人员能够创建自己的绑定。例如，这里我们调用一个名为的自定义绑定，并向其传递 viewModel 的属性值。pulseStormHelloWorldmessage<pre class="brush:bash;toolbar:false">   <div data-bind="pulseStormHelloWorld:message"></div></pre>如果没有实现，KnockoutJS将忽略我们的绑定。相反，请尝试以下ko-init.js<pre class="brush:bash;toolbar:false">//File: ko-init.js jQuery(function(){         var viewModelConstructor = function()     {           this.message = "Hello World";     }       ko.bindingHandlers.pulseStormHelloWorld = {         update: function(element, valueAccessor){             jQuery(element).html('<h1>' + valueAccessor() + '</h1>');         }     };         ko.applyBindings(new viewModelConstructor);         });</pre> 要将自定义绑定添加到 KnockoutJS，我们需要做的就是向对象的对象添加一个属性。此属性的名称是我们绑定的名称。处理程序是带有方法的 JS 对象。每当调用绑定时，KnockoutJS 都会调用该方法 — 无论是在期间还是通过可观察量。kobinidngHandlersupdateupdateapplyBindings完成上述操作后，重新加载 HTML 页面，您将看到调用的自定义绑定。当然，这是一个微不足道的例子，但是使用自定义绑定，您可以让KnockoutJS做任何您的编程思维想到的事情。

magento2中的javascript初始化init方法

Magento
magento, magento教程, magento二次开发, magento中文教程, php
19275 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>Javascript 初始化方法我们将要讨论的Magento javascript init方法解决了几个不同的问题。首先，它们提供了一种标准机制来阻止将javascript直接嵌入到页面中。其次，它们提供了一种调用独立 RequireJS 模块（定义为）作为程序的方法。define第三，它们提供了一种向该程序传递服务器端生成的JSON对象的方法。第四，它们提供了一种方法来告诉该程序应该在哪些（如果有的话）DOM节点上运行。牢记这四个目标。如果您正在努力解决这些自定义框架功能背后的心智模型，它们可能会为您提供帮助。### 设置模块我们将使用 pestle 通过运行以下三个命令来创建以单个 URL 端点命名的模块Pulsestorm_JavascriptInitTutorial<pre class="brush:bash;toolbar:false">$ pestle.phar generate_module Pulsestorm JavascriptInitTutorial 0.0.1 $ pestle.phar generate_route Pulsestorm_JavascriptInitTutorial frontend pulsestorm_javascriptinittutorial $ pestle.phar generate_view Pulsestorm_JavascriptInitTutorial frontend pulsestorm_javascriptinittutorial_index_index Main content.phtml 1column $ php bin/magento module:enable Pulsestorm_JavascriptInitTutorial $ php bin/magento setup:upgrade</pre>任何通过Magento 2 for PHP MVC开发人员系列工作的人都应该熟悉这些命令。运行上述操作后，您应该能够在系统中访问以下URLhttp://magento.example.com/pulsestorm_javascriptinittutorial/并查看呈现的模板。app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml### 设置一个 RequireJS 模块现在我们已经设置了一个Magento模块，让我们做一个快速回顾并创建一个RequireJS模块。首先，创建以下文件//File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/web/example.js <pre class="brush:bash;toolbar:false">define([], function(){     alert("A simple RequireJS module");     return {};     });</pre>这是一个非常简单的 RequireJS 模块。由于模块在文件系统上的位置，以及Magento加载javascript文件的方式，该模块的名称/标识符是Pulsestorm_JavascriptInitTutorial/example接下来，更改的内容，使其与以下内容匹配。content.phtml#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false"><script type="text/javascript">     requirejs(['Pulsestorm_JavascriptInitTutorial/example'],function(example){         alert("Loaded");         console.log(example);     });  </script></pre>在这里，我们将创建一个具有单个模块依赖项的 RequireJS 程序。依赖项是我们刚刚创建的模块（）。加载Pulsestorm_JavascriptInitTutorial/examplehttp://magento.example.com/pulsestorm_javascriptinittutorial/系统中的 URL，您应该会看到警报。如果以上任何内容对您来说是陌生的，您可能需要查看我们的Magento 2和RequireJS文章。### X-Magento-Init我们要讨论的第一个初始化技术是方法。此初始化方法的最基本版本允许您将 RequireJS 模块作为程序运行。更改模板的内容，使其与以下内容匹配<script type="text/x-magento-init">content.phtml#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false"><div id="one" class="foo">     Hello World </div> <div id="two" class="foo">     Goodbye World </div>     <script type="text/x-magento-init">     {         "*": {             "Pulsestorm_JavascriptInitTutorial/example":{}         }     }         </script></pre>使用上述内容重新加载您的页面，您应该会看到我们文件中的声明。alertexample.js如果您以前从未见过此语法，它看起来可能有点奇怪。让我们把它一块一块地拆开。首先是标签<script/>#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false"><script type="text/x-magento-init">     //... </script></pre>此标签不是 javascript 标签。请注意该属性。当浏览器无法识别脚本类型标记中的值时，它将忽略该标记的内容。Magento（类似于其他现代JavaScript框架）利用这种行为来发挥其优势。虽然这超出了本教程的范围，但正在运行Magento javascript代码，它将扫描脚本标签。如果您想自己探索这个问题，这个堆栈交换问题和答案是一个很好的起点。type="text/x-magento-init"text/x-magento-init我们可以立即讨论的代码块的另一部分是以下对象x-magento-init#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false">{     "Pulsestorm_JavascriptInitTutorial/example":{}             }</pre>Magento将查看此对象的键，并将其（键）作为RequireJS模块包含在内。这就是加载脚本的内容。example.js您可能想知道为什么这是一个没有值的对象。您可能还想知道为什么整个事物是另一个对象的一部分，带有 a 作为键。*#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false">{     "*": {/*...*/} }</pre>在我们讨论这个问题之前，我们需要谈谈javascript组件。### Magento Javascript Components上面的例子将我们的 RequireJS 模块作为一个程序运行。这是有效的，Magento本身经常使用该方法将RequireJS模块作为程序调用。然而，真正的力量是能够创建一个Magento Javascript组件。x-magento-initx-magento-initMagento Javascript 组件是返回函数的 RequireJS 模块。Magento的系统代码将以特定的方式调用此函数，以公开额外的功能。如果这没有意义，请尝试更改 RequireJS 模块，使其与以下内容匹配。//File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/web/example.js <pre class="brush:bash;toolbar:false">define([], function () {     var mageJsComponent = function()     {         alert("A simple magento component.");     };     return mageJsComponent; });</pre>在这里，我们定义了一个函数并将其分配给一个名为 .然后，我们将其退回。mageJsComponent如果您在上述情况下重新加载页面，您应该会在警告框中看到一个简单的 Magento 组件。这可能看起来很愚蠢——如果Magento所做的只是调用它，那么返回一个函数有什么意义呢？你是对的，但那是因为我们遗漏了一些东西。尝试更改我们的模板，使其与以下内容匹配phtml#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false"><div id="one" class="foo">     Hello World </div> <div id="two" class="foo">     Goodbye World </div>     <script type="text/x-magento-init">     {         "*": {             "Pulsestorm_JavascriptInitTutorial/example":{"config":"value"}         }     }         </script></pre>并更改我们的 RequireJS 模块，使其看起来像这样//File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/web/example.js <pre class="brush:bash;toolbar:false">define([], function () {     var mageJsComponent = function(config)     {         alert("Look in your browser's console");         console.log(config);         //alert(config);     };     return mageJsComponent; });</pre>如果重新加载页面，应会看到更改的警告消息。如果您查看浏览器的 javascript 控制台，您还应该看到以下内容> Object {config:"value"}当我们创建一个 Magento Javascript 组件时，Magento 调用返回的函数并包含来自 .text/x-magento-init"Pulsestorm_JavascriptInitTutorial/example":{"config":"value"}        这就是为什么 RequireJS 模块名称是一个键 — 这个对象的值是我们想要传递给组件的对象。在这些示例中，这似乎是一个愚蠢的抽象。但是，在实际模块中，我们将使用 PHP 生成该 JSON。这个系统允许我们在模板中渲染JSON，然后将其传递给Javascript代码。这有助于避免直接使用 PHP 生成 Javascript 的问题，这可能导致代码非常混乱，并且很容易意外地滑入错误或安全问题。phtml在我们结束之前，还有最后一个功能要讨论。你会记得我们说过x-magento-initx-magento-init提供了一种向该程序传递服务器端生成的 JSON 对象的方法。提供了一种为该程序提供它应该在其上运行的 DOM 节点的方法。我们已经介绍了如何传入服务器端生成的 JSON — 但是 DOM 节点呢？更改您的 RequireJS 模块，使其如下所示//File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/web/example.js <pre class="brush:bash;toolbar:false">define([], function () {     var mageJsComponent = function(config, node)     {               console.log(config);         console.log(node);         //alert(config);     };     return mageJsComponent; });</pre>我们在这里所做的是向函数添加第二个参数。第二个参数将是我们希望程序运行的 DOM 节点。但是，如果您在上述情况下重新加载页面，您将在控制台中看到以下内容。mageJsComponent> Object {config:"value"}> falseMagento确实传递了一个值 - 但该值是。什么给？nodefalse好吧，Magento无法神奇地知道我们要在哪些DOM节点上运行。我们需要告诉它！更改模板，使其与以下内容匹配。phtml#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false"><div id="one" class="foo">Hello World</div> <div id="two" class="foo">     Goodbye World </div>     <script type="text/x-magento-init">     {         "#one": {             "Pulsestorm_JavascriptInitTutorial/example":{"config":"value"}                   }     }         </script></pre>在这里，我们已将更改为 .我们之前使用的实际上是一个特例，用于不需要在 DOM 节点上运行的程序。这个对象的键实际上是一个CSS / jQuery样式选择器，它告诉Magento程序应该在哪些DOM节点上运行。如果我们在上述情况下重新加载页面，我们将在您的控制台中看到以下内容*#one*Pulsestorm_JavascriptInitTutorial/example<pre class="brush:bash;toolbar:false">> Object {config: "value"} > <div id="one" class="foo">Hello World</div></pre>您不仅限于 ID，还可以在此处使用 CSS 类标识符。将其更改为#File: app/code/Pulsestorm/JavascriptInitTutorial/view/frontend/templates/content.phtml<pre class="brush:bash;toolbar:false">".foo": {     "Pulsestorm_JavascriptInitTutorial/example":{"config":"value"}           }</pre>您将在控制台中看到以下内容。<pre class="brush:bash;toolbar:false">> Object {"config":"value"} > <div id="one" class="foo">Hello World</div> > Object {"config":"value"} > <div id="two" class="foo">Goodbye World</div></pre>通过构建这种系统，Magento鼓励开发人员避免将他们的DOM节点硬编码到他们的RequireJS模块中。这意味着有一个系统级的路径来构建依赖于服务器端渲染的JSON的Javascript模块，并在任何任意DOM节点上运行。Magento模块开发人员总是有可能实现自己的系统来实现这种功能，但是Magento 2提供了一个标准，内置的方式来实现这一目标。x-magento-init### 数据法师初始化属性除了之外，还有另一种方法可以在特定的 DOM 节点上调用类似的功能，那就是属性。尝试将现有模板替换为以下内容<script type="text/x-magento-init">data-mage-initphtml<pre class="brush:bash;toolbar:false"><div data-mage-init='{"Pulsestorm_JavascriptInitTutorial/example": {"another":"example"}}'>A single div</div></pre>在上述操作到位的情况下重新加载页面，您应该会在 JavaScript 控制台中看到以下内容。 <pre class="brush:as3;toolbar:false">> Object {another: "example"}   > <div>A single div</div></pre>在这里，我们向特定的 div 添加了一个属性。此属性的值是一个 JSON 对象。与类似，这个对象的键是我们想要作为程序或Magento Javascript组件调用的RequireJS模块，该值是一个嵌套的JSON对象，作为参数传递到我们的Magento Javascript组件函数中。data-mage-initx-magento-initconfig<pre class="brush:bash;toolbar:false"><div data-mage-init='...'>A single div</div></pre>不幸的是，这是必需的。属性的值由严格的 JSON 解析器解析，这意味着 JSON 对象的引号必须是双引号——这意味着我们不能对属性使用双引号。虽然这在HTML5中技术上是可以的，但对于一定年龄的Web程序员来说，它带来了一些不好Microsoft首页记忆。data-mage-init 无论您最终在特定节点中使用组件还是属性，这两种技术都提供了一种标准的、系统统一的方式来将 Javascript 入口点引入您的页面。Magento的许多前端和后端UI功能都依赖于这种语法，因此即使您个人避开它们，了解这些系统的工作原理也是成为Magento 2开发人员的重要组成部分。<script type="text/x-magento-init">data-mage-init

使用Magento2布局layout将静态块添加到特定的CMS页面

Magento
magento, magento教程, magento二次开发, magento中文教程, php
18517 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>在处理项目时，我必须在每个CMS页面上CMS页面的标题和主要内容之间添加一个唯一的静态块。元素必须可以通过Magento管理面板完全自定义，并且必须易于在新的CMS页面上创建，易于修改和删除。由于该元素需要放置在主要内容之外，因此无法在Magento管理中使用CMS添加它。它必须使用Magento布局添加。这是我如何实现这一目标的。如您所知，Magento仅为CMS页面提供以下句柄：### 主页句柄和 404 页句柄所有 CMS 页面的句柄如果必须在主页上显示 CMS 块，我们将在本地.xml文件中使用主页句柄。同样，如果必须在所有CMS页面上显示相同的静态块，我们将对所有CMS页面使用句柄。但是，单个用户创建的CMS页面呢？### 前端开发人员的解决方案幸运的是，Magento使我们能够通过从Magento管理面板上的CMS编辑器编辑每个CMS页面来定义自定义布局。这样，CMS 页面的布局就可以使用存储在数据库中的特定页面的已定义值进行修改。首先，我们将创建一个静态块，我们要将其添加到特定的CMS页面中，我们将将其命名为static-block-1并对其应用一些简单的样式。<pre class="brush:bash;toolbar:false"><div class=”element-blue”>         <h3>Static Block 1</h3>         This is blue static element 1  </div></pre>接下来，我们将创建一个新的 CMS 页面，其中包含创建的静态块，该块将通过“设计”选项卡上的“布局更新 XML”添加，以及一个标题和一个段落。在本例中，我们将对所有 CMS 页面使用 1 列布局。<pre class="brush:bash;toolbar:false"><reference name="root">         <block type="cms/block" name="myelement">             <action method="setBlockId"><block_id>static-block-1</block_id></action>         </block> </reference></pre>最后，我们必须更新我们的模板文件并添加一行调用我们的元素的代码。由于我们对所有 CMS 页面都使用了 1 列布局，因此我们将修改 1column.phtml 模板文件。如果要将元素添加到使用其他模板（如 2 列左）的 CMS 页面，则需要修改这些文件。<pre class="brush:bash;toolbar:false">… <div class="page">         <?php echo $this->getChildHtml('header') ?>         <?php echo $this->getChildHtml('myelement') ?> …</pre>对于此示例，我创建了一个与第一个不同的附加静态块和两个额外的 CMS 页面 - 一个用于我创建的新元素，另一个用于没有任何布局更新，因此，它不会包含我们创建的任何元素。结果带有蓝色静态块的 CMS 页面 1：CMS page 1CMS 第 1 页的 HTML 代码：01-code-1带有绿色静态块的 CMS 页面 2：02-cms-2CMS 第 2 页的 HTML 代码：02-code-2CMS 第 3 页，我们没有在其 XML 中设置任何布局更新，因此它不显示任何创建的静态块。03-cms-3CMS 第 3 页的 HTML 代码：03-code-3好的、坏的和另一种选择尽管这是一个非常快速简单的解决方案，效果很好，但当您必须为要添加的每个元素执行这些相同的步骤时，即使在具有 6 或 7 个 CMS 页面的项目中也是如此，它也会变得乏味。

一篇文章详解magento2中的路由，路由定义，路由规则

Magento
magento, magento教程, magento二次开发, magento中文教程, php
20670 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>我们可以说Magento中的路由是最重要的部分之一。完整的应用程序（Magento 2）流程取决于处理URL请求和负责匹配和处理该请求的路由器类。本文介绍了Magento 2中的路由器流，并分析了默认安装附带的一些路由器。还将展示如何创建一个自定义路由器。将提到路由器如何匹配操作（控制器类），有关控制器的详细信息将在单独的文章中介绍。### 路由流首先，我们需要分析完整的路由流程，以便稍后可以更详细地了解每个部分。正如我们已经知道的，Magento 2创建了HTTP应用程序，其中类（启动方法）请求流将在其中启动。我们的流程从创建前端控制器开始：<pre class="brush:bash;toolbar:false">$frontController = $this->_objectManager->get('Magento\Framework\App\FrontControllerInterface');</pre>前端控制器负责遍历所有可用的路由器，并为当前请求匹配负责的路由器。稍后我们将详细介绍前端控制器。现在，要了解完整的流程，了解应用程序如何匹配路由器非常重要。路由器列表是在位于Magento\Framework\App的RouterList类中创建的（在Front Controller中调用用于在路由器上循环），该类负责路由器列表的排序和迭代。如果路由器负责当前请求，则路由器类负责匹配。让我们来看看Magento 2流程： index.php（运行引导程序并创建HTTP应用程序）→HTTP应用程序→FrontController →路由→控制器处理→等现在，我们将分析路由流的每个部分，以便更好地了解Magento 2中的路由。### 前端控制器与Magento 1相同，这是在HTTP应用程序启动（启动方法）时调用的入口路由点。它负责匹配负责当前请求的路由器。它位于lib/internal/Magento/Framework/App/FrontController.php下。你可以看到在HTTP启动方法中使用了FrontControllerInterface。让我们在代码中看一下：<pre class="brush:bash;toolbar:false">class Http implements \Magento\Framework\AppInterface {     public function launch()     {         ...             //Here Application is calling front controller and it's dispatch method         $frontController = $this->_objectManager->get('Magento\Framework\App\FrontControllerInterface');         $result = $frontController->dispatch($this->_request);         ...     } }</pre>现在，当我们知道如何以及何时调用前端控制器时，让我们看一下前端控制器类和调度方法本身：lib/internal/Magento/Framework/App/FrontController.php<pre class="brush:bash;toolbar:false">class FrontController implements FrontControllerInterface {     public function dispatch(RequestInterface $request)     {         \Magento\Framework\Profiler::start('routers_match');         $routingCycleCounter = 0;         $result = null;         while (!$request->isDispatched() && $routingCycleCounter++ < 100) {             /** @var \Magento\Framework\App\RouterInterface $router */             foreach ($this->_routerList as $router) {                 try {                     $actionInstance = $router->match($request);                     if ($actionInstance) {                         $request->setDispatched(true);                         $actionInstance->getResponse()->setNoCacheHeaders();                         $result = $actionInstance->dispatch($request);                         break;                     }                 } catch (\Magento\Framework\Exception\NotFoundException $e) {                     $request->initForward();                     $request->setActionName('noroute');                     $request->setDispatched(false);                     break;                 }             }         }         \Magento\Framework\Profiler::stop('routers_match');         if ($routingCycleCounter > 100) {             throw new \LogicException('Front controller reached 100 router match iterations');         }         return $result;     } }</pre>正如我们所看到的，调度方法将遍历所有路由器（启用，我们稍后将在路由器配置中介绍这一点），直到一个路由器匹配并调度请求（$request→setDispatched（true）;)或工艺路线周期计数器超过 100。路由器可以匹配，但是如果没有调度，它将重复环路槽路由器（向前操作）。此外，路由器可以重定向和调度，也可以匹配和处理。路由器列表类在请求流中解释。现在，我们可以继续查看路由器匹配（匹配方法）的工作原理以及路由器到底是什么。### 路由器简而言之，路由器是负责匹配和处理URL请求的PHP类。默认情况下，Magento框架和Magento核心中有一些路由器;Base、DefaultRouter、CMS 和 UrlRewrite。我们将涵盖所有这些内容，解释它们的目的以及它们的工作原理。路由器正在实现路由器接口。现在，让我们看一下默认路由器的流程：基本路由器→ CMS 路由器→ url重写路由器→默认路由器（这是路由器循环 – FrontController：:d ispatch（））### 基础路由器它位于lib/internal/Magento/Framework/App/Router/Base.php，它是循环中的第一个，如果你是Magento 1开发人员，你知道它是标准路由器。匹配方法将解析请求和匹配操作，在第二种方法中，它将设置模块前端名称、控制器路径名、操作名称、控制器模块和路由名称。在基本路由器上，标准Magento URL（前端名称/操作路径/操作/参数1/等参数/）匹配。### 内容管理系统路由器CMS路由器位于app/code/Magento/Cms/Controller/Router.php中，用于处理CMS页面，它将模块名称（模块前端名称）设置为“cms”，控制器名称（控制器路径名称）设置为“页面”，操作名称设置为“view” – app/code/Magento/Cms/Controller/Page/View.php控制器。设置基本控制器的格式后，它将设置页面 ID 并转发它，但不会调度它。转发意味着它将中断当前的路由器环路并再次启动环路（它最多可以这样做 100 次）。该路由器环路将匹配基本路由器，该路由器将在 Cms/控制器/页面中激活视图控制器并显示保存的页面 ID（根据 url 找到的页面 ID）。### 网址重写路由器在Magento 2中，UrlRewrite有自己的路由器，如果你熟悉Magento 1，那么你就会知道Url Rewrite是标准路由器的一部分。它位于：app/code/Magento/UrlRewrite/Controller/Router.php它使用Url Finder来获取与数据库中的URL匹配的url重写：<pre class="brush:bash;toolbar:false">$rewrite = $this->urlFinder->findOneByData(                     [                         UrlRewrite::ENTITY_TYPE => $oldRewrite->getEntityType(),                         UrlRewrite::ENTITY_ID => $oldRewrite->getEntityId(),                         UrlRewrite::STORE_ID => $this->storeManager->getStore()->getId(),                         UrlRewrite::IS_AUTOGENERATED => 1,                     ]                 );</pre>它将像 CMS 路由器一样转发动作。### 默认路由器它位于lib/internal/Magento/Framework/App/Router/DefaultRouter中.php它是路由器循环中的最后一个。当所有其他路由器不匹配时，使用它。在Magento 2中，我们可以为“未找到”页面创建自定义句柄以显示自定义内容。以下是 DefaultRouter 中没有路由处理程序列表的循环：<pre class="brush:bash;toolbar:false">foreach ($this->noRouteHandlerList->getHandlers() as $noRouteHandler) {             if ($noRouteHandler->process($request)) {                 break;             }         }</pre>### 自定义路由器（带示例）前端控制器将遍历 routersList 中的所有路由器（从 routes.xml 中的配置创建），因此我们需要通过在 di.xml 模块中添加我们对新路由器的配置，在 lib/internal/Magento/Framework/App/RouterList 中添加自定义路由器.php。我们将创建一个新模块（我们称之为Inchoo/CustomRouter），然后我们将在routersList中添加新的路由器，最后，创建路由器类。自定义路由器只是一个示例，您可以在其中了解如何匹配和转发要匹配的基本路由器的请求。首先，我们需要为位于app/code/Inchoo/CustomRouter中的模块创建文件夹结构，然后我们将在etc文件夹中创建模块.xml并在模块根目录中创建composer.json，其中包含模块信息。现在，我们可以通过在 etc/前端文件夹中向 di.xml 添加配置来创建自定义路由器，因为我们只想为前端提供自定义路由器。最后，我们将在控制器文件夹中创建路由器.php，其中包含用于匹配路由器的逻辑。我们将搜索 URL 并检查 URL 中是否有特定单词，然后，根据该单词，我们将设置模块前端名称、控制器路径名称、操作名称，然后转发基本控制器的请求。我们将搜索两个词：“examplerouter”和“exampletocms”。在“examplerouter”匹配中，我们将转发到基本路由器匹配格式（通过将模块前端名称设置为“inchootest”，控制器路径名称设置为“test”，操作名称设置为“test”），在“exampletocms”上，我们将转发到基本路由器以显示“关于我们”页面。di.xml（位于 etc/前端）<pre class="brush:bash;toolbar:false"><?xml version="1.0"?>  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">     <type name="Magento\Framework\App\RouterList">         <arguments>             <argument name="routerList" xsi:type="array">                 <item name="inchoocustomrouter" xsi:type="array">                     <item name="class" xsi:type="string">Inchoo\CustomRouter\Controller\Router</item>                     <item name="disable" xsi:type="boolean">false</item>                     <item name="sortOrder" xsi:type="string">22</item>                 </item>             </argument>         </arguments>     </type> </config> <?php namespace Inchoo\CustomRouter\Controller;   /**  * Inchoo Custom router Controller Router  *  * @author      Zoran Salamun <zoran.salamun@inchoo.net>  */ class Router implements \Magento\Framework\App\RouterInterface {     /**      * @var \Magento\Framework\App\ActionFactory      */     protected $actionFactory;       /**      * Response      *      * @var \Magento\Framework\App\ResponseInterface      */     protected $_response;       /**      * @param \Magento\Framework\App\ActionFactory $actionFactory      * @param \Magento\Framework\App\ResponseInterface $response      */     public function __construct(         \Magento\Framework\App\ActionFactory $actionFactory,         \Magento\Framework\App\ResponseInterface $response     ) {         $this->actionFactory = $actionFactory;         $this->_response = $response;     }       /**      * Validate and Match      *      * @param \Magento\Framework\App\RequestInterface $request      * @return bool      */     public function match(\Magento\Framework\App\RequestInterface $request)     {         /*          * We will search “examplerouter” and “exampletocms” words and make forward depend on word          * -examplerouter will forward to base router to match inchootest front name, test controller path and test controller class          * -exampletocms will set front name to cms, controller path to page and action to view          */         $identifier = trim($request->getPathInfo(), '/');         if(strpos($identifier, 'exampletocms') !== false) {             /*              * We must set module, controller path and action name + we will set page id 5 witch is about us page on              * default magento 2 installation with sample data.              */             $request->setModuleName('cms')->setControllerName('page')->setActionName('view')->setParam('page_id', 5);         } else if(strpos($identifier, 'examplerouter') !== false) {             /*              * We must set module, controller path and action name for our controller class(Controller/Test/Test.php)              */             $request->setModuleName('inchootest')->setControllerName('test')->setActionName('test');         } else {             //There is no match             return;         }           /*          * We have match and now we will forward action          */         return $this->actionFactory->create(             'Magento\Framework\App\Action\Forward',             ['request' => $request]         );     } }</pre>routes.xml (located in etc/frontend)<pre class="brush:bash;toolbar:false"><?xml version="1.0"?>   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">     <router id="standard">         <route id="inchootest" frontName="inchootest">             <module name="Inchoo_CustomRouter" />         </route>     </router> </config></pre> Test.php (test controller action class) <pre class="brush:bash;toolbar:false"><?php /**  * Copyright © 2015 Inchoo d.o.o.  * created by Zoran Salamun(zoran.salamun@inchoo.net)  */ namespace Inchoo\CustomRouter\Controller\Test;   class Test extends \Magento\Framework\App\Action\Action {     /**      * Listing all images in gallery      *  -@param gallery id      */     public function execute()     {         die("Inchoo\\CustomRouter\\Controller\\Test\\Test controller execute()");     } }</pre> 您可以在以下位置查看示例模块：https://github.com/zoransalamun/magento2-custom-router安装：首先将存储库添加到作曲家配置：<pre class="brush:bash;toolbar:false">composer config repositories.inchoocustomrouter vcs git@github.com:zoransalamun/magento2-custom-router.git</pre>需要带有作曲家的新包： <pre class="brush:bash;toolbar:false">composer require inchoo/custom-router:dev-master</pre>启用 Inchoo 自定义路由器模块 <pre class="brush:bash;toolbar:false">php bin/magento module:enable Inchoo_CustomRouter</pre>刷新所有内容： <pre class="brush:bash;toolbar:false">php bin/magento setup:upgrade</pre>

magento2控制器详解

Magento
magento, magento教程, magento二次开发, magento中文教程, php
15268 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>Magento 2中的控制器，就像其他PHP MVC框架一样，是Mvc流的重要组成部分。例如，在Magento 2中，控制器有很多变化;与Magento 1相比，它们的结构和工作方式。如果您熟悉Magento 1控制器，那么您就会知道它们可以具有多个操作（类方法）。在Magento 2中，控制器只有一个方法（执行）将由前端控制器调用。本文介绍控制器基础知识、匹配流、控制器类型（管理员和前端）、现有控制器上的更改、创建自定义控制器的说明以及如何创建几个控制器的示例。### 控制器 控制器是位于模块控制器文件夹中的类，负责特定的 URL 或 URL 组。它与Magento 1中的控制器不同，因为它只有一个调用方法（在Magento 1中，我们可以根据需要使用）。所有需要的数据都通过对象管理器的 DI 填充。对于每个操作，我们都有一个带有执行方法的控制器类。当路由器与控制器操作类匹配时，将调用 Execute 方法，它负责将响应返回给前端控制器。所有控制器都在扩展\Magento\Framework\App\Action\Action类，该类具有调度方法，该方法将在控制器中调用执行方法，但我们稍后将介绍流程。有两种控制器类型：前端和管理员。它们具有类似的行为，但管理员有其他方法进行权限检查。控制器以特定方式构建，因此可以匹配。用于匹配的 URL 结构为：www.maxiaoke.com/frontName/action 路径/操作类/frontName – 它在路由.xml配置中设置，并且具有唯一值，将由路由器匹配操作路径 – 控制器文件夹中的文件夹名称，默认为索引动作类 – 我们称之为控制器的操作类，默认为索引现在，我们将通过动作控制器方法并解释它们的用途。### 执行方法此方法是“第一个”称为控制器操作类，它继承自每个控制器类扩展的\Magento\Framework\App\Action\Action。它由\Magento\Framework\App\Action\Action：:d ispatch（）方法调用。在这种方法中，我们应该拥有所有的控制器逻辑（当然，我们可以在其他方法中使用逻辑，但执行方法将调用它们），它将返回响应（主要是呈现的页面）。\Magento\Framework\App\Action\Action这是主要的Magento框架操作类，每个控制器都必须扩展此类（管理控制器正在扩展\Magento\后端\App\Action，它扩展了\Magento\Framework\App\Action\Action）。重要的是，每个控制器都扩展此类以继承所需的方法，并允许前端控制器调用调度方法（将调用执行方法）。此方法将首先由Front Controller（Magento\Framework\App\FrontController）调用<pre class="brush:bash;toolbar:false">Magento\Framework\App\FrontController：:d ispatch（） – 在我们的 Action 类中调用 dispatch： $result = $actionInstance->dispatch($request);</pre>请务必了解 Action 类中的调度方法用于前端控制器。对于管理控制器，调度方法被重写（在\Magento\后端\App\Action中），因此它可以检查是否允许用户访问。我们来分析一下我们的调度方法：<pre class="brush:bash;toolbar:false">/**      * Dispatch request      *      * @param RequestInterface $request      * @return ResponseInterface      * @throws NotFoundException      */     public function dispatch(RequestInterface $request)     {         $this->_request = $request;         $profilerKey = 'CONTROLLER_ACTION:' . $request->getFullActionName();         $eventParameters = ['controller_action' => $this, 'request' => $request];         $this->_eventManager->dispatch('controller_action_predispatch', $eventParameters);         $this->_eventManager->dispatch('controller_action_predispatch_' . $request->getRouteName(), $eventParameters);         $this->_eventManager->dispatch(             'controller_action_predispatch_' . $request->getFullActionName(),             $eventParameters         );         \Magento\Framework\Profiler::start($profilerKey);           $result = null;         if ($request->isDispatched() && !$this->_actionFlag->get('', self::FLAG_NO_DISPATCH)) {             \Magento\Framework\Profiler::start('action_body');             $result = $this->execute();             \Magento\Framework\Profiler::start('postdispatch');             if (!$this->_actionFlag->get('', self::FLAG_NO_POST_DISPATCH)) {                 $this->_eventManager->dispatch(                     'controller_action_postdispatch_' . $request->getFullActionName(),                     $eventParameters                 );                 $this->_eventManager->dispatch(                     'controller_action_postdispatch_' . $request->getRouteName(),                     $eventParameters                 );                 $this->_eventManager->dispatch('controller_action_postdispatch', $eventParameters);             }             \Magento\Framework\Profiler::stop('postdispatch');             \Magento\Framework\Profiler::stop('action_body');         }         \Magento\Framework\Profiler::stop($profilerKey);         return $result ?: $this->_response;     }</pre>如我们所见，我们的调度方法将从上下文中返回结果或响应。它将检查请求是否已调度，然后在扩展\Magento\Framework\App\Action\Action的控制器操作类中调用执行方法：$result = $this→execute();在我们的行动类中，我们还需要两种更重要的方法：_forward 和 _redirect。让我们解释一下这些方法：<pre class="brush:bash;toolbar:false">FrontController：:d ispatch（） while (!$request->isDispatched() && $routingCycleCounter++ < 100) {             /** @var \Magento\Framework\App\RouterInterface $router */             foreach ($this->_routerList as $router) {                 try {                     $actionInstance = $router->match($request);</pre> 它将首先匹配路由器，如上面的代码所示，路由器匹配将返回操作类（\Magento\Framework\App\ActionFactory）实例。之后，前端控制器将在操作类实例上调用调度方法：$result = $actionInstance->dispatch($request);由于我们已经介绍了调度方法，它将调用操作类执行方法：$result = $this->execute();这就是应用程序流进入我们的操作类执行方法的方式。管理员和前端控制器之间的区别这两个控制器之间的主要区别在于管理控制器中的附加检查和其他方法。两个控制器最终都会扩展 \Magento\Framework\App\Action\Action 类，但管理控制器扩展 \Magento\Backend\App\Action 类，该类扩展 \Magento\Framework\App\Action\Action。在管理控制器调度中，重写重定向和重写方法以提供检查 ACL（访问控制列表）的逻辑。### 管理控制器它扩展了\Magento\Backend\App\Action类，并具有_isAllowed检查访问控制的方法。在调度方法中，它将检查是否允许用户访问当前 URL，并将重定向到登录（如果不允许用户），或者它将设置状态为 403（禁止）的响应：<pre class="brush:bash;toolbar:false">public function dispatch(\Magento\Framework\App\RequestInterface $request)     {         if (!$this->_processUrlKeys()) {             return parent::dispatch($request);         }           if ($request->isDispatched() && $request->getActionName() !== 'denied' && !$this->_isAllowed()) {             $this->_response->setStatusHeader(403, '1.1', 'Forbidden');             if (!$this->_auth->isLoggedIn()) {                 return $this->_redirect('*/auth/login');             }             $this->_view->loadLayout(['default', 'adminhtml_denied'], true, true, false);             $this->_view->renderLayout();             $this->_request->setDispatched(true);             return $this->_response;         }           if ($this->_isUrlChecked()) {             $this->_actionFlag->set('', self::FLAG_IS_URLS_CHECKED, true);         }           $this->_processLocaleSettings();           return parent::dispatch($request);     }</pre>如果要创建管理控制器并想要添加一些自定义权限，则需要在_isAllowed方法中添加访问签入，例如：<pre class="brush:bash;toolbar:false">protected function _isAllowed() {      return $this->_authorization->isAllowed('Magento_EncryptionKey::crypt_key'); }</pre>### 现有控制器上的更改要更改现有控制器，有几种方法可以更改它们。您可以通过首选项，插件或在Magento 1之后/之前使用“旧”样式来做到这一点。首选项将使用您的控制器代码更改完整的控制器（我们可以将其称为完全重写）。插件将仅更改所需的受控方法。最后，之后和之前将更改自定义前端名称的控制器位置。示例是如何在管理区域添加新控制器：<pre class="brush:bash;toolbar:false"><router id="admin">         <route id="catalog" frontName="catalog">             <module name="Magento_Catalog" before="Magento_Backend" />         </route>     </router></pre>### 操作包装类动作包装类是控制器文件夹中的一个类，它扩展了Magento\Framework\App\Action\Action，然后我们的操作类扩展了该操作包装器。如果您有多个操作类的通用逻辑，那么我们将在操作包装器类中编写逻辑，并将其用于我们需要的每个操作类。例如，让我们看看Magento\Catalog\Controller\Product 它是动作包装器类，它用于位于Catalog\Controller\*文件夹中的许多动作类（动作类：Magento\Catalog\Controller\Product\Compare，Magento\Catalog\Controller\Product\Gallery等），它们都使用负责通过帮助程序加载产品的_initProduct。<pre class="brush:bash;toolbar:false">/**  * Product controller.  *  * Copyright © 2015 Magento. All rights reserved.  * See COPYING.txt for license details.  */ namespace Magento\Catalog\Controller;   use Magento\Catalog\Controller\Product\View\ViewInterface; use Magento\Catalog\Model\Product as ModelProduct;   abstract class Product extends \Magento\Framework\App\Action\Action implements ViewInterface {     /**      * Initialize requested product object      *      * @return ModelProduct      */     protected function _initProduct()     {         $categoryId = (int)$this->getRequest()->getParam('category', false);         $productId = (int)$this->getRequest()->getParam('id');           $params = new \Magento\Framework\DataObject();         $params->setCategoryId($categoryId);           /** @var \Magento\Catalog\Helper\Product $product */         $product = $this->_objectManager->get('Magento\Catalog\Helper\Product');         return $product->initProduct($productId, $this, $params);     } }</pre>### 如何创建自定义控制器在 etc/frontend 或 etc/adminhtml 文件夹中创建路由.xml（第一个用于前端，第二个用于管理控制器）。在 routes.xml 中添加控制器的自定义配置，例如： – 路由器：ID – 标准（前端）/管理员– 路由：ID – 您的唯一路由 ID– 路由：frontName – URL 中的唯一名称，这是基本路由器（www.inchootest.net/frontName/actionpath/actionclass/）中 URL 的第一部分 – 模块名称 – 您的模块名称按照上面的 url 结构创建操作类：控制器/操作路径/操作类.php示例 – 管理员和前端控制器我们将创建用于自定义控制器演示的示例模块。所以首先，让我们创建一个模块：module.xml：<pre class="brush:bash;toolbar:false"><?xml version="1.0"?>  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">     <module name="Inchoo_CustomControllers" setup_version="2.0.0"></module> </config> etc/前端/路由.xml – 前端的路由配置;为了演示，我们将“InchooFrontTest”作为frontname（域名后面URL的一部分 - 例如：www.inchootest.net/inchoofronttest/） <?xml version="1.0"?>  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">     <router id="standard">         <route id="inchootestfrontend" frontName="inchoofronttest">             <module name="Inchoo_CustomControllers" />         </route>     </router> </config> etc/adminhtml/routes.xml – 管理员的路由配置，为了演示，我们将匹配“InchooadminTest”作为frontname（/admin/之后URL的一部分） <?xml version="1.0"?>  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">     <router id="admin">         <route id="inchooadmintest" frontName="inchooadmintest">             <module name="Inchoo_CustomControllers" before="Magento_Backend" />         </route>     </router> </config></pre>现在，我们将为两个控制器配置创建操作类。在前端，让我们为 url siteurl/inchoofronttest/demo/sayhello/ 创建操作路径和操作类。您可以看到我们在控制器文件夹中需要演示文件夹（这称为操作路径），在该文件夹中我们需要 Sayhello.php控制器操作类：<pre class="brush:bash;toolbar:false"><?php /**  * Copyright © 2015 Inchoo d.o.o.  * created by Zoran Salamun(zoran.salamun@inchoo.net)  */ namespace Inchoo\CustomControllers\Controller\Demonstration;   class Sayhello extends \Magento\Framework\App\Action\Action {     /**      * say hello text      */     public function execute()     {         die("Hello ;) - Inchoo\\CustomControllers\\Controller\\Demonstration\\Sayhello - execute() method");     } }</pre>对于管理控制器，让我们匹配网址siteurl/admin/inchooadmintest/demo/sayadmin/。为此，我们需要 Controller/Adminhtml 中的演示文件夹，在该操作类中，我们需要创建 Sayadmin.php<pre class="brush:bash;toolbar:false"><?php /**  * Copyright © 2015 Inchoo d.o.o.  * created by Zoran Salamun(zoran.salamun@inchoo.net)  */ namespace Inchoo\CustomControllers\Controller\Adminhtml\Demonstration;   class Sayadmin extends \Magento\Backend\App\Action {     /**      * say admin text      */     public function execute()     {         die("Admin ;) - Inchoo\\CustomControllers\\Controller\\Adminhtml\\Demonstration\\Sayadmin - execute() method");     } }</pre><pre class="brush:bash;toolbar:false">php bin/magento setup:upgrade php bin/magento module:enable Inchoo_CustomControllers php bin/magento setup:upgrade</pre>

在Magento2中创建一个新的自定义运输方式

Magento
magento, magento教程, magento二次开发, magento中文教程, php
22589 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>在这篇文章中，我们将演示如何使用运输方法创建Magento 2模块。如果您已经熟悉Magento 1，那么所有示例都将非常清楚。创建运输方式非常简单，所以让我们举个例子。首先，您需要创建一个Magento模块。您应该创建目录结构，如下面的屏幕截图所示：Magento 2模块二极管结构创建模块后，您应该使用 shell 脚本启用模块：<pre class="brush:bash;toolbar:false">php -f /bin/magento module:enable Inchoo_Shipping</pre>此外，您可以使用命令检查是否启用模块（此脚本将打印所有已启用模块的列表）： <pre class="brush:bash;toolbar:false">php -f /bin/magento module:status</pre>让我们从一个处理运输方法的类开始。首先，运输方法应在文件配置.xml中定义，如下面的屏幕截图所示。没有它，它就无法工作。xml 中的主节点是“默认”节点，节点“承运人”的子节点应与运输类“Inchoo\Shipping\Model\Carrier\Example”中的属性 $_code 具有相同的名称。<pre class="brush:bash;toolbar:false"><?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">     <default>         <carriers>             <example>                 <active>1</active>                 <sallowspecific>0</sallowspecific>                 <model>Inchoo\Shipping\Model\Carrier\Example</model>                 <name>Inchoo Example Shipping</name>                 <price>15.00</price>                 <title>Inchoo Example</title>                 <type>I</type>                 <specificerrmsg>This shipping method is not available. To use this shipping method, please contact us.</specificerrmsg>             </example>         </carriers>     </default> </config></pre>在我们的配置中.xml您会注意到XML节点“模型”，它定义了php类“Inchoo\Shipping\Model\Carrier\Example”。此型号类按运输方式收费。在此类中应实现所有用于运输计算的逻辑。此外，每种运输方式都应该在管理中具有配置选项。您可以通过 system.xml 文件添加运输方式选项。示例如下：<pre class="brush:bash;toolbar:false"><?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">     <system>         <section id="carriers" translate="label" type="text" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">             <group id="example" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">                 <label>Inchoo Example</label>                 <field id="active" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Enabled</label>                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>                 </field>                 <field id="name" translate="label" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">                     <label>Method Name</label>                 </field>                 <field id="price" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Price</label>                     <validate>validate-number validate-zero-or-greater</validate>                 </field>                 <field id="handling_type" translate="label" type="select" sortOrder="7" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Calculate Handling Fee</label>                     <source_model>Magento\Shipping\Model\Source\HandlingType</source_model>                 </field>                 <field id="handling_fee" translate="label" type="text" sortOrder="8" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Handling Fee</label>                     <validate>validate-number validate-zero-or-greater</validate>                 </field>                 <field id="sort_order" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Sort Order</label>                 </field>                 <field id="title" translate="label" type="text" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">                     <label>Title</label>                 </field>                 <field id="sallowspecific" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Ship to Applicable Countries</label>                     <frontend_class>shipping-applicable-country</frontend_class>                     <source_model>Magento\Shipping\Model\Config\Source\Allspecificcountries</source_model>                 </field>                 <field id="specificcountry" translate="label" type="multiselect" sortOrder="91" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Ship to Specific Countries</label>                     <source_model>Magento\Directory\Model\Config\Source\Country</source_model>                     <can_be_empty>1</can_be_empty>                 </field>                 <field id="showmethod" translate="label" type="select" sortOrder="92" showInDefault="1" showInWebsite="1" showInStore="0">                     <label>Show Method if Not Applicable</label>                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>                 </field>                 <field id="specificerrmsg" translate="label" type="textarea" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">                     <label>Displayed Error Message</label>                 </field>             </group>         </section>     </system> </config></pre>发货类别应类似于以下示例：<pre class="brush:bash;toolbar:false"><?php namespace Inchoo\Shipping\Model\Carrier;   use Magento\Quote\Model\Quote\Address\RateRequest; use Magento\Shipping\Model\Rate\Result;   class Example extends \Magento\Shipping\Model\Carrier\AbstractCarrier implements     \Magento\Shipping\Model\Carrier\CarrierInterface {     /**      * @var string      */     protected $_code = 'example';       /**      * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig      * @param \Magento\Quote\Model\Quote\Address\RateResult\ErrorFactory $rateErrorFactory      * @param \Psr\Log\LoggerInterface $logger      * @param \Magento\Shipping\Model\Rate\ResultFactory $rateResultFactory      * @param \Magento\Quote\Model\Quote\Address\RateResult\MethodFactory $rateMethodFactory      * @param array $data      */     public function __construct(         \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,         \Magento\Quote\Model\Quote\Address\RateResult\ErrorFactory $rateErrorFactory,         \Psr\Log\LoggerInterface $logger,         \Magento\Shipping\Model\Rate\ResultFactory $rateResultFactory,         \Magento\Quote\Model\Quote\Address\RateResult\MethodFactory $rateMethodFactory,         array $data = []     ) {         $this->_rateResultFactory = $rateResultFactory;         $this->_rateMethodFactory = $rateMethodFactory;         parent::__construct($scopeConfig, $rateErrorFactory, $logger, $data);     }       /**      * @return array      */     public function getAllowedMethods()     {         return ['example' => $this->getConfigData('name')];     }       /**      * @param RateRequest $request      * @return bool|Result      */     public function collectRates(RateRequest $request)     {         if (!$this->getConfigFlag('active')) {             return false;         }           /** @var \Magento\Shipping\Model\Rate\Result $result */         $result = $this->_rateResultFactory->create();           /** @var \Magento\Quote\Model\Quote\Address\RateResult\Method $method */         $method = $this->_rateMethodFactory->create();           $method->setCarrier('example');         $method->setCarrierTitle($this->getConfigData('title'));           $method->setMethod('example');         $method->setMethodTitle($this->getConfigData('name'));           /*you can fetch shipping price from different sources over some APIs, we used price from config.xml - xml node price*/         $amount = $this->getConfigData('price');           $method->setPrice($amount);         $method->setCost($amount);           $result->append($method);           return $result;     } }</pre>为了正确地为运输方法编写php类，您应该尊重一些Magento 2规则。每个Magento 2运输类都应该扩展“\Magento\Shipping\Model\Carrier\AbstractCarrier”并实现“\Magento\Shipping\Model\Carrier\CarrierInterface”。在运输模型中，您需要创建至少两个 php 方法：“getAllowedMethods”和“collectRates”。抽象类和接口需要此方法。此外，您应该使用值定义属性 $_code。在我们的例子中，这就是“例子”。它与配置.xml和节点结构有关。Php 方法 “collectRates” 接受参数 “$request”，它是类 “Magento\Quote\Model\Quote\Address\RateRequest” 的实例。此类包含有关购物车/报价、重量、送货地址等物料的所有信息。在此方法中，您可以实现运费计算的所有逻辑。通过此方法，您可以调用其他服务进行运费计算，但这取决于您的集成。您可以在下面的屏幕截图中看到更多信息。装运请求对象如果您按照我写的格式实现了所有内容，您将能够在结帐时看到运输方式。

如何使用requireJS在Magento2中添加自定义javascript

Magento
magento, magento教程, magento二次开发, magento中文教程, php
25027 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>Magento 2在javascript中带来了一些新功能。其中一个是“requireJS”（javascript文件加载器），第二个是“jQuery”，一个非常流行的js库。最大的好处之一是使用requireJS，这意味着Magento 2已经为即将推出的HTTP2协议做好了准备。在接下来的几个步骤中，我们将解释如何创建有效的 javascript 代码以在 requireJS 中使用。让我们从一个例子开始。像往常一样，我们需要创建一个有效的Magento 2模块，如下面的屏幕所示：<img src="/uploads/images/20230822/0431acdef3f69c10d2695b308ad0f925.png" title="3.png" alt=""/>您可能会注意到Magento 1和Magento 2之间的一些差异，因为所有javascript，layout和template phtml文件现在都属于该模块。此外，我们的javascript文件位于位于目录路径上的模块中：“app/code/Inchoo/Js/view/frontend/web/js/”。在这个例子中，我们创建了两个js文件：“inchoo.js”和“logger.js”看看我们的javascript代码，它适用于requireJS环境。 <pre class="brush:bash;toolbar:false">define([     "jquery",     "logger",     "jquery/ui" ], function($, logger) {     "use strict";     logger.log('inchoo.js is loaded!!');     logger.log(logger);           //creating jquery widget         $.widget('inchoo.js', {             _create: function() {                   //options which you can pass from js.phtml file in json format                 logger.log(this.options);                   //access to element p#test                 logger.log(this.element);                   //for exmple, you can create some click event or something else                 this.element.on('click', function(e){                     logger.log("You click on element: " + e.target);                 });             }           });       return $.inchoo.js; });</pre>您会注意到顶部的javascript代码使用了“define”函数。这个函数来自requireJs – “define”函数的第一个参数是依赖数组，第二个参数是我们函数的定义。定义函数应始终返回一个对象。在我们的示例中，我们的函数返回 “$.inchoo.js”。您可以在 url 上阅读有关定义函数的更多信息： http://requirejs.org/docs/api.html#define在我们的示例中，我们的javascript使用jQuery，jQueryUI和logger。所有依赖项都应在“定义”函数中声明。您可以看到我们将下一个数组作为第一个参数：["jquery", "logger", "jquery/ui"]在函数的定义中，我们创建了jquery小部件，并将所有逻辑放在小部件构造函数“_create”中。JQuery 和记录器作为下一个参数传递：“$”和“记录器”。我们的记录器类的源代码如下。你可以注意到我们的类不需要任何依赖关系，在“define”函数中，只有定义函数返回我们之前提到的对象。 <pre class="brush:bash;toolbar:false">define(function() {     "use strict";       return {         log : function(param){             console.log(param);         }     }; });</pre>所有文件都应该在“requirejs-config.js”文件中声明 - 这是使用requireJs的配置文件。<pre class="brush:bash;toolbar:false">var config = {     map: {         '*': {             inchoojs:      'Inchoo_Js/js/inchoo',             logger:      'Inchoo_Js/js/logger'         }     } };</pre>下一步将是解释如何加载和使用我们的 JavaScript。为了使用/加载我们的javascript，你必须在某个phtml文件中添加下一个代码。我们完整的js.phtml文件示例如下：测试元件<script type="text/x-magento-init">// <![CDATA[ { "#test": { "Inchoo_Js/js/inchoo": {"url":"http://www.example.url", "method":"post"} } } // ]]></script>在Magento 2中，有一个javascript解析器（位于脚本“lib/web/mage/apply/scripts.js中），它读取属性类型=”text/x-magento-init“的脚本标签，并使用卷曲的brakets中的”子“json数据加载/处理它们：<pre class="brush:bash;toolbar:false"> "#test": {             "Inchoo_Js/js/inchoo":                 {"url":"http://www.example.url", "method":"post"}     }</pre>你会注意到“#test”，这是传递给jquery小部件的html元素的id，它在我们的脚本中可用，通过属性“this.element”。其他元素“url”和“method”是选项，它们也从json对象传递到我们的小部件，这些选项在js属性“this.options”的脚本中可用。可以根据需要定义这些选项。如果您按照上述方式执行了所有操作，javascript 应该可以工作，并且您应该在 html head 中有一个脚本标签

在Magento2中添加新的控制台命令Command

Magento
magento, magento教程, magento二次开发, magento中文教程, php
13048 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>还记得那个时候你想创建一个Magento shell或php脚本来执行一些操作，但不知道把它放在哪里吗？还记得根 Magento 安装中的 /shell 文件夹（或根文件夹，就此而言）吗？还记得它曾经是如何混合 50 个 shell 和 php 脚本的，光看它们你就头疼吗？Pepperidge Farm记得。那是美好的旧时光，像所有美好的时光一样，它们现在已经过去。街区上有一个新的孩子，更强大，更酷，最好的部分是 - 它被集成到Magento 2中。当然，我们正在谈论Magento 2的新功能，即其控制台组件。根文件夹现在包含一个新目录 – ，其中有一个“magento”脚本，用于启动控制台组件。通过在终端中输入，我们会收到许多可以运行的命令，例如：/binbin/magento创建管理员用户（管理员：用户：创建)清除、禁用、启用缓存（缓存：清理、缓存：启用、缓存：禁用等）运行 cron （cron：run)启用和禁用模块（模块：启用，模块：禁用)检查索引器状态，并在需要时重新索引（索引器：信息、索引器：重新索引等）等等与Magento 1相比，这是一个重大改进，就像Magento所做的一切一样（尽管这个是从Symfony借来的），它是高度可定制和可扩展的。我们可以相当轻松地添加自己的命令，这正是我们将在本文中要做的。我们不会详细介绍在Magento 2中创建新模块，因为已经有很多教程可以遵循。为了添加新命令，我们只需要执行几个步骤。首先，在模块的 etc 文件夹中创建一个 di.xml 文件（如果您还没有），并将其放入：<pre class="brush:bash;toolbar:false"><?xml version="1.0"?>     <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">         <type name="Magento\Framework\Console\CommandList">             <arguments>                 <argument name="commands" xsi:type="array">                     <item name="hello_world" xsi:type="object">Inchoo\Console\Console\Command\HelloWorldCommand</item>                 </argument>             </arguments>         </type>     </config></pre>我们在 di.xml 文件中添加了一个新条目。它有什么作用？如果我们检查类型标签及其名称，我们会看到它指向我们。此外，它还具有一些名为“命令”的参数和一个项目标签。看起来很奇怪。让我们去上课，看看有什么大惊小怪的："Magento\Framework\Console\CommandList"CommandList<pre class="brush:bash;toolbar:false">class CommandList implements CommandListInterface {     /**      * @var string[]      */     protected $commands;       /**      * Constructor      *      * @param array $commands      */     public function __construct(array $commands = [])     {         $this->commands = $commands;     }       /**      * {@inheritdoc}      */     public function getCommands()     {         return $this->commands;     } }</pre>这里没有太多事情发生。简单类，其中构造函数接收数组作为参数，并且它有一个 getter 方法和一个受保护的变量，以及。嗯..等等，构造函数正在接收数组？这看起来很熟悉。我们有一些东西提到了一个名为 .让我们再看一遍：commandscommandsdi.xmlcommands<pre class="brush:bash;toolbar:false"><arguments>     <argument name="commands" xsi:type="array">         <item name="hello_world" xsi:type="object">Inchoo\Console\Console\Command\HelloWorldCommand</item>     </argument> </arguments></pre>有趣。我们的参数标签确实被调用，并且它的类型设置为“数组”。看起来Magento正在使用某种魔法将我们的参数发送到CommandList类。有一个，这必须是它发送的东西。如果我们检查Magento文档（是的，您没看错）：di.xmlscommands<argument><item>“参数在创建类实例期间注入到类实例中。参数名称必须与已配置类的构造函数参数相对应。我们看到这实际上是工作中的依赖注入——将我们的 Command 对象注入到所有命令的数组中。整洁。让我们看看这个 HelloWorldCommand 类（它位于我们模块的控制台目录中）。<pre class="brush:bash;toolbar:false">class HelloWorldCommand extends Command {       protected function configure()     {         $this->setName('inchoo:hello_world')->setDescription('Prints hello world.');     }       protected function execute(InputInterface $input, OutputInterface $output)     {         $output->writeln('Hello World!');     }   }</pre>这里只有两种方法：和。我们从父类（）继承它们，它们允许我们设置命令。configureexecuteCommandConfigure方法用于将初始配置设置为命令，例如：名称，描述，命令行参数等。方法是您编写逻辑的地方。在这个例子中，我们刚刚将“Hello World！”打印到屏幕上，但希望你会有更多的想象力。Execute要查看该命令的运行情况，请使用 bin/magento 调用它，如下所示：bin/magento inchoo:hello_world你会受到命令行的欢迎。什么感觉。为了让您的生活更轻松，我们准备了一个可以安装的作曲家存储库，无需键入所有内容即可尝试该命令。以下是说明：将我们的模块添加为依赖项：<pre class="brush:bash;toolbar:false">composer config repositories.inchoo_console vcs git@bitbucket.org:lurajcevi/inchoo_console.git</pre>请composer下载它：<pre class="brush:bash;toolbar:false">composer require inchoo/console:dev-master</pre>如果 Composer 要求您提供一组凭据，请按照这些说明操作。当composer施展魔法时，我们可以启用我们的模块：<pre class="brush:bash;toolbar:false">bin/magento module:enable Inchoo_Console</pre>及以后<pre class="brush:bash;toolbar:false">bin/magento setup:upgrade</pre>我们的模块已启用，我们可以使用它。由于这个想法是向控制台应用程序添加新命令，让我们看看它是否有效。再次呼叫。bin/magento希望您会看到以下命令（以及其他所有命令）：...inchooinchoo:hello_world Prints hello world....让我们调用它：bin/magento inchoo:hello_world响应是，正如预期的那样：<pre class="brush:bash;toolbar:false">Hello World!</pre>

扩展Magento2默认JS组件

Magento
magento, magento教程, magento二次开发, magento中文教程, php
13999 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>由于Magento 2已经推出很长一段时间了，并且基于该平台的新项目正在迅速接近，毫无疑问，作为开发人员，我们需要为挑战做好充分的准备。在这篇文章中，我将演示如何处理平台的默认javascript组件（widget实例）。更准确地说，是负责网站主导航功能的javascript组件。如果您有兴趣，请继续阅读。### 介绍Magento 2中主导航的前端部分是用javascript逻辑构建的，负责从移动设备的转换到台式计算机的悬停延迟计时的众多操作。在大多数情况下，默认方法就足够了，并且基本上涵盖了所有需求，但有时，在项目需要特定/自定义方法的情况下，我们迟早会发现自己处于修改默认逻辑的情况。让我们把自己放在一个位置，我们的项目需要对主导航javascript部分进行某些修改。首先，我们需要了解该过程涉及的一些基本文件架构和技术。Magento 2使用Require JS（AMD或异步模块加载器和jQuery/jQuery UI库）作为创建系统上当前存在的javascript组件的基础。我不会进一步介绍requireJS，但如果您需要了解更多信息，您可以查看我们涵盖此主题的博客文章。另外，我强烈建议访问requireJS网站，以便在使用Magento 2之前获得AMD的坚实基础知识并要求JS基本用法。另一个重要的注意事项是，jQuery UI widget factory用于提供简单的可扩展技术，与Magento 1中的旧原型类方法非常相似。如果你不熟悉jQuery UI小部件，我强烈建议你访问学习jQuery网站，其中包含小部件工厂示例，以熟悉这个概念。### 扩展默认值负责导航菜单功能的主文件是menu.js位于[project_root]/lib/web/mage/下，以及其他默认的js系统组件。现在，如果我们不想扩展或覆盖它，我们需要确保我们遵循以下步骤。### 步骤 1要使用我们的自定义内容正确扩展菜单.js部分，第一步是映射我们的 js 文件，以便系统加载它而不是默认文件。Magento使用requirejs-config.js文件成功地映射系统上的js组件。首先重要的是知道在哪里放置requirejs-config.js。它可以放置在多个层次上。所有requireJS配置将按以下顺序合并和执行：模块级别主题模块级别（父主题）主题模块级别（当前主题）主题级别（父主题）主题级别（当前主题）让我们用一个真实的例子看看它是如何工作的。默认文件是菜单.js我们希望将其替换为我们的自定义文件。请注意，之后我仍将加载默认菜单.js文件作为依赖项。我们需要创建将替换菜单.js文件的文件。我们称之为menu-custom.js并将其放在[current_theme]/web/js/目录下。### 步骤 2接下来，我们需要创建requirejs-config.js文件并将其放在[current_theme]/root目录下。这样我们就可以成功映射我们的文件以替换默认文件。请参阅以下示例：<pre class="brush:bash;toolbar:false">var config = {     "map": {         "*": {             "menu": "js/menu-custom"         }       } };</pre>要真正确定该过程是否成功，请确保在加载新文件时签入开发人员工具。<img src="/uploads/images/20230822/209495ef98a89ddbd9a3fe51f81df742.png" title="6.png" alt=""/>### 步骤 3现在是有趣的部分！我们不想扩展默认功能，这就是jQuery小部件工厂发挥作用的地方。我们将以下代码放入我们新创建的菜单自定义.js文件中。检查以下示例：<pre class="brush:bash;toolbar:false">define([     'jquery',     'jquery/ui',     'mage/menu'],     function($){         $.widget('inchoo.menu', $.mage.menu, {             _init: function () {                 alert("I'm Inchoo");             },             toggle: function () {                 alert("I'm Inchoo");             }     });     return $.inchoo.menu;     });</pre> 从上面的例子中我们可以看到，我们正在使用 require js 来定义我们的依赖项。第一个是jquery，第二个是jquery/ui，最后一个是mage/menu。这意味着在这 3 个完全加载之前，我们的脚本不会加载，因为我们的逻辑依赖于它。我们名为 inchoo.menu 的自定义小部件实例正在扩展默认的 $.mage.menu，在本例中，为了本教程，我将扩展两种方法，_init 和切换。切换方法负责切换智能手机和平板电脑上的导航_init而该方法负责组件初始化。默认菜单中的原始切换方法示例.js<pre class="brush:bash;toolbar:false">toggle: function () {             if ($('html').hasClass('nav-open')) {                 $('html').removeClass('nav-open');                 setTimeout(function () {                     $('html').removeClass('nav-before-open');                 }, 300);             } else {                 $('html').addClass('nav-before-open');                 setTimeout(function () {                     $('html').addClass('nav-open');                 }, 42);             }         },</pre>### 覆盖文件在某些情况下（尽管在相对罕见的情况下），您会发现自己可以完全覆盖菜单逻辑（创建自定义导航）。在这种特定情况下，我们可以应用步骤 1 和步骤 2，并在菜单自定义.js文件中创建自定义导航逻辑。就是这样！我们已经成功地扩展了默认菜单.js小部件实例。该过程可以应用于系统上当前显示的任何小部件实例。

Magento2中的特色产品，带有目录产品列表小部件

Magento
magento, magento教程, magento二次开发, magento中文教程, php
23261 阅读

<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"> <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> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>通过检查各种电子商务网站，几乎所有网站都可以找到的一件事是特色产品。精心挑选的产品列表，通常放在主页上，用于促销。到目前为止，Magento缺乏大多数请求的功能，开发人员不得不寻找其他解决方案或编写自己的解决方案。让我们看看Magento 2的情况如何。为了最终解决这个问题，Magento 2附带了一个新的小部件，可以根据来自各种属性和类别的基于条件的过滤器进行产品选择。如果有人曾经使用过购物车价格规则，这种方法对他们来说并不是什么新鲜事。可以根据产品属性和类别的任意组合创建条件，其中仅显示与规则匹配的产品。<img src="/uploads/images/20230822/b59a091ad9cf2bfb1100773e8a5cd7e1.png" title="4.png" alt="" width="652" height="746"/>### 配置选项有哪些？除了定义条件外，小部件还提供了一些其他配置选项，例如定义标题，启用分页，模板选择，从中创建简单的产品列表。定义条件是一个非常好的功能，它提供了产品选择的灵活性，而不是简单的产品选择（也可以通过SKU属性定义条件来实现），但这种方法有一个缺点。通过定义条件，而不是特定的产品，输出可以做的事情不多，在前端显示之前基本上是未知的。我们大多数人需要和想要的一件事是定义产品列表中的项目顺序或排序，这在这种方法中是不可能的。### 如何创建一个？嗯，有两种方法可以做到这一点。第一种方法是创建并将它们作为CMS块和页面内容的一部分（在管理中可用，位于内容>元素>页面/块）。在所见即所得的编辑器中，有一个插入小部件按钮，允许它们快速创建并插入内容中的光标位置。从下拉列表中选择目录产品列表选项并填写字段。另一种方法是创建它们并插入布局更新的位置。导航到内容>元素>微件，然后选择目录产品列表作为类型和您当前的设计主题。布局更新部分允许选择小部件将显示在哪些页面上以及在页面的哪个部分显示。<img src="/uploads/images/20230822/e67b17588e7d4ce5f2a96f0ee98a8f61.png" title="5.png" alt=""/>将产品列表小部件包含在Magento中是向前迈出的一步，由于安装中已经打包了这样的功能，因此开发变得更加容易。创建和包含产品列表小部件既简单又快速，对于那些不需要完全控制产品列表的人来说，肯定会在许多新网站上使用。

文章列表