Magento Expert Forum - Improve your Magento experience

Results 1 to 12 of 12

Design and layout initialization

  1. #1
    Junior Member rocker's Avatar
    Join Date
    Mar 2013
    Posts
    106
    Thanks
    3
    Thanked 11 Times in 9 Posts

    Default Design and layout initialization

    As you may know, layout is built with a small set of XML tags that are simple and interesting to learn. By learning some key concepts and commands of layout, you will be soon be equipped with the sufficient knowledge to easily modify your store design to your desired specification.
    1. Identify the steps in request flow in which
    - Design data is populated

    • Define the position of template files: block, layout, phtml

    - Layout configuration files are parsed

    • Parse the layout file

    - Layout is compiled

    • Determine block and .phtml template file to get html string
    • Translate that string

    - Output is rendered

    • Return html

    2.Describe the module layout XML schema
    - Layout:
    - Layout handles:

    • Correspond with a layout page
    • Based on the action controller (Module_Controller_Action). Example: category_product_list
    • Layout handle is always called in any pages

    - label: label of handles
    - reference: is used to make reference to assigned block and adds child blocks or updates block. In order to make the reference, you must target the reference to a block by using the “name” attribute.
    - block: is the definition of a new block in reference.

    • name: shows the name of block (only in a page rendered).
    • as: this is the block name. It is used to call blocks in file phtml (only in cha block).
    • type: shows the block’s class name (core/template).
    • If the type is type or subtype of core/template, blocks will assign “template” attribute to set template.

    - remove: deletes an assigned block
    - action: calls a mode (function) of instance. Action positions in references or blocks.
    - update: loads a handle in a current handle. The handle inherits all handles loaded
    - Block types:

    • core/template: This block renders a template defined by its template attribute. The majority of blocks defined in the layout are of type or subtype of core/template.
    • page/html: This is a subtype of core/template and defines the root block. All other blocks are child blocks of this block.
    • page/html_head: Defines the HTML head section of the page which contains elements for including JavaScript, CSS etc.
    • page/html_header: Defines the header part of the page which contains the site logo, top links, etc.
    • page/template_links: This block is used to create a list of links. Links visible in the footer and header area use this block type.
    • core/text_list: Some blocks like content, left, right etc. are of type core/text_list. When these blocks are rendered, all their child blocks are rendered automatically without the need to call thegetChildHtml() method.
    • page/html_wrapper: This block is used to create a wrapper block which renders its child blocks inside an HTML tag set by the action setHtmlTagName. The default tag is if no element is set.
    • page/html_breadcrumbs: This block defines breadcrumbs on the page.
    • page/html_footer: Defines the footer area of page which contains footer links, copyright message etc.
    • core/messages: This block renders error/success/notice messages.
    • page/switch: This block can be used for the language or store switcher.

    3. Describe layout fallback
    We have the following files:

    • app/design/frontend/magestore/cutepet/catalog/template/product/view.phtml
    • app/design/frontend/magestore/default/catalog/template/product/view.phtml
    • app/design/frontend/base/default/catalog/template/product/view.phtml
    • app/design/frontend/default/default/catalog/template/product/view.phtml

    - Base, Default, Magestore: are called package and contain many themes
    - Default, cutepet: name of theme
    - Base: is called the fall back package
    When calling the file product/view.phtml, if the system doesn’t see this file in magestore/cutepet, it will find in magstore/default. The system will find in base/default if it also doesn’t see in magestore/default. In case the system cannot see the file anywhere, it will report the error.
    4. Describe admin and frontend scopes
    When creating a module, we will declare the scope of the layout file in file config.xml
    - Layout in admin: use tab <adminhtml>
    - Layout in frontend: use tab < frontend >

    <layout> <updates> <module_name> <file>file_name.xml</file> </ module_name > </updates> </layout>

    View more threads in the same category:


  2. The Following 2 Users Say Thank You to rocker For This Useful Post:

    david (02-04-2013),shunavi (29-03-2013)

  3. #2
    Administrator david's Avatar
    Join Date
    Nov 2012
    Posts
    260
    Thanks
    23
    Thanked 40 Times in 33 Posts

    Default

    It work but I think you should edit so it look nicer

  4. #3
    Junior Member
    Join Date
    May 2013
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It is really useful information about design & layout as many people get confused while doing this.

  5. #4
    New member
    Join Date
    Sep 2013
    Location
    New York
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for sharing some good information regarding design & layout. Thanks for the nice input.

  6. #5
    New member
    Join Date
    Apr 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It is really nice information thank you for sharing. I am a designer and design recruitment websites for recruiters. But i never design in magento now I will definitely try it on.

  7. #6
    New member arianna143's Avatar
    Join Date
    Apr 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It is really very nice, informative and useful share that really helps the people to design there website as they want.

  8. #7
    Adwin Finn
    Guest

    Default

    It is really very nice, informative and useful share that really helps the people to design

    pass4sure ccnp training

  9. #8
    Junior Member thaonvp's Avatar
    Join Date
    Mar 2015
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for sharing this useful article

  10. #9
    New member
    Join Date
    Mar 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for sharing the article.

  11. #10
    Junior Member Brucey's Avatar
    Join Date
    Oct 2015
    Location
    Dallas, TX
    Posts
    53
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    It really informative and it's worked with my website. Thanks.

  12. #11
    Junior Member
    Join Date
    Mar 2015
    Posts
    296
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Good layout design for website and thank for sharing.

  13. #12

Similar Threads

  1. Understanding Layout XML in Magento – Part 2
    By david in forum Programming & Development
    Replies: 14
    Last Post: 04-09-2017, 12:25 PM
  2. Magento Module Development - Part 2 - layout and blocks
    By rocker in forum Programming & Development
    Replies: 0
    Last Post: 22-04-2013, 08:31 AM
  3. Understanding Layout XML in Magento – Part 1
    By david in forum Programming & Development
    Replies: 0
    Last Post: 09-04-2013, 09:13 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •