Magento Expert Forum - Improve your Magento experience

Page 1 of 2 12 LastLast
Results 1 to 20 of 22

Design and layout initialization

  1. #1
    Junior Member rocker's Avatar
    Join Date
    Mar 2013
    Posts
    105
    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
    261
    Thanks
    22
    Thanked 42 Times in 34 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 1 Time in 1 Post

    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
    Join Date
    Oct 2015
    Location
    Dallas, TX
    Posts
    65
    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
    295
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    Good layout design for website and thank for sharing.

  13. #12
    Junior Member
    Join Date
    Jan 2017
    Posts
    127
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    Thanks for the information.

  14. #13
    New member
    Join Date
    Nov 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Very detailed! Key concepts and commands of layout!
    _________________
    bullet force game, 192.168.0.1 router help

  15. #14
    Member
    Join Date
    Jun 2017
    Location
    jalandhar
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  16. #15
    Junior Member petershene's Avatar
    Join Date
    Aug 2017
    Location
    South Africa
    Posts
    91
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Default

    Very good, i like that you took time to explain the process of deploying a layout or setting one up. Magneto is a bit of a learning curve it reminds me of joomla sometimes but once you get it its alright. Once again nice post and good for a quick reference, sometimes we as programmers do so myuch that we forget things we had learnt before i know i do, so i bookmark whatever i need.

  17. #16
    Junior Member
    Join Date
    Jun 2018
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Good knownable information regarding design. Thank you.
    sheet metal manufacturer Faridabad
    sheet metal industries faridabad

  18. #17
    Junior Member
    Join Date
    Aug 2018
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It is easy to design Magento layouts if we use the Nesting Blocks by including the getchildHTML in the template. Here's how you can use it as explained on official Magento site:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
    <head>
    <?php echo $this->getChildHtml('head') ?>
    </head>
    <body class="page-popup <?php echo $this->getBodyClass()?$this->getBodyClass():'' ?>">
    <?php echo $this->getChildHtml('content') ?>
    <?php echo $this->getChildHtml('before_body_end') ?>
    <?php echo $this->getAbsoluteFooter() ?>
    </body>

    ---------------------------------------------------------------------------
    https://www.netguru.co/services/react-js

  19. #18
    Junior Member
    Join Date
    Sep 2018
    Posts
    15
    Thanks
    1
    Thanked 2 Times in 1 Post

    Default

    Thanks for the information, it is really useful. You explained it in great detail and I will try to do so. I also use graphic design bundles https://masterbundles.com/downloads/...tive/graphics/ Also very interesting is obtained

  20. #19
    Junior Member
    Join Date
    Sep 2018
    Location
    United Kingdom
    Posts
    635
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    As you may know the design is worked with a little arrangement of XML labels that can straightforward and fascinating to learn. By adapting some key ideas and directions of format, you will be too long be furnished with the adequate learning to effortlessly change to your store plan about your coveted particular. likely,Design data is populated,Parse the layout file,Determine block and .phtml template file to get html string,Translate that string and some thing like that.

  21. #20
    New member
    Join Date
    Dec 2017
    Location
    Dallas, Texas, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, thank you for sharing useful information design and initialization technique

Page 1 of 2 12 LastLast

Similar Threads

  1. Understanding Layout XML in Magento – Part 2
    By david in forum Programming & Development
    Replies: 19
    Last Post: 02-03-2021, 05:44 AM
  2. Magento Module Development - Part 2 - layout and blocks
    By rocker in forum Programming & Development
    Replies: 0
    Last Post: 22-04-2013, 07:31 AM
  3. Understanding Layout XML in Magento – Part 1
    By david in forum Programming & Development
    Replies: 0
    Last Post: 09-04-2013, 08: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
  •