View
6.081
Download
2
Category
Tags:
Preview:
DESCRIPTION
Magento theming - a presentation about how to create magento themes. Given during Meet Magento 2012
Citation preview
set the basics right
Peter Ogg
for better pasta
twitter: hans2103
Wednesday, 30 May, 2012
boring stuff first
http://www.flickr.com/photos/swiv/5719738832
Wednesday, 30 May, 2012
endless possibilities
Wednesday, 30 May, 2012
temporary design change
Wednesday, 30 May, 2012
set your theme
based on default Magento
Wednesday, 30 May, 2012
set your theme
based on default Modern
first fallback
Wednesday, 30 May, 2012
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
default
default
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
non-default
Wednesday, 30 May, 2012
blue
Wednesday, 30 May, 2012
default
Wednesday, 30 May, 2012
blue
Wednesday, 30 May, 2012
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
an existing theme
http://www.flickr.com/photos/popilop/331357312
Wednesday, 30 May, 2012
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
• 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
Remove callouts and rarely used stuff
Add the local stylesheet
your theme starts
with local.xml
Wednesday, 30 May, 2012
not much is changed
Wednesday, 30 May, 2012
prevent unwanted indexation like Sitemap, Search Results and more
add more to your
with local.xml
thanks to Joachim HoutmanWednesday, 30 May, 2012
timesaver
http://www.flickr.com/photos/maigh/2141921845
Wednesday, 30 May, 2012
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
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
http://bit.ly/DeveloperToolbar
also M1.7
Wednesday, 30 May, 2012
I’m a UNIX geek fond of SSH
find the extension key
use it to install
done
Wednesday, 30 May, 2012
enabled by default
scroll down to Developer
Wednesday, 30 May, 2012
click and go
Wednesday, 30 May, 2012
click and go
Wednesday, 30 May, 2012
a child can do the laundry
from the book: “I always get my sin”
Wednesday, 30 May, 2012
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
http://www.flickr.com/photos/playerdue/5285272605/
analytics
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
frontend/base/default/template/catalog/layer/filter.phtml
Wednesday, 30 May, 2012
add _gaq.push onClick
important to strip html tags
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
see results in Google Analytics
Wednesday, 30 May, 2012
add more
four ways to add a link
http://www.flickr.com/photos/farruska/208926935
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
do not forget to activate
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
http://www.flickr.com/photos/andrec/2893549851
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Lorem Ipsum
Wednesday, 30 May, 2012
<M1.7
Wednesday, 30 May, 2012
app/design/frontend/base/layout/catalog.xml
a call for a template file
<M1.7
Wednesday, 30 May, 2012
app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/top.phtml
URL key from CMS page
Wednesday, 30 May, 2012
M1.7
Wednesday, 30 May, 2012
app/design/frontend/base/layout/page.xml
a call for a template file
M1.7
Wednesday, 30 May, 2012
app/design/frontend/yourpackage/yourtheme/template/page/html/topmenu.phtml
URL key from CMS page
Wednesday, 30 May, 2012
DONE!!
Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486678763
Wednesday, 30 May, 2012
M1.7
Wednesday, 30 May, 2012
app/design/frontend/yourpackage/yourtheme/template/page/html/
call for static block in backend
M1.7
Wednesday, 30 May, 2012
create new static block
M1.7
Wednesday, 30 May, 2012
{{store direct_url="loremipsum"}}
M1.7
Wednesday, 30 May, 2012
DONE!!
Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486646798
Wednesday, 30 May, 2012
M1.7
Wednesday, 30 May, 2012
app/design/frontend/base/layout/page.xml
no call for a template file
Wednesday, 30 May, 2012
app/design/frontend/yourpackage/yourtheme/layout/local.xml
URL key from CMS page
Wednesday, 30 May, 2012
DONE!!
Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486676439
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
http://www.flickr.com/photos/trasimac/1217071176
thank your for your time
http://slideshare.net/hans2103
hans2103
http://about.me/hans2103
Wednesday, 30 May, 2012
Recommended