Joomla! VirtueMart 1.1 Theme and Template Design


Joomla! VirtueMart 1.1 Theme and Template Design
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Thorough discussion of template structure, available fields, and customization possibilities
  • More than 50 real-world exercises that can be directly adapted to your store
  • A comprehensive reference to all templates in the VirtueMart default theme including usage of each template and all available fields
  • Integrate with existing Joomla! plugins and JavaScript frameworks
  • A step-by-step comprehensive guide to customizing Joomla! VirtueMart templates and themes with the necessary screenshots and explained code

Appendix

Book Details

Language : English
Paperback : 384 pages [ 235mm x 191mm ]
Release Date : May 2011
ISBN : 1849514542
ISBN 13 : 9781849514545
Author(s) : Joseph Kwan
Topics and Technologies : All Books, CMS and eCommerce, Content Management (CMS), e-Commerce, Joomla!, Open Source, PHP

Table of Contents

Preface
Chapter 1: The VirtueMart Engine
Chapter 2: The VirtueMart Default Theme
Chapter 3: Product List Templates
Chapter 4: Product Details Templates
Chapter 5: Changing the Look of VirtueMart
Chapter 6: From Shop Basket to Final Checkout
Chapter 7: VirtueMart Templates and Joomla! Modules
Chapter 8: VirtueMart Theme Anatomy
Chapter 9: Theme Customizations
Chapter 10: Additional Customization Possibilities
Appendix
Index
  • Chapter 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
    • Chapter 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
      • Chapter 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
        • Chapter 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
          • Chapter 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
            • Chapter 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
              • Chapter 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
                • Chapter 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
                  • Chapter 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
                    • 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
                        • Exercise 9.3.2: Inserting reflection.js JavaScript
                        • Notes
                        • Exercise 9.3.3: Modifications to the product details template
                        • Notes
                        • Exercise 9.3.4: Modifications to the product list template
                        • Notes
                        • Exercise 9.3.5: Modifications to the product snapshot template
                        • 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
                        • Exercise 9.4.2: Modifications to theme.php
                        • Exercise 9.3.3: Modifications to the product details template
                        • 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
                    • Chapter 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
                      • Appendix
                        • This appendix is not present in the book but is available as a free download from http://www.packtpub.com/sites/default/files/downloads/Appendix.pdf.

                        Joseph Kwan

                        Joseph Kwan has been a professional programmer for 12 years. He has thorough understanding of all major web technologies including HTML, XML, CSS, XSL, PHP, ASP, .NET, JS, AJAX, Apache, MySQL, MSSQL etc, on both Linux and Windows system. In the past 5 years or so, he has specialized himself in Joomla!/Virtuemart. Besides customizing/building many Joomla! components and modules, Joseph is also considered one of the few Virtuemart experts who know the system from front to back. He is highly regarded in the Virtuemart community and is renowned for building robust and quality extensions to Joomla!/Virtuemart. Joseph is also very active in the forum. He works from Burnaby, BC Canada.
                        Sorry, we don't have any reviews for this title yet.

                        Code Downloads

                        Download the code and support files for this book.


                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                        Errata

                        - 2 submitted: last submission 31 Oct 2012

                        Errata type: code| Page number: 284

                        In the code sample, there is the parameter "reflectionFlypage" which in fact relates to the previous exercise; it should be changed to "useContentPlugin"

                         

                        Errata type: Typo | Page number: 177

                        "ViruteMart" should be "VirtueMart" and "Configurataion" should be "Configuration"

                         

                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        Joomla! VirtueMart 1.1 Theme and Template Design +    MariaDB Cookbook =
                        50% Off
                        the second eBook
                        Price for both: $39.00

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • Understand the basic framework of the Joomla! VirtueMart template system
                        • Understand the structure of a VirtueMart template
                        • Customize VirtueMart using the general configuration and default theme configuration
                        • Identify the file(s) that need to be modified to achieve your requirements
                        • Customize and add features to the product list page, product detail page, shopping cart, checkout pages, invoice e-mails, and many more features
                        • Build your own web store home page and customize the overall look of your store
                        • Create custom language elements that can work in a multi-language web store
                        • Extend VirtueMart features through integration with existing Joomla! plugins
                        • Extend VirtueMart features through integration with existing JavaScript frameworks
                        • Customize the Joomla! modules that come with VirtueMart
                        • Build a VirtueMart theme that is backward compatible with new VirtueMart versions
                        • Customize and add features to several VirtueMart advanced functionalities such as child products, advanced attributes, custom attributes, and product types

                        In Detail

                        VirtueMart is the best shopping cart solution around for the Joomla! CMS. A VirtueMart template is a Joomla! template that is designed to create the overall look of a store. It puts in things such as a shopping cart bar, more shop-like graphics, more readable colors, and so on. A VirtueMart theme only impacts the area of the site actually controlled by the VirtueMart component. Themes work inside the overall framework. Applying custom templates and themes to give a unique look and feel to your VirtueMart web store will really attract customers! This book will guide you to build VirtueMart custom themes and templates.

                        Joomla! VirtueMart 1.1 Theme and Template Design explains how the VirtueMart theme and template system works and points out ways to configure the default theme. It then goes on to look at each of the major templates with an emphasis on how to customize them. It then discusses individual page groups such as product list, product details, shopping cart, checkout, and invoice e-mails in the order they appear to your customer. After-sale services like invoice e-mail, account management, and order list are also discussed.

                        The book also discusses the different components of a VirtueMart theme and will teach you how to build a theme from scratch. You will also learn advanced features like child products, advanced attributes, custom attributes, and product types. Topics like integration with Joomla! plugins and AJAX functions are also included. An Appendix provides a comprehensive template reference of the use and available fields of every template.

                        Joomla! VirtueMart 1.1 Theme and Template Design is a practical guide for all those who want to make VirtueMart work for them. It will put many advanced features of this popular open source e-Commerce application at your finger tips.

                        An indispensable guide to tailoring your web store look according to your need based on the most popular Joomla! e-Commerce component

                        Approach

                        This book is a step-by-step tutorial that will teach you to customize VirtueMart templates and themes. It includes all the essential screenshots and code with exhaustive explanations accompanied by exercises to ensure good pickup.

                        Who this book is for

                        You may be the owner of a Joomla! VirtueMart web store or a designer working with Joomla! VirtueMart. If you want to customize VirtueMart to unleash its enormous potential and elevate your store to the next level, this book is for you. You must have some experience with VirtueMart and understand its basic features. You also need to know HTML and should be comfortable taking up some challenges in PHP and JavaScript programming.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Resources
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software