How Is Magento Template Written

Hullo friends, welcome back to Magento Tutorial. Today we will explore Magento layout & Magento templates on Magento frontend. Time length for this lesson is about three hours through the specific contents as following:

Create a elementary Magento template on Frontend
How to configure Magento template packages
Work with the layout file of Magento

Magento layout & Magento templates on frontend of magento

Create a simple Magento template on Frontend

To create a simple template on frontend we demand the below elements:

Controller/Action: the method to process a request from a respective URL.

Block files: to control template blocks, containing the methods which can be called direct in the template it controls.

Template files: containing the HTML code

Layout files: to configure controller, block and template.

Hither I would like to introduce to you lot the steps to create a simple template on frontend of Magento. The following example is written in module Lesson 12.

1. Create controller/Activeness

A URL in magento browser looks like this:

http://base_path/routers_name/controller_name/action_name/param/value

In which:

base_path: the website domain proper name

routers_name: the frontend URL of a module configured in the file Name_Space/Module/etc/config.xml

controller_name: the file name (grade) in the folder: Name_Space/Module/controllers

action_name: the method name in the higher up class in the class of " action_nameAction ()"
param & value: the associated parameters and values

magento templates 1 — Instance of controller customer/account/login

There are three steps to create a controller/action in Magento

Footstep 1: configure routers_name in file config.xml: app/code/local/Magestore/Lesson12/etc/config.xml

 <config> … <frontend> <routers> <lesson12> <apply>standard</utilize> <args> <module>Magestore_Lesson12</module> <frontName>lesson12</frontName> </args> </lesson12> </routers> </frontend> … </config>

In which:

<routers>, <args>: config tags

<lesson12>: module name

Magestore_Lesson12: NameSpace_ModuleName

<frontName>: routers_name

Step 2: Create file controller. This file is a class extend Mage_Core_Controller_Front_Action in the folder: app/code/local/Magestore/Lesson12/controllers/IndexController.php

Step 3: create Action which means a method in the to a higher place class, for example: helloAction().

class Magestore_Lesson12_IndexController extends Mage_Core_Controller_Front_Action { /** * hello activity */ public function helloAction() { $this->loadLayout(); $this->renderLayout(); } }

2. Create a layout file

Layout file is a XML file which tin can configure controllers/Action with associated block & template. This file is put in folder: app/design/frontend/packge/theme/layout (package & theme are name of magento templates. Nosotros will talk over these in details in the subsequently part of this lesson).

For case: To create file layout for module Lesson 12:

app/design/frontend/default/default/layout/lesson12.xml

<layout version="0.1.0"> <default> <!-- update layout for all frontend folio --> </default> <lesson12_index_hello> <reference proper name="content"> <cake type="lesson12/lesson12" proper name="lesson12" template="lesson12/lesson12.phtml" /> </reference> </lesson12_index_hello> </layout>

In the above example:

<lesson12_index_hello> is the name of controller/Action needs to exist configured; this controller belongs to module Lesson 12, in class Indexcontroller.php & method helloAction.

<reference proper noun="content"> is the proper name of block which we want to do refer. . Their names are written in the root configuration of Magento. The proclamation of block in this tag volition exist the child cake of block content when rendering to HTML (app/blueprint/frontend/base/default/layout/folio.xml)

type: name of cake in the right URL of binder. Above is file Lesson.php in the folder: app/lawmaking/local/Magestore/Lesson/Block/Lesson12.php

name: the name of block set by us

template: Nosotros proper name template file with the right URL after configuring template packages in admin. In this instance, we implement in the default template of Magento: app/design/frontend/default/default/template/lesson12/lesson12.phtml

3. Create a Block file

Declare the module's cake in file config.xml

 <config> <global> … <blocks> <lesson12> <class>Magestore_Lesson12_Block</class> </lesson12> </blocks> … </global> </config>

Create file app/code/local/Magestore/Lesson12/Block/Lesson12.php with a simple method getHelloString()

Note: The class in the block will be named precisely according to the binder path

form Magestore_Lesson12_Block_Lesson12 extends Mage_Core_Block_Template { public function getHelloString() { render 'Welcome to Lesson 12'; } }

iv. Create a Template file

File template has the extension .phtml which tin contain HTML, PHP, CSS, JAVASCRIPT code… In this example, nosotros create a template file with a unproblematic HTML & PHP code as: app/design/frontend/default/default/templste/lesson12/lesson12.phtml

<div class="lesson"> <?php echo $this->__('Lesson Module Template') ?> <br/> <?php repeat $this->getHelloString() ?> </div>

In which function getHelloString is generated in the corresponding block of Lesson 12 using object $ this

Note: The characters want to exist shown on frontend should exist chosen out by PHP control, for example, $this->__('Lesson Module Template') This enables using Magento language interpreting system. After finishing these steps, we can save the straight link and test in the browser:

Magento layout & Magento templates on frontend of magento 2

If you want to insert template into an existing page for example product pages without any intervention to Magento module core, we follow these steps:

Firstly, get to the Magento layout cadre file encounter if the blocks have been written past this modules: app / design / frontend / base / default / layout / catalog.xm. Nosotros tin hands notice that at that place is cake "product.info.extrahint" in the tag <catalog_product_view> and nosotros volition make reference to this block.

Secondly, configure file layout:

 <catalog_product_view> <reference proper name="production.info.extrahint"> <block type="lesson12/lesson12" name="lesson12" template="lesson12/lesson12.phtml" /> </reference> </catalog_product_view>

This example resuse the results of block and template in the above office. The page will look like this:

Welcome back to Lesson 12! In the previous part, nosotros have finished session i about creating unproblematic template on Frontend. Today we will continue with the two concluding sessions: Ways to configure template parcel & How to work with layout file of Magento.

How to configure Magento template bundle on Frontend

one. Steps to configure template package

To begin, you follow this path: System -> Configuration -> Blueprint. The right side is the Package and Theme tab. These ii tabs deal with the configuration tasks on frontend. In which, packet is the name of folder following: app/design/frontend; theme is the folder containing template files which is located in the package folder.

When we create a module, information in these tabs is usally left blank, which means website uses the default template: package -> default; theme -> default.

magento layout & template 1

As well, in Magento, we can use multistore management to change the template of each private store: Apply select box on the top left to select the shop you want to modify, and and then fill in the package and theme corresponding to that store.

layout & template 2

2. Most Magento Fall – Dorsum Blueprint

Magento Design Fall-Back is used to render themes from the Magento bones templates. The autumn-dorsum hierarchy is described from: Custom_theme -> default_theme -> base -> error.

Please take a look at the post-obit diagram:

layout & template 3

In a nutshell, Pattern Fall-Back process includes iv steps:

– Search the asking file in the folder:

app/blueprint/frontend/custom_package/custom_theme/
skin/frontend/custom_ package/custom_theme

– If not finding information technology, please search in the folder:

app/design/frontend/custom_package/default
skin/frontend/custom_package/default

– In case you are still unable to look for the request file, continue searching in the folder:

app/design/frontend/base/default
skin/frontend/base of operations/default

– The error notification will exist displayed if the file cannot be establish.

3. Plow on template_path_hint

For a Magento developer or a starter with Magento, there is a way to show which block and template is displayed in a page. You can use "template_path_hint" funtion by a few minor tasks in admin as follows:

From admin page, select: System -> Configuration -> Developer

In this folio nosotros show store to brandish template_path_hint as to a higher place suggestion. In the correct content, we cull "Debug" tab and so nosotros change the value of ii selected boxes: "Template Path Hint" and "Add Block Name to Hints" with Yes selection. Finally, cull "Save Config"

Result: (Noted that selected shop is German)

Piece of work with the layout file in Magento

In the configuration of the layout file, in add-on to the usage of block and template to create frontend of Magento, nosotros can use available functions to insert file or the essential path similar css file, javascript, TopLink, footerlink…

For example: app/design/frontend/default/default/layout/lesson12.xml

<lesson12_index_hello>  <reference name="head">  <action method="addCss">  <stylesheet>css/magestore/lesson12/lesson12.css</stylesheet>  </activeness>  <action method="addJs">  <script>magestore/lesson12/lesson12.js</script>  </action>  </reference>  <reference name="content">  <block type="lesson12/lesson12" proper noun="lesson" template="lesson12/lesson12.phtml" />  </reference>  </lesson12_index_hello>

The methods in <action>tag are written in file app/code/core/Mage/Page/Cake/Html/Head.php through file layout folio.xml

In the higher up example, you tin insert more css request into file lesson12.css, which is located in the folder:

peel/frontend/default/default/css/magestore/lesson12/lesson12.css

.lesson12{  border: 1px solid cherry-red;  meridian: 40px;  padding: 5px;  text-align: center;  width: 150px;  }

The upshot will be:

Another case of using addLink function to add a link on the first page of Magento: this function is written in the Block: app/lawmaking/cadre/Mage/Page/Block/Htm/Toplinks.php

<default>  <reference name="top.links">  <action method="addLink" translate="label title" module="lesson12">  <label>Lesson12</label>  <url>lesson12/alphabetize/hello</url>  <title>Lesson12</title><set up/><urlParams/>  <position>10</position>  </activity>  </reference>  </default>

In this instance the function addLink is written in <default>tag aiming to be implemented in all pages of a website. The attributes of this office contain:

Label: Label displayed link.
Url: The path to controller / Action
Title: The title displayed on the browser tab
Position: Link position compared with the pre-existing link

The result will be displayed:

Finally, we should master the following knowledge after this Lesson:

How to create controller/Action in magento
How to configure the template package in admin
How to create a simple template on frontend
How to employ some basic functions in xml

REFERENCE

– Lesson eleven: Magento Configuration.

– Website:

https://blog.magestore.com/2012/02/08/magento-certificate-template-construction-fallbacks/

Enjoy coding and see you later. Follow us in Magento Open up Course for Magento Tutorial.