creating a custom home page in magento - landmann interactive

– Identify the parts of the page

Creating aCustom Home Page

in Magento

by Eric Landmann, Landmann InterActive

Prepared for the Midwest Magento Meetup7/10/13

– Decisions about which parts to allow admin to update

– See how the home page is built

– Design and coding concepts

– 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

Structural Blocks Content Blocks

Concepts

StructuralBlocks

ContentBlocks

– 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 allowedChanges to footer links are allowedChanges to slider images and links are allowedAdmin and marketing will change CMS blocks and slidersNo changes to design or background of CMS blocks allowedNo 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

Controlledby Admin

NotEditable

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 name="root"> <action method="setTemplate"><template>page/lookslidehome.phtml</template></action></reference>

Setting the output block

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

Lookbook Slider

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

Troubleshooting

CommerceBug

Video Documentation

Documentation

Content Admin Guide

Magento Docshttp://www.magentocommerce.com/design_guidehttp://www.magentocommerce.com/knowledge-base/entry/magentos-theme-heirarchyhttp://www.magentocommerce.com/knowledge-base/entry/creating-your-own-homepage

jQuery Novice to Ninjahttp://www.sitepoint.com/books/jquery1/code.php

CommerceBughttp://store.pulsestorm.net/products/commerce-bug-2#product_select

SitePointhttp://www.sitepoint.com/an-introduction-to-magento-themes/

MageBasehttp://magebase.com/category/magento-tutorials/

Lookbook Sliderhttp://shop.altima.net.au/altima-lookbook-professional.html

Live Sitehttp://www.shopsilvernest.com/

Resources

by Eric Landmann, Landmann InterActive

elandmann@landmanninteractive.com

Creating aCustom Home Page

in Magento