joomla! virtuemart 1.1 theme and template design

Download Joomla! VirtueMart 1.1 Theme and Template Design

Post on 09-Jan-2017




1 download

Embed Size (px)


  • P U B L I S H I N G

    community experience dist i l led

    Joomla! VirtueMart 1.1 Theme and Template Design

    Joseph Kwan

    Chapter No. 3

    "Product List Templates"

  • In this package, you will find: A Biography of the author of the book

    A preview chapter from the book, Chapter NO.3 "Product List Templates"

    A synopsis of the books content

    Information on where to buy this book

    About the Author 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, and so on, on both Linux and

    Windows systems.

    In the past five years or so, he has specialized himself in Joomla!/VirtueMart. Besides

    customizing/building many Joomla! components and modules, Joseph is also considered

    as 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 in Burnaby, BC Canada.

    I would like to thank all the people at Packt Publishing who made

    this book possible, especially thankful for the advice of Usha Iyer

    and Meeta Rajani.

    I am also greatly indebted to my wife Susan, and also the whole

    family, for allowing me to write this book on my already hectic life.

    For More Information:

  • Joomla! VirtueMart 1.1 Theme and Template Design Since you picked this book, the odds will be that you are already familiar with Joomla!

    VirtueMart. You will agree that this open source e-commerce solution is definitely

    amazing and feature-rich. That's why you want to stick with it. However, you still find

    there are some things here and there that don't quite fit your requirements. So you want to

    hack into the files to customize them to make them work for you. The main purpose of

    writing this book is to help you do things like that!

    VirtueMart is a feature-rich e-commerce component that extends Joomla!. There are

    many complexities inside the package and also lots of customization possibilities. And

    because the complexities and documentation are not that easy to understand, hacking

    into VirtueMart can be a steep learning curve. Simply customizing the templates,

    which are meant for modifications, may not be easy for some readers. Working on any

    sizeable project can quickly turn into a nightmare. The purpose of this little book is to

    unravel the secrets of themes and templates in order to get you started with your

    customization project.

    Before you roll up your sleeves and start plunging into the real stuff, there are a few

    important things that we should discuss. This is what the introduction is for.

    What This Book Covers We will explain the basic structure of the VirtueMart themes and templates and go into

    the detail of all important templates. We will also show you how to customize the

    templates and add new features to your theme with lots of real-world exercises. The

    customization is not just on HTML elements and CSS styles. Many of them involve

    changing the PHP and JavaScript code, adding new features and behaviors. We even

    included exercises that demonstrate how to integrate Joomla! plugins, JavaScript

    frameworks, existing JavaScript code, and Joomla! components into VirtueMart themes

    and templates.

    We understand your customization projects will have many diverse varieties. So we've

    tried to include examples of different types, templates, and module pages as much as

    possible within the limitation of the text. Yet there may be areas we cannot touch on in

    the exercises or areas we didn't go into as much details as you would have liked. In that

    case, you can refer to the comprehensive template reference in Appendix, VirtueMart

    Template Reference, where we have covered all 86 templates in seven different template

    groups (up to version 1.1.5).

    For More Information:

  • VirtueMart is one of the most complex components in Joomla!. It is impossible to cover

    every area of VirtueMart in a little book like this. The main subject of this book is

    VirtueMart themes and templates. Themes and templates are those parts of VirtueMart

    responsible for the final presentation of data to the browser. In particular, most of the

    templates, if not all, only deal with the frontend. While we will explain the VirtueMart

    engine in some detail and touch on other areas, our focus will remain on themes and

    templates. That means we will not touch on the many details of classes and module

    pages, except when they are related directly to the themes and templates. That also means

    we will not discuss customization of the backend VirtueMart modules. Creation or

    customization of payment modules and shipping modules are not part of the presentation

    engine and so they will not be discussed in this book. Also, we will not talk about the

    VirtueMart database structure.

    If you are seeking help solely for a VirtueMart backend project or for payment and

    shipping module, this book is not for you. You can treat this book as a first step in

    knowing how VirtueMart works, though. After you thoroughly grasped the idea

    presented here, you will definitely have a solid foundation in researching ways to hack

    into the backend.

    To be successful in your customization project, you will probably need to tweak some

    PHP code or include some JavaScript handlers. However, this book is not a textbook on

    programming and so will not tell you all the bells and whistles of writing PHP or

    JavaScript programs. We will give you a basic idea of how to tweak code but do not

    expect that you will become a seasoned programmer after reading this book.

    While we will touch on simple techniques on tweaking Joomla! to work in our way, this

    book will not tell you the detailed structure of Joomla!. In some exercises, we may step

    into Joomla! technicalities such as customizing a Joomla! module. However, Joomla! is

    not the focus of this book and so you may need to refer to other textbooks on Joomla! if

    you want to work further on the modules.

    Chapter 1, The Virtuemart Engine, will briefly review the Joomla!/VirtueMart file

    structure. We will then continue to explain the presentation framework of Joomla! and

    VirtueMart. A high-level view of the VirtueMart engine will be presented and we will see

    how the VirtueMart theme and template fits in the whole system. After that, we will be

    able to understand the various ways to customize the VirtueMart shop and provide a list

    of items we need to consider before heading on a customization project.

    For More Information:

  • Chapter 2, The VirtueMart Default Theme, will focus on the default theme and its

    accompanied template structure. We will start with the shopping life cycle in VirtueMart,

    the backbone of the theme and template system. We will then give a general description

    of the VirtueMart configuration settings with a closer look at the Site configurations that

    relate closely to the frontend presentation. After that, we will concentrate on exploring

    the default theme. We will see the options that are available in the default theme

    configuration. Finally, we will give a brief introduction to the seven template groups

    under the default theme and understand their basic usage.

    Chapter 3, Product List Templates, is the first of four chapters that explains the working

    of major template groups. In this chapter, our focus is on the product list templates. We

    will start with a sample template to see how a template works. Some basic PHP language

    constructs will be introduced before looking at the browse page elements and then the

    three different product list styles. We will look closely at each of the major templates in

    the group. We will guide you to customize the basic layout, the header, the navigation

    links, the add-to-cart form, the product list styles, and many more.

    Chapter 4, Product Details Templates, will build upon what we have introduced in the

    previous chapter but shift the focus to the product details templates. We will look at the

    major elements that compose a product details page and then the templates that are

    related to each of those elements. We will look at how to customize the flypage, header,

    product images and files, product review, add-to-cart form, advanced attribute and

    custom attribute, and many more.

    Chapter 5, Changing the Look of VirtueMart, will further our understanding of the

    template system by looking at peripheral stuff that is not inside a template file but are

    affecting the look of the site. We will look at the stylesheet, the JavaScript, the URL

    links, and the language element. Then we will continue our investigation in the template

    system by studying a few more