Joomla! Virtuemart 1.4 Theme and Template Design电子书

Joomla! VirtueMart 1.1 Theme and Template Design

Table of Contents

Joomla! VirtueMart 1.1 Theme and Template Design

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Joomla! VirtueMart versions

Basic Joomla! VirtueMart concepts you will need to know

Joomla! components, modules, plugins, and templates

VirtueMart modules, themes, and templates

Child products, advanced attribute, custom attribute, and product type

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code for this book

Errata

Piracy

Questions

1. The VirtueMart Engine

Navigating through the Joomla!/VirtueMart directories

Structure of the Joomla! URL path

Exercise 1.1: Making the Joomla! backend default to VirtueMart

Joomla! 1.5 presentation framework

Models

Views

Controllers

VirtueMart presentation framework

The class files - Data tier

The templates files - Presentation tier

The page files - Business logic tier

Roles of VirtueMart themes and templates

Ways to customize VirtueMart

Textual changes

Exercise 1.2: Customizing a language element

Steps

Notes

Layout changes

Frontend behavior changes

Modifying available template fields

Adding data fields

Modifying processing logic

Creating a new theme

Integrating with an external system

Other customizations

Before starting your project

Determining the scope of project

Locating file that needs modifications

Assessing your skills—determine whether to do it in-house or outsource

Back up data and files

Assessing impact on the site

Consider future upgrade compatibility

Implement design

Testing and debugging

Going live

Summary

2. The VirtueMart Default Theme

The shopping life cycle

Landing page

The product listing

The product detail

The shop cart

Checkout

Account maintenance

Shopping digression

VirtueMart configuration

Global

Security

Site

Shipping

Checkout

Downloads

Feed Configuration

VirtueMart site configuration

Display subsection

Layout subsection

The default theme configuration

VirtueMart template groups

browse

product_details

basket

checkout

order_emails

common

pages

Summary

3. Product List Templates

The product list page

Looking at our first template

HTML fragments

PHP crash course

Available fields

Core browse templates

Exercise 3.1: Adding an Ask-Seller link to the browse page

Steps

Notes

Exercise 3.2: Changing core browse template CSS

Preparation

Steps

Notes

Exercise 3.3: Moving and modifying data

Preparation

Steps

Notes

Header templates

Exercise 3.4: Adding a category banner

Preparation

Steps

Notes

Navigation templates

Exercise 3.5: Using a custom sort order form

Steps

Notes

Add-to-cart form template

Exercise 3.6: Showing the add-to-cart button in all cases

Preparation

Steps

Notes

Addendum element templates

Product list style templates

Exercise 3.7: Adding a new column to the table style product list

Preparation

Steps

Notes

Exercise 3.8: Changing the product list style based on category

Preparation

Steps

Notes

Summary

4. Product Details Templates

The product details page

Looking at a sample flypage template

Flypage templates

Exercise 4.1: Adding product fields to the flypage

Steps

Notes

Header templates

buttons header

pathway

Navigation links

Exercise 4.2: Adding a category banner

Preparation

Steps

Product images and files

Exercise 4.3: Using a different thumbnail size in flypage

Preparation

Steps

Notes

Exercise 4.4: Creating a custom file list

Preparation

Steps

Notes

Product review templates

votes_allvotes.tpl.php

voteform.tpl.php

reviews.tpl.php

reviewform.tpl.php

Exercise 4.5: Adding an overall rating to a flypage

Preparation

Steps

Notes

Add-to-cart form templates

Quantity box templates

Child product templates

Exercise 4.6: Using an HTML table to display the child product list

Preparation

Steps

Notes

Advanced and custom attribute templates

Exercise 4.7: Displaying the advanced attribute as a radio button

Steps

Notes

Exercise 4.8: Using textarea for a custom attribute and adding a length-checking routine

Preparation

Steps

Notes

addtocart_form template

Other product details templates

price.tpl.php

availability.tpl.php

featuredProducts.tpl.php

recent.tpl.php

relatedProducts.tpl.php

product_type.tpl.php

Summary

5. Changing the Look of VirtueMart

The structure of web page design

default theme stylesheets

add-to-cart form styles

Navigation link styles

Product list page styles

Product detail page styles

Checkout page styles

Administration styles

add-to-cart detail styles

Miscellaneous styles

Customizing theme.css

Exercise 5.1: Changing the shopcart image

Preparation

Steps

Notes

default theme JavaScript

What is JavaScript?

JavaScript frameworks

JavaScript functions in the default theme

Exercise 5.2: Modifying the duration of the shopcart pop-up

Steps

Notes

More on VirtueMart URLs

VirtueMart URL parameters

Search engine friendly (SEF)

VirtueMart site URLs

Exercise 5.3: Adding a manufacturer banner and link to the manufacturer product list

Preparation

Steps

Notes

VirtueMart language system

Exercise 5.4: Adding a language element

Steps

Notes

Manufacturer, vendor, and ask seller templates

Manufacturer page

Exercise 5.5: Adding a manufacturer logo to the manufacturer page

Preparation

Steps

Notes

Vendor page

Exercise 5.6: Using tableless HTML for the vendor page

Steps

Notes

Ask seller page

Exercise 5.7: Adding a radio button to the ask seller page

Steps

Notes

Home page template

shopIndex template

Category child list template

Exercise 5.8: Changing the number of child categories per row

Steps

Notes

Exercise 5.9: Adding a manufacturer list to the landing page

Preparation

Steps

Notes

Summary

6. From Shop Basket to Final Checkout

Shop basket data and shop basket display

Session and shop basket

Basket templates

Shop basket functions

Exercise 6.1: Adding product thumbnails to the basket

Steps

Notes

Shop Cart page

Exercise 6.2: Using Ajax to update Shop Cart page

Preparation

Steps

Notes

Exercise 6.3: Restricting coupon usage to certain shopper groups

Preparation

Steps

Notes

Checkout steps

Exercise 6.4: Customizing the checkout bar

Steps

Notes

Login/registration and shipping information

Exercise 6.5: Adding a user field that toggles with a checkbox

Preparation

Steps

Notes

Exercise 6.6: Modifying the shipping address list

Preparation

Steps

Notes

Shipping and payment methods

Exercise 6.7: Showing PayPal-type methods as preferred payment methods

Preparation

Steps

Notes

Final confirmation page

Exercise 6.8: Adding a calendar to final confirmation

Steps

Notes

Thank you page

Exercise 6.9: Printing order details on the thank you page

Steps

Notes

Summary

7. VirtueMart Templates and Joomla! Modules

Joomla! modules that come with VirtueMart

The Minicart

Exercise 7.1: Adding a checkout link to the Minicart

Preparation

Steps

Notes

Exercise 7.2: Showing the Minicart as a drop-down box

Preparation

Steps

Notes

The product snapshot

Exercise 7.3: Adding product fields to the product snapshot

Preparation

Steps

Notes

Exercise 7.4: Making the snapshot template configurable

Preparation

Steps

Notes

Addendum elements in shop pages

Exercise 7.5: Using a product scroller in the product list page

Steps

Notes

Summary

8. VirtueMart Theme Anatomy

VirtueMart theme system

vmTemplate class

vmTheme class

Theme configuration

Major building blocks

The default theme images

The administration images

The availability images

The checkout images

The stars images

Miscellaneous images

The default theme class

Initialization code

vmTheme constructor

Additional vmTheme functions

Exercise 8.1: Adding a theme function to insert Joomla! article

Preparation

Steps

Notes

The default theme configuration

Simplified XML file rules

theme.xml

Exercise 8.2: Adding a new configuration setting to the default theme

Preparation

Steps

Notes

Summary

9. Theme Customizations

Theme customization and new theme

Creating a new VirtueMart theme

Exercise 9.1: Cloning the default theme

Steps

Notes

Benefits of creating a new theme

Planning a new VirtueMart theme

Template fallback mechanism

Making your theme backward compatible

Exercise 9.2: Adding CSS configuration

Steps

Notes

Integration with JavaScript utilities

The image reflection JavaScript

Initial considerations

Exercise 9.3: Adding reflection effect to product images

Preparation

Exercise 9.3.1: Adding configuration settings

Steps

Notes

Exercise 9.3.2: Inserting reflection.js JavaScript

Steps

Notes

Exercise 9.3.3: Modifications to the product details template

Steps

Notes

Exercise 9.3.4: Modifications to the product list template

Steps

Notes

Exercise 9.3.5: Modifications to the product snapshot template

Steps

Notes

Integration with Joomla! plugins

Content plugins

The Tab and Slide content plugin

Exercise 9.4: Adding a tab system to the product details page

Preparation

Exercise 9.4.1: Adding configuration to use content plugin

Steps

Notes

Exercise 9.4.2: Modifications to theme.php

Steps

Notes

Exercise 9.3.3: Modifications to the product details template

Steps

Notes

Modifying core VirtueMart classes

Theme class file system

Exercise 9.5: Creating a template file for the recommend to friend page

Preparation

Steps

Notes

Summary

10. Additional Customization Possibilities

Managing big templates

Exercise 10.1: Interrupting order processing after order e-mail is sent

Preparation

Steps

Notes

Order e-mail template

Exercise 10.2: Splitting the confirmation_ e-mail template into smaller templates

Preparation

Steps

Notes

Exercise 10.3: Modifying order e-mail layout

Preparation

Steps

Notes

Sharing child templates

Order detail template and order e-mail template

Exercise 10.4: Sharing templates between order e-mail and order details

Preparation

Steps

Notes

More fun with advanced attributes

Exercise 10.5: Showing advanced attributes as image radio button

Preparation

Steps

Notes

Product type templates

File upload function in VirtueMart

Exercise 10.6: Integrating VirtueUpload with VirtueMart using product type template

Preparation

Steps

Notes

Hacking into core VirtueMart functionalities

Exercise 10.7: Creating new VirtueMart module pages

Steps

Notes

Exercise 10.8: Custom price calculation

Steps

Notes

Summary

Index