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.
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Creating a custom home page in Magento - Landmann InterActive
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. – 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
7. – 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
11. In CMS page
<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
Setting the output block
12. Setting the output block
In CMS page
<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
13. 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
14. Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML)
Alternatively... building the whole page
21. 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