less & requirejs - frontend development in magento 2
TRANSCRIPT
Frontend Development in Magento 2
Arjen Miedematwitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
Magento 2 Arrived!
Arjen Miedematwitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
- Ever used Magento’s RWD theme? Then you met SASS- SASS !== LESS- Requires NodeJS, easy to install- Use variables, nested styles, functions, etc.- Watch usefull tutorials online on YouTube
Less
nav {
margin: 50px auto 0;
width: 750px;
ul {
padding: 0;
margin: 0;
li {
display: inline-block;
&:hover {
background-color: #5e5b56;
}
}
}
}
Less
nav { margin: 50px auto 0; width: 750px; height: 45px; }
nav ul { padding: 0; margin: 0; }
nav ul li { display: inline-block; }
nav ul li:hover { background-color: #5e5b56; }
Less
//
// Primary button
// ---------------------------------------------
.action-primary {
.lib-button-primary();
.lib-css(border-radius, @button__border-radius);
}
Less
.lib-button-primary(
@_button-line-height: @button-primary__line-height,
@_button-width: @button-primary__width,
@_button-margin: @button-primary__margin,
@_button-padding: @button-primary__padding,
(..)
) {
.lib-button(
@_button-line-height: @_button-line-height,
@_button-width: @_button-width,
@_button-margin: @_button-margin,
@_button-padding: @_button-padding,
(..)
);
}
Less
.lib-css(
@_property,
@_value,
@_prefix: 0
) when (@_prefix = 1)
and not (@_value = '')
and not (@_value = false)
and not (extract(@_value, 1) = false)
and not (extract(@_value, 2) = false)
and not (extract(@_value, 3) = false)
and not (extract(@_value, 4) = false)
and not (extract(@_value, 5) = false) {
-webkit-@{_property}: @_value;
-moz-@{_property}: @_value;
-ms-@{_property}: @_value;
}
Less
.example-button-4 {
.lib-button-primary(@_button-margin: 3px);
&:active {
box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
}
&.example-button-5 {
.lib-button-s();
color: #fff;
&:hover,
&.active {
color: #fff;
}
}
}
Less
RequireJS
RequireJS
- Magento now uses AMD (Asynchronous Module Definitions)- Easily manage JavaScript dependencies- Asynchronous loading === faster page load- JavaScripts are not initialized via layout XML files
Thanks to Filip Svetličić (Watch on YouTube)
RequireJS<html>
<head>
<!--
data-main attribute tells require.js to load
scripts/main.js after require.js loads.
-->
<script src="js/main.js" data-main="main"></script>
</head>
<body>
<div class="wrapper">
(...)
</div>
</body>
</html>
RequireJSrequire.config({
baseUrl: 'js/lib',
paths: {
// the left side is the module ID,
// the right side is the path to
// the jQuery file, relative to baseUrl.
// Also, the path should NOT include
// the '.js' file extension. This example
// is using jQuery 1.9.0 located at
// js/lib/jquery-1.9.0.js, relative to
// the HTML page.
jquery: 'jquery-1.9.0'
}
});
RequireJSrequire.config({
map : {
'*' : {
'jquery': 'js/jquery-1.12.0'
},
'jquery-bxslider' : {
'jquery': 'js/jquery-1.9.1'
}
}
});
RequireJS<input id="search" data-mage-init='{"quickSearch":{ "formSelector":"#search_mini_form", "url":"http://magento2.dev/search/ajax/suggest/", "destinationSelector":"#search_autocomplete"} }' type="text" name="q" value="" placeholder="Search entire store here..." class="input-text" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete= "both" autocomplete="off"/>
RequireJS{
"quickSearch": {
"formSelector":"#search_mini_form",
"url":"http://magento2.dev/search/ajax/suggest/",
"destinationSelector":"#search_autocomplete"
}
}
var config = {
map: {
'*': {
quickSearch: 'Magento_Search/form-mini'
}
}
};
Loads file: vendor/magento/module-search/view/frontend/web/form-mini.js
RequireJSdefine([
'jquery',
'underscore',
'mage/template',
'jquery/ui',
'mage/translate'
], function ($, _, mageTemplate) {
'use strict';
// Here is all JavaScript to handle the search autocomplete
});
RequireJS<script type="text/x-magento-init">
{
"*": {
"mage/cookies": {
"expires": null,
"path": "/",
"domain": ".www.mydomain.com",
"secure": false,
"lifetime": "3600"
}
}
}
</script>
RequireJS<script type="text/x-magento-init">
"#main-container": {
"navigation": "{ navigation-json-configuration }",
"accordion": "{ accordion-json-configuration }"
},
"*": {
"pageCache": "{ page-json-configuration }"
}
</script>
More Information
Magento 2 & Less:
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html
Magento 2 & RequireJS:
http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js-resources.html
http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html
Thanks!