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.