REF: http:\/\/alanstorm.com\/category\/magento-2\/<\/p>\n
SETTING VirtualHost
\nREF:https:\/\/medium.com\/@JohnFoderaro\/how-to-set-up-apache-in-macos-sierra-10-12- bca5a5dfffba
\nMODIFY \/private\/etc\/apache2\/extra\/httpd-vhosts.conf:
\n…
\n<VirtualHost *:80>
\nServerName magentoce215.lcoal
\nServerAlias www.magentoce215.local
\nDocumentRoot “\/Library\/WebServer\/Documents\/Projects\/magentoce215”
\nDirectoryIndex index.php
\n<Directory “\/Library\/WebServer\/Documents\/Projects\/magentoce215”>
\nAllowOverride All
\nAllow from All
\nRequire all granted
\n<\/Directory><\/p>\n
ErrorLog “\/private\/var\/log\/apache2\/magentoce215_error.log”
\nCustomLog “\/private\/var\/log\/apache2\/magentoce215_access.log” common
\n<\/VirtualHost><\/p>\n
MODIFY \/etc\/hosts:
\n…
\n127.0.0.1 magentoce215.local
\n…<\/p>\n
RESTART APACHE: sudo apachectl restart<\/p>\n
OPEN http:\/\/magentoce215.local\/<\/p>\n
INSTALL PESTLE (https:\/\/github.com\/astorm\/pestle)
\nSatrias-MacBook-Pro:~ teddy$ curl -LO http:\/\/pestle.pulsestorm.net\/pestle.phar
\n% Total % Received % Xferd Average Speed Time Time Time Current
\nDload Upload Total Spent Left Speed
\n100 3990k 100 3990k 0 0 578k 0 0:00:06 0:00:06 –:–:– 860k
\nSatrias-MacBook-Pro:~ teddy$ php pestle.phar list-commands<\/p>\n
GO TO THE M2 ROOT PROJECT (\/Library\/WebServer\/Documents\/Projects\/magentoce215\/)
\nSatrias-MacBook-Pro:~ teddy$ cd \/Library\/WebServer\/Documents\/Projects\/magentoce215\/<\/p>\n
https:\/\/alanstorm.com\/magento_2_javascript_init_scripts\/
\nGO TO ‘app\/code’ DIR: –> NO NEED. JUST PESTLE.PHAR IN MAGENTO ROOT IS OKAY
\nSatrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/<\/p>\n
THEN INSTALL PESTLE:
\nSatrias-MacBook-Pro:code teddy$ curl -LO http:\/\/pestle.pulsestorm.net\/pestle.phar
\n% Total % Received % Xferd Average Speed Time Time Time Current
\nDload Upload Total Spent Left Speed
\n100 3990k 100 3990k 0 0 860k 0 0:00:04 0:00:04 –:–:– 978k<\/p>\n
THEN RUN ‘php pestle.phar generate_module Pulsestorm JavascriptInitTutorial 0.0.1’
\nI HAVE TO USE ‘php’ HERE BECAUSE IF NOT I’D GET AN ERROR MESSAGE ‘-bash: pestle.phar: command not found’ REF:https:\/\/github.com\/astorm\/pestle\/issues\/120<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm JavascriptInitTutorial 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/registration.php<\/p>\n
HERE ARE THE GENERATED FILES:
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/registration.php:
\n<?php
\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(
\n\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,
\n‘Pulsestorm_JavascriptInitTutorial’,
\n__DIR__
\n);<\/p>\n
\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/etc\/module.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module\/etc\/module.xsd”>
\n<module name=”Pulsestorm_JavascriptInitTutorial” setup_version=”0.0.1″\/>
\n<\/config><\/p>\n
THEN
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_route Pulsestorm_JavascriptInitTutorial frontend pulsestorm_javascriptinittutorial
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/etc\/frontend\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/Controller\/Index\/Index.php<\/p>\n
HERE ARE THE GENERATED FILES:
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/etc\/frontend\/routes.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:App\/etc\/routes.xsd”>
\n<router id=”standard”>
\n<route id=”pulsestorm_javascriptinittutorial” frontName=”pulsestorm_javascriptinittutorial”>
\n<module name=”Pulsestorm_JavascriptInitTutorial”\/>
\n<\/route>
\n<\/router>
\n<\/config><\/p>\n
AND
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/Controller\/Index\/Index.php:
\n<?php
\nnamespace Pulsestorm\\JavascriptInitTutorial\\Controller\\Index;
\nclass Index extends \\Magento\\Framework\\App\\Action\\Action
\n{<\/p>\n
protected $resultPageFactory;
\npublic function __construct(
\n\\Magento\\Framework\\App\\Action\\Context $context,
\n\\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory)
\n{
\n$this->resultPageFactory = $resultPageFactory;
\nparent::__construct($context);
\n}<\/p>\n
public function execute()
\n{
\nreturn $this->resultPageFactory->create();
\n}
\n}<\/p>\n
<\/p>\n
THEN
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_view Pulsestorm_JavascriptInitTutorial frontend pulsestorm_javascriptinittutorial_index_index Main content.phtml 1column
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml
\nCreating: Pulsestorm\\JavascriptInitTutorial\\Block\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/layout\/pulsestorm_javascriptinittutorial_index_index.xml<\/p>\n
HERE ARE THE GENERATED FILES:
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml:
\n<h1>This is my template, there are many like it, but this one is mine.<\/h1><\/p>\n
AND
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/layout\/pulsestorm_javascriptinittutorial_index_index.xml:
\n<?xml version=”1.0″?>
\n<page xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd”>
\n<referenceBlock name=”content”><block template=”content.phtml” class=”Pulsestorm\\JavascriptInitTutorial\\Block\\Main” name=”pulsestorm_javascriptinittutorial_block_main”\/><\/referenceBlock><\/page><\/p>\n
AND
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/Block\/Main.php:
\n<?php
\nnamespace Pulsestorm\\JavascriptInitTutorial\\Block;
\nclass Main extends \\Magento\\Framework\\View\\Element\\Template
\n{
\nfunction _prepareLayout(){}
\n}<\/p>\n
<\/p>\n
THEN I HAVE TO GO UP THE MAGENTO ROOT THEN LOGIN AS ‘sudo -s -u _www’:
\nSatrias-MacBook-Pro:code teddy$ php bin\/magento module:enable Pulsestorm_JavascriptInitTutorial
\nCould not open input file: bin\/magento
\nSatrias-MacBook-Pro:code teddy$ cd ..
\nSatrias-MacBook-Pro:app teddy$ cd ..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_JavascriptInitTutorial
\nCommand line user does not have read and write permissions on var\/generation directory. Please address this issue before using Magento command line.
\nSatrias-MacBook-Pro:magentoce215 teddy$ sudo -s -u _www
\nPassword:
\nbash-3.2$ php bin\/magento module:enable Pulsestorm_JavascriptInitTutorial
\nThe following modules have been enabled:
\n– Pulsestorm_JavascriptInitTutorial<\/p>\n
To make sure that the enabled modules are properly registered, run ‘setup:upgrade’.
\nCache cleared successfully.
\nGenerated classes cleared successfully. Please run the ‘setup:di:compile’ command to generate classes.
\nInfo: Some modules might require static view files to be cleared. To do this, run ‘module:enable’ with the –clear-static-content option to clear them.<\/p>\n
THEN THE LAST:
\nbash-3.2$ php bin\/magento setup:upgrade<\/p>\n
TEST THE ROUTE URL: http:\/\/magentoce215.local\/pulsestorm_javascriptinittutorial\/
\nIT’D PRINT:
\n‘This is my template, there are many like it, but this one is mine.’<\/p>\n
Setting up a RequireJS Module
\nCREATE A NEW FILE: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/web\/example.js:
\ndefine([],function(){
\nalert(“A simple RequireJS Module”);
\nreturn {};
\n});<\/p>\n
THEN MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml:
\n<h1>This is my template, there are many like it, but this one is mine.<\/h1><\/p>\n
<script type=”text\/javascript”>
\nrequirejs([‘Pulsestorm_JavascriptInitTutorial\/example’], function(example){
\nalert(‘Loaded!’);
\nconsole.log(example);
\n});
\n<\/script><\/p>\n
RUN: php bin\/magento c:f
\nTHEN TEST AGAIN: http:\/\/magentoce215.local\/pulsestorm_javascriptinittutorial\/
\nIT’D WORK AS EXPECTED. THE TWO ALERT “A simple RequireJS Module” THEN ‘Loaded!’ WOULD BE POPED UP. ALSO THE CONSOLE WOULD PRINT ‘{}’<\/p>\n
X-Magento-Init
\nPURPOSES:
\nprovides a way to pass that program a server side generated JSON object.
\nprovides a way to provide that program with the DOM nodes it should operate on.<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml:
\n<!–h1>This is my template, there are many like it, but this one is mine.<\/h1–><\/p>\n
<!–script type=”text\/javascript”>
\nrequirejs([‘Pulsestorm_JavascriptInitTutorial\/example’], function(example){
\nalert(‘Loaded!’);
\nconsole.log(example);
\n});
\n<\/script–><\/p>\n
<div id=”one” class=”foo”>
\nHello World
\n<\/div>
\n<div id=”two” class=”foo”>
\nGoodbye World
\n<\/div><\/p>\n
<script type=”text\/x-magento-init”>
\n{
\n“*”: {
\n“Pulsestorm_JavascriptInitTutorial\/example”:{}
\n}
\n}
\n<\/script><\/p>\n
RUN: php bin\/magento c:f
\nTHEN TEST AGAIN: http:\/\/magentoce215.local\/pulsestorm_javascriptinittutorial\/
\nIT’D SHOW ALERT “A simple RequireJS Module”
\nBUT THEN I GOT AN ERROR:
\nREFER TO: http:\/\/magentoce215.local\/pub\/static\/version1513154325\/frontend\/Magento\/luma\/en_US\/mage\/apply\/main.js
\nUncaught TypeError: Cannot read property ‘bind’ of undefined
\nat main.js:26
\nat Object.execCb (require.js:1650)
\nat Module.check (require.js:866)
\nat Module.<anonymous> (require.js:1113)
\nat require.js:132
\nat require.js:1156
\nat each (require.js:57)
\nat Module.emit (require.js:1155)
\nat Module.check (require.js:917)
\nat Module.enable (require.js:1143)
\nSOLUTION: ‘The reason for this error? Because there\u2019s no mage\/menu key in the returned object.’
\nREF: https:\/\/alanstorm.com\/requirejs-modules-that-return-two-widgets\/
\nSO JUST FOLLOW BELOW ‘Magento Javascript Components’!<\/p>\n
Magento Javascript Components
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/web\/example.js:
\n\/*
\ndefine([],function(){
\nalert(“A simple RequireJS Module”);
\nreturn {};
\n});
\n*\/
\ndefine([], function () {
\nvar mageJsComponent = function()
\n{
\nalert(“A simple magento component.”);
\n};<\/p>\n
return mageJsComponent;
\n});<\/p>\n
RUN: CLEAR CACHE
\nTHEN RELOAD: http:\/\/magentoce215.local\/pulsestorm_javascriptinittutorial\/
\nIT’D SHOW THE ALERT “A simple magento component.”
\nALSO THE ABOVE CONSOLE ERROR WOULD gone<\/p>\n
WE CAN PASS PARAMETER TO THE REQUIREJS MODULE\/COMPONENT (pass in server side generated JSON –> A SAMPLE FOR ‘provides a way to pass that program a server side generated JSON object.’)
\nFOR EXAMPLE PASS A PAIR KEY-VALUE PARAM ‘config’:’value’:
\nMODIFY AGAIN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml:
\n…
\n<script type=”text\/x-magento-init”>
\n{
\n“*”: {
\n“Pulsestorm_JavascriptInitTutorial\/example”:{“config”:”value”}
\n}
\n}
\n<\/script><\/p>\n
THEN MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/web\/example.js:
\n…
\ndefine([], function () {
\nvar mageJsComponent = function(config)
\n{
\n\/\/alert(“A simple magento component.”);
\nalert(“Look in your browser’s console”);
\nconsole.log(config);
\n};<\/p>\n
return mageJsComponent;
\n});<\/p>\n
RELOAD THE BROWSER!
\nCONSOLE PRINTED:
\n{config: “value”}
\nconfig:”value”
\n__proto__:Object<\/p>\n
HERE IS A SAMPLE FOR ‘provides a way to provide that program with the DOM nodes it should operate on.’:
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/web\/example.js:
\ndefine([], function () {
\nvar mageJsComponent = function(config, node)
\n{
\n\/\/alert(“A simple magento component.”);
\n\/\/alert(“Look in your browser’s console”);
\nconsole.log(config);
\nconsole.log(node);
\n};<\/p>\n
return mageJsComponent;
\n});<\/p>\n
THEN MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml:
\n<div id=”one” class=”foo”>
\nHello World
\n<\/div>
\n<div id=”two” class=”foo”>
\nGoodbye World
\n<\/div><\/p>\n
<script type=”text\/x-magento-init”>
\n{
\n“#one”:{
\n“Pulsestorm_JavascriptInitTutorial\/example”:{“config”:”value”}
\n}
\n}
\n<\/script><\/p>\n
THEN CLEAR CACHE
\nAND RELOAD: http:\/\/magentoce215.local\/pulsestorm_javascriptinittutorial\/
\nIT’D PRINT THE OUTPUT ON CONSOLE:
\n{config: “value”}
\nexample.js:13 <div id=\u200b”one” class=\u200b”foo” data-mspdevtools=\u200b”e076e2cbb07c8dc89e933bef9d185479″>\u200b
\nHello World
\n\u200b<\/div>\u200b<\/p>\n
OR IF
\n<script type=”text\/x-magento-init”>
\n{
\n“.foo”:{
\n“Pulsestorm_JavascriptInitTutorial\/example”:{“config”:”value”}
\n}
\n}
\n<\/script><\/p>\n
THE OUTPUT CONSOLE WOULD BE:
\n{config: “value”}
\nexample.js:13 <div id=\u200b”one” class=\u200b”foo” data-mspdevtools=\u200b”e076e2cbb07c8dc89e933bef9d185479″>\u200b
\nHello World
\n\u200b<\/div>\u200b
\nexample.js:12 {config: “value”}
\nexample.js:13 <div id=\u200b”two” class=\u200b”foo” data-mspdevtools=\u200b”e076e2cbb07c8dc89e933bef9d185479″>\u200b
\nGoodbye World
\n\u200b<\/div>\u200b<\/p>\n
<\/p>\n
Data-mage-init Attribute<\/p>\n
In addition to <script type=”text\/x-magento-init”>, there\u2019s another way to invoke similar functionality on a specific DOM node, and that\u2019s with the data-mage-init attribute.
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptInitTutorial\/view\/frontend\/templates\/content.phtml:
\n<div data-mage-init='{“Pulsestorm_JavascriptInitTutorial\/example”: {“another”:”example”}}’>A single div<\/div><\/p>\n
THEN CLEAR THE CACHE
\nAND RELOAD.
\nHERE IS THE CONSOLE PRINTED:
\n{another: “example”}
\nexample.js:13 <div data-mspdevtools=\u200b”e076e2cbb07c8dc89e933bef9d185479″>\u200bA single div\u200b<\/div>\u200b<\/p>\n
KnockoutJS Primer for Magento Developers
\nhttps:\/\/alanstorm.com\/knockoutjs_primer_for_magento_developers\/
\nJUST AN INTRODUCTION<\/p>\n
Magento 2: KnockoutJS Integration
\nhttps:\/\/alanstorm.com\/magento_2_knockoutjs_integration\/<\/p>\n
Creating a Magento Module
\nSatrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm KnockoutTutorial 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_route Pulsestorm_KnockoutTutorial frontend pulsestorm_knockouttutorial
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/etc\/frontend\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/Controller\/Index\/Index.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_view Pulsestorm_KnockoutTutorial frontend pulsestorm_knockouttutorial_index_index Main content.phtml 1column
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/view\/frontend\/templates\/content.phtml
\nCreating: Pulsestorm\\KnockoutTutorial\\Block\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/view\/frontend\/layout\/pulsestorm_knockouttutorial_index_index.xml<\/p>\n
Satrias-MacBook-Pro:code teddy$ cd ..
\nSatrias-MacBook-Pro:app teddy$ cd ..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_KnockoutTutorial
\nThe following modules have been enabled:
\n– Pulsestorm_KnockoutTutorial<\/p>\n
To make sure that the enabled modules are properly registered, run ‘setup:upgrade’.
\nCache cleared successfully.
\nGenerated classes cleared successfully. Please run the ‘setup:di:compile’ command to generate classes.
\nInfo: Some modules might require static view files to be cleared. To do this, run ‘module:enable’ with the –clear-static-content option to clear them.
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento setup:upgrade
\n…
\nModule ‘Pulsestorm_KnockoutTutorial’:
\nPlease re-run Magento compile command<\/p>\n
TEST: http:\/\/magentoce215.local\/pulsestorm_knockouttutorial<\/p>\n
NOTE: I NEED TO DISABLE Inchoo_ModalOverlay MODULE BECAUSE IT’S ANNOYING TO SHOW THE POPUP EACH TIME I REFRESH THE BROWSER! PROBABLY I NEED TO WRITE A TUTORIAL HOW TO WRITE THIS KIND OF MODULE (SHOW THE POPUP ON EACH PAGE)<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/view\/frontend\/templates\/content.phtml:
\n<!–h1>This is my template, there are many like it, but this one is mine.<\/h1–>
\n<div data-bind=”template:’Pulsestorm_KnockoutTutorial\/hello'”><\/div><\/p>\n
THEN ADD A NEW FILE hello.html IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/KnockoutTutorial\/view\/frontend\/web\/template\/hello.html:
\n<p data-bind=”style:{fontSize:’24px’}”>Hello World<\/p><\/p>\n
CLEAR CACHE AND RELOAD.
\nIT’D PRINT ‘Hello World’<\/p>\n
The Curious Case of Magento 2 Mixins
\nhttps:\/\/alanstorm.com\/the-curious-case-of-magento-2-mixins\/<\/p>\n
Magento 2 RequireJS Mixins
\nA Magento 2 RequireJS \u201cmixin\u201d allows you to programmatically listen for the initial instantiation of any RequireJS module and manipulate that module before returning it.<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm RequireJsRewrite 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RequireJsRewrite\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RequireJsRewrite\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ cd ..
\nSatrias-MacBook-Pro:app teddy$ cd ..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_RequireJsRewrite && php bin\/magento setup:upgrade<\/p>\n
CREATE A NEW FILE ‘requirejs-config.js’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RequireJsRewrite\/view\/base\/requirejs-config.js:
\nvar config = {
\n‘config’:{
\n‘mixins’:{
\n‘Magento_Customer\/js\/view\/customer’:{
\n‘Pulsestorm_RequireJsRewrite\/hook’:true
\n}
\n}
\n}
\n};<\/p>\n
THEN CREATE A NEW FILE ‘hook.js’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RequireJsRewrite\/view\/base\/web\/hook.js:
\ndefine([], function(){
\n‘use strict’;
\nconsole.log(“Called this hook.”);
\nreturn function(targetModule){
\ntargetModule.crazyPropertyAddedHere = ‘yes’;
\nreturn targetModule;
\n};
\n});<\/p>\n
CLEAR THE CACHE THE TEST IT ON the Magento homepage (or any page which uses the Magento_Customer\/js\/view\/customer RequireJS module): http:\/\/magentoce215.local\/
\nIT’D PRINT ON THE CONSOLE: “Called this hook.”
\nAlso, if you examine the Magento_Customer\/js\/view\/customer module via the console, you\u2019ll see it has an extra crazyPropertyAddedHere property:
\nmodule = requirejs(“Magento_Customer\/js\/view\/customer”);
\n\u0192 () {
\nvar obj = this;<\/p>\n
if (!_.isObject(obj) || Object.getPrototypeOf(obj) !== UiClass.prototype) {
\nobj = Object.create(UiClass.prototype);
\n\u2026
\nconsole.log(module.crazyPropertyAddedHere);
\nVM2475:1 yes<\/p>\n
With the above code, we changed the object returned by the Magento_Customer\/js\/view\/customer module. If used judiciously, this is an incredibly powerful feature.<\/p>\n
Class Rewrites for Javascript<\/p>\n
<\/p>\n
Knockout Observables for Javascript Programmers
\nhttps:\/\/alanstorm.com\/knockout-observables-for-javascript-programmers\/<\/p>\n
Important: Subscribers are only called when a value changes. If you pass in the observable\u2019s current value, Knockout will not call subscriber callbacks<\/p>\n
<\/p>\n
Modifying a jQuery Widget in Magento 2
\nhttps:\/\/alanstorm.com\/modifying-a-jquery-widget-in-magento-2\/<\/p>\n
Creating our Mixin
\nSatrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm Logdropdown 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/Logdropdown\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/Logdropdown\/registration.php<\/p>\n
CREATE A NEW FILE ‘requirejs-config.js’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/Logdropdown\/view\/base\/requirejs-config.js:
\nvar config = {
\n‘config’:{
\n‘mixins’:{
\n‘mage\/dropdown’:{
\n‘Pulsestorm_Logdropdown\/js\/dropdown-mixin’:true
\n}
\n}
\n}
\n};<\/p>\n
THEN CREATE A REQUIREJS MODULE ‘dropdown-mixin.js’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/Logdropdown\/view\/base\/web\/js\/dropdown-mixin.js:
\ndefine([‘jquery’], function($){
\nreturn function(originalWidget){
\nalert(‘Our mixin is hooked up.’);
\nconsole.log(‘Our mixin is hooked up.’);
\nconsole.log(originalWidget);<\/p>\n
return originalWidget;
\n};
\n});<\/p>\n
THEN ENABLE THE MODULE:
\nSatrias-MacBook-Pro:code teddy$ cd ..
\nSatrias-MacBook-Pro:app teddy$ cd ..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_Logdropdown && php bin\/magento setup:upgrade<\/p>\n
LOAD ON ANY PAGE that uses the dropdownWidget widget (home page, catalog listing page, etc), and you should see an alert and a console.log message that says Our mixin is hooked up.<\/p>\n
\u0192 ( options, element ) {
\n\/\/ allow instantiation without “new” keyword
\nif ( !this._createWidget ) {
\nreturn new constructor( options, element );
\n}<\/p>\n
\/\/ allow instantiation without initializing \u2026<\/p>\n
Changing a Widget
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/Logdropdown\/view\/base\/web\/js\/dropdown-mixin.js:
\ndefine([‘jquery’], function($){
\nreturn function(originalWidget){
\n\/*alert(‘Our mixin is hooked up.’);
\nconsole.log(‘Our mixin is hooked up.’);
\nconsole.log(originalWidget);<\/p>\n
return originalWidget;*\/
\n\/\/ if you want to get fancy and pull the widget namespace
\n\/\/ and name from the returned widget definition
\n\/\/ var widgetFullName = originalWidget.prototype.namespace +
\n\/\/ ‘.’ +
\n\/\/ originalWidget.prototype.widgetName;<\/p>\n
<\/p>\n
$.widget(
\n‘mage.dropdownDialog’, \/\/named widget we’re redefining<\/p>\n
\/\/$.mage.dropdownDialog
\n$[‘mage’][‘dropdownDialog’], \/\/widget definition to use as
\n\/\/a “parent” definition — in
\n\/\/this case the original widget
\n\/\/definition, accessed using
\n\/\/bracket syntax instead of
\n\/\/dot syntax<\/p>\n
{ \/\/the new methods
\nopen:function(){
\n\/\/our new code here
\nconsole.log(“I opened a dropdown!”);<\/p>\n
\/\/call parent open for original functionality
\nreturn this._super();<\/p>\n
}
\n});<\/p>\n
\/\/return the redefined widget for `data-mage-init`
\n\/\/jQuery.mage.dropdownDialog
\nreturn $[‘mage’][‘dropdownDialog’];
\n};
\n});<\/p>\n
With the above in place, clear your browser cache and reload the page. Then, click on any dropdown widget on the page \u2014 the currency\/store-views are good candidates<\/p>\n
After clicking on these menus and confirming everything still works, take a look at your javascript console \u2014 you should see the I opened a dropdown! text successfully logged.<\/p>\n
<\/p>\n
Introduction to Magento 2 \u2014 No More MVC
\nhttps:\/\/alanstorm.com\/magento_2_mvvm_mvc\/<\/p>\n
CREATE A NEW MODULE ‘HelloWorldMVVM’:
\nCREATE A NEW FILE ‘registration.php’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/registration.php:
\n<?php
\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(
\n\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,
\n‘Pulsestorm_HelloWorldMVVM’,
\n__DIR__
\n);<\/p>\n
CREATE A NEW FILE ‘module.xml’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/etc\/module.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/Module\/etc\/module.xsd”>
\n<module name=”Pulsestorm_HelloWorldMVVM” setup_version=”0.0.1″ \/>
\n<\/config><\/p>\n
ENABLE THE MODULE: Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_HelloWorldMVVM && php bin\/magento setup:upgrade<\/p>\n
CREATE A NEW FRONTEND ROUTE ‘routes.xml’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/etc\/frontend\/routes.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/App\/etc\/routes.xsd”>
\n<router id=”standard”>
\n<route id=”hello_mvvm” frontName=”hello_mvvm”>
\n<module name=”Pulsestorm_HelloWorldMVVM” \/>
\n<\/route>
\n<\/router>
\n<\/config><\/p>\n
CREATE A NEW CONTROLLER ‘Hello\/World.php’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World.php:
\n<?php
\nnamespace Pulsestorm\\HelloWorldMVVM\\Controller\\Hello;<\/p>\n
class World extends \\Magento\\Framework\\App\\Action\\Action {
\npublic function execute(){
\necho ‘You Did it!’;
\nvar_dump(__METHOD__);
\n}
\n}<\/p>\n
TEST THE ROUTE BY OPENING: http:\/\/magentoce215.local\/hello_mvvm\/hello\/world
\nIT’D PRINT:
\nYou Did it!
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World.php:7:string ‘Pulsestorm\\HelloWorldMVVM\\Controller\\Hello\\World::execute’ (length=57)<\/p>\n
<\/p>\n
Passing off to the View
\nMODIFY AGAIN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World.php:
\n<?php
\nnamespace Pulsestorm\\HelloWorldMVVM\\Controller\\Hello;
\nuse Magento\\Framework\\View\\Result\\PageFactory;
\nuse Magento\\Framework\\App\\Action\\Context;<\/p>\n
class World extends \\Magento\\Framework\\App\\Action\\Action
\n{
\nprotected $pageFactory;
\npublic function __construct(Context $context, PageFactory $pageFactory)
\n{
\n$this->pageFactory = $pageFactory;
\nreturn parent::__construct($context);
\n}<\/p>\n
public function execute()
\n{
\nvar_dump(__METHOD__);
\n$page_object = $this->pageFactory->create();
\nreturn $page_object;
\n}
\n}<\/p>\n
BUT I GOT THIS ERROR ON RELOADING: http:\/\/magentoce215.local\/hello_mvvm\/hello\/world
\nFatal error: Uncaught TypeError: Argument 2 passed to Pulsestorm\\HelloWorldMVVM\\Controller\\Hello\\World::__construct() must be an instance of Magento\\Framework\\View\\Result\\PageFactory, none given, called in \/Library\/WebServer\/Documents\/Projects\/magentoce215\/var\/generation\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World\/Interceptor.php on line 14 and defined in \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World.php on line 9
\n( ! ) TypeError: Argument 2 passed to Pulsestorm\\HelloWorldMVVM\\Controller\\Hello\\World::__construct() must be an instance of Magento\\Framework\\View\\Result\\PageFactory, none given, called in \/Library\/WebServer\/Documents\/Projects\/magentoce215\/var\/generation\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World\/Interceptor.php on line 14 in \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World.php on line 9
\nSOLUTION: I NEED TO REMOVE THE var\/generation DIRECTORY!!! CLEAR THE CACHE IS NOT ENOUGH!!!
\nSatrias-MacBook-Pro:magentoce215 teddy$ sudo rm -rf var\/*
\nPassword:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento c:f<\/p>\n
HERE IS THE OUTPUT: (NO CONTENT YET) http:\/\/magentoce215.local\/hello_mvvm\/hello\/world
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Controller\/Hello\/World.php:17:string ‘Pulsestorm\\HelloWorldMVVM\\Controller\\Hello\\World::execute’ (length=57)<\/p>\n
Creating the View
\nADD A NEW LAYOUT ‘hello_mvvm_hello_world.xml’ (THIS FILENAME IS FULL ACTION NAME. THE COMBINATION FROM frontName\/ID: hello_mvvm AND CONTROLLER & CLASS NAME: hello_world) IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/view\/frontend\/layout\/hello_mvvm_hello_world.xml:
\n<?xml version=”1.0″?>
\n<page xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/page_configuration.xsd”>
\n<referenceBlock name=”content”>
\n<block
\ntemplate=”content.phtml”
\nclass=”Pulsestorm\\HelloWorldMVVM\\Block\\Main”
\nname=”pulsestorm_helloworld_mvvm”\/>
\n<\/referenceBlock>
\n<\/page><\/p>\n
CREATE A BLOCK FILE ‘Main.php’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Block\/Main.php:
\n<?php
\nnamespace Pulsestorm\\HelloWorldMVVM\\Block;
\nuse Magento\\Framework\\View\\Element\\Template;<\/p>\n
class Main extends Template
\n{
\nprotected function _prepareLayout()
\n{<\/p>\n
}
\n}<\/p>\n
THEN CREATE A TEMPLATE FILE ‘content.phtml’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/view\/frontend\/templates\/content.phtml:
\n<h1>Hello World<\/h1><\/p>\n
CLEAR THE CACHE AND RELOAD! http:\/\/magentoce215.local\/hello_mvvm\/hello\/world
\nIT’D PRINT ‘Hello World’ WITH THE MAGENTO LUMA TEMPLATE<\/p>\n
View\/View Model
\nMODIFY AGAIN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Block\/Main.php: –> USE SET\/GET METHOD
\n…
\nprotected function _prepareLayout()
\n{
\n$this->setMessage(‘Hello Again World’);
\n}
\n…<\/p>\n
THEN CALL IT FROM \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/view\/frontend\/templates\/content.phtml:
\n<h1><?php echo $this->escapeHtml($this->getMessage()); ?><\/h1><\/p>\n
CLEAR THE CACHE AND RELOAD: http:\/\/magentoce215.local\/hello_mvvm\/hello\/world
\nIT’D PRINT: “Hello Again World”<\/p>\n
OR MODIFY AGAIN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Block\/Main.php. THEN ADD A NEW FUNCTION ‘getGoodbyeMessage’:
\n…
\npublic function getGoodbyeMessage()
\n{
\nreturn ‘Goodbye World’;
\n}<\/p>\n
CALL IT FROM \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/view\/frontend\/templates\/content.phtml:
\n<h1><?php echo $this->escapeHtml($this->getGoodbyeMessage()); ?><\/h1><\/p>\n
CLEAR THE CACHE AND RELOAD: http:\/\/magentoce215.local\/hello_mvvm\/hello\/world
\nIT’D PRINT: Goodbye World<\/p>\n
USE PARAMS. FOR EXAMPLE WITH URL: http:\/\/magentoce215.local\/hello_mvvm\/hello\/world\/name\/satria
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/Block\/Main.php:
\n…
\nprotected function _prepareLayout()
\n{
\n$this->setMessage(‘Hello Again World’);
\n$this->setName($this->getRequest()->getParam(‘name’));
\n}
\n…<\/p>\n
THEN MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloWorldMVVM\/view\/frontend\/templates\/content.phtml:
\n<h1>
\n<?php echo $this->escapeHtml($this->getMessage()); ?>
\n<?php echo $this->escapeHtml($this->getName()); ?>
\n<\/h1><\/p>\n
<h2><?php echo $this->escapeHtml($this->getGoodbyeMessage()); ?><\/h2><\/p>\n
CLEAR THE CACHE AND RELOAD: http:\/\/magentoce215.local\/hello_mvvm\/hello\/world\/name\/satria
\nIT’D PRINT:
\nHello Again World satria
\nGoodbye World<\/p>\n
<\/p>\n
Magento 2: Adding Frontend Assets via Layout XML
\nhttps:\/\/alanstorm.com\/magento_2_javascript_css_layout_woes\/<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm JavascriptCssExample 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_route Pulsestorm_JavascriptCssExample frontend pulsestorm_javascriptcssexample
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/etc\/frontend\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/Controller\/Index\/Index.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_view Pulsestorm_JavascriptCssExample frontend pulsestorm_javascriptcssexample_index_index Main content.phtml
\nLayout (ignored for adminhtml) ? (1column)]
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/templates\/content.phtml
\nCreating: Pulsestorm\\JavascriptCssExample\\Block\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/layout\/pulsestorm_javascriptcssexample_index_index.xml<\/p>\n
<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_JavascriptCssExample && php bin\/magento setup:upgrade<\/p>\n
TEST IT ON http:\/\/magentoce215.local\/pulsestorm_javascriptcssexample<\/p>\n
MODIFY TO ADD JS AND CSS ON \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/layout\/pulsestorm_javascriptcssexample_index_index.xml:
\n<?xml version=”1.0″?>
\n<page xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd”>
\n<head>
\n<css src=”Pulsestorm_JavascriptCssExample::test.css”\/>
\n<link src=”Pulsestorm_JavascriptCssExample::test.js”\/>
\n<\/head>
\n<referenceBlock name=”content”><block template=”content.phtml” class=”Pulsestorm\\JavascriptCssExample\\Block\\Main” name=”pulsestorm_javascriptcssexample_block_main”\/><\/referenceBlock><\/page><\/p>\n
ADD \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/web\/test.js:
\nalert(“Hello”);<\/p>\n
THEN ADD \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/web\/test.js:
\nbody{
\nbackground-color:#f00;
\n}<\/p>\n
CLEAR CACHE AND RELOAD: http:\/\/magentoce215.local\/pulsestorm_javascriptcssexample
\nIT’S SHOW ‘Hello’ AND THE BG COLOR WOULD BE CHANGED TO RED<\/p>\n
Adding Files Via PHP
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/layout\/pulsestorm_javascriptcssexample_index_index.xml:
\n<page xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd”>
\n<head>
\n<css src=”Pulsestorm_JavascriptCssExample::test.css”\/>
\n<link src=”Pulsestorm_JavascriptCssExample::test.js”\/>
\n<\/head>
\n<referenceBlock name=”content”>
\n<block template=”content.phtml”
\nclass=”Pulsestorm\\JavascriptCssExample\\Block\\Main”
\nname=”pulsestorm_javascriptcssexample_block_main”\/>
\n<\/referenceBlock>
\n<referenceBlock name=”head.additional”>
\n<block template=”head.phtml”
\nclass=”Pulsestorm\\JavascriptCssExample\\Block\\Head”
\nname=”pulsestorm_javascriptcssexample_block_head” \/>
\n<\/referenceBlock>
\n<\/page><\/p>\n
ADD \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/Block\/Head.php:
\n<?php
\nnamespace Pulsestorm\\JavascriptCssExample\\Block;
\nclass Head extends \\Magento\\Framework\\View\\Element\\Template
\n{<\/p>\n
}<\/p>\n
THEN ADD \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/templates\/head.phtml:
\n<!– Hello There –><\/p>\n
CLEAR THE CACHE AND RELOAD: http:\/\/magentoce215.local\/pulsestorm_javascriptcssexample
\nTHEN IT’D PRINT ‘<!– Hello There –>’ IN ‘head.additional’ BLOCK<\/p>\n
The Asset Repository
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/Block\/Head.php:
\n<?php
\nnamespace Pulsestorm\\JavascriptCssExample\\Block;
\nclass Head extends \\Magento\\Framework\\View\\Element\\Template
\n{
\npublic $assetRepository;
\npublic function __construct(
\n\\Magento\\Framework\\View\\Element\\Template\\Context $context,
\narray $data = [],
\n\\Magento\\Framework\\View\\Asset\\Repository $assetRepository
\n)
\n{
\n$this->assetRepository = $assetRepository;
\nreturn parent::__construct($context, $data);
\n}
\n}<\/p>\n
THEN MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/JavascriptCssExample\/view\/frontend\/templates\/head.phtml:
\n@highlightsyntax@php
\n<?php
\n$asset_repository = $this->assetRepository;
\n$asset = $asset_repository->createAsset(‘Pulsestorm_JavascriptCssExample::test.js’);
\n$url = $asset->getUrl();
\n?>
\n<!– Hello There –>
\n<script src=”<?php echo $url; ?>”><\/script><\/p>\n
CLEAR THE CACHE AND RELOAD: http:\/\/magentoce215.local\/pulsestorm_javascriptcssexample
\nTHEN IT’D PRINT ‘<!– Hello There –>’ IN ‘head.additional’ BLOCK THEN CREATE A SCRIPT:
\n<script src=”http:\/\/magentoce215.local\/pub\/static\/version1513654716\/frontend\/Magento\/luma\/en_US\/Pulsestorm_JavascriptCssExample\/test.js”><\/script><\/p>\n
<\/p>\n
Magento 2: CRUD Models for Database Access
\nhttps:\/\/alanstorm.com\/magento_2_crud_models_for_database_access\/<\/p>\n
Creating a Base Module
\nSatrias-MacBook-Pro:magentoce215 teddy$ cd app\/code
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm ToDoCrud 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_route Pulsestorm_ToDoCrud frontend pulsestorm_todocrud
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/etc\/frontend\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Controller\/Index\/Index.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_view Pulsestorm_ToDoCrud frontend pulsestorm_todocrud_index_index Main content.phtml
\nLayout (ignored for adminhtml) ? (1column)]
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/view\/frontend\/templates\/content.phtml
\nCreating: Pulsestorm\\ToDoCrud\\Block\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/view\/frontend\/layout\/pulsestorm_todocrud_index_index.xml<\/p>\n
Generating Crud Files
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_crud_model Pulsestorm_ToDoCrud TodoItem
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Api\/TodoItemRepositoryInterface.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Model\/TodoItemRepository.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Api\/Data\/TodoItemInterface.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Model\/ResourceModel\/TodoItem\/Collection.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Model\/ResourceModel\/TodoItem.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Model\/TodoItem.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Setup\/InstallSchema.php
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Setup\/InstallData.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ cd ..
\nSatrias-MacBook-Pro:app teddy$ cd ..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_ToDoCrud && php bin\/magento setup:upgrade<\/p>\n
TEST IT: http:\/\/magentoce215.local\/pulsestorm_todocrud<\/p>\n
Magento 2 Factory Objects
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Block\/Main.php:
\n<?php
\nnamespace Pulsestorm\\ToDoCrud\\Block;<\/p>\n
use Magento\\Framework\\View\\Element\\Template\\Context;
\nuse Pulsestorm\\ToDoCrud\\Model\\TodoItemFactory;<\/p>\n
class Main extends \\Magento\\Framework\\View\\Element\\Template
\n{
\nprotected $todoFactory;<\/p>\n
public function __construct(Context $context, TodoItemFactory $todoFactory){
\n$this->todoFactory = $todoFactory;
\nparent::__construct($context);
\n}<\/p>\n
function _prepareLayout(){
\n\/\/var_dump(“I’m here”);
\nvar_dump(get_class($this->todoFactory));
\nexit;
\n}
\n}<\/p>\n
CLEAR THE CACHE (IF NEEDED CLEAR var\/* DIR) THEN RELOAD: http:\/\/magentoce215.local\/pulsestorm_todocrud
\nIT’D PRINT: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Block\/Main.php:18:string ‘Pulsestorm\\ToDoCrud\\Model\\TodoItemFactory’ (length=41)<\/p>\n
MODIFY AGAIN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/Block\/Main.php:
\n…
\nfunction _prepareLayout(){
\n\/\/var_dump(“I’m here”);
\n\/\/var_dump(get_class($this->todoFactory));
\n$todo = $this->todoFactory->create();
\n$todo->setData(‘item_text’,’Finish my Magento article’)
\n->save();
\nvar_dump(‘Done’);
\nexit;
\n}
\n…<\/p>\n
CLEAR CACHE & RELOAD: http:\/\/magentoce215.local\/pulsestorm_todocrud<\/p>\n
CHECK THE TABLE IN PHPMYADMIN:
\nselect * from pulsestorm_todocrud_todoitem<\/p>\n
_prepareLayout() function could be:
\n…
\nfunction _prepareLayout(){
\n\/\/var_dump(“I’m here”);
\n\/\/var_dump(get_class($this->todoFactory));
\n$todo = $this->todoFactory->create();
\n$collection = $todo->getCollection();
\n\/\/$todo->setData(‘item_text’,’Finish my Magento article’)
\n\/\/->save();
\n\/\/var_dump(‘Done’);
\n\/\/$todo = $todo->load(1);
\n\/\/var_dump($todo->getData());
\nforeach($collection as $item){
\nvar_dump(“Item ID:”.$item->getId());
\nvar_dump($item->getData());
\n}
\nexit;
\n}<\/p>\n
<\/p>\n
Magento 2: Understanding Object Repositories
\nhttps:\/\/alanstorm.com\/magento_2_understanding_object_repositories\/<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm RepositoryTutorial 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RepositoryTutorial\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RepositoryTutorial\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_command Pulsestorm_RepositoryTutorial Examples
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RepositoryTutorial<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_RepositoryTutorial && php bin\/magento setup:upgrade<\/p>\n
TEST THE COMMAND FROM \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RepositoryTutorial\/Command\/Examples.php:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nHello World<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/RepositoryTutorial\/Command\/Examples.php:
\n…
\nuse Magento\\Framework\\ObjectManagerInterface;
\nuse Magento\\Framework\\App\\State;<\/p>\n
class Examples extends Command
\n{
\nprotected $objectManager;<\/p>\n
public function __construct(ObjectManagerInterface $objectManager, State $appState, $name = null){
\n$this->objectManager = $objectManager;
\n$appState->setAreaCode(‘frontend’);
\nparent::__construct($name);
\n}<\/p>\n
…<\/p>\n
protected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n$page = $repo->getById(2);
\n$output->writeln(get_class($page));
\n}
\n}<\/p>\n
TEST THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nMagento\\Catalog\\Model\\Product\\Interceptor<\/p>\n
WE CAN GET THE PRODUCT NAME:
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n$page = $repo->getById(2);
\n\/\/$output->writeln(get_class($page));
\n\/\/$output->writeln($page->getTitle()); \/\/EMPTY!!!
\n$output->writeln($page->getName());
\n}
\n…<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nStrive Shoulder Pack<\/p>\n
…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n$page = $repo->getById(2);
\n\/\/$output->writeln(get_class($page));
\n\/\/$output->writeln($page->getTitle()); \/\/EMPTY!!!
\n\/\/$output->writeln($page->getName());
\n\/*$page->setTitle($page->getTitle().”, Edited by code”);
\n$repo->save($page);
\n$output->writeln($page->getTitle());*\/
\n$page->setId(null);
\n$page->setTitle(“My duplicated page”);
\n$repo->save($page);
\n$output->writeln($page->getId());
\n$output->writeln($page->getTitle());
\n}
\n…<\/p>\n
BUT I GOT AN ERROR:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples<\/p>\n
<\/p>\n
[Magento\\Framework\\Exception\\AlreadyExistsException]
\nURL key for specified store already exists.<\/p>\n
<\/p>\n
ps:examples<\/p>\n
SEARCH CRITERIA
\nMODIFY
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n\/\/$page = $repo->getById(2);
\n$search_criteria = $this->objectManager->create(‘Magento\\Framework\\Api\\SearchCriteriaInterface’);<\/p>\n
$result = $repo->getList($search_criteria);
\n$products = $result->getItems();<\/p>\n
foreach($products as $item){
\n$output->writeln($item->getName());
\n}
\n}
\n…<\/p>\n
TEST:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nJoust Duffle Bag
\nStrive Shoulder Pack
\nCrown Summit Backpack
\n….<\/p>\n
MODIFY TO GET ALL PRODUCT CONTAIN\/END WITH NAME ‘backpack’:
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/create a filter
\n$filter = $this->objectManager->create(‘Magento\\Framework\\Api\\Filter’);
\n$filter->setData(‘field’, ‘name’);
\n$filter->setData(‘value’, ‘%backpack’);
\n$filter->setData(‘condition_type’, ‘like’);<\/p>\n
\/\/add the filter to a group
\n$filter_group = $this->objectManager->create(‘Magento\\Framework\\Api\\Search\\FilterGroup’);
\n$filter_group->setData(‘filters’, [$filter]);<\/p>\n
\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n\/\/$page = $repo->getById(2);
\n$search_criteria = $this->objectManager->create(‘Magento\\Framework\\Api\\SearchCriteriaInterface’);
\n\/\/add the filter group to the search criteria object
\n$search_criteria->setFilterGroups([$filter_group]);<\/p>\n
$result = $repo->getList($search_criteria);
\n$products = $result->getItems();<\/p>\n
foreach($products as $item){
\n$output->writeln($item->getName());
\n}
\n}
\n….<\/p>\n
TEST:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nCrown Summit Backpack
\nFusion Backpack
\nEndeavor Daytrip Backpack
\nDriven Backpack<\/p>\n
ADD ANOTHER FILTER (WOULD CREATE ‘OR’ JOIN):
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/create a filter
\n$filter = $this->objectManager->create(‘Magento\\Framework\\Api\\Filter’);
\n$filter->setData(‘field’, ‘name’);
\n$filter->setData(‘value’, ‘%backpack’);
\n$filter->setData(‘condition_type’, ‘like’);<\/p>\n
\/\/create another filter
\n$filter2 = $this->objectManager->create(‘Magento\\Framework\\Api\\Filter’);
\n$filter2->setData(‘field’, ‘name’);
\n$filter2->setData(‘value’, ‘%sprite%’);
\n$filter2->setData(‘condition_type’, ‘like’);<\/p>\n
\/\/add the filter to a group
\n$filter_group = $this->objectManager->create(‘Magento\\Framework\\Api\\Search\\FilterGroup’);
\n$filter_group->setData(‘filters’, [$filter, $filter2]);<\/p>\n
\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n\/\/$page = $repo->getById(2);
\n$search_criteria = $this->objectManager->create(‘Magento\\Framework\\Api\\SearchCriteriaInterface’);
\n\/\/add the filter group to the search criteria object
\n$search_criteria->setFilterGroups([$filter_group]);<\/p>\n
$result = $repo->getList($search_criteria);
\n$products = $result->getItems();<\/p>\n
foreach($products as $item){
\n$output->writeln($item->getName());
\n}
\n}
\n…<\/p>\n
TEST:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nCrown Summit Backpack
\nFusion Backpack
\nEndeavor Daytrip Backpack
\nDriven Backpack
\nSprite Foam Yoga Brick
\nSprite Foam Roller
\nSprite Stasis Ball 55 cm
\nSprite Stasis Ball 55 cm
\nSprite Stasis Ball 55 cm
\nSprite Stasis Ball 65 cm
\nSprite Stasis Ball 65 cm
\nSprite Stasis Ball 65 cm
\nSprite Stasis Ball 75 cm
\nSprite Stasis Ball 75 cm
\nSprite Stasis Ball 75 cm
\nSprite Yoga Strap 6 foot
\nSprite Yoga Strap 8 foot
\nSprite Yoga Strap 10 foot
\nSprite Yoga Companion Kit
\nSet of Sprite Yoga Straps<\/p>\n
ADD ANOTHER FILTER GROUP (WOULD CREATE ‘AND’ JOIN):
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/create a filter
\n$filter = $this->objectManager->create(‘Magento\\Framework\\Api\\Filter’);
\n$filter->setData(‘field’, ‘name’);
\n$filter->setData(‘value’, ‘%sport%’);
\n$filter->setData(‘condition_type’, ‘like’);<\/p>\n
\/\/create another filter
\n$filter2 = $this->objectManager->create(‘Magento\\Framework\\Api\\Filter’);
\n$filter2->setData(‘field’, ‘name’);
\n$filter2->setData(‘value’, ‘%black%’);
\n$filter2->setData(‘condition_type’, ‘like’);<\/p>\n
\/\/add the filter to a group
\n$filter_group = $this->objectManager->create(‘Magento\\Framework\\Api\\Search\\FilterGroup’);
\n$filter_group->setData(‘filters’, [$filter]);<\/p>\n
\/\/add the filter2 to another group
\n$filter_group2 = $this->objectManager->create(‘Magento\\Framework\\Api\\Search\\FilterGroup’);
\n$filter_group2->setData(‘filters’, [$filter2]);<\/p>\n
\/\/$output->writeln(“Hello World”);
\n$repo = $this->objectManager->get(‘Magento\\Catalog\\Model\\ProductRepository’);
\n\/\/$page = $repo->getById(2);
\n$search_criteria = $this->objectManager->create(‘Magento\\Framework\\Api\\SearchCriteriaInterface’);
\n\/\/add the filter group to the search criteria object
\n$search_criteria->setFilterGroups([$filter_group, $filter_group2]);<\/p>\n
$result = $repo->getList($search_criteria);
\n$products = $result->getItems();<\/p>\n
foreach($products as $item){
\n$output->writeln($item->getName());
\n}
\n}
\n…<\/p>\n
TEST:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:examples
\nSupernova Sport Pant-32-Black
\nSupernova Sport Pant-33-Black
\nSupernova Sport Pant-34-Black
\nSupernova Sport Pant-36-Black
\nRapha Sports Short-32-Black
\nRapha Sports Short-33-Black
\nRapha Sports Short-34-Black
\nRapha Sports Short-36-Black<\/p>\n
<\/p>\n
Helper Class with Dependency Injection<\/p>\n
<\/p>\n
Magento 2: Understanding Access Control List Rules
\nhttps:\/\/alanstorm.com\/magento_2_understanding_access_control_list_rules\/<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm AclExample 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/AclExample\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/AclExample\/registration.php<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_AclExample && php bin\/magento setup:upgrade<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_acl Pulsestorm_AclExample Pulsestorm_AclExample::top,Pulsestorm_AclExample::config
\nCreated \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/AclExample\/etc\/acl.xml<\/p>\n
CREATED \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/AclExample\/etc\/acl.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Acl\/etc\/acl.xsd”>
\n<acl>
\n<resources>
\n<resource id=”Magento_Backend::admin”>
\n<resource id=”Pulsestorm_AclExample::top” title=”Pulse Storm ACL Example Module”>
\n<resource id=”Pulsestorm_AclExample::config” title=”The First Rule”\/>
\n<resource id=”Pulsestorm_AclExample::more_rules” title=”The Second Rule”\/>
\n<\/resource>
\n<\/resource>
\n<\/resources>
\n<\/acl>
\n<\/config><\/p>\n
take a look at the Roles menu at System -> User Roles -> Add\/Edit Role -> Role Resources. You should see your rules added to the system<\/p>\n
<\/p>\n
Magento 2: Admin Menu Items
\nhttps:\/\/alanstorm.com\/magento_2_admin_menu_items\/<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm MenuTutorial 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ cd ..\/..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_MenuTutorial && php bin\/magento setup:upgrade<\/p>\n
ADD \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/etc\/adminhtml\/menu.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Backend:etc\/menu.xsd”>
\n<menu>
\n<add id=”Pulsestorm_MenuTutorial::top_level_example”
\ntitle=”Top Level Example”
\nmodule=”Pulsestorm_MenuTutorial”
\nsortOrder=”9999″
\nresource=”Magento_Backend::content”
\n\/>
\n<\/menu>
\n<\/config><\/p>\n
With the above in place, clear your Magento cache and load a backend page. You should see a new, top level Menu Item at the bottom of the admin navigation<\/p>\n
ADD ADMIN SUB MENU
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/etc\/adminhtml\/menu.xml:
\n…
\n<!– START: new node –>
\n<add id=”Pulsestorm_MenuTutorial::second_level_example”
\ntitle=”Second Level Example”
\nmodule=”Pulsestorm_MenuTutorial”
\nsortOrder=”9999″
\nresource=”Magento_Backend::content”<\/p>\n
parent=”Pulsestorm_MenuTutorial::top_level_example”
\naction=”cms\/page\/index”
\n\/>
\n<!– END: new node –>
\n…<\/p>\n
ADD ADMIN SUB SUB MENU
\n…
\n<!– ADD L3 –>
\n<add id=”Pulsestorm_MenuTutorial::third_level_example”
\ntitle=”Third Level Example”
\nmodule=”Pulsestorm_MenuTutorial”
\nsortOrder=”9999″
\nresource=”Magento_Backend::content”<\/p>\n
parent=”Pulsestorm_MenuTutorial::second_level_example”
\naction=”cms\/page\/index”
\n\/>
\n…<\/p>\n
<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_acl
\nWhich Module? (Pulsestorm_HelloWorld)] Pulsestorm_MenuTutorial
\nRule IDs? (Pulsestorm_MenuTutorial::top,Pulsestorm_MenuTutorial::config,)] Pulsestorm_MenuTutorial::menu_items,Pulsestorm_MenuTutorial::example_1
\nCreated \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/etc\/acl.xml<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/etc\/acl.xml:
\n…
\n<resource id=”Pulsestorm_MenuTutorial::menu_items” title=”Tutorial Menu Items”>
\n<resource id=”Pulsestorm_MenuTutorial::example_1″ title=”First Example”\/>
\n<\/resource>
\n…<\/p>\n
<\/p>\n
GENERATE MENU:
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_menu
\nModule Name? (Pulsestorm_HelloGenerate)] Pulsestorm_MenuTutorial
\nIs this a new top level menu? (Y\/N) (N)] N
\nSelect Parent Menu:
\n[1] System (Magento_Backend::system)
\n[2] Customers (Magento_Customer::customer)
\n[3] Reports (Magento_Reports::report)
\n[4] Find Partners & Extensions (Magento_Marketplace::partners)
\n[5] Sales (Magento_Sales::sales)
\n[6] Dashboard (Magento_Backend::dashboard)
\n[7] System (Magento_Backend::system)
\n[8] Marketing (Magento_Backend::marketing)
\n[9] Content (Magento_Backend::content)
\n[10] Stores (Magento_Backend::stores)
\n[11] Products (Magento_Catalog::catalog)
\n[12] (Magento_Backend::system_currency)
\n[13] Top Level Example (Pulsestorm_MenuTutorial::top_level_example)
\n()] 1
\nUse [Magento_Backend::system] as parent? (Y\/N) (N)] N
\nSelect Parent Menu:
\n[1] Report (Magento_Backend::system_report)
\n[2] Permissions (Magento_User::system_acl)
\n[3] Extensions (Magento_Integration::system_extensions)
\n[4] Tools (Magento_Backend::system_tools)
\n[5] Data Transfer (Magento_Backend::system_convert)
\n[6] Other Settings (Magento_Backend::system_other_settings)
\n()] 6
\nMenu Link ID (Pulsestorm_MenuTutorial::unique_identifier)] Pulsestorm_MenuTutorial::a_menu_item
\nACL Resource (Pulsestorm_MenuTutorial::a_menu_item)] Pulsestorm_MenuTutorial::example_1
\nLink Title (My Link Title)] Look at me, I’m a link
\nThree Segment Action (frontname\/index\/index)] pulsestorm_menututorial\/index\/index
\nSort Order? (10)] 9999
\nWriting: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/MenuTutorial\/etc\/adminhtml\/menu.xml
\nDone.<\/p>\n
<\/p>\n
Magento 2: Admin MVC\/MVVM Endpoints
\nhttps:\/\/alanstorm.com\/magento_2_admin_mvcmvvm_endpoints\/<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_module Pulsestorm HelloAdminBackend 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/registration.php<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_acl Pulsestorm_HelloAdminBackend Pulsestorm_HelloAdminBackend::top,Pulsestorm_HelloAdminBackend::menu_1
\nCreated \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/etc\/acl.xml<\/p>\n
Satrias-MacBook-Pro:code teddy$ php pestle.phar generate_menu Pulsestorm_HelloAdminBackend Magento_Backend::system_other_settings Pulsestorm_HelloAdminBackend::a_menu_item Pulsestorm_HelloAdminBackend::menu_1 “Hello Admin Backend Pestle” pulsestorm_hello_admin_backend\/index\/index 1
\nWriting: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/etc\/adminhtml\/menu.xml
\nDone.<\/p>\n
Satrias-MacBook-Pro:code teddy$ cd ..\/..
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_HelloAdminBackend && php bin\/magento setup:upgrade<\/p>\n
you\u2019ll have a Pulsestorm_HelloAdminBackend module with an ACL hierarchy defined, and a single Menu Item under System -> Other Settings -> Hello Admin Backend Pestle.<\/p>\n
CREATE ADMIN ROUTE
\nSatrias-MacBook-Pro:magentoce215 teddy$ cd app\/code\/
\nSatrias-MacBook-Pro:code teddy$ php pestle.phar generate_route
\nWhich Module? (Pulsestorm_HelloWorld)] Pulsestorm_HelloAdminBackend
\nWhich Area (frontend, adminhtml)? (frontend)] adminhtml
\nFrontname\/Route ID? (pulsestorm_helloworld)] pulsestorm_hello_admin_backend
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/etc\/adminhtml\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/Controller\/Adminhtml\/Index\/Index.php
\nDon’t forget your menu.xml and acl.xml
\naction=”pulsestorm_hello_admin_backend\/index\/index”
\nid=”Pulsestorm_HelloAdminBackend::pulsestorm_hello_admin_backend_menu<\/p>\n
Clear your cache and generated class files, and then click on the Hello Admin Backend Pestle menu. If you\u2019re logged in as the Magento super user, you should be brought to a new, blank admin page!<\/p>\n
ALLOWED USER
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/Controller\/Adminhtml\/Index\/Index.php:
\n..
\nprotected function _isAllowed()
\n{
\nreturn $this->_authorization->isAllowed(‘Pulsestorm_HelloAdminBackend::menu_1’);
\n}
\n…<\/p>\n
ADD ADMIN CONTENT
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_view
\nWhich Module? (Pulsestorm_HelloGenerate)] Pulsestorm_HelloAdminBackend
\nWhich Area? (frontend)] adminhtml
\nWhich Handle? (pulsestorm_helloadminbackend_index_index)] pulsestorm_hello_admin_backend_index_index
\nBlock Name? (Main)] Main
\nTemplate File? (content.phtml)] content.phtml
\nLayout (ignored for adminhtml) ? (1column)]
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/view\/adminhtml\/templates\/content.phtml
\nCreating: Pulsestorm\\HelloAdminBackend\\Block\\Adminhtml\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/view\/adminhtml\/layout\/pulsestorm_hello_admin_backend_index_index.xml<\/p>\n
After running pestle with the above arguments and clearing your cache, reload your page and you should see pestle\u2019s default block content.<\/p>\n
MENU HIGHLIGHT
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/HelloAdminBackend\/Controller\/Adminhtml\/Index\/Index.php:
\n….
\npublic function execute()
\n{
\n\/\/return $this->resultPageFactory->create();
\n$page = $this->resultPageFactory->create();
\n$page->setActiveMenu(‘Pulsestorm_HelloAdminBackend::a_menu_item’);
\nreturn $page;
\n}
\n…<\/p>\n
SET DIFFERENT TITLE
\nMODIFY AGAIN
\n…
\npublic function execute()
\n{
\n\/\/return $this->resultPageFactory->create();
\n$page = $this->resultPageFactory->create();
\n$page->setActiveMenu(‘Pulsestorm_HelloAdminBackend::a_menu_item’);
\n$page->getConfig()->getTitle()->prepend(__(‘My New Title’));
\nreturn $page;
\n}
\n…<\/p>\n
<\/p>\n
Magento 2 Object Manager
\nhttps:\/\/alanstorm.com\/magento_2_object_manager\/<\/p>\n
DOWNLOAD https:\/\/github.com\/astorm\/magento2-tutorial-objectmanager1
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialObjectManager1<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-1
\nYou did it!<\/p>\n
USE OBJECT MANAGER
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialObjectManager1\/Command\/Testbed.php:
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$output->writeln(“You did it!”);
\n$manager = $this->getObjectManager();
\n$object = $manager->create(‘Pulsestorm\\TutorialObjectManager1\\Model\\Example’);
\n$output->writeln($object->getHelloMessage());
\n}
\n…<\/p>\n
TEST THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-1
\nHello Magento!<\/p>\n
SINGLETON
\nMODIFY AGAIN:
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$output->writeln(“You did it!”);
\n$manager = $this->getObjectManager();
\n\/*$object = $manager->create(‘Pulsestorm\\TutorialObjectManager1\\Model\\Example’);
\n$output->writeln($object->getHelloMessage());*\/<\/p>\n
\/\/USE ‘GET’ INSTEAD OF ‘CREATE’ FOR SINGLETON
\n$object = $manager->get(‘Pulsestorm\\TutorialObjectManager1\\Model\\Example’);
\n$object->message = ‘Hello PHP!’;
\n$output->writeln(
\n$object->getHelloMessage()
\n);<\/p>\n
$object = $manager->get(‘Pulsestorm\\TutorialObjectManager1\\Model\\Example’);
\n$output->writeln(
\n$object->getHelloMessage()
\n);
\n}
\n…<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-1
\nHello PHP!
\nHello PHP!<\/p>\n
<\/p>\n
Magento 2\u2019s Automatic Dependency Injection
\nhttps:\/\/alanstorm.com\/magento2_dependency_injection_2015\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-objectmanager2
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialObjectManager2<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-2
\nHello Again World!<\/p>\n
AUTOMATIC DEPENDENCY INJECTION
\nMODIFY ‘__construct’ FUNCTION IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialObjectManager2\/Model\/Example.php:
\n…
\npublic function __construct(Message $message)
\n{
\n\/\/$object = new Message; \/\/
\n\/\/$this->messageObject = $object;
\n$this->messageObject = $message;
\n}
\n…<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-2
\nHello Again World!<\/p>\n
SO NO NEED TO SUPPLY ‘message’ PARAMETER BECAUSE IT’D ALREDY TAKE CARE BY AUTOMATIC DEPENDENCY INJECTION OF M2
\n‘This is automatic dependency injection. Behind the scenes, the object manager will use PHP\u2019s reflection features to look at a class\u2019s __construct type hints\/parameters, automatically instantiate the object for us, and then pass it into the constructor as an argument.’<\/p>\n
<\/p>\n
Magento 2 Object Manager Preferences
\nhttps:\/\/alanstorm.com\/magento_2_object_manager_preferences\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-objectpreference1
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialObjectPreference<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-preference
\nHello!<\/p>\n
CLASS PREFERENCE
\nSEE: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialObjectPreference\/etc\/di.xml<\/p>\n
<\/p>\n
Magento 2 Object Manager Argument Replacement
\nhttps:\/\/alanstorm.com\/magento_2_object_manager_argument_replacement\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-objectmanager-arguments
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialObjectManagerArguments<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-arguments
\nInstalled!<\/p>\n
ARGUMENT REPLACEMENT
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialObjectManagerArguments\/etc\/di.xml:
\n…
\n<type name=”Magento\\Framework\\Console\\CommandList”>
\n…
\n<\/type>
\n<type name=”Pulsestorm\\TutorialObjectManagerArguments\\Model\\Example”>
\n<arguments>
\n<argument name=”scaler1″ xsi:type=”string”>bar<\/argument>
\n<\/arguments>
\n<\/type>
\n…<\/p>\n
RUN THE COMMAND: (CLEAR\/FLUSH CACHE FIRST)
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-arguments
\n…
\nThe Property $scaler1
\nis a string
\nwith a value of: bar
\n…<\/p>\n
REPLACING ARRAYS
\nMODIFY AGAIN:
\n…
\n<type name=”Pulsestorm\\TutorialObjectManagerArguments\\Model\\Example”>
\n<arguments>
\n<argument name=”scaler1″ xsi:type=”string”>bar<\/argument>
\n<argument name=”thearray” xsi:type=”array”>
\n<item name=”0″ xsi:type=”string”>science<\/item>
\n<item name=”baz” xsi:type=”string”>baz<\/item>
\n<item name=”bar” xsi:type=”string”>bar<\/item>
\n<\/argument>
\n<\/arguments>
\n<\/type>
\n…<\/p>\n
RUN THE COMMAND: (CLEAR\/FLUSH CACHE FIRST)
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-object-manager-arguments
\n…
\nThe Property $thearray
\nis an array
\nwith the elements:
\n0=>science
\nbaz=>baz
\nbar=>bar<\/p>\n
Magento 2 Object Manager Virtual Types
\nhttps:\/\/alanstorm.com\/magento_2_object_manager_virtual_types\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-objectmanager-virtual-types
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialVirtualType<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-virtual-type
\nInstalled Pulsestorm_TutorialVirtualType!<\/p>\n
MODIFY ‘execute’ FUNCTION IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialVirtualType\/Command\/Testbed.php:
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n$this->output = $output;
\n\/\/$output->writeln(“Installed Pulsestorm_TutorialVirtualType!”);
\n$this->showNestedPropertiesForObject();
\n}
\n…<\/p>\n
FLUSH THE CACHE AND RUN THE COMMAND AGAIN:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-virtual-type
\nFirst, we’ll report on the Pulsestorm\\TutorialVirtualType\\Model\\Example object
\nThe Property $property_of_example_object
\nis an object
\ncreated with the class:
\nPulsestorm\\TutorialVirtualType\\Model\\Argument1<\/p>\n
Next, we’re going to report on the Example object’s one property (an Argument1 class)
\nThe Property $property_of_argument1_object
\nis an object
\ncreated with the class:
\nPulsestorm\\TutorialVirtualType\\Model\\Argument2<\/p>\n
Finally, we’ll report on an Argument1 object, instantiated seperate from Example
\nThe Property $property_of_argument1_object
\nis an object
\ncreated with the class:
\nPulsestorm\\TutorialVirtualType\\Model\\Argument2<\/p>\n
Creating a Virtual Type
\nWith virtual types, the only behavior you can change in your virtual sub-class is which dependencies are injected.
\nWith virtual types, the only behavior you can change in your virtual sub-class is which dependencies are injected.
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialVirtualType\/etc\/di.xml:
\n…
\n<virtualType name=”ourVirtualTypeName” type=”Pulsestorm\\TutorialVirtualType\\Model\\Argument1″>
\n<arguments>
\n<argument name=”the_argument” xsi:type=”object”>Pulsestorm\\TutorialVirtualType\\Model\\Argument3<\/argument>
\n<\/arguments>
\n<\/virtualType><\/p>\n
<type name=”Pulsestorm\\TutorialVirtualType\\Model\\Example”>
\n<arguments>
\n<argument name=”the_object” xsi:type=”object”>ourVirtualTypeName<\/argument>
\n<\/arguments>
\n<\/type>
\n…<\/p>\n
FLUSH THE CACHE AND RUN THE COMMAND AGAIN:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-virtual-type
\nFirst, we’ll report on the Pulsestorm\\TutorialVirtualType\\Model\\Example object
\nThe Property $property_of_example_object
\nis an object
\ncreated with the class:
\nPulsestorm\\TutorialVirtualType\\Model\\Argument1<\/p>\n
Next, we’re going to report on the Example object’s one property (an Argument1 class)
\nThe Property $property_of_argument1_object
\nis an object
\ncreated with the class:
\nPulsestorm\\TutorialVirtualType\\Model\\Argument3 <– IT’S CHANGED BY VIRTUALTYPE<\/p>\n
Finally, we’ll report on an Argument1 object, instantiated seperate from Example
\nThe Property $property_of_argument1_object
\nis an object
\ncreated with the class:
\nPulsestorm\\TutorialVirtualType\\Model\\Argument2 <– NOT CHANGED<\/p>\n
You\u2019ll notice that the property_of_argument1_object property is now an Argument3 object \u2014 but only when that parameter\u2019s owner class (Argument1) is instantiated by dependency injection in the Example class. When we instantiate Argument1 by itself \u2014 Magento does not inject a dependency.<\/p>\n
<\/p>\n
Magento 2 Object Manager: Proxy Objects
\nhttps:\/\/alanstorm.com\/magento_2_object_manager_proxy_objects\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-proxy-objects
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialProxy1
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialProxy2<\/p>\n
RUN A COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-proxy
\nYou’ve installed Pulsestorm_TutorialProxy2!
\nYou’ve also installed Pulsestorm_TutorialProxy1!<\/p>\n
MODIFY ‘execute’ FUNCTION IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialProxy2\/Command\/Testbed.php:
\n…
\nprotected function execute(InputInterface $input, OutputInterface $output)
\n{
\n\/\/$this->installedCheck($output);
\n$service = $this->createService($output);
\n$this->sayHelloWithFastObject($service, $output);
\n$this->sayHelloWithSlowObject($service, $output);
\n}
\n…<\/p>\n
RUN THE COMMAND AGAIN:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-proxy
\nAbout to Create Service
\nConstructing FastLoading Object
\nConstructing SlowLoading Object
\nCreated Service, approximate time to load: 3006.922 ms <– SLOW<\/p>\n
About to say hello with fast object
\nHello
\nSaid hello with fast object, approximate time to load: 0.0188 ms<\/p>\n
About to say hello with slow object
\nHello
\nSaid hello with slow object, approximate time to load: 0.0551 ms<\/p>\n
TO REPLACE THE SLOW OBJECT IN TutorialProxy1 OBJECT, WE CAN’T USE PREFERENCE BUT PROXY. SO MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialProxy2\/etc\/di.xml:
\n…
\n<!– Notice: we’re using `TutorialProxy2`’s di.xml to change the
\nbehavior of `TutorialProxy1`. This the far more common usage
\nof object manager\/dependency-injection than the examples in
\nour tutorial so far –><\/p>\n
<type name=”Pulsestorm\\TutorialProxy1\\Model\\Example”>
\n<arguments>
\n<argument name=”slow” xsi:type=”object”>Pulsestorm\\TutorialProxy1\\Model\\SlowLoading\\Proxy<\/argument>
\n<\/arguments>
\n<\/type><\/p>\n
<\/config><\/p>\n
THEN FLUSH THE CACHE AND RUN THE COMMAND AGAIN:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-proxy
\nAbout to Create Service
\nConstructing FastLoading Object
\nCreated Service, approximate time to load: 9.789 ms <– MUCH FASTER FOR THE FIRST TIME<\/p>\n
About to say hello with fast object
\nHello
\nSaid hello with fast object, approximate time to load: 0.0129 ms<\/p>\n
About to say hello with slow object
\nConstructing SlowLoading Object
\nHello
\nSaid hello with slow object, approximate time to load: 3005.425 ms<\/p>\n
THEN RE-RUN:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-proxy
\nAbout to Create Service
\nConstructing FastLoading Object
\nCreated Service, approximate time to load: 1.6 ms <– EVEN FASTER FOR THE 2nd TIME<\/p>\n
About to say hello with fast object
\nHello
\nSaid hello with fast object, approximate time to load: 0.0131 ms<\/p>\n
About to say hello with slow object
\nConstructing SlowLoading Object
\nHello
\nSaid hello with slow object, approximate time to load: 3000.463 ms<\/p>\n
<\/p>\n
Magento 2 Object Manager: Instance Objects
\nhttps:\/\/alanstorm.com\/magento_2_object_manager_instance_objects\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-instance-objects
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialInstanceObjects<\/p>\n
RUN A COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-instance-objects
\nYou’ve installed Pulsestorm_TutorialInstanceObjects<\/p>\n
<\/p>\n
Magento 2 Object Manager Plugin System
\nhttps:\/\/alanstorm.com\/magento_2_object_manager_plugin_system\/<\/p>\n
DOWNLOAD FROM https:\/\/github.com\/astorm\/magento2-tutorial-plugin
\nAND FOLLOW THE INSTRUCTION TO PUT IN IN \/app\/code\/Pulsestorm\/ DIR<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_TutorialPlugin<\/p>\n
RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin-installed
\nYou’ve installed Pulsestorm_TutorialPlugin<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example<\/p>\n
Calling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nResult: hello hola!<\/p>\n
CREATE A PLUGIN:
\nIt\u2019s inevitable that the larger community will start using the word \u201cplugin\u201d as a place-holder for \u201cextension\u201d or \u201cmodule\u201d, but in the language of the object manager, a \u201cplugin\u201d refers to a special class that\u2019s listening for any public method call to another object.
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialPlugin\/etc\/di.xml:
\n…
\n<type name=”Pulsestorm\\TutorialPlugin\\Model\\Example”>
\n<plugin name=”pulsestorm_tutorial_plugin_model_example_plugin”
\ntype=”Pulsestorm\\TutorialPlugin\\Model\\Example\\Plugin”
\nsortOrder=”10″
\ndisabled=”false”\/>
\n<\/type>
\n…<\/p>\n
CREATE A NEW EMPTY CLASS ‘Plugin’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialPlugin\/Model\/Example\/Plugin.php:
\n<?php
\nnamespace Pulsestorm\\TutorialPlugin\\Model\\Example;
\nclass Plugin
\n{<\/p>\n
}<\/p>\n
FLUSH THE CACHE AND RE-RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example\\Interceptor <– INTERCEPTOR ADDED FOR THE PLUGIN!!<\/p>\n
Calling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nResult: hello hola!<\/p>\n
Plugins: After Methods
\nADD ‘afterGetMessage’ FUNCTION IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialPlugin\/Model\/Example\/Plugin.php:
\n…
\npublic function afterGetMessage($subject, $result)
\n{
\necho “Calling ” , __METHOD__,”\\n”;
\nreturn $result;
\n}
\n…<\/p>\n
RE-RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example\\Interceptor<\/p>\n
Calling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nCalling Pulsestorm\\TutorialPlugin\\Model\\Example\\Plugin::afterGetMessage
\nResult: hello hola!<\/p>\n
Plugins: Before Methods
\nADD ‘beforeGetMessage’ FUNCTION IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialPlugin\/Model\/Example\/Plugin.php:
\n…
\npublic function beforeGetMessage($subject, $thing=’World’, $should_lc=false)
\n{
\necho “Calling ” . __METHOD__,”\\n”;
\n}
\n…<\/p>\n
RE-RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example\\Interceptor<\/p>\n
Calling Pulsestorm\\TutorialPlugin\\Model\\Example\\Plugin::beforeGetMessage
\nCalling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nResult: hello hola!<\/p>\n
…
\npublic function beforeGetMessage($subject, $thing=’World’, $should_lc=false)
\n{
\n\/\/echo “Calling ” . __METHOD__,”\\n”;
\nreturn [‘Changing the argument’, $should_lc];
\n}
\n…<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example\\Interceptor<\/p>\n
Calling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nResult: hello changing the argument!<\/p>\n
Plugins: Around Methods
\nMODIFY
\n…
\npublic function aroundGetMessage($subject, $procede, $thing=’World’, $should_lc=false)
\n{
\necho ‘Calling’ . __METHOD__ . ‘ — before’,”\\n”;
\n$result = $procede();
\necho ‘Calling’ . __METHOD__ . ‘ — after’,”\\n”;
\nreturn $result;
\n}
\n…<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example\\Interceptor<\/p>\n
CallingPulsestorm\\TutorialPlugin\\Model\\Example\\Plugin::aroundGetMessage — before
\nCalling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nCallingPulsestorm\\TutorialPlugin\\Model\\Example\\Plugin::aroundGetMessage — after
\nResult: Hello World!<\/p>\n
AVOID PLUGIN CONFLICT FOR SAME FUNCTION\/METHOD NAME
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/TutorialPlugin\/etc\/di.xml:
\n…
\n<!– START: two new plugins –>
\n<type name=”Pulsestorm\\TutorialPlugin\\Model\\Example”>
\n<plugin name=”pulsestorm_tutorial_plugin_model_conflict_plugin1″
\ntype=”Pulsestorm\\TutorialPlugin\\Model\\Conflict\\Plugin1″
\nsortOrder=”10″
\ndisabled=”false”\/>
\n<\/type><\/p>\n
<type name=”Pulsestorm\\TutorialPlugin\\Model\\Example”>
\n<plugin name=”pulsestorm_tutorial_plugin_model_conflict_plugin2″
\ntype=”Pulsestorm\\TutorialPlugin\\Model\\Conflict\\Plugin2″
\nsortOrder=”15″
\ndisabled=”false”\/>
\n<\/type>
\n<!– START: two new plugins –>
\n…<\/p>\n
RE-RUN THE COMMAND:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento ps:tutorial-plugin<\/p>\n
We’re going to call the `getMessage` method on the class<\/p>\n
Pulsestorm\\TutorialPlugin\\Model\\Example\\Interceptor<\/p>\n
CallingPulsestorm\\TutorialPlugin\\Model\\Example\\Plugin::aroundGetMessage — before
\nCalling the real Pulsestorm\\TutorialPlugin\\Model\\Example::getMessage
\nCalling Pulsestorm\\TutorialPlugin\\Model\\Conflict\\Plugin1::afterGetMessage
\nCalling Pulsestorm\\TutorialPlugin\\Model\\Conflict\\Plugin2::afterGetMessage
\nCallingPulsestorm\\TutorialPlugin\\Model\\Example\\Plugin::aroundGetMessage — after
\nResult: From Plugin 2<\/p>\n
Magento 2: Introducing UI Components
\nhttps:\/\/alanstorm.com\/magento_2_introducing_ui_components\/<\/p>\n
Satrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar magento2:generate:ui:grid
\nWhich Module? (Pulsestorm_Gridexample)] Pulsestorm_ToDoCrud
\nCreate a unique ID for your Listing\/Grid! (pulsestorm_gridexample_log)] pulsestorm_todo_listing
\nWhat Resource Collection Model should your listing use? (Magento\\Cms\\Model\\ResourceModel\\Page\\Collection)] Pulsestorm\\ToDoCrud\\Model\\ResourceModel\\TodoItem\\Collection
\nWhat’s the ID field for you model? (pulsestorm_gridexample_log_id)] pulsestorm_todocrud_todoitem_id
\nCreating New \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/view\/adminhtml\/ui_component\/pulsestorm_todo_listing.xml
\nCreating: Pulsestorm\\ToDoCrud\\Ui\\Component\\Listing\\DataProviders\\Pulsestorm\\Todo\\Listing
\nCreating: Pulsestorm\\ToDoCrud\\Ui\\Component\\Listing\\Column\\Pulsestormtodolisting\\PageActions
\nDon’t forget to add this to your layout XML with <uiComponent name=”pulsestorm_todo_listing”\/><\/p>\n
ADD A NEW FILE: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/view\/adminhtml\/layout\/pulsestorm_admin_todocrud_index_index.xml:
\n<?xml version=”1.0″?>
\n<page xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd”>
\n<body>
\n<referenceBlock name=”content”>
\n<uiComponent name=”pulsestorm_todo_listing”\/>
\n<\/referenceBlock>
\n<\/body>
\n<\/page><\/p>\n
<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/ToDoCrud\/view\/adminhtml\/ui_component\/pulsestorm_todo_listing.xml:
\n…
\n<column name=”pulsestorm_todocrud_todoitem_id”>
\n…
\n<\/column>
\n<column name=”title”>
\n<argument name=”data” xsi:type=”array”>
\n<item name=”config” xsi:type=”array”>
\n<item name=”filter” xsi:type=”string”>text<\/item>
\n<item name=”label” xsi:type=”string” translate=”true”>Item Title<\/item>
\n<item name=”sortOrder” xsi:type=”number”>20<\/item>
\n<\/item>
\n<\/argument>
\n<\/column>
\n<actionsColumn name=”actions” …<\/p>\n
Magento 2: Simplest UI Component
\nhttps:\/\/alanstorm.com\/magento_simplest_ui_component\/<\/p>\n
CREATE THE MODULE:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_module Pulsestorm SimpleUiComponent 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/registration.php<\/p>\n
CREATE ACL:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_acl Pulsestorm_SimpleUiComponent Pulsestorm_SimpleUiComponent::top,Pulsestorm_SimpleUiComponent::menu_1
\nCreated \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/etc\/acl.xml<\/p>\n
CREATE MENU:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_menu Pulsestorm_SimpleUiComponent Magento_Backend::system_other_settings Pulsestorm_SimpleUiComponent::a_menu_item Pulsestorm_SimpleUiComponent::menu_1 “Hello Simple Ui Component” pulsestorm_simpleuicomponent\/index\/index 1
\nWriting: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/etc\/adminhtml\/menu.xml
\nDone.<\/p>\n
CREATE ROUTE:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_route Pulsestorm_SimpleUiComponent adminhtml pulsestorm_simpleuicomponent
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/etc\/adminhtml\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/Controller\/Adminhtml\/Index\/Index.php
\nDon’t forget your menu.xml and acl.xml
\naction=”pulsestorm_simpleuicomponent\/index\/index”
\nid=”Pulsestorm_SimpleUiComponent::pulsestorm_simpleuicomponent_menu<\/p>\n
CREATE VIEW:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_view Pulsestorm_SimpleUiComponent adminhtml pulsestorm_simpleuicomponent_index_index Main content.phtml 1column
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/templates\/content.phtml
\nCreating: Pulsestorm\\SimpleUiComponent\\Block\\Adminhtml\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/layout\/pulsestorm_simpleuicomponent_index_index.xml<\/p>\n
ENABLE THE MODULE:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_SimpleUiComponent && php bin\/magento setup:upgrade<\/p>\n
After running the above commands, you should be able to navigate to Magento\u2019s backend and click on the System -> Other Settings -> Hello Simple Ui Component menu to bring up our new backend section.<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/layout\/pulsestorm_simpleuicomponent_index_index.xml:
\n…
\n<referenceBlock name=”content”>
\n<block template=”content.phtml” …\/><\/p>\n
<!– START: our new ui component –>
\n<uiComponent name=”pulsestorm_simple”\/>
\n<!– END: our new ui component –>
\n<\/referenceBlock>
\n…<\/p>\n
CREATE A NEW FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple.xml:
\n<?xml version=”1.0″?>
\n<pulsestorm_simple xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”>
\n<\/pulsestorm_simple><\/p>\n
THEN CREATE A NEW FILE ‘definition.xml’ IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/base\/ui_component\/etc\/definition.xml:
\n<?xml version=”1.0″?>
\n<components xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_definition.xsd”>
\n<pulsestorm_simple class=”Pulsestorm\\SimpleUiComponent\\Component\\Simple”\/>
\n<\/components><\/p>\n
HERE WE NEED TO ADD CLASS PREFERENCE. SO CREATE ‘di.xml’ FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/etc\/di.xml:
\n<?xml version=”1.0″?>
\n<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:ObjectManager\/etc\/config.xsd”>
\n<preference for=”Magento\\Framework\\App\\Arguments\\ValidationState” type=”Pulsestorm\\SimpleUiComponent\\Model\\ValidationState”\/>
\n<\/config><\/p>\n
THEN CREATE A NEW PHP FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/Model\/ValidationState.php:
\n<?php
\nnamespace Pulsestorm\\SimpleUiComponent\\Model;
\nclass ValidationState extends \\Magento\\Framework\\App\\Arguments\\ValidationState
\n{
\npublic function isValidationRequired()
\n{
\nreturn false;
\n}
\n}<\/p>\n
THEN CREATE ANOTHER NEW PHP FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/Component\/Simple.php:
\n<?php
\nnamespace Pulsestorm\\SimpleUiComponent\\Component;
\nclass Simple extends \\Magento\\Ui\\Component\\AbstractComponent
\n{
\nconst NAME = ‘pulsestorm_simple’;
\npublic function getComponentName()
\n{
\nreturn static::NAME;
\n}
\n}<\/p>\n
THEN MODIFY ‘definition.xml’ LIKE THIS:
\n<?xml version=”1.0″?>
\n<components xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_definition.xsd”>
\n<pulsestorm_simple class=”Pulsestorm\\SimpleUiComponent\\Component\\Simple”>
\n<argument name=”data” xsi:type=”array”>
\n<item name=”template” xsi:type=”string”>templates\/our-template<\/item>
\n<\/argument>
\n<\/pulsestorm_simple>
\n<\/components><\/p>\n
THEN CREATE A NEW XHTML FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/ui_component\/templates\/our-template.xhtml:
\n<?xml version=”1.0″ encoding=”UTF-8″?>
\n<div>
\n<h1>Hello World<\/h1>
\n<\/div><\/p>\n
<\/p>\n
THEN MODIFY ‘pulsestorm_simple.xml’ FILE:
\n<?xml version=”1.0″?>
\n<pulsestorm_simple xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”><\/p>\n
<dataSource name=”pulsestorm_simple_data_source”>
\n<argument name=”dataProvider” xsi:type=”configurableObject”>
\n<!– the PHP class that implements a data provider –>
\n<argument name=”class” xsi:type=”string”>Pulsestorm\\SimpleUiComponent\\Model\\DataProvider<\/argument><\/p>\n
<!– redundant with the `dataSource` name –>
\n<argument name=”name” xsi:type=”string”>pulsestorm_simple_data_source<\/argument><\/p>\n
<!– required: means ui components are meant to work with models –>
\n<argument name=”primaryFieldName” xsi:type=”string”>entity_id<\/argument><\/p>\n
<!– required: means ui components are meant to work with URL passing –>
\n<argument name=”requestFieldName” xsi:type=”string”>id<\/argument>
\n<\/argument><\/p>\n
<\/dataSource><\/p>\n
<\/pulsestorm_simple><\/p>\n
THEN ADD A NEW PHP FILE (DATA PROVIDER) IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/Model\/DataProvider.php:
\n<?php
\nnamespace Pulsestorm\\SimpleUiComponent\\Model;
\nclass DataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider
\n{
\n}<\/p>\n
OK. CLEAR THE CACHE THEN TEST IT ON THE ADMIN PAGE (SYSTEM -> HELLO SIMPLE UI COMPONENT).
\nIT SHOULD DIPLAY:
\nMagento Admin
\nThis is my template, there are many like it, but this one is mine.
\nHello World<\/p>\n
<\/p>\n
MODIFYING XHTML TEMPLATE.
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/Component\/Simple.php TO ADD NEW FUNCTION ‘getEvenMoreData’:
\n…
\n\/\/added this method
\npublic function getEvenMoreData()
\n{
\nreturn ‘Even More Data!’;
\n}
\n…<\/p>\n
THEN CALL THE FUNCTION FROM \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/ui_component\/templates\/our-template.xhtml:
\n…
\n<p>
\n{{getComponentName()}}
\n<\/p><\/p>\n
<p>
\n{{getEvenMoreData()}}
\n<\/p>
\n…<\/p>\n
OK. CLEAR THE CACHE THEN TEST IT ON THE ADMIN PAGE (SYSTEM -> HELLO SIMPLE UI COMPONENT).
\nIT SHOULD DIPLAY:
\nMagento Admin
\nThis is my template, there are many like it, but this one is mine.
\nHello World
\npulsestorm_simple
\nEven More Data!<\/p>\n
<\/p>\n
Magento 2: Simplest UI Knockout Component
\nhttps:\/\/alanstorm.com\/magento_2_simplest_ui_knockout_component\/<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/base\/ui_component\/etc\/definition.xml:
\n…
\n<argument name=”data” xsi:type=”array”>
\n…
\n<item name=”config” xsi:type=”array”>
\n<item name=”component” xsi:type=”string”>Pulsestorm_SimpleUiComponent\/js\/pulsestorm_simple_component<\/item>
\n<\/item>
\n<\/argument>
\n….<\/p>\n
CREATE A NEW JS FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/web\/js\/pulsestorm_simple_component.js:
\n\/*define([], function(){
\nconsole.log(‘Called’);
\n});*\/
\ndefine([‘uiElement’], function(Element){
\nconsole.log(‘Called’);
\nviewModelConstructor = Element.extend({
\ndefaults: {
\ntemplate: ‘Pulsestorm_SimpleUiComponent\/pulsestorm_simple_template’
\n}
\n});<\/p>\n
return viewModelConstructor;
\n});<\/p>\n
\/\/IT’D PRINT ‘Called’.<\/p>\n
CREATE THE HTML TEMPLATE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/web\/template\/pulsestorm_simple_template.html:
\n<h1>Rendered with Knockout.js<\/h1><\/p>\n
MODIFY THE XHTML COMPONENT IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/ui_component\/templates\/our-template.xhtml:
\n…
\n<div>
\n…<\/p>\n
<div data-bind=”scope: ‘pulsestorm_simple.pulsestorm_simple'” class=”entry-edit form-inline”>
\n<!– ko template: getTemplate() –><!– \/ko –>
\n<\/div>
\n<\/div><\/p>\n
OK. CLEAR THE CACHE AND RELOAD:
\nIT’D PRINT
\nMagento Admin<\/p>\n
This is my template, there are many like it, but this one is mine.
\nHello World
\npulsestorm_simple<\/p>\n
Even More Data!<\/p>\n
{{message}}<\/p>\n
Rendered with Knockout.js<\/p>\n
NOTE: ‘pulsestorm_simple.pulsestorm_simple’ IS FROM THE UICOMPONENT NAME (\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple.xml)<\/p>\n
TO SHOW A MESSAGE IN THE HTML FILE (pulsestorm_simple_template.html), MODIFY THE COMPONENT (\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/web\/js\/pulsestorm_simple_component.js) LIKE THIS:
\ndefine([‘uiElement’, ‘ko’], function(Element, ko){
\nconsole.log(‘Called’);
\nviewModelConstructor = Element.extend({
\ndefaults: {
\ntemplate: ‘Pulsestorm_SimpleUiComponent\/pulsestorm_simple_template’
\n},
\nmessage: ko.observable(“Hello Knockout.js!”)
\n});<\/p>\n
return viewModelConstructor;
\n});<\/p>\n
THEN IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/web\/template\/pulsestorm_simple_template.html:
\n<h1>Rendered with Knockout.js<\/h1><\/p>\n
<strong data-bind=”text:message”><\/strong><\/p>\n
CLEAR THE CACHE AND RELOAD.<\/p>\n
HERE IS ANOTHER WAY TO RENDER THE TEMPLATE
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/base\/ui_component\/etc\/definition.xml:
\n…
\n<item name=”config” xsi:type=”array”>
\n<!– <item name=”component” xsi:type=”string”>Pulsestorm_SimpleUiComponent\/js\/pulsestorm_simple_component<\/item> –>
\n<item name=”component” xsi:type=”string”>uiComponent<\/item>
\n<\/item>
\n…<\/p>\n
THEN MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple.xml AND ADD:
\n…
\n<pulsestorm_simple xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”><\/p>\n
<dataSource name=”pulsestorm_simple_data_source”>
\n…<\/p>\n
<\/dataSource><\/p>\n
<htmlContent name=”first_ever_child”>
\n<argument name=”block” xsi:type=”object”>Magento\\Framework\\View\\Element\\Text<\/argument>
\n<argument name=”data” xsi:type=”array”>
\n<item name=”config” xsi:type=”array”>
\n<item name=”component” xsi:type=”string”>Pulsestorm_SimpleUiComponent\/js\/pulsestorm_simple_component<\/item>
\n<\/item>
\n<\/argument>
\n<\/htmlContent><\/p>\n
<\/pulsestorm_simple><\/p>\n
THEN CLEAR CACHE AND RELOAD. IT’D PRINT THE SAME! BUT IF I MODIFY THE ABOVE XML FILE FURTHER, LIKE THIS (ADD “second_ever_child”):
\n…
\n<htmlContent name=”first_ever_child”>
\n…
\n<\/htmlContent><\/p>\n
<htmlContent name=”second_ever_child”>
\n<argument name=”block” xsi:type=”object”>Magento\\Framework\\View\\Element\\Text<\/argument>
\n<argument name=”data” xsi:type=”array”>
\n<item name=”config” xsi:type=”array”>
\n<item name=”component” xsi:type=”string”>Pulsestorm_SimpleUiComponent\/js\/pulsestorm_simple_component<\/item>
\n<\/item>
\n<\/argument>
\n<\/htmlContent>
\n…<\/p>\n
THE TEMPLATE WOULD BE RENDERED TWICE!<\/p>\n
<\/p>\n
Magento 2: Simplest XSD Valid UI Component
\nhttps:\/\/alanstorm.com\/magento_2_simplest_xsd_valid_ui_component\/<\/p>\n
DISABLE THE SIMPLEUICOMPONENT FIRST:
\nphp bin\/magento module:disable Pulsestorm_SimpleUiComponent<\/p>\n
CREATE A NE MODULE:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_module Pulsestorm SimpleValidUiComponent 0.0.1
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/etc\/module.xml
\nCreated: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/registration.php<\/p>\n
CREATE ACL:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_acl Pulsestorm_SimpleValidUiComponent Pulsestorm_SimpleValidUiComponent::top,Pulsestorm_SimpleValidUiComponent::menu_1
\nCreated \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/etc\/acl.xml<\/p>\n
CREATE A MENU:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_menu Pulsestorm_SimpleValidUiComponent Magento_Backend::system_other_settings Pulsestorm_SimpleValidUiComponent::a_menu_item Pulsestorm_SimpleValidUiComponent::menu_1 “Hello Simple Valid Ui Component” pulsestorm_simplevaliduicomponent\/index\/index 1
\nWriting: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/etc\/adminhtml\/menu.xml
\nDone.<\/p>\n
CREATE A ROUTE:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_route Pulsestorm_SimpleValidUiComponent adminhtml pulsestorm_simplevaliduicomponent
\nController name? (Index)]
\nAction name? (Index)]
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/etc\/adminhtml\/routes.xml
\n\/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/Controller\/Adminhtml\/Index\/Index.php
\nDon’t forget your menu.xml and acl.xml
\naction=”pulsestorm_simplevaliduicomponent\/index\/index”
\nid=”Pulsestorm_SimpleValidUiComponent::pulsestorm_simplevaliduicomponent_menu<\/p>\n
CREATE VIEW:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php pestle.phar generate_view Pulsestorm_SimpleValidUiComponent adminhtml pulsestorm_simplevaliduicomponent_index_index Main content.phtml 1column
\nCreating \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/templates\/content.phtml
\nCreating: Pulsestorm\\SimpleValidUiComponent\\Block\\Adminhtml\\Main
\nCreating: \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/layout\/pulsestorm_simplevaliduicomponent_index_index.xml<\/p>\n
ENABLE THE MODULE:
\nSatrias-MacBook-Pro:magentoce215 teddy$ php bin\/magento module:enable Pulsestorm_SimpleValidUiComponent && php bin\/magento setup:upgrade<\/p>\n
With the above in place, clear your cache, and you should be able to navigate to a System -> Other Settings -> Hello Simple Valid Ui Component menu in your Magento backend.<\/p>\n
CLEAR THE CACHE AND RELOAD<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/layout\/pulsestorm_simplevaliduicomponent_index_index.xml TO ADD ‘uiComponent’:
\n…
\n<referenceBlock name=”content”>
\n<block template=”content.phtml” class=”Pulsestorm\\SimpleValidUiComponent\\Block\\Adminhtml\\Main” name=”pulsestorm_simplevaliduicomponent_block_main”\/><\/p>\n
<uiComponent name=”pulsestorm_simple_valid”\/><\/p>\n
<\/referenceBlock>
\n….<\/p>\n
then we\u2019ll create an XML file for this named UI Component IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple_valid.xml:
\n<?xml version=”1.0″?>
\n<pulsestorm_simple_valid xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”>
\n<\/pulsestorm_simple_valid><\/p>\n
<\/p>\n
MODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple_valid.xml:
\n<container xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”>
\n<\/container><\/p>\n
MODIFY AGAIN TO ADD ‘dataSource’ NODE:
\n<container xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”>
\n<dataSource name=”pulsestorm_simple_valid_data_source”>
\n<argument name=”dataProvider” xsi:type=”configurableObject”>
\n<!– the PHP class that implements a data provider –>
\n<argument name=”class” xsi:type=”string”>Pulsestorm\\SimpleValidUiComponent\\Model\\DataProvider<\/argument><\/p>\n
<!– redundant with the `dataSource` name –>
\n<argument name=”name” xsi:type=”string”>pulsestorm_simple_valid_data_source<\/argument><\/p>\n
<!– required: means ui components are meant to work with models –>
\n<argument name=”primaryFieldName” xsi:type=”string”>entity_id<\/argument><\/p>\n
<!– required: means ui components are meant to work with URL passing –>
\n<argument name=”requestFieldName” xsi:type=”string”>id<\/argument>
\n<\/argument>
\n<\/dataSource>
\n<\/container><\/p>\n
THEN add a new data provider class IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/Model\/DataProvider.php:
\n<?php
\nnamespace Pulsestorm\\SimpleValidUiComponent\\Model;
\nclass DataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider
\n{
\n}<\/p>\n
THEN CLEAR THE CACHE AND RELOAD<\/p>\n
CHANGING TEMPLATE
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple_valid.xml:
\n<container xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd”>
\n<argument name=”data” xsi:type=”array”>
\n<item name=”template” xsi:type=”string”>templates\/pulsestorm_simple_valid\/default<\/item>
\n<\/argument><\/p>\n
<dataSource name=”pulsestorm_simple_valid_data_source”>
\n…
\n<\/dataSource>
\n<\/container><\/p>\n
THEN CREATE A XHTML FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/ui_component\/templates\/pulsestorm_simple_valid\/default.xhtml:
\n<div
\ndata-bind=”scope: ‘{{getName()}}.{{getName()}}'”
\nxmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance”
\nxsi:noNamespaceSchemaLocation=”..\/..\/..\/..\/..\/..\/Ui\/etc\/ui_template.xsd”><\/p>\n
<!– ko template: getTemplate() –><!– \/ko –>
\n<\/div><\/p>\n
ADD an htmlContent component\/node IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple_valid.xml:
\n<container …>
\n…<\/p>\n
<htmlContent name=”our_first_content”>
\n<argument name=”block” xsi:type=”object”>Pulsestorm\\SimpleValidUiComponent\\Block\\Example<\/argument>
\n<\/htmlContent>
\n<\/container><\/p>\n
THEN CREATE A PHP FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/Block\/Example.php:
\n<?php
\nnamespace Pulsestorm\\SimpleValidUiComponent\\Block;<\/p>\n
use Magento\\Framework\\View\\Element\\BlockInterface;<\/p>\n
class Example extends \\Magento\\Framework\\View\\Element\\AbstractBlock
\n{
\npublic function toHtml()
\n{
\nreturn ‘<h1>Hello PHP Block Rendered in JS<\/h1>’;
\n}
\n}<\/p>\n
OK. CLEAR THE CACHE AND RELOAD.
\nIT’D PRINT:
\nMagento Admin<\/p>\n
This is my template, there are many like it, but this one is mine.
\nHello PHP Block Rendered in JS<\/p>\n
Hijacking htmlContent
\nTHIS IS ANOTHER WAY TO RENDER TEMPLATE WITH A COMPONENT CLASS:
\nMODIFY \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/ui_component\/pulsestorm_simple_valid.xml:
\n<container …>
\n…<\/p>\n
<htmlContent class=”Pulsestorm\\SimpleValidUiComponent\\Component\\Simple” name=”our_first_content”>
\n<argument name=”data” xsi:type=”array”>
\n<item name=”config” xsi:type=”array”>
\n<item name=”component” xsi:type=”string”>Pulsestorm_SimpleValidUiComponent\/js\/pulsestorm_simple_component<\/item>
\n<\/item>
\n<\/argument>
\n<\/htmlContent>
\n<\/container><\/p>\n
CREATE A COMPONENT FILE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/Component\/Simple.php:
\n<?php
\nnamespace Pulsestorm\\SimpleValidUiComponent\\Component;
\nclass Simple extends \\Magento\\Ui\\Component\\AbstractComponent
\n{
\nconst NAME = ‘html_content_pulsestorm_simple’;
\npublic function getComponentName()
\n{
\nreturn self::getName();
\n}
\n}<\/p>\n
CREATE THE KNOCKOUT JS VIEW MODEL IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/web\/js\/pulsestorm_simple_component.js:
\ndefine([‘uiElement’,’ko’], function(Element, ko){
\nviewModelConstructor = Element.extend({
\ndefaults: {
\ntemplate: ‘Pulsestorm_SimpleValidUiComponent\/pulsestorm_simple_template’
\n}
\n});<\/p>\n
return viewModelConstructor;
\n});<\/p>\n
THEN CREATE THE TEMPLATE IN \/Library\/WebServer\/Documents\/Projects\/magentoce215\/app\/code\/Pulsestorm\/SimpleValidUiComponent\/view\/adminhtml\/web\/template\/pulsestorm_simple_template.html:
\n<h1>Our Remote Knockout Template!<\/h1><\/p>\n
THEN clear your cache and reload the page
\nIT’D PRINT:
\nMagento Admin<\/p>\n
This is my template, there are many like it, but this one is mine.
\nOur Remote Knockout Template!<\/p>\n
CONCLUSION SO FAR:<\/p>\n
Magento uses Knockout.js to render front end interfaces.<\/p>\n
By default, Knockout.js uses the entire HTML page as a view, and a javascript object for the view model.<\/p>\n
To use Knockout.js, programmers create a javascript constructor function. Knockout.js uses this constructor function to instantiate a view model.<\/p>\n
Magento added a custom Knockout.js binding named scope. Scope allows different areas of the page to use different view models.<\/p>\n
These different view models are instantiated by the Magento_Ui\/js\/core\/app RequireJS module. This module is embedded in the page via an x-magento-init script, and this module uses a large data structure rendered via the backend\u2019s UI Component classes and XML. This data structure configures a number of RequireJS modules called \u201ccomponents\u201d.<\/p>\n
These components are \u201cview model constructor factories\u201d. The Magento_Ui\/js\/core\/app application uses these RequireJS components to create view model constructors, and then uses the instantiated view model constructor function to instantiate view models. Finally, the Magento_Ui\/js\/core\/app application registers each instantiated view model object, (by name), with the uiRegistry RequireJS module. The view model\u2019s registered names come from the large data structure rendered via the backend\u2019s UI Component classes and XML.<\/p>\n
The view model constructor objects are based on a Magento built javascript object system. This object system uses RequireJS modules as classes, and uses underscore.js for inheritance and method\/property sharing. There\u2019s also some Magento secret sauce in there. The base class is the uiClass module. The uiElement class\/module extends from the uiClass class\/module. Most of Magento\u2019s Knockout.js view model constructors are uiElement objects.<\/p>\n
Above, we mentioned the uiRegistry, uiClass, and uiElement RequireJS modules. These are RequireJS \u201cmap aliases\u201d that point to the real modules at Magento_Ui\/js\/lib\/registry\/registry, Magento_Ui\/js\/lib\/core\/class, and Magento_Ui\/js\/lib\/core\/element\/element respectively.<\/p>\n","protected":false},"excerpt":{"rendered":"
REF: http:\/\/alanstorm.com\/category\/magento-2\/ SETTING VirtualHost REF:https:\/\/medium.com\/@JohnFoderaro\/how-to-set-up-apache-in-macos-sierra-10-12- bca5a5dfffba MODIFY \/private\/etc\/apache2\/extra\/httpd-vhosts.conf: … <VirtualHost *:80> ServerName magentoce215.lcoal ServerAlias www.magentoce215.local DocumentRoot “\/Library\/WebServer\/Documents\/Projects\/magentoce215” DirectoryIndex index.php <Directory “\/Library\/WebServer\/Documents\/Projects\/magentoce215”> AllowOverride All Allow from All Require all granted <\/Directory> ErrorLog “\/private\/var\/log\/apache2\/magentoce215_error.log” CustomLog “\/private\/var\/log\/apache2\/magentoce215_access.log” common <\/VirtualHost> MODIFY \/etc\/hosts: … 127.0.0.1 magentoce215.local … RESTART APACHE: sudo apachectl restart OPEN http:\/\/magentoce215.local\/ INSTALL PESTLE (https:\/\/github.com\/astorm\/pestle) Satrias-MacBook-Pro:~ teddy$ curl … Continue reading “Magento 2 Alan Storm Tutorial”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,71],"tags":[],"class_list":["post-2519","post","type-post","status-publish","format-standard","hentry","category-macosx","category-magento"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=2519"}],"version-history":[{"count":1,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2519\/revisions"}],"predecessor-version":[{"id":2520,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2519\/revisions\/2520"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=2519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=2519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=2519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}