Landing page

Imagine when a shopper comes to the shop, the first thing he/she sees is the front door. For a web store, this is what we call the landing page or home page of the store. This landing page usually shows the major categories of what the shop is selling. However, that may not be the only items that the shop owner will want to show. Sometimes the history and background of the shop is important. Sometimes, the background of the owner is important. Sometimes, it shows special items on sale or featured products. Sometimes, it provides ideas or advice for a better shopping experience. In short, the nature of the content is not definite. But still, the landing page is there as the main entry to the shop. While the landing page of VirtueMart can be configured to any VirtueMart page, the default is shop.index.php. The URL for this default landing page is http://your_joomla_live_site/index.php?option=com_virtuemart&page=shop.index.

The product listing

Depending on the nature of the shop, there is usually a range of products of similar nature that a shopper can choose from. So products are usually arranged in categories for easier reference and selection. It is customary for a web store to display a list of products within each category that a shopper selected, either from the landing page or in a Joomla! module (for example, mod_virtuemart). Certainly, it is possible to list details of all the products on a single page. This may be a wise choice if there are only one or two products for sale on the site. However, most of the time there are so many products in a shop that listing each detail on a single page is not a good approach; there will be too much information and it will take too much time for the shopper to digest.

Instead, the product listing is usually just a summary list of the products giving sufficient detail to attract a shopper's attention. Shoppers who want to know more about a product can click through to the product detail page for information. While the exact detail of the listing may differ from store-to-store, the product listing is usually the starting point of direct shopping experience. The product listing page is usually referred to as the browse page in VirtueMart. The page file for the browse page is shop.browse.php and the URL is http://your_joomla_live_site/index.php?option=com_virtuemart&page=shop.browse.

The product detail

After a general view of the summary information provided by the product listing, a shopper will get an idea of which product or products will be worth the time to explore further. He/she will then be interested to know more about these products. So next comes the page showing all the details of the product. This is the Product Detail page or more commonly referred to as the flypage in VirtueMart. Again, the exact detail of the page may vary. However, this is the place where the major details of the product are shown. Usually, only one product is listed on one page. The page file for product detail is shop.product_details.php and the URL is http://your_joomla_live_site/index.php?option=com_virtuemart&page=shop.product_details&product_id=id&flypage=flypage.tpl.

Here, id is an identification number assigned to the product and flypage.tpl is the selected flypage template.

The shop cart

When the shopper decides to buy a product, there should be some way to help him/her to indicate this intention. Customarily, the system that helps shoppers to do this is called a shopcart system. There can be a number of ways to implement and show the shop cart. VirtueMart uses an add-to-cart button to help shoppers do this. After adding to cart, the product information will be stored in a php session variable.

If the shopper so wishes, he/she can go to the shop cart page at any time to look at the details of the items chosen and make adjustments as appropriate. The page file for the shop cart page is shop.cart.php and the URL is http://your_joomla_live_site/index.php?option=com_virtuemart&page=shop.cart.

Checkout

When the shopper is done choosing the products, and if he/she has something in the shop cart, he/she needs to pass through the checkout to create a formal order. In doing so, he/she may need to provide information for billing, shipping, choose additional options such as shipping method, payment method, and so on.

In the VirtueMart world, the shopper will need to have a Joomla! account before he/she can come back to check the order. VirtueMart also allows a shopper to check out without registering. In such a case, VirtueMart will create a temporary shopper account for checking out. The number of steps in the checkout will vary from store-to-store and VirtueMart provides configuration for defining the steps. After the shopper confirms an order, it will be created and stored in the database. An invoice e-mail will then be sent to both the store admin and the shopper.

The major checkout presentation logic is done in the page file checkout.index.php. The URL for checking out is http://your_joomla_live_site/index.php?option=com_virtuemart&page=checkout.index.

Account maintenance

The shopping system is not done with checking out if the shop allows a shopper to register. The shopper can come back to log in to Joomla! to check his/her order. The shopper can also change the registration data he/she provided after logon. VirtueMart account maintenance is done through the account module. The landing page is account.index.php. The URL is http://your_joomla_live_site/index.php?option=com_virtuemart&page=account.index.

Shopping digression

While shopping, a shopper may encounter a number of scenarios where a digression from the normal shopping life cycle is needed.