Most of the web sites that you see on the Internet do some type of e-commerce—they publicize their products and services through the Internet and eventually do some business. E-commerce is a heavily desired feature in almost all web sites. To add an e-commerce system to the web site, you can download one of hundreds of components available on the Internet. I downloaded one named VirtueMart. Its archive file is available on the Internet at http://virtuemart.net/downloads, and the one I used in this book is named com_virtuemart.3.0.6.2.zip.
The VirtueMart component provides a complete store system. Using its features, you can do the following:
- Have access to an unlimited hierarchy of products (a category within a category, and so on)
- Specify attributes of products, such as width, height, and color
- Use different currencies
- Specify different shipment methods
- See that the components use SSL encryption
- Perform complete inventory administration
You’ll see how the VirtueMart component can be installed on a hosted web site rather than on a web site located on a local server. You can use the package file method to specify the location of VirtueMart’s archive file, but it can take a long time to install.
A better option is to upload the archive file to the web site. Assuming that the domain name of the web site is bmharwani.net, upload the archive file to this domain. To install the component, you need to specify its location (www.bmharwani.net/com_virtuemart.3.0.6.2.zip) in the Install URL field and click the Install button, as shown in Figure 9-8.
The VirtueMart component is installed, and you’ll see the message Installation Was Successful (see Figure 9-9). The figure shows the links for the documentation of the VirtueMart. Besides the links, the figure tells you that you also have to install the AIO component for successful installation of VirtueMart.
The AIO component is available from the same URL:http://virtuemart.net/downloads. The downloaded archive file is com_virtuemart.3.0.6.2_ext_aio.zip. Install the AIO component using the Extension Manager. After the AIO component is successfully installed, the tables required for VirtueMart to work are automatically created (see Figure 9-10). These tables are required to keep records of products, customers, and so on.
Note VirtueMart is accessible from the Components menu in the Administrator There are still some minor vulnerabilities for nonpersistent XSS that are not yet solved with VirtueMart, but they are expected to be solved in the future.
When all the tables and other configuration files required for e-commerce are created, you’ll see the Control Panel for your store, as shown in Figure 9-11.
The Control Panel contains icons for viewing and managing a product list, categories of products, orders placed, different payment methods, vendors, users, and so on. All the e-commerce maintenance tasks are performed here.
Click the Products menu on the left side to expand it and display the menu items under this menu. The menu items that appear under the Products menu are Product Categories, Products, Custom Fields, and so on. After clicking Product Categories, you should see a screen like the one shown in Figure 9-12.
Notice that there are currently no categories in the category tree. You can create a new category by clicking the New icon in the toolbar. The remaining icons in the toolbar — Publish, Unpublish, Edit, and Delete— are for publishing (displaying the products of the selected category); unpublishing (making the products of the selected category invisible); and editing the category and removing the selected category, respectively.
Upon clicking the New icon, you’ll see a screen for creating a new product category, as shown in Figure 9-13.
The screen prompts for a category name and description. Usually, the newly added category appears last in the category tree, but you can easily change its order later if desired. You don’t have any other categories, so you don’t have to worry about ordering.
Let’s assume that you want to sell products belonging to two categories: Tutorials CD and Computer Books. You create the first category by specifying the Category Name as Tutorials CD. In the Category Description column, enter a brief description of the category. Also mention some meta keywords for the category to make it appear on the front side of the site if visitor searches for the categories via keywords.
After entering the information for Tutorials CD, save it by clicking the Save & Close icon in the toolbar. Using the same technique, create another category named Computer Books. The category tree now contains two categories, as shown in Figure 9-14.
To add products to these two newly created categories, click Products in the menu on the left. The Products menu will expand. From the expanded menu, select the menu item Products; the Product [List] screen will display. The product list is currently blank because no product is present in the store.
Notice in Figure 9-15 that this screen enables you to search for products with a particular keyword (if the volume of products is large). You can also look for products that have been added/modified before or after a particular date. These facilities are not applicable here, so click the New icon to add a new product.
You’ll see a screen for specifying product information. By default, the Product Information tab is opened (see Figure 9-16).
The Product Information tab shows the fields as follows:
- Product Name: Name the product Unix Tutorial CD.
- Product SKU: Product SKU is a common abbreviation used in catalog systems for stock-keeping In the SKU field, enter a unique ID for the product—in this case, enter 101.
- GTIN: Specify the GTIN For the time being, leave the field blank.
- URL: This field allows the visitor to navigate to a web page to see details of the In this case, leave it blank.
- Manufacturer: This field is the name of the manufacturer of the Keep it blank (the default).
- Product Categories: In this box, you specify the category to which this product Select the category Tutorials CD.
- Cost price: Enter the price as 10, and the currency for all of the prices for the product as United States dollar.
- Final price: Specify the gross product price as 10 (dollars).
The Product Description tab (see Figure 9-17) displays fields for entering a description of the new product.
The fields are as follows:
- Short Description: In this box, you can include a short introduction of the product (it doesn’t include images).
- Product Description: Here you enter a product This is a detailed description that can also include images of the product.
- Meta Keywords: Here you specify the keywords that make this product appear in the front when a visitor searches for the respective keywords.
Notice the other tabs at the top of the New Product window: Product Status, Product Dimensions and Weight, Product Images, and so on. These tabs can be used to supply a lot more information about the product.
To define the product image, select the Product Images tab. You see the fields shown in Figure 9-18. Assuming that there is an image called dsimage.png on your local drive, click the Browse button in the Upload File field and select the dsimage.png image file.
After entering the information about the product, click the Save & Close button from the toolbar to save the newly created product. After the product is saved, you’ll see a message confirming that the new product is successfully saved (see Figure 9-15). The Product [List] page indicates that the first new product has been added: Unix Tutorial CD in the Tutorials CD category, as shown in Figure 9-19.
Let’s enter information for another product, Data Structures Tutorial CD, by selecting the New button in the toolbar (see Figure 9-20).
Enter the following information about the new product as follows:
- Product Name: Enter Data Structures Tutorial CD.
- Product SKU: As a unique ID for this product, enter 102.
- GTIN: Enter the GTIN number or other taxation For the time being, leave this field blank.
- URL: Because you’re not allowing the user to navigate to a web page to see details for this product, leave this field blank.
- Manufacturer: Leave the manufacturer of the product at the default.
- Product Categories: Select Tutorials CD for the category for the product.
- Cost Price: Enter 15 and set the currency to US dollar.
- Final Price: Enter 15.
Click the Product Description tab and enter a short description and product description of the product. Click the Product Images tab and provide the image of the new product. After providing the information for the new product, save it by clicking the Close & Save button. You’ll see a message confirming that the new product is successfully saved, along with the other product information that has been added in the products list (see Figure 9-21).
Until now, you’ve been adding products to the Tutorials CD category. Now you’ll add two products to the Computer Books category. Figure 9-22 shows the information entered to define a book product titled Android Programming.
Using the same technique, define another product, Python Programming, in the Computer Books category with an SKU of 202 and a price of $7. Now you have two categories defined in the online store (Tutorials CD and Computer Books), and each category has two products: Unix Tutorial CD and Data Structures Tutorial CD in the Tutorials CD category, and Android Programming and Python Programming in the Computer Books category.
To make the products appear on the front side of the site, declare them as featured products. To make any product a featured product, in the On Featured column, click the red cross icon to convert it into a right check sign.
Now it’s time to access this VirtueMart component from the front end (the web site). The Module Manager (see Figure 9-23) shows the following VirtueMart modules: VM – Shopping cart, VM – Search in Shop, VM – Featured products, VM – Category, VM – Currencies, and VM – Manufacturer. Each module does its respective job in implementing e-commerce.
But one step is still left. The VirtueMart modules are in unpublished mode; although they’re installed on the web site, they don’t display onscreen. To display the modules on the front side of the site, you need to publish the component’s modules at desired positions in the site.
As expected, the VM – Shopping cart module will display all the products that are selected by the visitor in the cart. Let’s publish VM – Shopping cart at position-7 of the template (on the right side of the site). To do so, click the VM-Shopping cart module, which will open it in edit mode (see Figure 9-24).
From the Position drop-down list, choose the position-7 option. Keeping the values of the rest of the fields to their default values, click the Save & Close button to save the changes made to the module.
Similarly, publish the VM – Featured products module on position-7 of the site. As expected, the VM-Featured products module will display all the featured products on the site. For successful implementation and for visitors’ convenience, you need to define two important factors of e-commerce: shipment method and payment method.
Let’s begin with the shipment method. Select the Component ➤ VirtueMart ➤ Shipment Methods option. The Shipment Method [List] page opens up, but is initially empty because no shipment method exists (see Figure 9-25).
Note There is a security issue that you should be aware of when using Visit this link for more details: http://extensions.joomla.org/extension/virtuemart.
Click the New button to create a new shipment method. You see the screen shown in Figure 9-26.
In the Shipment Name field, enter By Courier to specify that the shipment will be usually sent by courier. In the Shipment Description field, enter a small description about the method. Leave the values of the rest of the fields to their default and click the Save & Close button to save the shipment method.
A Shipment Method Successfully Saved message appears on the screen, and the Shipment Method [List] page shows the newly created shipment method: By Courier (see Figure 9-27).
Similarly, for defining the payment method, select the Component ➤ VirtueMart ➤ Payment Methods option. The Payment Method [List] page opens up, which initially is empty because no payment method exists by default (see Figure 9-28).
Click the New button from the toolbar to create a new payment method. The Payment Method [New] page opens up, showing the fields to define the payment method (see Figure 9-29).
In the Payment Name field, enter Card to indicate that this payment method will require a credit or debit card for payment. In the Payment Description field, enter a small description of this payment method. Leaving the values of the rest of the fields to their default, click the Save & Close button to save the newly defined payment method.
Now, you are ready to access the VirtueMart component from the front side of the site. The VM-Featured products module displays the featured products, as shown in Figure 9-30.
Each of the featured products is accompanied by a quantity text field and the Add to Cart button. The product names are in the form of links that can be clicked to show detailed information for the product.
After the Unix Tutorial CD name from the featured products column is clicked, the details of the products will be displayed, along with the image and description (see Figure 9-31).
The quantity text field has a default value of 1. You can specify the desired quantity of a product in the quantity field and click the Add to Cart button to add the product to the cart.
Keeping the default quantity value at 1, click the Add to Cart button on the Unix Tutorial CD to add it to the cart. You get a message indicating that Unix Tutorial CD is added to the cart (see Figure 9-32).
■ Note You can add the product to the shopping cart at the time of product listing as well as when the details of an individual product are being displayed. You just need to specify the desired quantity of the selected product and click the Add to Cart button.
The message also contains two links: Continue Shopping and Show Cart. The Continue Shopping link is for viewing more products for shopping purposes, and the Show Cart button is for displaying the products in the shopping cart. Click the Continue Shopping link to continue watching the featured products and selecting those required (see Figure 9-33).
This time, keeping the default quantity as 1, select the Add to Cart button for the Android Programming book. Again, you see a message indicating that the Android Programming book is added to the cart. The message also contains two links: Continue Shopping and Show Cart. This time, click the Show Cart link to see the products that are selected in the cart. You see the page shown in Figure 9-34.
The page shows the items that are chosen in the cart, along with their SKU and the quantity. You can update the quantity of a selected product (increase or decrease its quantity in the cart) or remove any product from the cart by clicking the Remove icon for that product. The page contains the buttons that can be clicked to supply billing and shipping information. The page also prompts to select the shipment and payment method. You can choose the shipment and payment method that you have already defined (see Figures 9-26 and 9-29) or supply new information.
Don’t forget to select the Terms of Service check box. You can always click the link below to read terms of service before selecting the checkbox.
The page shows the Continue Shopping link to see more products and continue with the shopping. Click the Add/Edit Billing Address Information button to supply the billing address. You see the page that contains fields to add or edit the billing address information, as shown in Figure 9-35.
Enter the e-mail address, name, password, name on which billing has to be done, and address; along with city, country, and zip code. The checkout can be done either as a registered user or as a guest. The benefit of being a registered user is that shipping and billing information will be saved for future use.
After entering the billing address information, click the Register and Checkout button. This button will register the user and subsequently initiate the checkout procedure. If you don’t want to register with the site and simply want to checkout, click the Checkout as Guest button.
■ Note If the user has already created his or her account, there is no need to provide billing information because this information is picked up from the account. The registered user just needs to supply the username and password, and then click the Login button to fetch the saved information.
The next page confirms that the checkout procedure is performed. The page displays the billing and shipping information, and shows the items chosen in the cart along with their quantities (see Figure 9-36).
The cart items are also displayed to enable the customer to make any amendments to the cart (edit the quantity and even delete any item from the cart). If the user is confirmed with the items chosen in the cart, he/she can click the Confirm Purchase button to confirm the purchase and finally place the order.
The VirtueMart module will display a thank you message to ensure that the transaction was successful (see Figure 9-37). The order number is shown for future correspondence.
Source: Harwani B M (2015), Foundations of Joomla!, Apress; 2nd ed edition