69
set the basics right Peter Ogg for better pasta twitter: hans2103 Wednesday, 30 May, 2012

Magento Theme - set the basics right - mm12nl

Embed Size (px)

DESCRIPTION

Magento theming - a presentation about how to create magento themes. Given during Meet Magento 2012

Citation preview

Page 1: Magento Theme - set the basics right - mm12nl

set the basics right

Peter Ogg

for better pasta

twitter: hans2103

Wednesday, 30 May, 2012

Page 2: Magento Theme - set the basics right - mm12nl

boring stuff first

http://www.flickr.com/photos/swiv/5719738832

Wednesday, 30 May, 2012

Page 3: Magento Theme - set the basics right - mm12nl

endless possibilities

Wednesday, 30 May, 2012

Page 4: Magento Theme - set the basics right - mm12nl

temporary design change

Wednesday, 30 May, 2012

Page 5: Magento Theme - set the basics right - mm12nl

set your theme

based on default Magento

Wednesday, 30 May, 2012

Page 6: Magento Theme - set the basics right - mm12nl

set your theme

based on default Modern

first fallback

Wednesday, 30 May, 2012

Page 7: Magento Theme - set the basics right - mm12nl

does file exist inpackage_name/ theme_name/

yes

no

does file exist inpackage_name/

default/

does file exist inbase/

default/

yes

yes

display

rendering error

no

no

How stuff works

Magento fall-back logic

Wednesday, 30 May, 2012

Page 8: Magento Theme - set the basics right - mm12nl

default

default

Wednesday, 30 May, 2012

Page 9: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 10: Magento Theme - set the basics right - mm12nl

non-default

Wednesday, 30 May, 2012

Page 11: Magento Theme - set the basics right - mm12nl

blue

Wednesday, 30 May, 2012

Page 12: Magento Theme - set the basics right - mm12nl

default

Wednesday, 30 May, 2012

Page 13: Magento Theme - set the basics right - mm12nl

blue

Wednesday, 30 May, 2012

Page 14: Magento Theme - set the basics right - mm12nl

does file exist inpackage_name/ theme_name/

yes

no

does file exist inpackage_name/

default/

does file exist inbase/

default/

yes

yes

display

rendering error

no

no

How stuff works

Magento fall-back logic

Wednesday, 30 May, 2012

Page 15: Magento Theme - set the basics right - mm12nl

an existing theme

http://www.flickr.com/photos/popilop/331357312

Wednesday, 30 May, 2012

Page 16: Magento Theme - set the basics right - mm12nl

app/design/frontend/yourpackage/yourtheme/layout

app/design/frontend/yourpackage/yourtheme/template

skin/frontend/yourpackage/yourtheme/css

skin/frontend/yourpackage/yourtheme/images

create your ownPage generation xml instructions for each module

Content block .phtml files for each module

Visual layout info and files & UI-specific Javascript

Wednesday, 30 May, 2012

Page 17: Magento Theme - set the basics right - mm12nl

• a single layout file, named local.xml, where all layout updates are placed.

• no layout files with the same name as any layout file in the base theme

• no css files with the same name as any css file in the default skin

• no .phtml template files, except for those that were modified to support the new theme.

a well coded theme

should have to following traits

usually this number will be very small

create local.css

Wednesday, 30 May, 2012

Page 18: Magento Theme - set the basics right - mm12nl

Remove callouts and rarely used stuff

Add the local stylesheet

your theme starts

with local.xml

Wednesday, 30 May, 2012

Page 19: Magento Theme - set the basics right - mm12nl

not much is changed

Wednesday, 30 May, 2012

Page 20: Magento Theme - set the basics right - mm12nl

prevent unwanted indexation like Sitemap, Search Results and more

add more to your

with local.xml

thanks to Joachim HoutmanWednesday, 30 May, 2012

Page 21: Magento Theme - set the basics right - mm12nl

timesaver

http://www.flickr.com/photos/maigh/2141921845

Wednesday, 30 May, 2012

Page 22: Magento Theme - set the basics right - mm12nl

Magento backend

goto System >> Configuration

goto Developer

change Scope

expand Debug

set Template Path Hints to Yes

save Config

(clean Cache)

Magento frontend

refresh page

Wednesday, 30 May, 2012

Page 23: Magento Theme - set the basics right - mm12nl

Magento backend

goto System >> Configuration

goto Developer

change Scope

expand Debug

set Template Path Hints to No

save Config

(clean Cache)

Magento frontend

refresh page

Wednesday, 30 May, 2012

Page 24: Magento Theme - set the basics right - mm12nl

http://bit.ly/DeveloperToolbar

also M1.7

Wednesday, 30 May, 2012

Page 25: Magento Theme - set the basics right - mm12nl

I’m a UNIX geek fond of SSH

find the extension key

use it to install

done

Wednesday, 30 May, 2012

Page 26: Magento Theme - set the basics right - mm12nl

enabled by default

scroll down to Developer

Wednesday, 30 May, 2012

Page 27: Magento Theme - set the basics right - mm12nl

click and go

Wednesday, 30 May, 2012

Page 28: Magento Theme - set the basics right - mm12nl

click and go

Wednesday, 30 May, 2012

Page 29: Magento Theme - set the basics right - mm12nl

a child can do the laundry

from the book: “I always get my sin”

Wednesday, 30 May, 2012

Page 30: Magento Theme - set the basics right - mm12nl

http://yourmagentosite.com/developertoolbar/index/hints/enabled/1/type/front/

be aware

more serious

http://yourmagentosite.com/developertoolbar/index/url/enabled/1/

broken links all over the place!

Wednesday, 30 May, 2012

Page 31: Magento Theme - set the basics right - mm12nl

http://www.flickr.com/photos/playerdue/5285272605/

analytics

Wednesday, 30 May, 2012

Page 32: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 33: Magento Theme - set the basics right - mm12nl

frontend/base/default/template/catalog/layer/filter.phtml

Wednesday, 30 May, 2012

Page 34: Magento Theme - set the basics right - mm12nl

add _gaq.push onClick

important to strip html tags

Wednesday, 30 May, 2012

Page 35: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 36: Magento Theme - set the basics right - mm12nl

see results in Google Analytics

Wednesday, 30 May, 2012

Page 37: Magento Theme - set the basics right - mm12nl

add more

four ways to add a link

http://www.flickr.com/photos/farruska/208926935

Wednesday, 30 May, 2012

Page 38: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 39: Magento Theme - set the basics right - mm12nl

do not forget to activate

Wednesday, 30 May, 2012

Page 40: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 41: Magento Theme - set the basics right - mm12nl

http://www.flickr.com/photos/andrec/2893549851

Wednesday, 30 May, 2012

Page 42: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 43: Magento Theme - set the basics right - mm12nl

Lorem Ipsum

Wednesday, 30 May, 2012

Page 44: Magento Theme - set the basics right - mm12nl

<M1.7

Wednesday, 30 May, 2012

Page 45: Magento Theme - set the basics right - mm12nl

app/design/frontend/base/layout/catalog.xml

a call for a template file

<M1.7

Wednesday, 30 May, 2012

Page 46: Magento Theme - set the basics right - mm12nl

app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/top.phtml

URL key from CMS page

Wednesday, 30 May, 2012

Page 47: Magento Theme - set the basics right - mm12nl

M1.7

Wednesday, 30 May, 2012

Page 48: Magento Theme - set the basics right - mm12nl

app/design/frontend/base/layout/page.xml

a call for a template file

M1.7

Wednesday, 30 May, 2012

Page 49: Magento Theme - set the basics right - mm12nl

app/design/frontend/yourpackage/yourtheme/template/page/html/topmenu.phtml

URL key from CMS page

Wednesday, 30 May, 2012

Page 50: Magento Theme - set the basics right - mm12nl

DONE!!

Wednesday, 30 May, 2012

Page 51: Magento Theme - set the basics right - mm12nl

http://www.flickr.com/photos/boklm/486678763

Wednesday, 30 May, 2012

Page 52: Magento Theme - set the basics right - mm12nl

M1.7

Wednesday, 30 May, 2012

Page 53: Magento Theme - set the basics right - mm12nl

app/design/frontend/yourpackage/yourtheme/template/page/html/

call for static block in backend

M1.7

Wednesday, 30 May, 2012

Page 54: Magento Theme - set the basics right - mm12nl

create new static block

M1.7

Wednesday, 30 May, 2012

Page 55: Magento Theme - set the basics right - mm12nl

{{store direct_url="loremipsum"}}

M1.7

Wednesday, 30 May, 2012

Page 56: Magento Theme - set the basics right - mm12nl

DONE!!

Wednesday, 30 May, 2012

Page 57: Magento Theme - set the basics right - mm12nl

http://www.flickr.com/photos/boklm/486646798

Wednesday, 30 May, 2012

Page 58: Magento Theme - set the basics right - mm12nl

M1.7

Wednesday, 30 May, 2012

Page 59: Magento Theme - set the basics right - mm12nl

app/design/frontend/base/layout/page.xml

no call for a template file

Wednesday, 30 May, 2012

Page 60: Magento Theme - set the basics right - mm12nl

app/design/frontend/yourpackage/yourtheme/layout/local.xml

URL key from CMS page

Wednesday, 30 May, 2012

Page 61: Magento Theme - set the basics right - mm12nl

DONE!!

Wednesday, 30 May, 2012

Page 62: Magento Theme - set the basics right - mm12nl

http://www.flickr.com/photos/boklm/486676439

Wednesday, 30 May, 2012

Page 63: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 64: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 65: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 66: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 67: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012

Page 68: Magento Theme - set the basics right - mm12nl

Wednesday, 30 May, 2012