Less & RequireJS - Frontend Development in Magento 2
1 like1,796 views
The document discusses frontend development in Magento 2, highlighting the use of SASS for styling and RequireJS for managing JavaScript dependencies. It explains the advantages of asynchronous loading for faster page loads and includes code examples for implementing these features. Additional resources are provided for deeper understanding of Magento 2's CSS and JavaScript integration.
![RequireJS
define([
'jquery',
'underscore',
'mage/template',
'jquery/ui',
'mage/translate'
], function ($, _, mageTemplate) {
'use strict';
// Here is all JavaScript to handle the search autocomplete
});](https://image.slidesharecdn.com/09-frontenddevelopmentinmagento2-160123071600/85/Less-RequireJS-Frontend-Development-in-Magento-2-21-320.jpg)
Less & RequireJS - Frontend Development in Magento 2
- 2. Arjen Miedema twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
- 4. Arjen Miedema twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl
- 7. - 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
- 8. nav { margin: 50px auto 0; width: 750px; ul { padding: 0; margin: 0; li { display: inline-block; &:hover { background-color: #5e5b56; } } } } Less
- 9. 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
- 10. // // Primary button // --------------------------------------------- .action-primary { .lib-button-primary(); .lib-css(border-radius, @button__border-radius); } Less
- 11. .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
- 12. .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
- 13. .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
- 14. RequireJS
- 15. 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)
- 16. 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>
- 17. RequireJS require.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' } });
- 18. RequireJS require.config({ map : { '*' : { 'jquery': 'js/jquery-1.12.0' }, 'jquery-bxslider' : { 'jquery': 'js/jquery-1.9.1' } } });
- 19. 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"/>
- 20. 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
- 21. RequireJS define([ 'jquery', 'underscore', 'mage/template', 'jquery/ui', 'mage/translate' ], function ($, _, mageTemplate) { 'use strict'; // Here is all JavaScript to handle the search autocomplete });
- 22. RequireJS <script type="text/x-magento-init"> { "*": { "mage/cookies": { "expires": null, "path": "/", "domain": ".www.mydomain.com", "secure": false, "lifetime": "3600" } } } </script>
- 23. RequireJS <script type="text/x-magento-init"> "#main-container": { "navigation": "{ navigation-json-configuration }", "accordion": "{ accordion-json-configuration }" }, "*": { "pageCache": "{ page-json-configuration }" } </script>
- 26. 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
- 27. Thanks!