Magento 1.3 Theme Design - Richard Carter - E-Book

Magento 1.3 Theme Design E-Book

Richard Carter

0,0
20,53 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.
Mehr erfahren.
Beschreibung

In Detail

Magento is the hottest and most powerful e-commerce software around and it has gained massive popularity in a short period. By using Magento's powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce web site. However, because of its powerful features, developing Magento themes is easier said than done.

Magento 1.3 Theme Design covers everything you need to build effective, attractive themes for your Magento store. You will learn how the theming system works, how to build your own look on top of the Magento Blank Theme, how to give different looks to different parts of your store, and much more.

We start off by introducing you to Magento and its basic themes and then take you through the benefits of changing your store's theme. We then move on to the actual Magento theme design, where you will learn the basics, such as changing the logo, color scheme, and so on. Next, we take a look at more advance tasks where you will learn theme layouts. You will then prepare a Magento theme from scratch and also take a look at Magento templates and layouts. You will also learn how to promote and improve your Magento store with the use of social media such as Twitter, social bookmarks, and so on and how to define a good print style. Finally, you will learn Magento Theme Deployment in detail.

A step-by-step, practical guide to creating themes for your Magento store

Approach

Magento 1.3 Theme Design is a step-by-step guide to creating custom themes for Magento. The author's experience in Magento theming enables him to design a book that lessens the steep learning curve associated with Magento theming. The author uses code examples and ideas that facilitate learning and make Magento theme development a great learning experience.

Who this book is for

Magento 1.3 Theme Design is written for those who are familiar with Magento and know the Magento basics and now want to customize the look and feel. The book assumes familiarity with CSS and (X)HTML. The book is also aimed at store owners who want to customize their e-commerce store and web designers who want to sell their custom-made Magento themes. Seasoned theme designers will find very useful tips and hints in this book.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern

Seitenzahl: 136

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Magento 1.3 Theme Design
Credits
About the Author
About the Reviewers
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Errata
Piracy
Questions
1. Introduction to Magento
What is Magento?
Magento's features
The challenges of theming Magento
Default Magento themes
Why theme your Magento store?
Example Magento themes
Raspberry Kids
Mia & Maggie
Cacties
The Recycled Retriever
Summary
2. Exploring Magento Themes
What makes a Magento theme?
Interfaces and themes
Interfaces in Magento
Themes in Magento
Default and non-default themes
Default themes
Non-default themes
Hierarchy of themes
Skins, layouts, and templates
Skins
Layouts and blocks
Templates
Summary
3. Magento Themes: The Basics
Our case study: Cheesy Cheese Store
What we need to consider design-wise
Blank Theme from Magento Connect
Accessing the Blank Theme
Clearing Magento's cache
Installing Magento's Blank Theme
Making a theme Magento's default theme
What the Blank Theme looks like
Adding content with Magento's CMS
Cheesy Cheese Store's Magento theme
Changing your store's design
The header
The search form
User links
Styling pages
Styling your store's footer
Styling the product pages
Changing the Magento store's logo
Changing your store's favicon
Removing the callouts
Removing the callouts on the righthand side
Removing callouts on the lefthand side
Displaying featured products on the home page
Creating a "featured" category
Displaying the "featured" category through the Content Management System
Cheesy Cheese Store so far
Summary
4. Magento Theme Layout
Themes and Layouts in Magento
Changing our store's layout with CMS
Template path hints
Enabling template path hints
Layout terminology in Magento
A brief guide to XML
Self-closing elements in XML
Closing XML elements normally
Entity escapes in XML
Customizing Magento layouts with XML
Layout files' location
Handles
Non-default handles
Useful handles in Magento
Using Magento layout: Another example
Changing the layout on a particular page
Summary
5. Non-default Magento Themes
Uses of non-default themes
A/B testing
Easily rolled-back themes
Non-default themes
Magento theme hierarchy
Magento theme directory structure
Templates
Layout
Skins
Assigning your non-default theme
Restrictions with assigning themes
Creating non-default themes
Skin changes
Template changes
Summary
6. Advanced Magento Themes
Introducing our new design
Creating skeleton templates
getChildHtml
Assigning the skeleton template
Blocks in Magento
Structural blocks
Content blocks
Inserting in to <head> tag
Creating your store's header.phtml file
Store links
Altering your store's logo
Changing the logo using Magento's administration panel
Footer.phtml
Pager.phtml
Wrapper.phtml
Magento's IDs and classes
Styling with CSS
Reset CSS
Turning the cache off
Creating a favicon
Setting the theme
Summary
7. Further Magento Theming
Theming tasks
Customizing the product page
Improving content hierarchy for better search engine results
Customizing Magento's navigation
Displaying Navigation in Magento
Creating a new root category
Editing the navigation
Styling the navigation
Creating a custom "not found" page
Creating a "not found" page using templates
Advanced layouts in Magento
Default layouts
Layout updates
How Magento layouts work
Handles in layout
Layout blocks
The action attribute
The as attribute
The after and before attributes
The type attribute
Layout references
addJS in layout
addCss in layout
as in layout
Removing a layout
Summary
8. Social Media in Magento
Integrating Twitter with Magento
Tweeting: Ideas for your store's tweets
Displaying your Twitter updates on your Magento store
Installing the LazzyMonks Twitter module
Other ways to integrate Twitter with Magento
Adding your Twitter feed through Magento's CMS
Integrating Get Satisfaction with Magento
Integrating social bookmarking with Magento
Social bookmarking tools
Socializer
AddThis
Using AddThis in Magento
Summary
9. Magento Print Styles
Viewing the print stylesheet
Print stylesheets in other Magento themes
The Default theme print style
Principles of good print stylesheet designs
Limitations of the print stylesheet
Print preview
Gecko-based browsers
What we should show
Logos and store names
Promotional graphics and callouts
Links
What we can hide
Background images
Styling our theme for print
Assigning a print stylesheet in Magento
Styling Magento for print with CSS
Images
Printing and colors
Printing and links
Printing and typography
Printing and layout
Summary
10. Magento Theme Deployment
Cross-browser testing
Popularity of browsers
Browser-testing services
BROWSERCAM
BrowserShots
Deploying your Magento theme on your own store
Setting the theme
Turning template path hints off
Turning the system cache on
Packaging your Magento theme
Types of Magento contributions
Magento Commercial Extensions
Magento Community Extensions
What to include in your packaged Magento theme
Creating your package
Package Info
Maintainers
Dependencies
Contents
Sharing your theme with the Magento community
Summary
Index

Magento 1.3 Theme Design

Richard Carter

Magento 1.3 Theme Design

Copyright © 2009 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2009

Production Reference: 2200709

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847196-64-4

www.packtpub.com

Cover Image by Ed Maclean (<[email protected]>)

Credits

Author

Richard Carter

Reviewers

Jose Argudo

Kara Heinrichs

Acquisition Editor

David Barnes

Development Editor

Siddharth Mangarole

Technical Editor

Chaitanya Apte

Copy Editor

Leonard D'Silva

Indexer

Rekha Nair

Editorial Team Leader

Abhijeet Deobhakta

Project Team Leader

Lata Basantani

Project Coordinator

Rajashree Hamine

Proofreader

Lesley Harrison

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade

About the Author

Richard Carter is a web designer situated in the North East of England. Richard worked as a freelance web designer in Leicestershire before attending Durham University, where he met his business partner, Michael Peacock. Not long after meeting, they formed Peacock Carter (http://www.peacockcarter.co.uk), a web design agency based in the UK. He currently lives in both York and Durham.

Magento Theme Design is Richard's second book. MediaWiki Skins Design, his second book, focused on creating skins for the popular wiki software behind web sites such as AboutUs.org and Wikipedia.

I would like to thank Danni, my partner, and Michael, who have put up with the late nights and the endless head scratching required to complete this book to what become some tight deadlines! Thanks are also due to Packt's publishing team for their help and perseverance in creating this book.

I also have much gratitude for the reviewers, who have undoubtedly improved this book and its focus, and for Varien, for beginning what has become an incredibly powerful ecommerce platform.

Lastly, I'd like to thank you, the reader, for purchasing this book: I hope it is of use to you.

About the Reviewers

Jose Argudo is a web developer from Valencia, Spain. After finishing his studies he started working for a software company, always working with PHP. A language he learned to love. Now, after six years, he is confident in his experience and has started to work as freelance, in an attempt to give his personal vision to the projects he undertakes.

Working with Joomla!, Codeigniter, Cakephp, Jquery, and other known open source technologies and frameworks he expects to build stable and reliable aplications that reflect his desire of making better web experiences.

He has also worked as reviewer in the book Magento Beginners Guide and hopes to continue working with Magento related projects.

To my brother, I wish him the best.

Kara Heinrichs manages the online operations for the HoMedics companies, which include HoMedics, Salter Housewares, Taylor Precision, Obus Forme, SI Products (brand licensee of The Sharper Image), and Powermat. All of these will be on Magento by the end of the year. Before working for HoMedics, Kara managed the research analysis teams for the government and financial services sectors at ForeSee Results, an online customer satisfaction research company.

She was also Chief Experience Officer and Director of Information Design and Analysis at Fry, an eCommerce design and services company, and taught Web Design and Development at the University of Michigan.

She made her first Magento theme in December 2007 over the Christmas holiday, recreating a site that took another company most of the previous year to implement poorly, and was sold.

Preface

Magento 1.3 Themes Design takes you through the process of creating themes for Magento Commerce, an open source e-commerce platform. Guiding you through Magento's quirks and vast architecture, Magento 1.3 Themes Design gives you the information you will need to create the ultimate Magento theme.

What this book covers

Chapter 1 introduces Magento, some of its available themes and takes a look at what can be achieved with custom themes.

Chapter 2 provides an overview of how the components of a Magento theme come together to form the final result.

Chapter 3 looks at the basics of Magento theming, from changing your theme's color scheme to changing your logo and setting your theme to display on your store.

Chapter 4 looks at the Magento layout and how to manipulate it to change your store.

Chapter 5 takes a look at non-default themes in Magento, and how you can make use of them to provide a better experience for your customers.

Chapter 6 guides you through Magento themes in greater depth, introducing new methods you can use to improve your store.

Chapter 7 looks at more advanced layout options within Magento, with the goal that readers will become comfortable in creating more advanced layouts for their stores.

Chapter 8 looks at improving your store by integrating social media such as Twitter and other tools to help engage your customers.

Chapter 9 guides you through creating the perfect print style for your Magento store and implementing it for your store.

Chapter 10 takes you through deploying your theme and packaging it as an extension, which you can share with the Magento community.

What you need for this book

You will need an installation of Magento, either on your local machine or on a remote server, your favorite code editor, and permissions to manipulate files.

Who this book is for

This book is for web designers and developers who have experience with CSS and (X)HTML but who are not familiar with the particulars of Magento.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

<title><?php echo $this->getTitle() ?></title> <meta http-equiv="Content-Type" content=" <?php echo $this->getContentType() ?>" /> <meta name="description" content=" <?php echo htmlspecialchars($this->getDescription()) ?>" /> <meta name="keywords" content=" <?php echo htmlspecialchars($this->getKeywords()) ?>" />

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<layout version="0.1.0"> <default> <block type="page/html" name="root" output="toHtml"template="page/default.phtml"> <!—layout continues -->

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an email to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Introduction to Magento

Magento Commerce provides a fantastic starting point for an online store. However, for designers with a non-technical background, it is a challenging, but worthwhile opportunity to put your knowledge to the test. In this chapter, we'll look at:

What Magento is, and what it can doThe default Magento skin (design)Some existing themes from real, "live" stores using Magento

What is Magento?

Magento (http://www.magentocommerce.com) is an open source eCommerce platform, which is renowned for its functionality, but has a reputation of being difficult to theme.

Magento's features

Magento is a feature-rich eCommerce system, which is built on the Zend PHP framework. Magento has all of the features that you would expect of a typical shopping cart and some interesting additions, including:

Managing multiple stores from one control panelSupport for localization of languages and currenciesAn Application Programming Interface (API), allowing integration with third-party softwareSearch-engine-friendly attributes, such as customizable addresses and auto-generated sitemapsRSS feeds for new productsTiered pricing, allowing quantity discountsReal-time shipping rates from popular couriersIntegration with many payment gateways including PayPal and authorize.netCross-sellingOne-page checkoutOrder and product reporting systemAutomatic image resizing and watermarking

The challenges of theming Magento

Despite its power, Magento has a number of shortcomings, these are:

Designers can find it more difficult to theme than other open source applications, like WordPress.In one way, its modular architecture can be seen as a shortcoming, as this means that making changes to a theme will require multiple files in different directories to be edited (more so than in other software packages).The poor-quality or non-existence of documentation.The number of technologies that a theme designer needs to be familiar with to theme Magento —XML, PHP, HTML, and CSS.The large learning curve for designers who may be familiar with simpler theming systems based upon a small number of templates.

The beauty of an open source eCommerce system such as Magento is that you can help build these features and improve its flaws in to the next release!