• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Magento - Design Integration Guideline - Bysoft China

Magento - Design Integration Guideline - Bysoft China



In this presentation, you may find necessary information to engage in custom design integration on Magento:...

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 37

http://www.slideshare.net 19
http://www.bysoft-technologies.com 18



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • useful presentation!
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Magento - Design Integration Guideline - Bysoft China Magento - Design Integration Guideline - Bysoft China Presentation Transcript

    • Bysoft China Design Integration Guideline g g MAGENTO TRAINING PROGRAM
    • 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
    • Bysoft China §1. §1 Standard development workflow de elopment orkflo Open the doc
    • Bysoft China §2. §2 Prepare working environment orking en ironment
    • 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.
    • 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)
    • 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
    • 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.
    • 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).
    • 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.
    • Bysoft China §3. Layout §3 La o t comprehension
    • 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…)
    • Bysoft China Layout override rules (priority) Highest bysoft (category, product) Higher bysoft (store view) Lower bysoft theme (global) Lowest default theme
    • 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.
    • Bysoft China Theme and file structures skin app css layout Theme images Concept template js locale bysoft theme
    • Bysoft China §4. Introduce §4 Introd ce Block
    • 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.
    • 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'. 
    • 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
    • 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> 
    • 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 ') ?
    • 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="top.search"  as="topSearch"  template="catalogsearch/form.mini.phtml"}}
    • Bysoft China §5. Understand h d §5 U d t d header and footer elements df t l t
    • 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
    • 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
    • Bysoft China You can find this ppt and other resources at Sarge:_MAGENTO