Websites, nowadays are considered as one of the most extensive parts of our day-to-day lives. We usually encounter websites with almost everything we do, right from shopping to learning and from working to playing and many more. But have you ever noticed that we are attracted towards those websites that have attractive as well as user-friendly interface and most particularly serve our requirements easily. The straightforward answer to this is- YES!!
The leading factor responsible for this is front end development of the website. As a majority of the eCommerce sites nowadays are Magento based, an interactive Magento front-end development is required. As a result, the Magento front end developer needs to architect and develop the websites and its applications using different web technologies that natively runs on a web browser.
Starting with Magento front-end development:
Starting out with Magento may look as a little bit intimidating as the developers first need some time to get familiar with millions of folders and files including their location. There are a number of factors that a typical developer must understand before trying their hands on the front end web development, especially if you are a novice. So, let us have a look at those factors for experiencing an easy front-end developing:
1. Editing Files:
Being a Magento developer (whether front-end or back-end developer), one thing that you must keep in mind- Never Ever edit a core Magento file. The core Magento file comes with the base install that includes- frontend > base folder and frontend > package > default folder. If you want to modify these files, you need to go through the following process:
Creating New Theme Folder:
Magento works with a fallback system that means it offers you with multiple working themes and then select a particular theme at the runtime while rendering the site.
For creating a new theme, you need to create a new folder at the same level as default and give it a new name.
For creating few theme inside the skin folder create separate folders called layout (for .xml files) and templates (for .phtml files) inside the new theme folder.
Setting Theme Fallback System:
In order to see the new changes made in the new theme, you need to set up the new theme to do so. For this, you need to log in into Magento and navigate through System > Configuration > Design
Under the Package Tab input the value ‘enterprise’ if you are working on enterprise version.
Under the Themes Tab input the values for set translations, templates, skin and layout to the new themes name. If the field is left blank, the Magento will automatically use the base theme as its fallback meaning.
Editing Template Files:
For any of the file that you want to change the default theme, you need to copy the original file into the new theme folder having the same original structure and then initiate to make any changes. This would ensure that your changes are upgraded safe as a custom theme is not affected by the upgrade.
Editing Layout Files:
The base theme layout folder will have a number of .xml files- usually one for each module. For the layout file we just need to create one file named as local.xml and place it in new themes layout folder- design > frontend > package > new theme > layout > local.xml
Magento offers the users to create the individual blocks or the whole pages that they need to edit from their account. These are termed as the CMS Static Blocks and the CMS Content Blocks. The Static blocks help in keeping the content modular as well as easy to access. Also, they can be used as promotional banners on homepage or offer links to header/footer.
Creating CMS block:
Go through following steps for creating CMS block.
Create CMS block in the database, log in to the Magento account and navigate through CMS > Static Block > Add New Block. Input the following:
Block Title: Input user-friendly name that is easy to identify. It can include spaces.
Identifier: This will be set in the local.xml file, must not have any spaces and can use the consistent naming convention.
Store View: It will set to all or the selected store names.
Enabled: This will turn on or disabled to turn it off.
Content: It will add images, text or any other static block inside it.
Add the new CMS block to the layout and template folders in order to ensure to which page, template as well as block it is being displayed.
3. Adding CSS or JS files:
For adding .css or .js file, you need to add following with the layout.xml file.
<default> – This will add css file to every page
<reference name=”head”> – This will add the value to the head of each document
<action method=”addItem”> – This will add item to css or js file
<type>skin_css</type> – This will specify that it is found in the skin folder and whether it is a css or js file.
<name>css/styles.css</name> – This will allow you to provide the folder and file name.
For adding js file, you need to write the syntax <type>skin_js</type> and <name>scripts.js</name>
If you know how to search for a file would help you in saving a lot of time at the initial stage. Command + Shift + F will help you to select a folder that will search a directory for any of the text that you choose. As a result, if you are looking for a page name or any class of an element, this could help you a better way. Briefly stating, it returns a list of files that is found in so that you can navigate from there.
5. Enabling Path Hints:
System > Configuration > Developer > Select Current Configuration Scope > Debug > Template Path Hints (switch it to Yes)
It may be possible that you need to clear the cache again and then return to the page and refresh it.
Thus, following the above-mentioned steps it will help you in excelling with the Magento front-end development process. If you are having any queries regarding Magento front end development, you can consult Kodematix- one of the leading eCommerce service providers.