BYSOFT - Magento Design Integration Training

8,797 views

Published on

Slides for a training session we have done in order to train our staff on design integration with magento.

Published in: Technology, Business
2 Comments
10 Likes
Statistics
Notes
  • We have used this company to build our magento website and we are really satisfied with their service. We are now running a magento webstore with over 5000 SKUs and we are selling worldwide.
    Bysoft is really a magento expert. I would recommend this company.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • good presentation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,797
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
335
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

BYSOFT - Magento Design Integration Training

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

×