Magento 2 Basic Theme Development

Magento 2 Theme development and customization can be categorised in different level depending on the different developer’s skills. Different level of customisation are:

• If a developer just wants to change the colour, images or other small changes on his website, then it can be achieved only with the knowledge of CSS. Developer can use Magento default CSS and make his required changes in it.
• If a developer wants to make some more changes other than CSS, like some changes in the HTML generated through PHTML file. Then the developer can achieve it if he has a little knowledge of PHP and HTML.
• If a developer wants to make changes in the website structure, like: placing one block to another place, adding new block or completing moving a block to a different page. This can be achieved if the developer also have the knowledge of XML.
• Finally, if the developer have complete knowledge as mentioned in above three points, then developer can design his own theme.

Pre requisites

• Previous Magento coding experience
• Some knowledge of Magento 2
• Magento 2 fully installed and running smoothly, access to the frontend & admin.

Theme Development:

Similar to the Magento 1, themes are stored inside app/design/frontend directory. Inside this we need to create Vendor directory with your Vendor_name and inside vendor directory we need to create a new directory which your Theme_name. Both name should not have space between them. So after this the structure will be:

app/design/frontend/Vendor_name/theme_name

Now your structure is in place, you need to declare your theme so that Magento knows it exists and you can set it as an active theme in the admin. Create a theme.xml file within the theme folder, on the root. You can use the code inside of the Blank or Luma theme folders. You can also use the code below. Just insert the name of your theme in the <title> tags. You can also specify a parent theme for fallback purposes.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>INSERT THEME NAME</title>
<parent>Magento/blank</parent>
</theme>

This is the minimum code you need, but you can also declare a theme image. This is a thumbnail image which shows in the admin on your theme page so you can see a preview of what your theme looks like. To add one of these, add the code below in-between the XML nodes, underneath the theme declaration.

<media> <preview_image>media/theme-screenshot.jpg </preview_image> </media>

Change the name of the thumbnail image to that of your filename. Place the image in the following location:

/app/design/frontend/Vendor_name/theme_name/media/theme-screenshot.jpg

If you don’t have this file in the correct location when you visit your theme page in the admin, you’ll get an error – so make sure your image is in the right place and named correctly.

Theme Registration File:

The last part in declaring your theme is to add a registration.php file to your theme’s root.

/app/design/frontend/Vendor_name/theme_name/registration.php

Add below code in your registration file:


<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/vendor_name/theme_name,
__DIR__
);


Theme Basic Structure:

In a design, there are many static files such as javascript, css, images and fonts. They are stored in separate directories in web of theme package. In Magneto 2, there is no skin directory as Magento 1. So all this static files are kept in web folder inside theme root directory. Here are the structure

app/design/frontend/Vendor_name/theme_name/
├── etc/view.xml
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/


The etc/view.xml file is where you can configure the Magento Catalog image sizes and other things. Copy the etc/view.xml file from one of the default theme’s and edit as necessary.

The last thing you can do before activating your theme, is to add you logo and declare it. The image file can be added to the web/images folder which you created not long ago. This can be whatever file type you like, in this case I’ve used an svg. So to actually tell the theme to use your logo, you create the Magento_Theme/layout folders and add the following code to a default.xml file. Edit to match your requirements.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.svg <argument name="logo_img_width" xsi:type="number">300 <argument name="logo_img_height" xsi:type="number">300 </arguments>
</referenceBlock>
</body>
</page>


Composer File:

Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.

To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server. { "name": "vendor_name/theme_nameultimate",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-blank": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}

Activate your Theme

Now everything is in place for you to activate your theme. Browse to the admin of your Magento 2 store, and go to Content > Design > Themes. Make sure your theme appears in this list – if it doesn’t, it hasn’t been declared correctly.
When you can see your theme in the path above, browse to Stores > Configuration > Design. Select the right store scope and then change the theme to your newly created theme.

Odoo 8 – Email Reminders To Vendors

Pragmatic Techsoft Pvt. Ltd. has comeup with new module “pragmatic_email_reminders” to send reminder emails to vendor. There are following email notifications categories involved :

• Delayed Quotation Submission Against RFQ
• Delayed Incoming Shipments
• Partial Incoming Shipments

All above mentioned are the reminder emails to the vendors.

This modules has follwoing configuration available

1. Configurations in Odoo is available in Purchase section :

• This will allow user to set initital delay to shoot email reminders to vendors for delayed quotes submission.
• Initial delay is considered from the date of Order itself
• User can setup frequency schedular with interval unit and type
• max. no. of reminders for vendor per RFQ can be set up

2. RFQ Reminder Configuration

• This will allow user to set initital delay to shoot email reminders to vendors for delayed quotes submission from a date of order

3. Delay Incoming Shipments

• This email reminder is used to notify vendor if none of the product received on a scheduled dated in PO. The initial delay considered for this is on and above on the “Scheduled Date” mentioned for a Shipment.
• User can update new expected date of shipment in Picking if conveyed by vendor.

4. Partial Incoming Shipments

• This email reminder is used to notify vendor if full quantities in picking are not received.

Magento 2 Module Development

Here we are going to learn, how to develop a simple module in magento 2 and what are the pre requirements to develop a module. Here, we assume that you have successfully installed Magento 2 in your development environment.

After you have successfully installed Magento 2.0 in your development environment and it functions properly, there are two things which we recommend you to do:

Disable the System Cache:

• Login to Magento admin section.
• Goto System > Cache Management.
• Select all types of caches available there.
• Select Disable option from the dropdown on top left corner of table.
• Click on submit button. It will disable all the cache in magento system.

Switch your Magento to Developer Mode:

• Open your development environment terminal.
• Move to the root location of your magento instance.
• Run this command: php bin/magento deploy:mode:set developer.

All this information will help you to understand the new structure more easily. Now we will start to learn the module development step by step.

STEP 1: Create a module folder and necessary files to register the module.
In Magento 1.x, we have learned that module folder is created inside one of the code pools inside app/code/(community, core or local). But in Magento 2, no more code pools are available. Now , the module folder will be:

app/code/Pragmatic
app/code/Pragmatic/Helloworld

The Pragmatic folder is the module’s namespace, and Helloworld is the module’s name.
Note: If you don’t have the code folder in your app directory, create it manually.
After module folder we will create module.xml file inside app/code/Pragmatic/Helloworld/etc folder.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Pragmatic_Helloworld" setup_version="1.0.0">
</module>
</config>


And now we will create a registration.php file to register our module in Magento:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Pragmatic_Helloworld',
__DIR__
);

Now, Open your terminal and go to the Magento 2 root. Run the following command from terminal:

php bin/magento setup:upgrade

Now if you want to confirm that your module is registered in magento or not, login to magento admin and move to Stores → Configuration → Advanced → Advanced. Here you can see the list of all enabled module in Magento. One more place where you can check that your module is registered or not is app/etc/config.php. Check the array for the ‘Inchoo_Helloworld’ key, whose value should be set to 1.

STEP 2 : Create Router & Controller
Firstly we will define router by creating a routes.xml file inside app/code/Pragmatic/Helloworld/etc/frontend folder with following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="hello" frontName="helloworld">
<module name="Pragmatic_Helloworld" />
</route>
</router>
</config>


Here we’re defining our frontend router and route with an id “helloworld”.The frontName attribute is going to be the first part of our URL.
In Magento 2 URL’s are constructed this way:

<frontName>/<controler_folder_name>/<controller_class_name>

So in our example, the final URL will look like this: helloworld/index/index

Create index.php controller file inside app/code/Pragmatic/Helloworld/Controller/Index folder with following code:

<?php
namespace Pragmatic\Helloworld\Controller\Index;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Framework\App\Action\Action
{
protected $_resultPageFactory;
public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
{
$this->_resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
$resultPage = $this->_resultPageFactory->create();
return $resultPage;
}
}


In Magento 1 each controller can have multiple actions, but in Magento 2 this is not the case. In Magento 2 every action has its own class which implements the execute() method.

STEP 3 : Create Block Here, we will create a simple Helloworld.php block file inside
app/code/Pragmatic/Helloworld/Block folderwith following code:

<?php
namespace Pragmatic\Helloworld\Block;
class Helloworld extends \Magento\Framework\View\Element\Template
{
public function getMessage()
{
return 'Hello World!';
}
}


In this block file, we have created a getMassage() method which will return a message ‘Hello World!’.

STEP 4 : Create Layout and Template file
We have seen in Magento 1.x layout file and template files are placed in a separate app/design/ folder, but in Magento 2 it is placed inside a new view folder which is placed in module folder only. Inside this we can have three folders namely: adminhtml, base or frontend.

The adminhtml folder is used for admin, the frontend folder is used for frontend and the base folder is used for both, admin & frontend files.

Here we will first create a helloworld_index_index.xml layout file inside app/code/Pragmatic/Helloworld/view/frontend/layout folder with following code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
<body>
<referenceContainer name="content">
<block class="Pragmatic\Helloworld\Block\Helloworld"
name="helloworld" template="helloworld.phtml" />
</referenceContainer>
</body>
</page>


In our layout file, we have created a block inside content container and set the template file as helloworld.phtml file. Now we will create a template file inside
app/code/Pragmatic/Helloworld/view/frontend/template folder with following code:

<h1><?php echo $this->getMessage(); ?></h1>

$this variable is referencing our block class and we are calling the method getMessage() which is returning the string ‘Hello world!’.

Now, open your browser. Hit your yourdomain.com/helloworld/index/index. You can see the message as below:

article

Magento 2 Improvements over Magento 1

Magento is one of the top leading Open-Source Digital Commerce Platform for an online store. Magento is used by both small scale industries and large scale industries to open their online store and handle their store. Magento is the best Content Management System(CMS) to develop an ecommerce website and manage their store. Magento is getting improved day by day, because of the hard work and high level analysis of magento team and thousands of developers who are showing their interest in it and developing more functional & innovative extensions and themes to make magento more easy to use.

Now, magento has released a complete new version which they named as Magento 2. Magento 2 is totally different from magento in terms of new features, structure flow, coding, view and many more. In magento 2, team has tried to improve all the complaints of developers who are facing issues in magento previous version. The Key features that are improved in magento 2 are:

Improved Performance:

Performance was the major issue which a developer faces when it comes time to deploy a heavy ecommerce website using magento. Because the performance of magento (till 1.9.x) was slow. But in Magento 2 they have worked a lot in it and improved the performance of Magento 2 by an average of 20%. Additions on Magento 2:

• Magento 2 fully supports PHP 5.6 and PHP 7. PHP 7 is now released with completely new performance and much faster executions.
• Nginx has been developed with three core principles in mind: high performance, high concurrency, and low usage of memory. Thus, it significantly increases the speed, and Magento 2 will fully support it.
• Redis is an advanced key-value cache which provides top notch performance and offers other features. It incorporates several use cases for in-memory datasets, which are the reason of high performance results.
• Full page caching is so powerful due to the ability to store the full page output in a cache. As a result, subsequent page loads do not require much server load. Thus, full page caching is mandatory for high-traffic websites, and Magento 2 will fully support it.

User-friendly Checkout:

Checkout is one of the most important part of an ecommerce website. If the checkout process is not good then the stores have more chances to move their products to abandon cart which reduces the store’s sales. Instead of an accordion layout that’s used in older versions of Magento, the steps are now located across the top. The overall design is much clearer and concise, and easier to navigate through. Customers need to have a stress-free and efficient checkout experience, and Magento 2 provides just that.

• Reduced the number of checkout steps and also reduce the information details to be filled by customers.
• Integration with popular payment gateways (PayPal, Braintree, Authorize.net, WorldPay (Enterprise Edition), CyberSource (Enterprise Edition)) that weren’t previously supported. Variety of payment options provide better checkout UX for your customers.
• Automatic guest checkout.
• Order summary with thumbnail.
• Receiving shipping rates once information is provided.

User-friendly Administration Panel:

The main administration panel has been redesigned and is now displayed vertically on the left hand side of the admin. The menu icons are very prominent and this is because the entire navigation is touch friendly and responsive. This improvement should be welcomed and should definitely help those merchants who spend their days running around with an iPad in hand. Changes in administration panel are:

• UI enhancements providing responsive and touch friendly navigation. Let the good times roll for merchants who works with CMS via iPads or tablet.
• Features are well categorised and managed under the menu in comparison to previous magento version.
• Grid view is made configurable, so that admin can select the attributes to be shown in it. Before, we need to hard to add any new column in grid.

• Addition of new menu element “Marketing”. All the marketing related features are listed inside this menu.