Magento - Design Integration Guideline - Bysoft China


Published on

In this presentation, you may find necessary information to engage in custom design integration on Magento:
- standard development workflow
- working environment preparation
- layout comprehension
- introducing blocks
- understand header and footer elements

Published in: Business
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Magento - Design Integration Guideline - Bysoft China

  1. 1. Bysoft China Design Integration Guideline g g MAGENTO TRAINING PROGRAM
  2. 2. Bysoft China Contents 1 Standard development workflow Prepare working environment 3 2 Layout comprehension 3 Introduce Block 3 4 5 Understand header and footer elements
  3. 3. Bysoft China §1. §1 Standard development workflow de elopment orkflo Open the doc
  4. 4. Bysoft China §2. §2 Prepare working environment orking en ironment
  5. 5. Bysoft China Prepare working environment  Disable cache control Go to Admin‐>System‐>Cache Management ,  check all the boxes then select “Refresh” from the dropdown box,  p , save setting. And then “Disable” and save setting.
  6. 6. Bysoft China Prepare working environment  Enable template path hints (for debugging purpose) Go to Admin ‐> System ‐> Configuration ‐> Developer ‐> Debug,  then select the store from the top‐left scope dropdown box.  p p p Apply Template Path Hints to “Yes”. Ex: frontenddefaultdefaulttemplatecheckoutcartsidebar.phtml means you find layout in checkout.xml, set the place of cart_sidebar bl k in it reference name and edit i t id b block i f d dit in checkout/cart/sidebar.phtml (as set in template)
  7. 7. Bysoft China Prepare working environment  Enable Translate Inline (for debugging purpose) Go to Admin‐>System‐>Configuration‐>Developer ‐> Translate  Inline,  Apply “Yes” to Enabled for Frontend. Ex:  Scope: Mage_CatalogRule means you can find the translation text reside in the file  Mage_CatalogRule.csv M C l R l
  8. 8. Bysoft China Prepare working environment  Setup new theme and file structures Create a new folder under appdesignfrontenddefault, let’s say ”bysoft”, and copy and paste “layout” and “template” from default folder. Create a new folder under skinfrontenddefault, the same as  ”bysoft”, and copy and paste “layout” and “template” from default folder.
  9. 9. Bysoft China Prepare working environment  Apply new theme to stores go to Admin‐>System‐>Configuration‐>Design,  then select the website from the top‐left scope dropdown box,  p p p , Now select the Themes option and change Default to  ”bysoft”(uncheck  Use website).
  10. 10. Bysoft China Prepare working environment  Setup theme enable period (for special event) go to Admin‐>System‐>Design, then Add Design Change for every store view(languages),  g g y ( g g ), Apply “Store”, “Custom Design”, “Date from” and “Date to” for  new theme, christmas for instance.
  11. 11. Bysoft China §3. Layout §3 La o t comprehension
  12. 12. Bysoft China Theme comprehension  A theme is any combination of layout, template, locale and/or  skin file(s) that create the visual experience of your store.  MAGENTO is built with the capacity to load multiple themes at  once, therefore distinguishes themes into two large types:  Default (lowest hierarchy, can be set from the admin panel)  Non‐default theme (Bysfot, New year, Xmas, Halloween, etc…)
  13. 13. Bysoft China Layout override rules (priority) Highest bysoft (category, product) Higher bysoft (store view) Lower bysoft theme (global) Lowest default theme
  14. 14. Bysoft China Theme concept Each theme includes : Layouts : XML files, define block structure(module layout) , in  which you decide to put some box in some page as a module  function.  Templates : phtml files, in which you do the coding  with xhtml and PHP. Locale: language translations in .csv file format. Skins : css, images, javascript, where u do the beautifications.
  15. 15. Bysoft China Theme and file structures skin app css layout Theme images Concept template js locale bysoft theme
  16. 16. Bysoft China §4. Introduce §4 Introd ce Block
  17. 17. Bysoft China Introduce Block A Block is a box (or any other form) where  y your module is shown.  There are two types: yp Structural block : assign visual structure to a store page  (header, left column, main column and footer…).  Content block : the actual content inside each structural  C t t bl k   th   t l  t t i id   h  t t l  block.  *Note: Static block: is used for cms pages.
  18. 18. Bysoft China Introduce Block The <block> handle attributes type – the identifier of the module class that defines the functionality of the  block. This attribute must not be modified. name – the name of the block by which other blocks can make reference to this  block. block before (and) after – ways to position a content block within a structural block.  template – this attribute determines the template that will represent the  t l t functionality of the block in which this attribute is assigned. action – this is used to control store‐front functionalities such as loading or  g unloading of a Javascript. l di f i as – this is the name by which a template calls the block in which this attribute is  assigned. When you see the getChildHtml('block_name') PHP method called from  a template, you can be sure it is referring to the block whose attribute 'as' is   t l t      b    it i   f i  t  th  bl k  h   tt ib t  ' ' i   assigned the name 'block_name'. 
  19. 19. Bysoft China CMS page V.S static CMS page V S static block CMS Content management system y CMS page Static block CMS pages are for Static blocks are very home page and static flexible, flexible it can be pages that aren’t landing pages; it also included in catalogs. for custom html code which can put anywhere on the page, ex: header and footer links
  20. 20. Bysoft China Call CMS pages Call CMS pages from static block (footer, header links): Define block in cms.xml Define block in cms xml <reference name="footer"> <block type="cms/block" name="cms_footer_links“ before="footer_links"> <action  method="setBlockId"><block_id>footer_links</block_id></action> </block> </reference> /reference Call cms page link in static block(about us for example Define block Identifier as “footer_links” and insert following code in  content. content <a href="{{store url=""}} Page URL Identifier ">About Us</a> 
  21. 21. Bysoft China Call static blocks Call static blocks direct from .phtml Create a cms block in backoffice  and specify the block id  let's say  block in backoffice, and specify the block id, let s say  “site_info”. Define block in page.xml <block type="cms/block" name="cms_site_info"  before="‐" as="my_site_info"> <action  method="setBlockId"><block_id>site_info</block _id></action> </block> Call block on whatever columns.phtml page <?php echo $this‐>getChildHtml('my_site_info') ?> ? h h  $thi tChildHt l(' it i f ') ?
  22. 22. Bysoft China Call Modules Call modules in cms page (mostly on homepage): Call popular tags module {{block type="tag/popular" name="tags_popular"  template="tag/popular_index.phtml" }} l l d h l Call search module C ll  h  d l {{block type="core/template" name=""  as="topSearch"  template="catalogsearch/"}}
  23. 23. Bysoft China §5. Understand h d §5 U d t d header and footer elements df t l t
  24. 24. Bysoft China Type of header elements Logo back office Search catalogsearch.xml Header Elements Top links My Account, Login , Logout catalog.xml & My Wish List wishlist.xml My Cart Checkout Cart, checkout.xml checkout xml its layouts Switch Languages page.xml Welcome message back office
  25. 25. Bysoft China Type of footer elements Switch St S it h Stores page.xml l Footer About Us, Customer Service cms.xml Elements Footer links & Sitemap p catalog.xml g Advance Search catalogsearch.xml its layouts Term Search Contact Us catalogsearch.xml contacts.xml copyright back office
  26. 26. Bysoft China You can find this ppt and other resources at Sarge:_MAGENTO