You are previewing Joomla! VirtueMart 1.1 Theme and Template Design.
O'Reilly logo
Joomla! VirtueMart 1.1 Theme and Template Design

Book Description

Give a unique look and feel to your VirtueMart e-Commerce store

  • 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

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

Table of Contents

  1. Joomla! VirtueMart 1.1 Theme and Template Design
    1. Joomla! VirtueMart 1.1 Theme and Template Design
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
        1. Joomla! VirtueMart versions
        2. Basic Joomla! VirtueMart concepts you will need to know
          1. Joomla! components, modules, plugins, and templates
          2. VirtueMart modules, themes, and templates
          3. Child products, advanced attribute, custom attribute, and product type
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code for this book
        2. Errata
        3. Piracy
        4. Questions
    7. 1. The VirtueMart Engine
      1. Navigating through the Joomla!/VirtueMart directories
      2. Structure of the Joomla! URL path
        1. Exercise 1.1: Making the Joomla! backend default to VirtueMart
      3. Joomla! 1.5 presentation framework
        1. Models
        2. Views
        3. Controllers
      4. VirtueMart presentation framework
        1. The class files - Data tier
        2. The templates files - Presentation tier
        3. The page files - Business logic tier
      5. Roles of VirtueMart themes and templates
      6. Ways to customize VirtueMart
        1. Textual changes
        2. Exercise 1.2: Customizing a language element
          1. Steps
          2. Notes
        3. Layout changes
        4. Frontend behavior changes
        5. Modifying available template fields
        6. Adding data fields
        7. Modifying processing logic
        8. Creating a new theme
        9. Integrating with an external system
        10. Other customizations
      7. Before starting your project
        1. Determining the scope of project
        2. Locating file that needs modifications
        3. Assessing your skills—determine whether to do it in-house or outsource
        4. Back up data and files
        5. Assessing impact on the site
        6. Consider future upgrade compatibility
        7. Implement design
        8. Testing and debugging
        9. Going live
      8. Summary
    8. 2. The VirtueMart Default Theme
      1. The shopping life cycle
        1. Landing page
        2. The product listing
        3. The product detail
        4. The shop cart
        5. Checkout
        6. Account maintenance
        7. Shopping digression
      2. VirtueMart configuration
        1. Global
        2. Security
        3. Site
        4. Shipping
        5. Checkout
        6. Downloads
        7. Feed Configuration
      3. VirtueMart site configuration
        1. Display subsection
        2. Layout subsection
      4. The default theme configuration
      5. VirtueMart template groups
        1. browse
        2. product_details
        3. basket
        4. checkout
        5. order_emails
        6. common
        7. pages
      6. Summary
    9. 3. Product List Templates
      1. The product list page
      2. Looking at our first template
        1. HTML fragments
        2. PHP crash course
        3. Available fields
      3. Core browse templates
        1. Exercise 3.1: Adding an Ask-Seller link to the browse page
          1. Steps
          2. Notes
        2. Exercise 3.2: Changing core browse template CSS
          1. Preparation
          2. Steps
          3. Notes
        3. Exercise 3.3: Moving and modifying data
          1. Preparation
          2. Steps
          3. Notes
      4. Header templates
        1. Exercise 3.4: Adding a category banner
          1. Preparation
          2. Steps
          3. Notes
      5. Navigation templates
        1. Exercise 3.5: Using a custom sort order form
          1. Steps
          2. Notes
      6. Add-to-cart form template
        1. Exercise 3.6: Showing the add-to-cart button in all cases
          1. Preparation
          2. Steps
          3. Notes
      7. Addendum element templates
      8. Product list style templates
        1. Exercise 3.7: Adding a new column to the table style product list
          1. Preparation
          2. Steps
          3. Notes
        2. Exercise 3.8: Changing the product list style based on category
          1. Preparation
          2. Steps
          3. Notes
      9. Summary
    10. 4. Product Details Templates
      1. The product details page
      2. Looking at a sample flypage template
      3. Flypage templates
        1. Exercise 4.1: Adding product fields to the flypage
          1. Steps
          2. Notes
      4. Header templates
        1. buttons header
        2. pathway
        3. Navigation links
        4. Exercise 4.2: Adding a category banner
          1. Preparation
          2. Steps
      5. Product images and files
        1. Exercise 4.3: Using a different thumbnail size in flypage
          1. Preparation
          2. Steps
          3. Notes
        2. Exercise 4.4: Creating a custom file list
          1. Preparation
          2. Steps
          3. Notes
      6. Product review templates
        1. votes_allvotes.tpl.php
        2. voteform.tpl.php
        3. reviews.tpl.php
        4. reviewform.tpl.php
        5. Exercise 4.5: Adding an overall rating to a flypage
          1. Preparation
          2. Steps
          3. Notes
      7. Add-to-cart form templates
        1. Quantity box templates
        2. Child product templates
        3. Exercise 4.6: Using an HTML table to display the child product list
          1. Preparation
          2. Steps
          3. Notes
        4. Advanced and custom attribute templates
        5. Exercise 4.7: Displaying the advanced attribute as a radio button
          1. Steps
          2. Notes
        6. Exercise 4.8: Using textarea for a custom attribute and adding a length-checking routine
          1. Preparation
          2. Steps
          3. Notes
        7. addtocart_form template
      8. Other product details templates
        1. price.tpl.php
        2. availability.tpl.php
        3. featuredProducts.tpl.php
        4. recent.tpl.php
        5. relatedProducts.tpl.php
        6. product_type.tpl.php
      9. Summary
    11. 5. Changing the Look of VirtueMart
      1. The structure of web page design
      2. default theme stylesheets
        1. add-to-cart form styles
        2. Navigation link styles
        3. Product list page styles
        4. Product detail page styles
        5. Checkout page styles
        6. Administration styles
        7. add-to-cart detail styles
        8. Miscellaneous styles
        9. Customizing theme.css
        10. Exercise 5.1: Changing the shopcart image
          1. Preparation
          2. Steps
          3. Notes
      3. default theme JavaScript
        1. What is JavaScript?
        2. JavaScript frameworks
        3. JavaScript functions in the default theme
        4. Exercise 5.2: Modifying the duration of the shopcart pop-up
          1. Steps
          2. Notes
      4. More on VirtueMart URLs
        1. VirtueMart URL parameters
        2. Search engine friendly (SEF)
        3. VirtueMart site URLs
        4. Exercise 5.3: Adding a manufacturer banner and link to the manufacturer product list
          1. Preparation
          2. Steps
          3. Notes
      5. VirtueMart language system
        1. Exercise 5.4: Adding a language element
          1. Steps
          2. Notes
      6. Manufacturer, vendor, and ask seller templates
        1. Manufacturer page
        2. Exercise 5.5: Adding a manufacturer logo to the manufacturer page
          1. Preparation
          2. Steps
          3. Notes
        3. Vendor page
        4. Exercise 5.6: Using tableless HTML for the vendor page
          1. Steps
          2. Notes
        5. Ask seller page
        6. Exercise 5.7: Adding a radio button to the ask seller page
          1. Steps
          2. Notes
      7. Home page template
        1. shopIndex template
        2. Category child list template
        3. Exercise 5.8: Changing the number of child categories per row
          1. Steps
          2. Notes
        4. Exercise 5.9: Adding a manufacturer list to the landing page
          1. Preparation
          2. Steps
          3. Notes
      8. Summary
    12. 6. From Shop Basket to Final Checkout
      1. Shop basket data and shop basket display
        1. Session and shop basket
        2. Basket templates
        3. Shop basket functions
        4. Exercise 6.1: Adding product thumbnails to the basket
          1. Steps
          2. Notes
      2. Shop Cart page
        1. Exercise 6.2: Using Ajax to update Shop Cart page
          1. Preparation
          2. Steps
          3. Notes
        2. Exercise 6.3: Restricting coupon usage to certain shopper groups
          1. Preparation
          2. Steps
          3. Notes
      3. Checkout steps
        1. Exercise 6.4: Customizing the checkout bar
          1. Steps
          2. Notes
      4. Login/registration and shipping information
        1. Exercise 6.5: Adding a user field that toggles with a checkbox
          1. Preparation
          2. Steps
          3. Notes
        2. Exercise 6.6: Modifying the shipping address list
          1. Preparation
          2. Steps
          3. Notes
      5. Shipping and payment methods
        1. Exercise 6.7: Showing PayPal-type methods as preferred payment methods
          1. Preparation
          2. Steps
          3. Notes
      6. Final confirmation page
        1. Exercise 6.8: Adding a calendar to final confirmation
          1. Steps
          2. Notes
      7. Thank you page
        1. Exercise 6.9: Printing order details on the thank you page
          1. Steps
          2. Notes
      8. Summary
    13. 7. VirtueMart Templates and Joomla! Modules
      1. Joomla! modules that come with VirtueMart
      2. The Minicart
        1. Exercise 7.1: Adding a checkout link to the Minicart
          1. Preparation
          2. Steps
          3. Notes
        2. Exercise 7.2: Showing the Minicart as a drop-down box
          1. Preparation
          2. Steps
          3. Notes
      3. The product snapshot
        1. Exercise 7.3: Adding product fields to the product snapshot
          1. Preparation
          2. Steps
          3. Notes
        2. Exercise 7.4: Making the snapshot template configurable
          1. Preparation
          2. Steps
          3. Notes
      4. Addendum elements in shop pages
        1. Exercise 7.5: Using a product scroller in the product list page
          1. Steps
          2. Notes
      5. Summary
    14. 8. VirtueMart Theme Anatomy
      1. VirtueMart theme system
        1. vmTemplate class
        2. vmTheme class
        3. Theme configuration
        4. Major building blocks
      2. The default theme images
        1. The administration images
        2. The availability images
        3. The checkout images
        4. The stars images
        5. Miscellaneous images
      3. The default theme class
        1. Initialization code
        2. vmTheme constructor
        3. Additional vmTheme functions
        4. Exercise 8.1: Adding a theme function to insert Joomla! article
          1. Preparation
          2. Steps
          3. Notes
      4. The default theme configuration
        1. Simplified XML file rules
        2. theme.xml
        3. Exercise 8.2: Adding a new configuration setting to the default theme
          1. Preparation
          2. Steps
          3. Notes
      5. Summary
    15. 9. Theme Customizations
      1. Theme customization and new theme
        1. Creating a new VirtueMart theme
        2. Exercise 9.1: Cloning the default theme
          1. Steps
          2. Notes
        3. Benefits of creating a new theme
      2. Planning a new VirtueMart theme
        1. Template fallback mechanism
        2. Making your theme backward compatible
        3. Exercise 9.2: Adding CSS configuration
          1. Steps
            1. Notes
      3. Integration with JavaScript utilities
        1. The image reflection JavaScript
        2. Initial considerations
        3. Exercise 9.3: Adding reflection effect to product images
          1. Preparation
          2. Exercise 9.3.1: Adding configuration settings
            1. Steps
            2. Notes
          3. Exercise 9.3.2: Inserting reflection.js JavaScript
            1. Steps
          4. Notes
          5. Exercise 9.3.3: Modifications to the product details template
            1. Steps
          6. Notes
          7. Exercise 9.3.4: Modifications to the product list template
            1. Steps
          8. Notes
          9. Exercise 9.3.5: Modifications to the product snapshot template
            1. Steps
          10. Notes
      4. Integration with Joomla! plugins
        1. Content plugins
        2. The Tab and Slide content plugin
        3. Exercise 9.4: Adding a tab system to the product details page
          1. Preparation
          2. Exercise 9.4.1: Adding configuration to use content plugin
            1. Steps
            2. Notes
          3. Exercise 9.4.2: Modifications to theme.php
            1. Steps
            2. Notes
          4. Exercise 9.3.3: Modifications to the product details template
            1. Steps
          5. Notes
      5. Modifying core VirtueMart classes
        1. Theme class file system
        2. Exercise 9.5: Creating a template file for the recommend to friend page
          1. Preparation
          2. Steps
          3. Notes
      6. Summary
    16. 10. Additional Customization Possibilities
      1. Managing big templates
        1. Exercise 10.1: Interrupting order processing after order e-mail is sent
          1. Preparation
          2. Steps
          3. Notes
        2. Order e-mail template
        3. Exercise 10.2: Splitting the confirmation_ e-mail template into smaller templates
          1. Preparation
          2. Steps
          3. Notes
        4. Exercise 10.3: Modifying order e-mail layout
          1. Preparation
          2. Steps
          3. Notes
      2. Sharing child templates
        1. Order detail template and order e-mail template
        2. Exercise 10.4: Sharing templates between order e-mail and order details
          1. Preparation
          2. Steps
          3. Notes
      3. More fun with advanced attributes
        1. Exercise 10.5: Showing advanced attributes as image radio button
          1. Preparation
          2. Steps
          3. Notes
      4. Product type templates
        1. File upload function in VirtueMart
        2. Exercise 10.6: Integrating VirtueUpload with VirtueMart using product type template
          1. Preparation
          2. Steps
          3. Notes
      5. Hacking into core VirtueMart functionalities
        1. Exercise 10.7: Creating new VirtueMart module pages
          1. Steps
          2. Notes
        2. Exercise 10.8: Custom price calculation
          1. Steps
          2. Notes
      6. Summary