Thursday 17 November 2016

Magento Theme Development Guide Part 1(Magento Theming)

 Note : Before reach this article please read my previous article

 Magento Directory Structure


Magento Theme Development Guide :- 

Magento theme development is very importanat part of magento project development. If you want to implement your own custom design for your store you have to   knowledge about magento theme development if you are not able to implement your own design please read this series of articles..

  Before working on magento coding part disable your magento cache from admin panel.

  1.  Login to dashboard
  2. Go to configuration (System->Cache Management)
  3. Select  All
  4. From Right Side (Select Disable from right side dropdown option)






Magento Directory where your theme located :-

  • When you open your Magento root folder, you’ll see a list of folders under there. Out of these folders, the folders in which we’ll be editing files are just the app folder and the skin folder.
  •  Templating files in the app/design/frontend/<designPackageName>/<<themeName> /directory are organized into the following subdirectories
                  Layout—Contains the basic XML files that define block structure for different pages as                       well as control meta information and page encoding.
                 Template—Contains the PHTML files that contain xHTML markups and any necessary                      PHP to create logic for visual presentation. Some templates are page templates and some                      are block templates.

                 Locale—Contains simple CSV text documents organized on a per language basis                                containing translation strings (as name-value pairs) for all text produced by Magento (e.g.,                  for interface elements and messages, not products and categories)
  • Skin files in the skin/frontend/<designPackageName>/<<themeName> / directory are organized into the following subdirectories:
            CSS—Contains the CSS files used to control visual styling of the website

            Images—Contains all images used by the theme

            JS—Contains theme-specific JavaScript routines and callable functions. (Most JavaScript                   libraries, which might be shared across themes) are placed in the js/ directory at the Magento               root

Click Here If you want to join Magento Training in Delhi

continued next tutorial......








Monday 7 November 2016

Magento2 Directory Structure

I have gone through the directories of Magento2 and i and i found that directory structure changed . It is important to understand differences between Magento1.x and Magento2. In tis blog we will discuss about Magento2 Directory and Files structures.

Root Folder Structure

First let’s compare root folder structure of Magento 1.x and Magento 2. There are major changes applied at root level. Very first thing you will identify is that some new folders are introduced and some of them are removed.
  • media and errors folder are moved to pub folder
  • skin and js folder are moved to pub/static folder. Now it is easy to maintain static content via CDN.
  • js, css, images are again divided into pub/static/adminhtml and pub/static/frontend for backend and frontend area respectively.
  • dev folder contains various tools for developers such as migration tools and tests. shell is moved to dev folder
  • downloader, includes and pkginfo folder are no more with magento 2.
  • setup directory is for installation process
  • get.php, cron.php and index.php files are moved to pub folder.

There are 2 index.php files one in Magento root folder and another in pub folder. You can configure your server to run your application through any of this index.php file. Using pub/index.php is a good option as it will stop access of application files and it is good for security.

eav.php

Database connection settings, backend name, session save settings and cache settings are declared in app/etc/env.php
config.php
config.php has list of active and inactive modules
Theme Folder Structure
Magento 2 comes with very drastic changes on the frontend. Significant changes has been apply on theme structure for performance improvements.
As like earlier version magento 1.x base package ‘app/design/frontend/base/’ will no more exists. Each core module in Magento 2 has new folder introduced which is called ‘view’. This ‘view’ folder contains all module specific files like email template, js, layout xmls, phtml for frontend and backend.
Themes are grouped by ‘vendor’ which we known as ‘package’ in magento 1.x. Theme structure in Magento 2 is like ‘app/design/frontend/vendor_name/theme_name’.

Core Module
Magento core components are exists in your_magento_web_root/vendor/magento directory.
Module Folder Structure
In Magento 2 app/etc/modules folder is removed and module’s declaration is moved to app/code/Vendor_name/Module_name/etc/module.xml file. Each module has its own registration.php file in its root. This file is for Magento to identify it as a module.
app/code/core, /local, /community folders are removed and module structure becomes like
[root]/app/code/[Namespace]/[Module]
  • Namespace is a name of a module’s vendor
  • Module is a name assigned to a module by its vendor
Next to Controller, Model, Helper, Block, etc Magento 2 has introduced new folders which are:
  • Api
  • i18n – contains module specific translation
  • view – contains module specific layout xmls, phtml


Click Here If you want to join Magento Training in Delhi

Thursday 3 November 2016

Magento Theme installation Guide

Steps for magento theme installation Guide


You can install mageto themes two types.
  

Note : Before installing any theme or extension please disable cache from your magento admin panel.

To install a theme from Magento Connect you need to follow certain steps which are explained below (Advance users may skip few steps):
1. Select the theme by browsing the huge Magento theme archive. OR, If you know the direct URL of your favourite theme just open it’s Magento connect URL
2. Now, you will see a button right under the theme image called “Get Extension Key”. You need to click “Get Extension Key” and agree to extension license agreement.
Url for free theme : https://www.magentocommerce.com/magento-connect/hellowired-free-theme-1.html
Login to your magento account.

3. After you select agree checkbox and click “Get Extension Key” you will see the Magento extension key right there itself (displayed in the box). You need to paste this extension key in your store’s Magento connect tab. Keep it safe.
4. Copy this Magento extension key. E.g. It will look like “magento-community/Magik_Autocomplete”
5. In order to install this theme into your Magento store you need to login to your store admin panel and go to System->Magento Connect->Magento Connect Manager. Magento connect manager will ask you to login again. You need to use your store admin login credentials to get past the login screen.

You need to paste the theme extension key copied from the Magentocommerce.com’s Magento connect here.
Magento connect checks for the extension key validity and downloads the theme on your system. Depending upon your internet connection speed (bandwidth) and theme size it will take time to install. These extension keys are specifically created with a unique combination so that there is no confusion over which extension to download. If you have correct extension key and there are no errors in theme or your internet bandwidth you will not see any error messages. In case there are any error messages try downloading and installing again. If you do not succed at all then you can contact the theme owner or ask questions in the theme documentation tab.
6. Soon after you see “Theme successfully installed” message go to System->Configuration->Design->Themes and provide the theme name in Default field (which will change your default theme to this new theme) and click “Save Config” button at the top right corner of your screen.

7. A Magento theme revolves around different columns in your theme layout. In case your store home page doesn’t load properly and shows weird design then go to CMS->Manage Pages. You will notice that there are two different layouts for the home page (may be more depending upon how many themes you have tried in the past). Based on your new theme layout disable all the other home page layouts. You can easily disable/enable the layouts by clicking “Enabled” or “Disabled” links provided in the status field.

 By Magento Connect Manager


Login to your magento admin panel
    
 1.Go to system ->Magento Connect->Magento Connect Manager


 2. Click On Magento Connect Manager ( Get Login Window again)



 3. Login to your admin panel username and password


4. After Login you get dashboard  Like this



Click Here If you want to join Magento Training in Delhi