Magento Theme validation

Overview

Validate use of local.xml in custom templates, no excessive file overwriting in template. Validate prober theme inheritance. Validate proper use of JS and CSS includes. Avoid having to much logic in template, and loading objects from templates.

Templates

  • Use “_” symbol as a word separator in .phtml file names. I.e.: price_msrp_item.phtml All other separators like “-” or CamelCaseFormat are not allowed.
  • Short tags (<? ?> , <?= ?>) in .phtml files are not allowed.
  • Retrieving collection in .phtml files is not allowed (and models as well, especially with load method calls)
  • Connected code (neither <!– nor /*, // ) is not allowed
  • Debug conditions like var_dump, print_r, Zend_Debug::dump(), exit or die are not allowed
  • Each .phtml file must have PHPDOC with the current class name:

/**

* @var $this Mage_Authorizenet_Block_Directpost_Iframe

*/

or 

/**

* @see Mage_Authorizenet_Block_Directpost_Form

*/

  • “return” statements in .phtml files are not allowed
  • Complex PHP logic is not allowed in .phtml files
  • All calls in .phtml file must to public functions i.e.: <?php $this->getProductName() instead of $this->_getProductName()
  • Use alternative syntax for if/for/foreach/while and other statements. I.e. <?php if (….): > <?php endif ?> instead of <?php if (….) { … } ?>
  • Inline css/js is not allowed in .phtml files

Layouts

  • Copypaste of the core layout files is not allowed (I.e. re-declaration of catalog.xml or page.xml in the custom theme)
  • All js/css files must be included only via layout file. Otherwise it’s not possible o merge them.
  • Use proper theme inheritance
  • Avoid using local.xml is possible. Each module should have own layout update file.
  • Block name in layout file must be separated by dots. I.e.: <reference name=”product.info.options.wrapper”>

Translations

  • Each module has own translation file.
  • Use Translator.translate() for JS translations
Advertisements

Improving your JavaScript skillz

This is a list of resources to have a look at if you would like to improve your JavaScript skills. And feel free to add any other resource that you know or think should be in this list.

Books

“JavaScript: The Good Parts” by Douglas Crockford

Note: Do some hands-on coding after each chapter to practice what you just have learned.

Videos

Crockford on JavaScript (6 videos)

https://www.youtube.com/watch?v=JxAXlJEmNMg (1h 42min)

https://www.youtube.com/watch?v=RO1Wnu-xKoY (1h 30min)

https://www.youtube.com/watch?v=ya4UHuXNygM (1h 13min)

https://www.youtube.com/watch?v=Fv9qT9joc0M (1h 33min)

https://www.youtube.com/watch?v=47Ceot8yqeI (1h 24min)

https://www.youtube.com/watch?v=QgwSUtYSUqA (51min)

The JavaScript Programming Language (4 videos)

Download from http://stackoverflow.com/a/1531738/1250844

An Inconvenient API: The Theory of the DOM (3 videos)

Download from http://stackoverflow.com/a/1531738/1250844

Advanced JavaScript (3 videos)

Download from http://stackoverflow.com/a/1531738/1250844

Note: Do some hands-on coding after each video to practice what you just have learned.

Tutorials

JavaScript @ http://www.codecademy.com/

http://www.codecademy.com/en/tracks/javascript (estimated 10 hours)

Libraries

Create your own library to learn more and practice your skills…Is there any library that you often miss in your projects?

Tips and tricks

http://justinchmura.com/2014/08/20/become-a-better-javascript-developer/

http://codecondo.com/becoming-a-better-javascript-developer/

http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

JavaScript Guidelines

Increase grunt compile performance to 6 second

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

If you have a problem with slow response for grunt to manage that we changed somethings, here is a solution.

First of all we will stop rely on grunt watch itself and we will bring to work PHPStorm instead which is much faster in that case.

  1. Stop using “grunt watch” command, exit if it’s working.
  2. In PHPStorm go to “PhpStorm -> Preferences -> Tools -> File Watchers”
  3. Click on plus icon and add <custom>
  4. “Program” path is correct when you have your grunt installed globally so please do that or change to your grunt path.
  5. That same for for “Working directory”.
  6. Select options like on image below

 

5. Next to “Scope” please click “…”, select your theme folder if you have a module or folder in frontend directory and click “Include Recursively”, then click OK.

6. Now you can Apply, click OK and go back to editor.

7. Open your Gruntfile.js

8. Add grunt task to your default function like on the example below and change “sova” to your theme name.

default: function () {

    grunt.task.run(‘less:sova’);

},

9. Now when you will change anything in your theme, you will see console and your files will be compiled in something about 5-6second instead of 15-25.

PART 1.5 – Exercises

Exercises

This page includes all exercises from entire workshop. All custom code should be add to project repository and pushed on the branch named FE-M2-workshop_Name-Surname. Each commit should be named by Exercise number, i.e. hg commit -m”Exercise 1.0″. Some exercises, you will not be able to push, but please, do them on your local version as they will be necessary to continue with following exercises.

Exercise 1.0

Before workshop, make sure your local environment is ready. You will find some documentation in following links: Installation, Import exercise project (Create and Import Magento 2 projects with Aja) and Install sample / demo data.

During workshop, please, import m2-fe-workshop project, then install the sample data (instruction link above).

Exercise 2.0

Please, choose name for your theme and create directory in app/design as we will use this approach for our exercises.

Exercise 3.0

Please, create necessary files in your theme and set it up in admin panel.

In any case, you can follow documentation.

Exercise 4.0

Please, install grunt or gulp to your project.

Exercise 5.0

Overwrite button’s colour and link’s colour on your site.

Exercise 6.0

Remove product name from items on category page.

Exercise 7.0

7.1. Choose any element and move it to different place.

7.2. Choose another element and remove it from the site.

7.3. Change title of one of the tabs on product page.

Exercise 8.0

  1. Create a js file in your theme.
  2. Include the js file using require-js.
  3. Intiate the js using data-mage-init on the div with the class products inside list.phtml (the template used in exercise 6)
  4. The script should add a class, color or console log a string when the product list is rendered.

Exercise 9.0

Move the ‘Go to checkout’ button to the bottom of the mini cart (below view and edit cart).

 

Exercise 10.0

Create your own widget based on https://bitbucket.org/vaimo/module-example-widget/overview or extend it by adding some additional fields.


Questions


Add README file to your branch and answer following questions:

  1. Where do you find Blank and Luma themes?
  2. What are the files needed to create a theme?
  3. Where can I find the UI library?
  4. How do you override a module phtml in you theme?
  5. How do you override xml files?
  6. Where do you add your custom variables?
  7. Where do you override Magento variables?
  8. Where can you find styles for modules?
  9. Where you have to define your additional custom less file?

PART 1.4.4 – Vaimo CMS

Vaimo CMS includes much more functionality for M2 than for M1. 

 

Layout XML and Vaimo CMS

XML containers to create areas that can be used to insert content. 

Add container

<container name=“vaimo-cms-container” label=“Vaimo CMS container” after=“other-element” />

 

Addons to Vaimo CMS

https://bitbucket.org/vaimo/module-widget-background

 

How to find existing widgets? 

All widgets with their own repositories (that follows the naming convention) can be found by searching for them in bitbucket: https://bitbucket.org/vaimo/profile/repositories?search=module-widget-

Add configurations using js mixin

You can easily add simple settings to Vaimo CMS from your theme. A common use case is where you add classes to elements and can then add styling using less.

<theme_location>/requirejs-config.js

requirejs-config.js

/**

 * Copyright © 2009-2017 Vaimo Group. All rights reserved.

 * See LICENSE.txt for license details.

 **/

 

var config = {

    “map”: {

        “*”: {

            example: “js/example”

        }

    },

 

    config: {

        mixins: {

            “Vaimo_Cms/js/component/content-editor”: {

                “js/mixins/vcms-styles”: true

            }

        }

    }

};

<theme_location>/web/js/mixins/vcms-styles.js

web/js/mixins/vcms-styles.js

/**

 * Copyright © 2009-2017 Vaimo Group. All rights reserved.

 * See LICENSE.txt for license details.

 **/

;define([

    ‘vcms/editor/utils’

], function(utils) {

    ‘use strict’;

 

    var typographyTags = {‘h1’: true, ‘h2’: true, ‘h3’: true, ‘p’: true};

 

    return utils.createWidgetMixin({

        options: {

            styles: {

                //  Typography styles

                ‘text–light’: {

                    label: ‘Light text on dark background’,

                    tags: typographyTags

                },

                ‘text–dark’: {

                    label: ‘Dark text for light backgrounds’,

                    tags: typographyTags

                }

            }

        }

    });

});

Notes

  • Remember to keep naming convention when creating modules, themes and widgets. 
  • encourage other developers to document their widgets in Bitbucket
  • Help improve existing ones – recycling! Ask before creating new modules!

PART 1.4.3 – BEM

BEM at Vaimo

More and more FE devs in Vaimo have started using BEM. Product department have implemented BEM in multiple modules.

There have been requests to Magento to adopt a more BEM like approach as well more on that here: https://alankent.me/2016/10/06/magento-2-css-class-naming-request-for-feedback/ 

BEM at a glance

BEM style naming methodology which allows you effectively scopes your CSS so you only use the cascade then you actually want to.

.block {}

.block__element {}

.block–modifier {}

 

.site-search {} /* Block */

.site-search__field {} /* Element */

.site-search–full {} /* Modifier */

.block represents the higher level of an abstraction or component.

.block__element represents a descendent of .block that helps form.block as a whole.

.block–modifier represents a different state or version of .block.

 

It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.

<form class=”site-search  site-search–full”>

    <input type=”text” class=”site-search__field”>

    <input type=”Submit” value =”Search” class=”site-search__button”>

</form>

PART 1.4.2 – Flexbox

No grid system?

Magento 2 doesn’t come with a grid system like Twitter Bootstrap. A lot of elements does not have a template used as a wrapper instead they are wrapped using a container in xml, for example the header and the footer.

There are some different approaches on how to work without the grid systems but a lot of the current projects are using flexbox for parts of the layout.

Grid systems are implemented by third party modules and Vaimo CMS.

Mixins vs autoprefixer

Magento’s default grunt setup currently doesn’t vendor prefix flexbox, instead this is done by using mixins. Note that not all flexbox properties have a mixin if you’re using Magento’s approach. You don’t need to worry about this if you’re using gulp since our frontend workflow module adds prefixing.

The Magento mixins for flex can be found in lib/web/css/source/lib/_utilities.less  

Flex mixin

.lib-vendor-prefix-display(

    @_value: flex

) {

    display: ~“-webkit-@{_value}”;

    display: ~“-ms-@{_value}box”;

    display: @_value;

}

 

Flexbox Resources

Magento 2.0 uses Flexbox (Flexible Box Layout Module) which lets you to control the size, order and alignment of elements by several axes, as well as distribute free space between elements and do many other things.

In order to learn a little bit more about flexbox we recommend following links.

http://flexboxfroggy.com/

https://philipwalton.github.io/solved-by-flexbox/

https://github.com/philipwalton/flexbugs