Quick and Easy Magento 2 set up

We assume you know how to set up a virtualhost with Apache 2.4 and where to store your Magento 2 project directory.

Here we provide a quick guide to set up a Magento 2.2 e-commerce website with a custom theme. This article will be more of a try/test to learn about the development of a Theme by analyzing the content we can modify from the blank theme of Magento. A better way would be to extend the theme and make changes in a new child theme.

Magento 2.2 Installation

  1. Get yourself on your online Magento account at https://marketplace.magento.com and generate a bunch of public/private keys for your project.
  2. Issue the following command into the proper emplacement :
  3. $ composer create-project –repository-url=https://repo.magento.com/ magento/project-community-edition html

If you have errors regarding disabled Php 7 extensions then enable them :

$ sudo apt-get install php7.1-mcrypt

$ sudo apt-get install php7.1-curl

$ sudo apt-get install php7.1-zip

Then run :

$ cd html

$ composer update

Add proper permissions to the directory structure :

find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} \;

find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} \;

$ sudo chown -R :www-data .

$ chmod u+x bin/magento

Also make sure you have Php7 and enabled the proper modules, for more details, you can refer to the tutorial on Magento 2 optimization.

And when to apply changes to your files/folders from the command line, you can issue a command using the www-data user as follow (example in Ubuntu) :

$ sudo -u www-data yourCommand

On Debian you may issue this command before running Magento scripts :

# su -s /bin/bash www-data

Magento 2.2 online setup

You should end up with the following screenshot after hitting the readiness check once you’ve launched the URL : http://mysite.com/setup/

Follow the steps and everything should be fine before we start working on our theme.

For security reasons, remove write permissions from these directories: ‘yourmagento2dir/app/etc’

For other languages follow a few steps detailed here : http://imaginaerum.github.io/magento2-language-fr-fr/ for french or find a relevant package for your own language.

Now the fun part -Magento 2.2 Theme

If you plan on modifying a few things from a parent theme such as Luma or the default blank theme provided by Magento, then follow this tutorial.

Today we are going to make things different by copying the content of the Blank theme and change whatever things we need. Basically, the structure will help us but a lot of changes can be applied and later you will be able to build a theme from scratch.

1st step : copy the content of the Blank theme

Copy/Paste the content from /vendor/magento/theme-frontend-blank to /app/design/frontend/YourCompany/themename

Now update your configuration parameters to use your own theme and start making changes.

2nd step : Update paths and parameters

Fill in details into theme.xml file and update the preview image to match your own graphical chart.


<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Company Theme</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

Apply same behavior with other mandatory files composer.json and registration.php.

At this time you are ready to apply changes and you may start reading the guide from Magento.

3rd step – changes to css and xml files

Customize the view.xml file within etc directory and change your logo inside the static folders /web/images/logo.svg

Include a few fonts into a new folder within /web/fonts if needed. Another tutorial on fonts will be written, we won’t worry about it for now.

4th step – Working on the layout

Now we are talking !

This is the place where we can actually do thinks as we want and there is a guide on Magento to help us.

Do not hesitate to follow the links from the above page, you will get a better understanding on how it works.

To make things quick do this :

  • Create a directory in your new theme : <theme_dir>/Magento_Theme/page_layout for page layout files
  • You should already have this : <theme_dir>/Magento_Theme/layout for page configuration and generic layout files

The Magento theme structure is explained at this url.

Example :

Let’s take a page layout named 1column.xml from magento/module-theme/view/frontend/page-layout/  (this layout is for example valid for the homepage)

We copy the file to

app/design/frontend/COMPANY/company_theme/Magento_Theme/page_layout/1column.xml

Make a change and flush the magento cache, you should be done.

Troubleshooting

In case of a trouble, you can reset the configuration data from the database using the following query :

UPDATE core_config_data SET value=1 WHERE path=’design/theme/theme_id’ ;

More information on this here.

 

Example : Moving a block to another container

Let’s take the mini search form and move it above on the panel wrapper next to links (login – account creation..) :

The template for this form is from the module module-search/view/frontend/layout/default.xml file

Its name is top.search and its template is Magento_Search::form.mini.phtml

We don’t want to change its template for now, just move the block into another container so we only need to use layout overriding as follow :

Add this line to your default.xml of your theme under Magento_Theme/layout/default.xml


<move element="top.search" destination="header.panel" />

Example : Adding a custom fixed footer

We will stay within our default.xml file to add a custom block a user don’t need to modify. It will use a template on its own and use specific styles.

Besides removing the bugs report block and subscribe form, we tell Magento to use our new footer template as follow :

  • Add the following lines to your default.xml

<referenceBlock name="report.bugs" remove="true"></referenceBlock>

<referenceBlock name="footer_links" template="Magento_Theme::html/footer.phtml">
</referenceBlock>

<referenceBlock name="form.subscribe" remove="true"></referenceBlock>

As you should have noticed, we use a new template for rendering our footer : footer.phtml

  • Let’s add some code within this file

<div class="infooter">
<div class="column">
<h4>Useful links</h4>
<a href="#">search</a>
<a href="#">FAQ</a>
</div>

</div>

We’ve just put one column here with default classes, title and links, you can put anything you need to customize your footer. The last step to achieve is filling the details about the classes and HTML tags within the stylesheet.

If you look at the structure of files of the blank theme, you will see the different stylesheets implemented in less . If you plan on overriding some styles, then use the _theme.less file, otherwise pick up the right spot.

Here we can define a new file such as _footer.less and put our code into it and reference it inside _sources.less. But we can also use _theme.less as we override some code :


/* FOOTER CHANGES */

footer.page-footer {
color : @white-color;
background-color : @black-bg;
}

.footer.content {
border-top : 0;
text-transform : uppercase;
}

.footer.content .infooter, .footer.content .copyright {

display : flex;
align-items : start;
}

.infooter .column {
width : 24%;
margin : 0px 1% 20px 0;
}

.copyright .column {
width : 50%;
}

.infooter .column:last-child,.copyright .column:last-child {
flex : 1;
width : auto;
}

.infooter h4 {

padding : 10px 0 10px 0;

border-bottom:1px solid @white-color;
border-top : 1px solid @white-color;

}

Do not forget the define the different colors  (ex : @white-color).

Now flush the cache and see the changes.

More on Templates

The last example shows the way to define a template for a specific block.

The following command will help you identify the phtml file to update or copy/modify the proper template.

$ grep -r “page-wrapper” .

It will list the pages where the tag page-wrapper is contained.

Examples of a template overriding :

Template file taken from vendor/magento/module-theme/view/frontend/templates/html

We copy bugreport.phtml to app/design/frontend/COMPANY/company_theme/Magento_Theme/templates/html/bugreport.phtml

Once you’ve done your research, just change the HTML code and CSS and clear the cache.

 

Now that we’ve seen how we can deal with our blocks, templates and css files, let’s add a few more examples.

Other examples of use

  1. Modifying the home page from the administrative interface and implement cms_index_index.xml for the layout

By default a Magento2 installation will generate a home page which you can find using the Content menu -> Pages

We will simply use it and create an xml file to handle the layout so we don’t let the user play with the content easily. We would rather tell him to handle blocks.

Here we will update the title and content area from the form provided and display these blocks on the page header on which we applied a nice background image, see the end result :

When you do your research, you will see that the title of the page is using the template title.phtml from the module-theme frontend templates folder and is placed inside the container named : page.main.title inside the default.xml.

There is no need to touch the template, however we will move the block to another container and use CSS to update our styles.


<!-- move our title block inside the header -->
<move element="page.main.title" destination="header.container" after="header-wrapper"/>

Now just apply some CSS override over page-title-wrapper class inside _theme.less as we’ve already seen before.

I’ll show you the code along with the header change to include a nice image in the background. But before I wish to add the text filled from the content area of the home page right below the title on the header as well :


<move element="main" destination="header.container" after="page.main.title"/>

<!-- add class attribute to our main title block -->
<referenceBlock name="page.main.title">
<arguments>
<argument name="css_class" xsi:type="string">content header</argument>
</arguments>
</referenceBlock>

<!-- change class of main container -->
<referenceContainer name="main" htmlClass="header content"/>

2. Adding container below the header

Now something a little bit spicier; we create a new container which will be placed right under the header, it will display general delivery information as a block :


<!-- Adding custom bar below the header - SEE empty.xml in magento-theme/base/layouts: -->
<referenceContainer name="page.wrapper">
<container name="delivery.container" label="Delivery Container" htmlTag="div" htmlClass="delivery" after="header.container">
<block class="Company\Module\Block\Home" template="Company_Custom::default/delivery.phtml" />
</container>
</referenceContainer>

To fully understand the above lines, please refer to the tutorial on creating blocks in Magento2.

We refer to a main container called page.wrapper which you can see the declaration into empty.xml file from the base layout of the main Magento theme. Then the container is being added and we set it to appear under the header container. We also create a block inside with a new template (you can insert any type of html into it).

Now our CSS code for the whole example :


@black-bg : #1a1a1a;
@white-color : #f9f9f9;
@pink-color : #ff00cc;

&nbsp;

/* HEADER CHANGES on HOMEPAGE */

.page-header {

height : 909px;

display : block;
background : url('@{baseDir}images/bg-img.jpg') no-repeat;
background-size : cover;
}

.page-header .panel.wrapper {

border : 0px;
background-color :@white-color ;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

.page-header .panel.wrapper ul.links a {
color : black;
}

.page-header h1 {

color : @pink-color;
font-family : @font-family-name__title;
text-transform : uppercase;
}

/* JUST BELOW HEADER */

.delivery {

margin : auto;
text-align: center;
width : 100%;
line-height : 30px;
background-color : @black-bg ;
color : @white-color;
font-size : 16px;
text-transform : uppercase;
}

I assume you understand how CSS/less works so I won’t detail the lines added above.

Additional useful Magento2 commands to remember :

$ php bin/magento deploy:mode:show

$ php bin/magento deploy:mode:set production

 

 

I hope you add a pleasant time reading this article and if you have any question, I’ll be glad to answer you.

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: