Magento 2 has a New Look Frontend
Published on 24 April 15
Semaphore0
Magento 2 has definitely come out with an improved frontend. The up and coming technologies like HTML, CSS3 and JQuery have been utilized in creating the frontend for Magento2. Few elements like the layout, and file structure have been refurbished for Magento 2. All new Magento UI library has been incorporated for the functioning of this new version.
Incorporating New Theme
Let's say you want to create a new theme. You will require the theme_root_dir/theme.xml file to initiate your new theme. Apart from initializing the theme, you will also need to include the placeholder image, declare which version of the theme you are incorporating etc. below is the code that explains what all needs to be included in the initiation process. This will seem almost similar to how it works for Magento.
Incorporating New Theme
Let's say you want to create a new theme. You will require the theme_root_dir/theme.xml file to initiate your new theme. Apart from initializing the theme, you will also need to include the placeholder image, declare which version of the theme you are incorporating etc. below is the code that explains what all needs to be included in the initiation process. This will seem almost similar to how it works for Magento.
<theme xmlns:xsi=http://www.w3.org/2001/XMLSchema-instancexsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
<title>Inchoo</title>
<version>1.0.0.0</version>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
<title>Inchoo</title>
<version>1.0.0.0</version>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
What's changed?
- You will see that the new version does not include the skin directory. Instead, all the different files and folders of the theme are located within the app structure
- There is a module specific view directory which includes JS, CSS, template and layout files that are specific to the particular module in concern. This way finding the files is easy
This simply means that there is a module directory and all files are included within that directory. You will not find the different layout and template directories, as in the old version, thus reducing the complications.
You can declare the theme as you used to do it in Magento's original version. In this new version the path app/design/frontend/base/default directory is not included which means the blank theme would be your starting point. This structure is suitable for minimal customizations or modifications. It is possible to cause custom development using this structure, but chances are it might affect the overall performance of your store.
Redefined Layout
In this new version, layout files are further divided into smaller parts in order to ease out maintenance. In the previous version, there were different handles for the layout which have been transformed into individual files in this version.
In this new version, it is easier to resize the images for the different devices. The layout file view.xml placed in the following path app/design/frontend/vendorName/newTheme/etc/ is responsible for resizing. Here's an example code written to resize images
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd">
<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>
</vars>
</view>
<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>
</vars>
</view>
Though this has been created with the aim of simplifying the whole image resizing process for the developers, this might not work well with the responsive themes. It was easier and more flexible to resize the images using template files.
With this new version, a container wrapper has been introduced which allows you to pass the attributes like htmlTag, htmlClass and htmlID directly using the layout files. Even the move method introduced with this new version is interesting!if you want to move block 1 into block 2, the new version automatically sets block 1 the child and block 2 the destination of the child. It also includes system validation for the xml files, which includes both individual and merged layout files present within the structure.
With this new version, a container wrapper has been introduced which allows you to pass the attributes like htmlTag, htmlClass and htmlID directly using the layout files. Even the move method introduced with this new version is interesting!if you want to move block 1 into block 2, the new version automatically sets block 1 the child and block 2 the destination of the child. It also includes system validation for the xml files, which includes both individual and merged layout files present within the structure.
This blog is listed under
Development & Implementations
and E-Commerce
Community
Related Posts:
Post a Comment
