Angular Typescript RequireJS By Chris van Beek and Frank Folsche Luminis Arnhem.
Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: {...
Transcript of Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: {...
![Page 1: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/1.jpg)
![Page 2: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/2.jpg)
Magento 2
Web Developer
workflow
![Page 3: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/3.jpg)
Vitalii KorotunArchitect, Magento
![Page 4: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/4.jpg)
Legal DisclaimerCopyright © 2015 Magento, Inc. All Rights Reserved.
Magento®, eBay Enterprise™ and their respective logos are trademarks, service marks,
registered trademarks, or registered service marks of eBay, Inc. or its subsidiaries. Other
trademarks or service marks contained in this presentation are the property of the
respective companies with which they are associated.
This presentation is for informational and discussion purposes only and should not be
construed as a commitment of Magento, Inc. or eBay Enterprise (“eBay Enterprise”) or of
any of their subsidiaries or affiliates. While we attempt to ensure the accuracy,
completeness and adequacy of this presentation, neither Magento, Inc., eBay Enterprise
nor any of their subsidiaries or affiliates are responsible for any errors or will be liable for
the use of, or reliance upon, this presentation or any of the information contained in it.
Unauthorized use, disclosure or dissemination of this information is expressly prohibited.
![Page 5: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/5.jpg)
Magento 2 Theme Overview
![Page 6: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/6.jpg)
Base theme assets
Magento\Catalog
<page>
<body>
<block class=“…“ name=“…">
<arguments>
<argument name=“…" xsi:type="string">…</argument>
<argument name=“…" xsi:type="boolean">…</argument>
</arguments>
</block>
</body>
</page>
![Page 7: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/7.jpg)
Directory structureM1 M2
![Page 8: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/8.jpg)
Theme variables
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
… … …
<vars module="Magento_Catalog">
<var name="product_small_image_sidebar_size">100</var>
<var name="product_base_image_size">275</var>
<var name="product_base_image_icon_size">48</var>
<var name="product_list_image_size">166</var>
<var name="product_zoom_image_size">370</var>
<var name="product_image_white_borders">0</var>
… … …
<var name="customer_account_product_review_page:width">285</var>
</vars>
<vars module="Magento_Bundle">
<var name="product_summary_image_size">58</var>
</vars>
… … …
</view> app/design/frontend/Magento/blank/etc/view.xml
<?php echo $this->getVar(product_base_image_size', 'Magento_Catalog'); ?>
somewhere in template
![Page 9: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/9.jpg)
Diversity
![Page 10: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/10.jpg)
Layouts
![Page 11: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/11.jpg)
Layout types
Page Layouts definition file
Page Layouts
Page Configuration Layouts
Generic Layouts
![Page 12: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/12.jpg)
Example of Page Layout
app/code/Magento/Theme/view/base/page_layout/empty.xml:
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation=“<page_layout.xsd>">
<container name="root">
<container name="after.body.start" as="after.body.start" before="-" label="Page Top"/>
<container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
<container name="global.notices" as="global_notices" before="-"/>
<container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main">
<container name="columns.top" label="Before Main Columns"/>
<container name="columns" htmlTag="div" htmlClass="columns">
<container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main"/>
</container>
</container>
<container name="page.bottom" as="page_bottom" label="Before Page Footer Container" after="main.content"
htmlTag="div" htmlClass="page-bottom"/>
<container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"/>
</container>
</container>
</layout>
![Page 13: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/13.jpg)
Example of Page Configuration
<page layout="admin-1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<html>
<attribute name="html_attribute_name" value="html_attribute_value" />
</html>
<head>
<title>Magento Admin</title>
<meta name="x_ua_compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link src="prototype/prototype.js"/>
<css src="mage/calendar.css" />
<script src="requirejs/require.js" />
<script src="jquery/jquery.js" />
</head>
<update handle="adminhtml_system_design_grid_block"/>
<body>
<attribute name="id" value="html-body" />
<referenceContainer name="content">
<block class="Magento\Backend\Block\System\Design" name="adminhtml.system.design.container"/>
</referenceContainer>
...
</body>
</page>
![Page 14: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/14.jpg)
Example of Generic Layout
<layout xsi:noNamespaceSchemaLocation=“/xsd/path/layout_generic.xsd"><update handle="sales_order_create_item_price"/><container name="root">
<block class="Magento\AdvancedCheckout\Block\Adminhtml\Manage\Items" name="checkout.items" template="manage/items.phtml"/>
</container></layout>
![Page 15: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/15.jpg)
Page Composition
Page Composition
Root container
Container 1Container 2 Block 1
Block 2
Update handle 1
Update handle 2
Page Layout
(general skeleton of page)
Page Configuration
(detailed page structure)
Generic Layout
(reusable set of handles)
![Page 16: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/16.jpg)
Templates
![Page 17: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/17.jpg)
Templates
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
<img class="photo image"
<?php echo $block->getAddAttribute(); ?>
src="<?php echo $block->getProductImageView()->getUrl() ?>"
width="<?php echo $block->getProductImageView()->getWidth();?>"
height="<?php echo $block->getProductImageView()->getHeight();?>"
alt="<?php echo $block->stripTags($block->getProductImageView()
->getLabel(), null, true) ?>" />
![Page 18: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/18.jpg)
Template Engines
<type name="Magento\Framework\View\TemplateEngineFactory">
<arguments>
<argument name="engines" xsi:type="array">
<item name="phtml" xsi:type="string">Magento\Framework\View\TemplateEngine\Php</item>
</argument>
</arguments>
</type>
Magento\Framework\View\TemplateEngine\Xhtml?!
![Page 19: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/19.jpg)
JavaScript Framework
![Page 20: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/20.jpg)
RequireJS
define([“compareItems", “priceBox"],
function ($) {
'use strict';
// your business logic here
}
);
![Page 21: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/21.jpg)
RequireJS configuration
var config = {
map: {
'*': {
compareItems: 'Magento_Catalog/js/compare',
compareList: 'Magento_Catalog/js/list',
relatedProducts: 'Magento_Catalog/js/related-products',
upsellProducts: 'Magento_Catalog/js/upsell-products',
productListToolbarForm: 'Magento_Catalog/js/product/list/toolbar',
tierPrice: 'Magento_Catalog/js/tier-price',
catalogGallery: 'Magento_Catalog/js/gallery',
priceBox: 'Magento_Catalog/js/price-box',
priceOptionDate: 'Magento_Catalog/js/price-option-date',
priceOptionFile: 'Magento_Catalog/js/price-option-file',
priceOptions: 'Magento_Catalog/js/price-options',
priceUtils: 'Magento_Catalog/js/price-utils',
catalogAddToCart: 'Magento_Catalog/js/catalog-add-to-cart'
}
}
};
Magento\Catalog\view\requires-config.js
![Page 22: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/22.jpg)
Inline JavaScript
<section class="admin__page-section">…</section>
<script type="text/javascript">
require(['jquery', 'prototype'], function(jQuery){
var submitButtons = $$('.submit-button'), updateButtons = $$('.update-button'), fields = $$('.qty-input');
updateButtons.each(function (elem) { elem.disabled=true; elem.addClassName('disabled');});
for (var i=0;i<fields.length;i++) {
fields[i].observe('change', checkButtonsRelation); fields[i].baseValue = fields[i].value;
}
function checkButtonsRelation() {…}
function submitCreditMemo() {…}
function submitCreditMemoOffline() {…}
var sendEmailCheckbox = $('send_email');
if (sendEmailCheckbox) {
var notifyCustomerCheckbox = $('notify_customer');
var creditmemoCommentText = $('creditmemo_comment_text');
Event.observe(sendEmailCheckbox, 'change', bindSendEmail);
bindSendEmail();
}
function bindSendEmail() {…}
});
</script>
<div data-mage-init= '{"creditMemoForm":{“config”:{}}}'>
…
<div>
require(['jquery', 'prototype'], function (jQuery) {
var submitButtons = $$('.submit-button'),
updateButtons = $$('.update-button'),
fields = $$('.qty-input');
updateButtons.each(function (elem) {
elem.disabled=true; elem.addClassName('disabled');
});
for (var i=0;i<fields.length;i++) {
fields[i].observe('change', checkButtonsRelation);
fields[i].baseValue = fields[i].value;
}
});
Magento/Sales/view/adminhtml/web/js/creditMemoForm.js
M1
template/sales/order/creditmemo/create/items.phtml
![Page 23: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/23.jpg)
Inline JavaScript
<div id="toolbar" data-mage-init='{"toolbarEntry": {}}'>
…
</div>
// somewhere in your custom template
<script type="text/x-magento-init">
{
“#toolbar": {
“toolbarEntry": {
“option”: “value”
},
“otherWidget”: {}
}
}
</script>
![Page 24: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/24.jpg)
Bundling of JavaScript files: configuration<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
… … …
<vars module="Js_Bundle">
<var name="bundle_size">1MB</var>
</vars>
<exclude>
<item type="file">jquery/jquery-ui-1.9.2.js</item>
<item type="file">jquery/jquery.ba-hashchange.min.js</item>
<item type="file">jquery/jquery.details.js</item>
<item type="file">jquery/jquery.details.min.js</item>
<item type="file">jquery/jquery.hoverIntent.js</item>
<item type="file">jquery/jquery.min.js</item>
<item type="file">mage/captcha.js</item>
<item type="file">mage/dropdown_old.js</item>
… … …
<item type="directory">prototype</item>
<item type="directory">scriptaculous</item>
<item type="directory">mage/requirejs</item>
<item type="directory">mage/adminhtml</item>
<item type="directory">mage/backend</item>
</exclude>
</view> app/design/frontend/Magento/blank/etc/view.xml
![Page 25: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/25.jpg)
CSS
![Page 26: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/26.jpg)
Magento UI Library Documentation
lib/web/css/docs
![Page 27: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/27.jpg)
CSS pre-processors
![Page 28: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/28.jpg)
WEB Developer workflows
Standard: with client-side CSS pre-processor
Basic: with built-in CSS pre-processor
Advanced: with node.js CSS pre-processor
![Page 29: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/29.jpg)
less.js official script
~10 seconds to compile CSS
No actions to re-compile
Client side CSS pre-processor (with less.js)
![Page 30: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/30.jpg)
Oyejorge PHP library
~40 seconds to compile CSS
Manual actions to re-compile
Server side PHP pre-processor (with PHP)
![Page 31: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/31.jpg)
Command line script (lessc)
~7 seconds to compile CSS
Automatic browser refresh on change in LESS
Server side CSS pre-processor (with node.js)
![Page 32: Magento 2 Web Developer Deep Dive - V... · RequireJS configuration var config = { map: { compareItems: 'Magento_Catalog/js/compare', compareList: 'Magento_Catalog/js/list', relatedProducts:](https://reader034.fdocuments.in/reader034/viewer/2022043000/5f7774e03ca4d26439540e4c/html5/thumbnails/32.jpg)
Q&A