Get Free Audit

How to Customize the Look of Specific Pages: Magento 1.9 vs Magento 2.2

Sep 26, 2017

2712 Sergey Samets

How to Customize the Look of Specific Pages: Magento 1.9 vs Magento 2.2

Which structural blocks are available as a part of the content on all pages

First off, it should be mentioned that there are structural blocks and content blocks in Magento. Besides, structural blocks are parent containers towards content blocks (more details you can find in our article Understanding Containers, Blocks, and Actions in Magento 2 Layout Structure).

Today we’re going to discuss structural blocks. Both in Magento 1.9 and Magento 2.2 there are 5 main structural blocks:

  • Header
  • Footer
  • Main/Content (Main – в Magento 2.2, Content – в Magento 1.9)
  • Left
  • Right

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_1

3 out of 5 blocks are placed on every page (header, footer, main/content), but “left” and “right” columns are placed if the appropriate template is used (2columns-left, 2columns-right and 3columns). These blocks can be controlled by default in the following system files:

As for Magento 1.9:
/app/design/frontend/our_package/our_theme/layout/page.xml

As for Magento 2.2:
/app/design/frontend/vendor/our_theme/layout/default.xml

magento webdesign

Magento Webdesign

Take your online store to the next level with BelVG Magento webdesign

Visit the page

To which menus can I add custom entries using layout XML in an upgrade‐safe way

Let’s define the case when the changes can be overwritten when Magento is upgraded completely or just some modules. It can happen if we change the files of the Magento core, default theme files or module files. For example, if we change the layout of the directory file in the Magento core folder:

In Magento 1.9:
/app/design/frontend/base/default/layout/catalog.xml

In Magento 2.2:
/app/code/Magento/Catalog/view/frontend/layout/default.xml

It’s not surprising that when Magento is upgraded, the files are overwritten and the changes are lost. Even if you’ve installed your module or your company’s module, you shouldn’t change it directly in the module folder, as when upgrading the module later, all current changes can be lost. On the whole, changing Magento files and its modules directly in the files is not good, so you’re not recommended to do it.

How to change these files? You should know the most important rule that all changes should be in the theme files.

For changing the block structure one can do the following in the theme:

  • use the file local.xml
  • create extending layout file
  • create overriding layout file

You can read more about extending и overriding layout file in the article Override a Layout in Magento 2.

How can I include a custom template in transactional email templates  

As for Magento 1.9.
In the admin panel go to “System – Transactional Emails”, click “Add New Template” and we are on the page to create a custom email template.

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_2

Then we select the template which our custom template is based on. We choose the necessary general template (for example, “New Order”) in the dropdown list of the field “Template”, and template location (for example, “English United Kingdom”) for the field “Locale” and click “Load template”. Then the fields (“Template Subject”, “Template Content” and “Template Styles”) are filled with the general template data. All we need is to fill in the field “Template Name” and get the template changed as it’s necessary by changing the theme and email content. Now we can use the template instead of the general one.

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_3

Moreover, email templates can be found in the files on the server at the address:
app/design/frontend/base/default/template/email

migration to magento 2

Magento 2 Migration

Take your online store to the next level with BelVG Magento 2 Migration

Visit the page

Using these files, we can copy email content and put it in our template created in the admin panel or copy the file completely to our theme. In this case, the default template is overridden. The file will be placed here:
/app/design/frontend/our_package/our_theme/template/email/

As for Magento 2.2.
In the admin panel go to “Marketing – Email Templates”, click “Add New Template” and create our custom template.

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_4

Then we select the template which our custom template is based on. We choose the necessary general template (for example, “New Order”) in the dropdown list of the field “Template” and click “Load Template”. Then the fields (“Template Subject” and “Template Content”) are filled with the general template data. All we need is to fill in the field “Template Name” and get the template changed as it’s necessary by changing the theme and email content. Now we can use the template instead of the general one.

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_5

More information about creating and using the custom template you can get here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-email.html

Also, you can find email template in the files on the server. For example, the email template of a new account will be placed here:
vendor/magento/module-customer/view/frontend/email/account_new.html

Using the file, we can copy email content and put it in our template created in the admin panel or copy the file completely to our theme. In this case, the default template is overridden. The file will be placed here:
/app/design/frontend/our_package/our_theme/Magento_Customer/email/account_new.html

How can I create links to store pages in transactional email templates

Don’t forget to change email templates only in the custom templates. How to create custom email templates are described above. When editing the custom template, we can use system variables to put changed data, particularly web store links. In Magento 1.9 different variables are used for the links. We can see the list of available variables when clicking “Insert Variable…” on the page of editing the custom email template.

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_6

When clicking the button, we see the following window:

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_7

Here we choose the necessary variable and click. For example, the variable for web store link is called “Store Url”, so the link will be like this:


And the customer account link will be like this (the variable is called “Customer Account URL”):


In Magento 2.2 everything is the same as in Magento 1.9. Different variables are used for the links. We can see the list of available variables when clicking “Insert Variable…” on the page of editing the custom email template:

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_8

When clicking the button, we see the following window:

How to Customize the Look of Specific Pages Magento 1.9 vs Magento 2.2_9

Here we choose the necessary variable and click. For example, the variable for customer account link is called “Customer Account URL”, and the link will be like this:

<a href=”{{store url=”}}”></a>

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

How can I access properties of the template variables (for example the order in the new order email, or the customer in the registration confirmation email)

In order to have access to template variables properties, we can use the PHP method “get” or just get variable property value as an object property. Both in Magento 1.9 and Magento 2.2 it occurs in the following way:

To get the property “Shipping Description” of the variable “order” by using the method “get”, it’s necessary to use the following construction:

<a href=“{{store url=’customer/account/’}}”></a>

Where:
“order” – variable
“getShippingDescription()” – the method to get the ShippingDescription property value.

The property “email” of the variable “customer” can be got without the method “get” by using the construction {{var customer.email}}

Where:
“customer” – variable
“email” – variable property

magento custom development

Magento Custom Development

Take your online store to the next level with BelVG Magento Custom Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

2 Comments

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *