MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Magento 2 has a New Look Frontend

Published on 24 April 15
10664
0
2
Magento 2 has a New Look Frontend - Image 1
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.
<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>
What's changed?

  1. 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
  2. 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>
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.































Magento 2 has a New Look Frontend - Image 1

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.

Inchoo
1.0.0.0
Magento/blank

media/preview.jpg

What's changed?

  1. 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
  2. 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

100
275
48
166
370
0

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.

This blog is listed under Development & Implementations and E-Commerce Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top