Meet magento 2011-templating
-
Upload
hans-kuijpers -
Category
Business
-
view
3.240 -
download
2
description
Transcript of Meet magento 2011-templating
![Page 1: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/1.jpg)
set the basics right
http://www.flickr.com/photos/unloveable/2396019222
for better templating
Thursday 19 May 2011 (wk )
![Page 2: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/2.jpg)
boring stuff first
http://www.flickr.com/photos/swiv/5719738832
Thursday 19 May 2011 (wk )
![Page 3: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/3.jpg)
endless possibilities
Thursday 19 May 2011 (wk )
![Page 4: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/4.jpg)
temporary design change
Thursday 19 May 2011 (wk )
![Page 5: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/5.jpg)
set your theme
based on default Magento
Thursday 19 May 2011 (wk )
![Page 6: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/6.jpg)
set your theme
based on default Modern
first fallback
Thursday 19 May 2011 (wk )
![Page 7: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/7.jpg)
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
Thursday 19 May 2011 (wk )
![Page 8: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/8.jpg)
an existing theme
http://www.flickr.com/photos/popilop/331357312
Thursday 19 May 2011 (wk )
![Page 9: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/9.jpg)
app/design/frontend/default/yourtheme/layout
app/design/frontend/default/yourtheme/template
skin/frontend/default/yourtheme/css
skin/frontend/default/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
Thursday 19 May 2011 (wk )
![Page 10: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/10.jpg)
• 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
Thursday 19 May 2011 (wk )
![Page 11: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/11.jpg)
Remove callouts and rarely used stuff
Add the local stylesheet
your theme starts
with local.xml
Thursday 19 May 2011 (wk )
![Page 12: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/12.jpg)
not much is changed
Thursday 19 May 2011 (wk )
![Page 13: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/13.jpg)
http://www.flickr.com/photos/playerdue/5285272605/
earn money with adsense
Thursday 19 May 2011 (wk )
![Page 14: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/14.jpg)
Thursday 19 May 2011 (wk )
![Page 15: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/15.jpg)
http://www.adsense-generator.com
Thursday 19 May 2011 (wk )
![Page 16: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/16.jpg)
scroll down to Developer
set both to yes
Thursday 19 May 2011 (wk )
![Page 17: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/17.jpg)
referral to catalog.xml
Thursday 19 May 2011 (wk )
![Page 18: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/18.jpg)
almost every time the same .xml
referral to catalog.xml
Thursday 19 May 2011 (wk )
![Page 19: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/19.jpg)
this is base/default/layout/catalog.xml
don’t edit this fileonly copy this handle to local.xml
Thursday 19 May 2011 (wk )
![Page 20: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/20.jpg)
only change
what needs to be changed
call for your adsense script
Thursday 19 May 2011 (wk )
![Page 21: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/21.jpg)
newly created filein newly created directoryin yourtheme
create your .phtml file
Thursday 19 May 2011 (wk )
![Page 22: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/22.jpg)
and you’re done
Thursday 19 May 2011 (wk )
![Page 23: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/23.jpg)
timesaver
http://www.flickr.com/photos/maigh/2141921845
Thursday 19 May 2011 (wk )
![Page 24: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/24.jpg)
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
Thursday 19 May 2011 (wk )
![Page 25: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/25.jpg)
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
Thursday 19 May 2011 (wk )
![Page 26: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/26.jpg)
http://bit.ly/DeveloperToolbar
Thursday 19 May 2011 (wk )
![Page 27: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/27.jpg)
I’m a UNIX geek fond of SSH
find the extension key
use it to install
done
Thursday 19 May 2011 (wk )
![Page 28: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/28.jpg)
enabled by default
scroll down to Developer
Thursday 19 May 2011 (wk )
![Page 29: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/29.jpg)
click and go
Thursday 19 May 2011 (wk )
![Page 30: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/30.jpg)
click and go
Thursday 19 May 2011 (wk )
![Page 31: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/31.jpg)
a child can do the laundry
from the book: “I always get my sin”
Thursday 19 May 2011 (wk )
![Page 32: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/32.jpg)
add more
four ways to add a link
http://www.flickr.com/photos/farruska/208926935
Thursday 19 May 2011 (wk )
![Page 33: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/33.jpg)
Thursday 19 May 2011 (wk )
![Page 34: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/34.jpg)
do not forget to activate
Thursday 19 May 2011 (wk )
![Page 35: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/35.jpg)
Thursday 19 May 2011 (wk )
![Page 36: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/36.jpg)
http://www.flickr.com/photos/andrec/2893549851
Thursday 19 May 2011 (wk )
![Page 37: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/37.jpg)
Thursday 19 May 2011 (wk )
![Page 38: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/38.jpg)
app/design/frontend/base/layout/catalog.xml
a call for a template file
Thursday 19 May 2011 (wk )
![Page 39: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/39.jpg)
app/design/frontend/default/yourtheme/template/catalog/navigation/top.phtml
URL key from CMS page
Thursday 19 May 2011 (wk )
![Page 40: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/40.jpg)
DONE!!
Thursday 19 May 2011 (wk )
![Page 41: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/41.jpg)
http://www.flickr.com/photos/boklm/486678763
Thursday 19 May 2011 (wk )
![Page 42: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/42.jpg)
Thursday 19 May 2011 (wk )
![Page 43: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/43.jpg)
app/design/frontend/default/yourtheme/template/catalog/navigation/top.phtml
call for static block in backend
Thursday 19 May 2011 (wk )
![Page 44: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/44.jpg)
create new static block
Thursday 19 May 2011 (wk )
![Page 45: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/45.jpg)
{{store direct_url="loremipsum"}}
Thursday 19 May 2011 (wk )
![Page 46: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/46.jpg)
http://www.flickr.com/photos/boklm/486646798
Thursday 19 May 2011 (wk )
![Page 47: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/47.jpg)
Thursday 19 May 2011 (wk )
![Page 48: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/48.jpg)
app/design/frontend/base/layout/page.xml
no call for a template file
Thursday 19 May 2011 (wk )
![Page 49: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/49.jpg)
app/design/frontend/default/yourtheme/layout/local.xml
URL key from CMS page
Thursday 19 May 2011 (wk )
![Page 50: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/50.jpg)
DONE!!
Thursday 19 May 2011 (wk )
![Page 51: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/boklm/486676439
Thursday 19 May 2011 (wk )
![Page 52: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/52.jpg)
Thursday 19 May 2011 (wk )
![Page 53: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/53.jpg)
Thursday 19 May 2011 (wk )
![Page 54: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/54.jpg)
Thursday 19 May 2011 (wk )
![Page 55: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/55.jpg)
Thursday 19 May 2011 (wk )
![Page 56: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/56.jpg)
Thursday 19 May 2011 (wk )
![Page 57: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/57.jpg)
Thursday 19 May 2011 (wk )
![Page 58: Meet magento 2011-templating](https://reader034.fdocuments.us/reader034/viewer/2022051322/54572af1b1af9f40378b4e3b/html5/thumbnails/58.jpg)
http://www.flickr.com/photos/trasimac/1217071176
see you at Magento Competence Center
http://slideshare.net/hans2103
hans2103yireojiraict
magento-competence-center.com
Thursday 19 May 2011 (wk )