Magento Theme - set the basics right - mm12nl

A presentation at Meet Magento 2012 in May 2012 in Ede, Netherlands by Hans Kuijpers

Slide 1

Slide 1

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

Slide 2

Slide 2

boring stuff first http://www.flickr.com/photos/swiv/5719738832 Wednesday, 30 May, 2012

Slide 3

Slide 3

endless possibilities Wednesday, 30 May, 2012

Slide 4

Slide 4

temporary design change Wednesday, 30 May, 2012

Slide 5

Slide 5

set your theme based on default Magento Wednesday, 30 May, 2012

Slide 6

Slide 6

first fallback set your theme based on default Modern Wednesday, 30 May, 2012

Slide 7

Slide 7

does file exist in package_name/ yes theme_name/ How stuff works Magento fall-back logic no does file exist in package_name/ yes display default/ no does file exist in base/ yes default/ no Wednesday, 30 May, 2012 rendering error

Slide 8

Slide 8

default default Wednesday, 30 May, 2012

Slide 9

Slide 9

Wednesday, 30 May, 2012

Slide 10

Slide 10

non-default Wednesday, 30 May, 2012

Slide 11

Slide 11

blue Wednesday, 30 May, 2012

Slide 12

Slide 12

default Wednesday, 30 May, 2012

Slide 13

Slide 13

blue Wednesday, 30 May, 2012

Slide 14

Slide 14

does file exist in package_name/ yes theme_name/ How stuff works Magento fall-back logic no does file exist in package_name/ yes display default/ no does file exist in base/ yes default/ no Wednesday, 30 May, 2012 rendering error

Slide 15

Slide 15

an existing theme http://www.flickr.com/photos/popilop/331357312 Wednesday, 30 May, 2012

Slide 16

Slide 16

create your own Page generation xml instructions for each module app/design/frontend/yourpackage/yourtheme/layout app/design/frontend/yourpackage/yourtheme/template Content block .phtml files for each module skin/frontend/yourpackage/yourtheme/css skin/frontend/yourpackage/yourtheme/images Visual layout info and files & UI-specific Javascript Wednesday, 30 May, 2012

Slide 17

Slide 17

a well coded theme should have to following traits • 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 create local.css • no .phtml template files, except for those that were modified to support the new theme. usually this number will be very small Wednesday, 30 May, 2012

Slide 18

Slide 18

Remove callouts and rarely used stuff Add the local stylesheet your theme starts with local.xml Wednesday, 30 May, 2012

Slide 19

Slide 19

not much is changed Wednesday, 30 May, 2012

Slide 20

Slide 20

prevent unwanted indexation like Sitemap, Search Results and more add more to your with local.xml thanks to Joachim Houtman Wednesday, 30 May, 2012

Slide 21

Slide 21

timesaver http://www.flickr.com/photos/maigh/2141921845 Wednesday, 30 May, 2012

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

also M1.7 http://bit.ly/DeveloperToolbar Wednesday, 30 May, 2012

Slide 25

Slide 25

find the extension key use it to install done I’m a UNIX geek fond of SSH Wednesday, 30 May, 2012

Slide 26

Slide 26

enabled by default scroll down to Developer Wednesday, 30 May, 2012

Slide 27

Slide 27

click and go Wednesday, 30 May, 2012

Slide 28

Slide 28

click and go Wednesday, 30 May, 2012

Slide 29

Slide 29

from the book: “I always get my sin” a child can do the laundry Wednesday, 30 May, 2012

Slide 30

Slide 30

be aware http://yourmagentosite.com/developertoolbar/ index/hints/enabled/1/type/front/ more serious http://yourmagentosite.com/ developertoolbar/index/url/enabled/1/ broken links all over the place! Wednesday, 30 May, 2012

Slide 31

Slide 31

analytics http://www.flickr.com/photos/playerdue/5285272605/ Wednesday, 30 May, 2012

Slide 32

Slide 32

Wednesday, 30 May, 2012

Slide 33

Slide 33

frontend/base/default/template/ catalog/layer/filter.phtml Wednesday, 30 May, 2012

Slide 34

Slide 34

add _gaq.push onClick important to strip html tags Wednesday, 30 May, 2012

Slide 35

Slide 35

Wednesday, 30 May, 2012

Slide 36

Slide 36

see results in Google Analytics Wednesday, 30 May, 2012

Slide 37

Slide 37

add more four ways to add a link http://www.flickr.com/photos/farruska/208926935 Wednesday, 30 May, 2012

Slide 38

Slide 38

Wednesday, 30 May, 2012

Slide 39

Slide 39

do not forget to activate Wednesday, 30 May, 2012

Slide 40

Slide 40

Wednesday, 30 May, 2012

Slide 41

Slide 41

http://www.flickr.com/photos/andrec/2893549851 Wednesday, 30 May, 2012

Slide 42

Slide 42

Wednesday, 30 May, 2012

Slide 43

Slide 43

Lorem Ipsum Wednesday, 30 May, 2012

Slide 44

Slide 44

< Wednesday, 30 May, 2012 .7 1 M

Slide 45

Slide 45

< a call for a template file app/design/frontend/base/layout/catalog.xml Wednesday, 30 May, 2012 .7 1 M

Slide 46

Slide 46

URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/catalog/navigation/top.phtml Wednesday, 30 May, 2012

Slide 47

Slide 47

.7 1 M Wednesday, 30 May, 2012

Slide 48

Slide 48

.7 1 M a call for a template file app/design/frontend/base/layout/page.xml Wednesday, 30 May, 2012

Slide 49

Slide 49

URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/page/html/topmenu.phtml Wednesday, 30 May, 2012

Slide 50

Slide 50

DONE!! Wednesday, 30 May, 2012

Slide 51

Slide 51

http://www.flickr.com/photos/boklm/486678763 Wednesday, 30 May, 2012

Slide 52

Slide 52

.7 1 M Wednesday, 30 May, 2012

Slide 53

Slide 53

.7 1 M call for static block in backend app/design/frontend/yourpackage/ yourtheme/template/page/html/ Wednesday, 30 May, 2012

Slide 54

Slide 54

.7 1 M create new static block Wednesday, 30 May, 2012

Slide 55

Slide 55

.7 1 M {{store direct_url=”loremipsum”}} Wednesday, 30 May, 2012

Slide 56

Slide 56

DONE!! Wednesday, 30 May, 2012

Slide 57

Slide 57

http://www.flickr.com/photos/boklm/486646798 Wednesday, 30 May, 2012

Slide 58

Slide 58

.7 1 M Wednesday, 30 May, 2012

Slide 59

Slide 59

no call for a template file app/design/frontend/base/layout/page.xml Wednesday, 30 May, 2012

Slide 60

Slide 60

URL key from CMS page app/design/frontend/yourpackage/ yourtheme/layout/local.xml Wednesday, 30 May, 2012

Slide 61

Slide 61

DONE!! Wednesday, 30 May, 2012

Slide 62

Slide 62

http://www.flickr.com/photos/boklm/486676439 Wednesday, 30 May, 2012

Slide 63

Slide 63

Wednesday, 30 May, 2012

Slide 64

Slide 64

Wednesday, 30 May, 2012

Slide 65

Slide 65

Wednesday, 30 May, 2012

Slide 66

Slide 66

Wednesday, 30 May, 2012

Slide 67

Slide 67

Wednesday, 30 May, 2012

Slide 68

Slide 68

Wednesday, 30 May, 2012

Slide 69

Slide 69

thank your for your time http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 http://www.flickr.com/photos/trasimac/1217071176 Wednesday, 30 May, 2012