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

1. Bysoft China
Design Integration Guideline
g g
MAGENTO TRAINING PROGRAM

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. Bysoft China
§1.
§1 Standard development workflow
de elopment orkflo
Open the doc

4. Bysoft China
§2.
§2 Prepare working environment
orking en ironment

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. 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. 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. 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. 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. 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. Bysoft China
§3. Layout
§3 La o t comprehension

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. Bysoft China
Layout override rules (priority)
Highest
bysoft (category, product)
Higher
bysoft (store view)
Lower
bysoft theme (global)
Lowest
default theme

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. Bysoft China
Theme and file structures
skin app
css layout
Theme
images Concept template
js locale
bysoft theme

16. Bysoft China
§4. Introduce
§4 Introd ce Block

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. 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. 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. 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. 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. 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"}}

23. Bysoft China
§5. Understand h d
§5 U d t d header and footer elements
df t l t

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. 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. Bysoft China
You can find this ppt and other resources at
Sarge:_MAGENTO