MAGENTO TRAINING PROGRAM

26 

Full text

(1)

Design Integration Guideline

MAGENTO TRAINING PROGRAM

(2)

Prepare working environment

3

2

Layout comprehension

3

Introduce Block

3

4

Understand header and footer elements

(3)

§1 Standard de elopment

orkflo

§1. Standard development workflow

(4)

§2 Prepare

orking en ironment

§2. Prepare working environment

(5)

Prepare working environment 

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)

à 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:

means you find layout in checkout.xml, set the place of

t id b bl k i it f d dit i

frontend\default\default\template\checkout\cart\sidebar.phtml

cart_sidebar block in it reference name and edit in checkout/cart/sidebar.phtml (as set in template)

(7)

Prepare working environment 

Prepare working environment 

ƒ

Enable Translate Inline 

(for debugging purpose) à Go to Admin‐>System‐>Configuration‐>Developer ‐> Translate  Inline,  à Apply “Yes” to Enabled for Frontend. Ex:  Ex:  Scope: Mage_CatalogRule means you can find the translation text reside in the file  M C l R l Mage_CatalogRule.csv

(8)

à 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.

(9)

Prepare working environment 

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)

à 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)

§3 La o t comprehension

§3. Layout comprehension

(12)

skin file(s) that create the visual experience of your store.  MAGENTO is built with the capacity to load multiple themes at  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)

Layout override rules 

(priority)

Layout override rules 

(priority)

Highest

bysoft (category, product)

Highest

bysoft (store view)

Higher

bysoft theme (global)

Lower

default theme

(14)

à 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.

(15)

Theme and file structures

Theme and file structures

skin app

Theme

css layout

Concept

images js template locale bysoft theme

(16)

§4 Introd ce Block

§4. Introduce Block

(17)

Introduce Block

Introduce Block

ƒ

A Block is a box (or any other form) where 

your module is shown.  There are two types:

y

yp

à

Structural block 

: assign visual structure to a store page 

(header, left column, main column and footer…). 

C

t

t bl k 

 th   t

t

t i id  

h  t

t

à

Content block 

: the actual content inside each structural 

block. 

(18)

à typetype– the identifier of the module class that defines the functionality of the 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.  t l t à 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  l di f i g 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   t l t      b    it i   f i  t  th  bl k  h   tt ib t  ' ' i   a template, you can be sure it is referring to the block whose attribute 'as' is  assigned the name 'block_name'. 

(19)

CMS page V S static block

CMS page V.S static block

CMS Content management systemy CMS page

CMS pages are for home page and static

Static block

Static blocks are very flexible it can be home page and static

pages that aren’t included in catalogs.

flexible, it can be landing pages; it also for custom html code which can put

anywhere on the anywhere on the page, ex: header and footer links

(20)

à 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)

Call static blocks

Call static blocks

ƒ

Call static blocks direct from .phtml

à Create a cms block in backoffice  and specify the block id  let's say 

à 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 

<action 

method="setBlockId"><block_id>site_info</block

_id></action>

</block>

</block>

à Call block on whatever columns.phtml page ? h h  $thi tChildHt l(' it i f ') ? <?php echo $this‐>getChildHtml('my_site_info') ?>

(22)

à Call popular tags module

{{block type="tag/popular" name="tags_popular" 

l

l

d

h

l

template="tag/popular_index.phtml" }}

C ll  h  d l à Call search module

{{block type="core/template" name="top.search" 

as="topSearch" 

template="catalogsearch/form.mini.phtml"}}

(23)

§5

U d

t

d h

d

d f

t

l

t

(24)

Logo Æ back office Search Æ catalogsearch.xml

Header

Header

Header

Header

Elements

Elements

&

&

Elements

Elements

&

&

Top links

My Account, Login , LogoutÆ catalog.xml My Wish List Æ wishlist.xml

My Cart Checkout Æ checkout xml

Switch Languages Æ page.xml

its layouts

its layouts

its layouts

its layouts

My Cart, Checkout Æ checkout.xml

(25)

Type of footer elements

Type of footer elements

S it h St Æ l

Switch Stores Æ page.xml

About Us, Customer ServiceÆ cms.xml

Footer

Footer

Footer

Footer

Footer links Sitemap Æ catalog.xml

Elements

Elements

&

&

Elements

Elements

&

&

p g

Advance Search Æ catalogsearch.xml Term Search Æ catalogsearch.xml Contact Us Æ contacts.xml

its layouts

its layouts

its layouts

its layouts

(26)

You can find this ppt and other resources at You can find this ppt and other resources at Sarge:\_MAGENTO

Figure

Updating...

References

Updating...

Related subjects :