আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

Magento Theme Development From Scratch Part-2

Hello Frainds. Today I’ll Describe you Magento Theme Development From Scratch Part 2. If you do not have our first Part, Please look at post ” Our PART 1 ” Let’s now we describe you the Magento  Fallback Logic and will see how they influence in its Theme Development.

In this Article, We’ll be covering the following topics:

  • Understanding the Magento Fallback Logic
  • Magento Blocks, Layouts and Templates
  • Magento CMS Blocks and Magento CMS Pages
  • Magento Variables and Widgets

Understanding the Fallback Logic

Magento relies on a fallback logic to make themes easier to maintain and more upgrade friendly. An example of how Magento’s fallback logic works is, if your custom theme calls for a CSS file named ”styles.css,” but the Magento application is unable to find the file in your custom theme, Magento will search the next theme in the hierarchy for the file and continue searching the hierarchy of themes until it
Locates the file named” styles.css. “ This method of building design is called “fallback” because the application ”falls back” to the next possible source of required files in order to retrieve and load a requested file.

Magento Fallback Logic System

Note: If after Magento has been through the fallback logic and the file still cannot be found it will either throw a rendering error if it’s in the app directory or if it’s in the skin directory it will likely throw a 404 file not found.

Understanding the Magento Blocks, Layouts and Templates
Blocks and Layouts are very important terms in Magento, but to be a successful Magento theme developer, you should understand these concepts.

Blocks:

h2>

Blocks are the main entity through which Magento renders the front-end layout. Through the use of blocks, Magento differentiates various parts of layouts. Basically, there are two types of blocks.

  • Structural Blocks
  • Content Blocks

Structural Blocks:

Structural Blocks are the main outline of any front end layout in Magento. Typically, they contain the Header, Left, Right, Main, and Footer section of a layout.

Magento Theme Structural Block

Content Blocks:

Content Blocks are the actual blocks that reside inside the structural blocks to produce the final visual output. These blocks present the block-specific functionality via HTML. The Category List, Product List, Sub-category List, Product Tags, Homepage product sections, and so are are the content blocks inside structural block.

Magento Content Block

Layouts

The layout in magento allows you to define the structure of the pages through the XML files. Various page types and blocks within each page type are defined in respective XML files. Using XML, you can also incorporate CSS files or JavaScript either to be loaded throughout the site or for specific pages.
There are many layouts pages for page types such as a catalog and category, but not for CMS pages; for them you can define custom XML directly from the admin. Each page, part, and block of the theme is defined by an XML file. Every page is defined by a handle. To understand better how they work, we need to have an overview of the handles.

What is a Handle?
A handle is a reference name that Magento uses to refer to a particular view (or cluster of views) in your Magento store. For example, the <cms_page> handle used later controls the layout of pages in your Magento store created through the content management system (CMS).

There are two main handles in Magento:

  • Default handles that manage the whole site
  • Non-default handles that handle specific parts of the site

The <default> handle defines what is the default behavior for a layout within a particular view? So, if layout for the Checkout view in Magento is defined for the default handle to show a left-hand column in a two column layout, this is the layout that you will see in your store, unless you use a non-default handle to change the layout for a particular view in that Magento feature. For example, you could change the one-page Checkout’s view with a non-default handle to help simplify a customer’s options when it comes to checking out from your store.

The XML files are located in app/design/frontend/base/default/layout/. For the curious, the following is a piece of code of the XML file page.xml:

Magento Layout XML

Above example, we see in action the <default> handle that defines the generic JavaScript and CSS for your theme.

For example, if we want to insert a new custom JavaScript test.js file in your theme head

So, we can insert the new custom JavaScript test.js file in the header for the whole site by performing the following steps:

  1. Open the page.xml file from app/design/frontend/your_package/default/layout/page.xml (we open that file only for reference). The JS loaded from themes is expected to be stored in /skin/frontend/your_package/default/js and they are declared similarly using the following way:

 

<action method="addItem">
<type>skinJs</type>
<script>js/test.js</script>
</action>

  1. In the layout.xml file, insert the action in our default handle, and change it.
  2. Create the JS file in the specified folder in /skin/frontend/your_package/default/js/test.js.

 

Templates

The template files are the PHTML files, a mix of HTML and PHP. These files contain the code of the various blocks and are located at app/design/frontend/your_package/default/template/.
The following screenshot shows a piece of code of the header.phtml file located at /app/design/frontend/your_package/default/page/html:

Magento Template File

CMS blocks and page

CMS (Content Management System) pages and blocks are static pages and blocks that you can manage through the admin panel. Both CMS pages and CMS blocks can contain the HTML code and Magento variables.

CMS blocks

CMS blocks are blocks that you can create from the admin panel. They are useful for allowing the end user to customize some parts of the theme without modifying the files directly by the admin.

CMS pages

CMS pages are the pages that can be created directly from the admin panel. CMS pages are static pages such as Homepage, About Us, and Customer Service. They are available via their own URL address that can be defined with his content from the admin as well.

Magento variables

Magento variables are placeholders in your templates which are replaced by dynamic content.Magento comes with some system variables such as {{store url=""}} (stores the website address), {{var logo_url}} (URL of the store logo), and many others. For a full reference about Magento variables, check the Magento blog at http://www.magentocommerce.com/knowledge-base/entry/defining-transactionalvariables

You can also create a new custom variable from the admin panel/system/custom variables

Magento Widgets

Magento Widgets allow users to easily add dynamic content to their pages in Magento Stores. This allows users with no technical knowledge to easily add dynamic content (including product data, for example) to pages in Magento stores. This allows the user to create informational and marketing content through administrator tools such as:

  1. Dynamic product data in Marketing Campaign Landing Pages
  2. Dynamic Information such as Recently Viewed Items into Content Pages
  3. Promotional images to position in different blocks, side columns and other locations throughout the storefront
  4. Interactive elements and action blocks (external review systems, video chats, voting and subscription forms)
  5. Alternative navigation elements (tag clouds, catalog image sliders)
  6. Create interactive and dynamic flash elements easily configured and embedded within content pages for enhanced user experience
  7. And lots more …

We will discuss more about this topic in the future article dedicated to creating a widget.

Magento Theme Development From Scratch Part-2

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor's degree in Engineering from State University Of Bangladesh, I'm also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i'm a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I'm also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute - a leading Training Institute in the country.

Leave a Reply

Your email address will not be published. Required fields are marked *