Download - BYSOFT - Magento Design Integration Training
![Page 1: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/1.jpg)
Design Integration Guideline
Bysoft China – www.bysoftchina.com
![Page 2: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/2.jpg)
Contents
Layout comprehension 3
Understand header and footer elements5
Prepare working environment 32
Introduce Block34
Bysoft China – www.bysoftchina.com
Standard development workflow1
![Page 3: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/3.jpg)
Bysoft China
§1. Standard development workflow
Open the doc
Bysoft China – www.bysoftchina.com
![Page 4: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/4.jpg)
Bysoft China
§2. Prepare working environment
Bysoft China – www.bysoftchina.com
![Page 5: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/5.jpg)
Disable cache control
Go to Admin->System->Cache Management , check all the boxes then select “Refresh” from the
dropdown box, save setting. And then “Disable” and save setting.
Prepare working environment Bysoft China
Bysoft China – www.bysoftchina.com
![Page 6: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/6.jpg)
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.
Apply Template Path Hints to “Yes”.Ex:
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)
frontend\default\default\template\checkout\cart\sidebar.phtml
Bysoft China – www.bysoftchina.com
![Page 7: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/7.jpg)
Enable Translate Inline (for debugging purpose)
Go to Admin->System->Configuration->Developer -> Translate Inline,
Apply “Yes” to Enabled for Frontend.
Ex: Scope: Mage_CatalogRulemeans you can find the translation text reside in the file
Mage_CatalogRule.csv
Prepare working environment Bysoft China
![Page 8: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/8.jpg)
Prepare working environment
Setup new theme and file structures
Create a new folder under \app\design\frontend\default, let’s say ”bysoft”,and copy and paste “layout” and “template” from default folder.
Create a new folder under \skin\frontend\default, the same as ”bysoft”,and copy and paste “layout” and “template” from default folder.
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 9: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/9.jpg)
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, Now select the Themes option and change Default to
”bysoft”(uncheck Use website).
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 10: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/10.jpg)
Prepare working environment
Setup theme enable period (for special event)
go to Admin->System->Design, then Add Design Change for every store view(languages), Apply “Store”, “Custom Design”, “Date from” and
“Date to” for new theme, christmas for instance.
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 11: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/11.jpg)
Bysoft China
§3. Layout comprehension
Bysoft China – www.bysoftchina.com
![Page 12: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/12.jpg)
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
![Page 13: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/13.jpg)
Layout override rules (priority)
bysoft (category, product)
bysoft (store view)
bysoft theme (global)
default theme
Highest
Higher
Lower
Lowest
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 14: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/14.jpg)
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 ChinaBysoft China – www.bysoftchina.com
![Page 15: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/15.jpg)
Theme and file structures
ThemeConcept
bysoft theme
css
images
js
layout
template
locale
Bysoft China
skin app
Bysoft China – www.bysoftchina.com
![Page 16: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/16.jpg)
Bysoft China
§4. Introduce Block
Bysoft China – www.bysoftchina.com
![Page 17: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/17.jpg)
Introduce Block
A Block is a box (or any other form) where your module is shown. There are two types: Structural block : assign visual structure to a store
page (header, left column, main column and footer…). Content block : the actual content inside each
structural block.
*Note: Static block: is used for cms pages.
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 18: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/18.jpg)
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.
before (and) after – ways to position a content block within a structural block.
template – this attribute determines the template that will represent the functionality of the block in which this attribute is assigned.
action – this is used to control store-front functionalities such as
loading or unloading of a Javascript.
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'.
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 19: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/19.jpg)
CMS page V.S static block
CMS pageCMS pages are for home page and static pages that aren’t included in catalogs.
Static blockStatic 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
CMSContent management
system
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 20: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/20.jpg)
Call CMS pages
Call CMS pages from static block (footer, header links):
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>
Call cms page link in static block(about us for example Define block Identifier as “footer_links” and insert following
code in content.<a href="{{store url=""}} Page URL Identifier ">About Us</a>
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 21: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/21.jpg)
Call static blocks
Call static blocks direct from .phtml Create a cms 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') ?>
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 22: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/22.jpg)
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" }}
Call search module
{{block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"}}
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 23: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/23.jpg)
Bysoft China
§5. Understand header and footer elements
Bysoft China – www.bysoftchina.com
![Page 24: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/24.jpg)
Logo back office
Search catalogsearch.xml
Switch Languages page.xml
HeaderHeaderElementsElements
&&its layoutsits layouts
HeaderHeaderElementsElements
&&its layoutsits layouts
Type of header elements
Top linksMy Account, Login , Logout catalog.xmlMy Wish List wishlist.xmlMy Cart, Checkout checkout.xml
Welcome message back office
Bysoft ChinaBysoft China – www.bysoftchina.com
![Page 25: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/25.jpg)
Switch Stores page.xml
About Us, Customer Service cms.xml
Footer linksSitemap catalog.xml
Advance Search catalogsearch.xml Term Search catalogsearch.xml
Contact Us contacts.xml
copyright back office
FooterFooterElementsElements
&&its layoutsits layouts
FooterFooterElementsElements
&&its layoutsits layouts
Type of footer elementsBysoft China
Bysoft China – www.bysoftchina.com
![Page 26: BYSOFT - Magento Design Integration Training](https://reader035.vdocuments.us/reader035/viewer/2022081502/555c58f4d8b42af3448b4f18/html5/thumbnails/26.jpg)
You can find this ppt and other resources atSarge:\_MAGENTO
Bysoft ChinaBysoft China – www.bysoftchina.com