– Identify the parts of the page
Creating a
Custom Home Page
in Magento
by Eric Landmann, Landmann InterActive
Prepared fo...
– Every Magento home page is a custom CMS page
– Purchased templates come with some instruction
– Original design – you’re...
Structural Blocks Content Blocks
Concepts
Structural
Blocks
Content
Blocks
– Who gets to update CMS pages and blocks
(marketing, owner, devs)? Answers drive how the page is built.
Marketing takes o...
Controlled
by Admin
Not
Editable
CMS Page
Selects base page template
CMS Page
Specifies custom block output template
In CMS page
<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
Setting the output block
Setting the output block
In CMS page
<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
In a layout xml file (if the page is built differently)
<!–– 7/20/12 ECL - Set the template to Lookbook ––>
<reference nam...
Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML)
Alternatively... building the whole page
CMS Blocks
“Typical” slider features with addition of product hotspots
jQuery-powered (possible integration issues)
Easy-to-use admin...
Lookbook Slider
Lookbook Slider
Lookbook Slider
Lookbook Slider
What could go wrong?
• jQuery conflicts with Prototype
• Admin enters invalid html, page goes screwy
• XML is wrong or inv...
Troubleshooting
CommerceBug
Video Documentation
Documentation
Content Admin Guide
Magento Docs
http://www.magentocommerce.com/design_guide
http://www.magentocommerce.com/knowledge-base/entry/magentos-them...
by Eric Landmann, Landmann InterActive
elandmann@landmanninteractive.com
Creating a
Custom Home Page
in Magento
Creating a custom home page in Magento - Landmann InterActive
Upcoming SlideShare
Loading in …5
×

Creating a custom home page in Magento - Landmann InterActive

34,541 views

Published on

Creating a custom home page in Magento. Slides from my presentation at the Midwest Magento Meetup, July 10, 2013. Topics covered include design decisions, CMS pages, blocks, XML layouts and layout updates, custom HTML blcok templates.

Published in: Technology, Design
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
34,541
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
210
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Creating a custom home page in Magento - Landmann InterActive

  1. 1. – Identify the parts of the page Creating a Custom Home Page in Magento by Eric Landmann, Landmann InterActive Prepared for the Midwest Magento Meetup 7/10/13 – Decisions about which parts to allow admin to update – See how the home page is built – Design and coding concepts
  2. 2. – Every Magento home page is a custom CMS page – Purchased templates come with some instruction – Original design – you’re on your own! – Any home page can be modified or enhanced – Consists of these pieces: Concepts ● A CMS page ● Base template and html blocks ● Custom theme html blocks and CSS ● Commercial add-ons (slider) ● CMS blocks ● Layout and block updates that add more features
  3. 3. Structural Blocks Content Blocks Concepts
  4. 4. Structural Blocks
  5. 5. Content Blocks
  6. 6. – Who gets to update CMS pages and blocks (marketing, owner, devs)? Answers drive how the page is built. Marketing takes ownership – Which pieces do they get to update? No changes to header links allowed Changes to footer links are allowed Changes to slider images and links are allowed Admin and marketing will change CMS blocks and sliders No changes to design or background of CMS blocks allowed No changes to tooltips allowed – What is the process? Update dev site; approve; update live; then check it! This is with CE - no content staging – Dev site/live site considerations. – Is there/should there be a developer involved? After setup, not necessary with proper training and usage Decisions
  7. 7. Controlled by Admin Not Editable
  8. 8. CMS Page Selects base page template
  9. 9. CMS Page Specifies custom block output template
  10. 10. In CMS page <div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div> Setting the output block
  11. 11. Setting the output block In CMS page <div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
  12. 12. In a layout xml file (if the page is built differently) <!–– 7/20/12 ECL - Set the template to Lookbook ––> <reference name="root"> <action method="setTemplate"><template>page/lookslidehome.phtml</template></action> </reference> Setting the output block
  13. 13. Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML) Alternatively... building the whole page
  14. 14. CMS Blocks
  15. 15. “Typical” slider features with addition of product hotspots jQuery-powered (possible integration issues) Easy-to-use admin Lookbook Slider
  16. 16. Lookbook Slider
  17. 17. Lookbook Slider
  18. 18. Lookbook Slider
  19. 19. Lookbook Slider
  20. 20. What could go wrong? • jQuery conflicts with Prototype • Admin enters invalid html, page goes screwy • XML is wrong or invalid, it just doesn’t work • CSS gets changed • Process not followed to copy from dev to live • Design fallback not followed, pieces are not loaded Troubleshooting
  21. 21. Troubleshooting
  22. 22. CommerceBug
  23. 23. Video Documentation Documentation Content Admin Guide
  24. 24. Magento Docs http://www.magentocommerce.com/design_guide http://www.magentocommerce.com/knowledge-base/entry/magentos-theme-heirarchy http://www.magentocommerce.com/knowledge-base/entry/creating-your-own-homepage jQuery Novice to Ninja http://www.sitepoint.com/books/jquery1/code.php CommerceBug http://store.pulsestorm.net/products/commerce-bug-2#product_select SitePoint http://www.sitepoint.com/an-introduction-to-magento-themes/ MageBase http://magebase.com/category/magento-tutorials/ Lookbook Slider http://shop.altima.net.au/altima-lookbook-professional.html Live Site http://www.shopsilvernest.com/ Resources
  25. 25. by Eric Landmann, Landmann InterActive elandmann@landmanninteractive.com Creating a Custom Home Page in Magento

×