Joomla! E-Commerce with VirtueMart — Save 50%
Build feature-rich online stores with Joomla! 1.0/1.5 and VirtueMart 1.1.x
When the product catalog is ready, it is time to test the user registration and order management functionalities. We are going to discuss how to manage customers and orders in a three part series. This is the first part that covers VirtueMart's Customer Management. In this article by Suhreed Sarkar, we will:
- Configure the user registration settings for VirtueMart
- Manage users for a VirtueMart shop
- Create and manage fields for a customer registration form
Note that all VirtueMart customers must be registered with Joomla!. However, not all Joomla! users need to be the VirtueMart customers. Within the first few sections of this article, you will have a clear concept about user management in Joomla! and VirtueMart.
Customer management in VirtueMart includes registering customers to the VirtueMart shop, assigning them to user groups for appropriate permission levels, managing fields in the registration form, viewing and editing customer information, and managing the user groups. Let's dive in to these activities in the following sections.
Registration/Authentication of customers
Joomla! has a very strong user registration and authentication system. One core component in Joomla! is com_users, which manages user registration and authentication in Joomla!. However, VirtueMart needs some extra information for customers. VirtueMart collects this information through its own customer registration process, and stores the information in separate tables in the database. The extra information required by VirtueMart is stored in a table named jos_vm_user_info, which is related to the jos_users table by the user id field. Usually, when a user registers to the Joomla! site, they also register with VirtueMart. This depends on some global settings. In the following sections, we are going to learn how to enable the user registration and authentication for VirtueMart.
Revisiting registration settings
We configure the registration settings from VirtueMart's administration panel Admin | Configuration | Global screen. There is a section titled User Registration Settings, which defines how the user registration will be handled:
Ensure that your VirtueMart shop has been configured as shown in the screenshot above. The first field to configure is the User Registration Type. Selecting Normal Account Creation in this field creates both a Joomla! and VirtueMart account during user registration. For our example shop, we will be using this setting.
Joomla!'s new user activation should be disabled when we are using VirtueMart. That means the Joomla! New account activation necessary? field should read No.
Enabling VirtueMart login module
There is a default module in Joomla! which is used for user registrations and login. When we are using this default Login Form (mod_login module), it does not collect information required by VirtueMart, and does not create customers in VirtueMart. By default, when published, the mod_login module looks like the following screenshot:
As you see, registered users can log in to Joomla! through this form, recover their forgotten password by clicking on the Forgot your password? link, and create a new user account by clicking on the Create an account link. When a user clicks on the Create an account link, they get the form as shown in the following screenshot:
We see that normal registration in Joomla! only requires four pieces of information: Name, Username, Email, and Password. It does not collect information needed in VirtueMart, such as billing and shipping address, to be a customer. Therefore, we need to disable the mod_login module and enable the mod_virtuemart_login module. We have already learned how to enable and disable a module in Joomla!. We have also learned how to install modules.
By default, the mod_virtuemart_login module's title is VirtueMart Login. You may prefer to show this title as Login only. In that case, click on the VirtueMart Login link in the Module Name column. This brings the Module:[Edit] screen:
In the Title field, type Login (or any other text you want to show as the title of this module). Make sure the module is enabled and position is set to left or right. Click on the Save icon to save your settings. Now, browse to your site's front-page (for example, http://localhost/bdosn/), and you will see the login form as shown in the following screenshot:
As you can see, this module has the same functionalities as we saw in the mod_login module of Joomla!. Let us test the account creation in this module. Click on the Register link. It brings the following screen:
The registration form has three main sections: Customer Information, Bill To Information, and Send Registration. At the end, there is the Send Registration button for submitting the form data. In the Customer Information section, type your email address, the desired username, and password. Confirm the password by typing it again in the Confirm password field. In the Bill To Information section, type the address details where bills are to be sent. In the entire form, required fields are marked with an asterisk (*). You must provide information for these required fields.
In the Send Registration section, you need to agree to the Terms of Service. Click on the Terms of Service link to read it. Then, check the I agree to the Terms of Service checkbox and click on the Send Registration button to submit the form data:
If you have provided all of the required information and submitted a unique email address, the registration will be successful. On successful completion of registration, you get the following screen notification, and will be logged in to the shop automatically:
If you scroll down to the Login module, you will see that you are logged in and greeted by the store. You also see the User Menu in this screen:
Both the User Menu and the Login modules contain a Logout button. Click on either of these buttons to log out from the Joomla! site. In fact, links in the User Menu module are for Joomla! only. Let us try the link Your Details. Click on the Your Details link, and you will see the information shown in the following screenshot:
As you see in the screenshot above, you can change your full name, email, password, frontend language, and time zone. You cannot view any information regarding billing address, or other information of the customer. In fact, this information is for regular Joomla! users. We can only get full customer information by clicking on the Account Maintenance link in the Login module. Let us try it. Click on the Account Maintenance link, and it shows the following screenshot:
The Account Maintenance screen has three sections: Account Information, Shipping Information, and Order Information. Click on the Account Information link to see what happens. It shows the following screen:
This shows Customer Information and Bill To Information, which have been entered during user registration. The last section on this screen is the Bank Information, from where the customer can add bank account information. This section looks like the following screenshot:
As you can see, from the Bank Account Info section, the customers can enter their bank account information including the account holder's name, account number, bank's sorting code number, bank's name, account type, and IBAN (International Bank Account Number). Entering this information is important when you are using a Bank Account Debit payment method.
Now, let us go back to the Account Maintenance screen and see the other sections. Click on the Shipping Information link, and you get the following screen:
There is one default shipping address, which is the same as the billing address. The customers can create additional shipping addresses. For creating a new shipping address, click on the Add Address link. It shows the following screen:
|Build feature-rich online stores with Joomla! 1.0/1.5 and VirtueMart 1.1.x|
eBook Price: $29.99
Book Price: $49.99
As you see in the above screenshot, customers can add shipping address information. Mandatory fields are marked with an asterisk (*), and must be filled in. The customer also needs to provide a nickname for the address, which will be displayed for selecting the shipping address during checkout. After filling in the form, save it by clicking on the Save button.
Now, let us again move to the Account Maintenance page. For a new customer, the order information section will not show any orders. When the customer places some orders, this section will look like the following screenshot:
To see the details of a particular order, click on the View link. This opens up details of the purchase order. The first part of the purchase order looks like the following screenshot:
The first part of the Purchase Order contains the store's address, order information like order number, order date, and its status. It also contains the customer's information including the Bill To and Ship To addresses.
The second part of the Purchase order contains shipping information, a list of order items, total price, shipping and handling fee, taxes, and payment information. This part looks like the following screenshot:
Customers can view purchase orders they have placed, but cannot modify those purchase orders.
When you enable the VirtueMart Login module, it is wise to disable the User Menu module of Joomla!. We have seen that account details provided by the link in the User Menu do not show customer information. Therefore, it is recommended that you disable the User Menu and the Login modules of Joomla! and keep the VirtueMart Login module enabled.
Managing fields for user registration form
In the previous section, we saw how customers can register to a VirtueMart shop. To enable registration and login of customers, we have disabled Joomla!'s Login Form module, and enabled the VirtueMart Login module. When registering through the Register link provided by the VirtueMart Login module, customers get some extra fields which are used for the shop's purpose such as billing and shipping to addresses. VirtueMart gives us the flexibility to define additional fields for the form, and also decide which fields will be shown in which page—registration, account information, and so on.
For managing the fields in user registration form, go to the VirtueMart administration panel and click on Admin | Manage User Fields. This shows the list of user fields currently used:
The Manage User Fields screen lists the available fields for the registration form. This list indicates what type of fields these are, whether any field is required or not, its published or unpublished status, and in which forms the fields will be displayed. Note the Show in registration form, Show in shipping form, and Show in account maintenance columns. A checkbox in these columns against any field indicates that the field will be available in that form (registration, shipping, or account maintenance). You can also reorder the fields from the Reorder column by clicking the up or down arrow icon. Another way to reorder the fields is to type the order number and then saving it by clicking on the Save icon (). Clicking the a-z () icon reorders the fields alphabetically. Also note the trash () icon in the Remove column is available only for the fields which are a non-system field, that is, either a delimiter or a custom field.
Adding a new field
As an administrator of the VirtueMart shop, you can add a new field to the customer registration form from the Manage User Fields screen. To add a new field, click on the New button. This shows the Add/Edit User Fields screen:
The first field in the Add/Edit User Fields screen is Field type. You need to specify what type of field you are going to add. Then, provide a name for the field in the Field name text box. This name is for internal use only and will not be displayed. Type the label for this field in the Field title box, which will be displayed in the form. In the Description, field-tip text area, type the description of the field which will be shown as a tooltip in the form. Select Yes or No in the Required? field to indicate whether the user must provide a value for this field or not. As you can see, you can also select in which forms (for example, registration, account maintenance, and shipping) the field will be displayed. When you select Yes in the Read-Only field, users cannot change the value for that field. In the Published field, select Yes to publish that. For the Text Field, you can specify a Field Size which will be the size of the text box.
As you can see from the Manage User Fields, most of the fields necessary to collect customer information are available by default. However, sometimes you may need to add some extra fields. Let us see in the following sections how we can create different types of fields.
This type of field allows up to 255 characters to be added. This is suitable for short text information, such as a username, first name, last name, and so on. Most of the fields available in the VirtueMart user registration form are of this type. For adding such fields, click on the New button in the Manage User Fields screen. This brings the Add/Edit User Fields screen. Select Text Field in the Field type drop-down list. Then, fill in the other fields as shown in the following screenshot:
When finished providing all information, click on the Save icon, and go back to the Manage User Fields screen. Now, reorder the fields and position the field where you want it to show. To see how this field looks, go to store frontend and click on the Register link in the Login module. That will show the registration form and in that form, you see the field as shown in the following screenshot:
As you can see, the Pager field is added to the form. Hover your mouse pointer over the info icon () besides the field. It shows the text you typed in the Description, field-tip field during the creation of this field.
This type of field shows a single checkbox, which can be checked or unchecked by the users. Use this type for fields such as terms of agreement, where users need to agree by checking the checkbox. For creating such fields, follow the same procedure as creating a Text Field, but choose the Checkbox (Single) in the Field type drop-down list. Fields of this type look like the one shown in the following screenshot:
Fields of this type show multiple checkboxes from where users to check multiple options. Use this type for fields where you want to collect some preferences. For example, you may create a field to know the customer's preferences for product categories.
For creating the Checkbox (Multiple) field, select this from the Field type drop-down list on the Add/Edit User Fields screen:
All other fields are same as adding the Text Field. However, at the end of the form, you need to define the options and values. Click on the Add a Value button to add new option title and values. This will show two columns, where you can type a Title and Value for the option. Add as many options as you want:
When entering values for all fields is done, click on the Save button. Then, go back to the Manage User Fields screen, and reorder the field to show it in preferred order. The field you have created will look like the screenshot below:
This type is to show a field for entering date with a date picker. In the same way as with the other field types, you can create this type of field by choosing Date in the Field type drop-down list in the Add/Edit User Fields screen. All other information is the same as other types of fields. For example, we want to collect information on a customer's date of birth. In that case, we need to add a field of the Date type. Let us configure the field as shown in the following screenshot:
Save the field by clicking on the Save icon in the toolbar. Then, go back to the Manage User Fields screen and reorder the fields so that our new field shows after the password confirmation field. Now, go to the user registration form to see the result. It will look like following screenshot:
The Date of Birth field is marked with an asterisk (*) to indicate that users must enter a value for this field. This happened as we selected Yes in the Required drop-down list while creating the field.
|Build feature-rich online stores with Joomla! 1.0/1.5 and VirtueMart 1.1.x|
eBook Price: $29.99
Book Price: $49.99
Age verification (date select fields)
Fields of this type provide a drop-down list for selecting a month, day, and year to indicate a date of birth. While creating a field of this type, the administrator can set a minimum age for registration. Selecting the date from a field of this type, and submitting the form, will automatically calculate the user's age and notify whether he or she is eligible for registration or not. For some sites, registration is restricted to adults only (for example, 18+ years old). Adding a field of this type can help ensure implementing the restriction policy. To enforce such a policy, let us create a field of this type with the configurations shown in the following screenshot:
As you can see, we have made this field mandatory by selecting Yes in the Required drop-down list. The minimum age for registration is set to 18 years in the Specify the minimum age drop-down list. In the registration form, this field will look like the following:
Click on the OK button, and you see the registration form with the information you provided. Scroll down and you find that the Select your date of birth field is marked in red color to indicate error in value provided for this field:
Now, select the birth date as "10 September 1985", and click on the Send Registration button. Voila! It works! You are now registered, because the date of birth indicates that your age is more than 18 years.
Drop Down (Single Select)
Fields of this type show a drop-down list with some options to select, from where users can select only one option. For example, you want to collect information on the user's sex (male or female). In that case, you can create a field with the configurations shown in the following screenshot:
Save the field, and from the Manage User Fields screen, reorder the field to show after the Date of Birth field. Now, on the frontend, click the Register link in the Login module. That shows the registration form. In the registration form, the drop-down field we have created will look like the following screenshot:
Drop Down (Multiple Select)
Fields of this type show a multiple-select combo box from where users can select multiple options. In the previous example of creating the Checkbox (Multiple), we saw that users can select multiple options. Let us convert that into the Drop Down (Multiple Select) field. Create the field in the same process, but select the Drop Down (Multiple Select) in the Field type drop-down list in the Add/Edit User Fields screen. At the bottom, add the same option-value pairs. In the registration form, this field will look like the following:
In fields of this type, you can select multiple options by holding down the Ctrl key and clicking on the options.
Fields of this type are similar to text fields. The difference between the Text Field and Email Address types is that the latter has built-in validation criteria for ensuring an email address pattern. By default, there is one email address type field in the user registration form. You may want to add another email address field, for collecting an alternative email address, using this type.
EU VAT ID
While doing business with European Union (EU) countries, you need a valid Value Added Tax (VAT) ID. Customers who are from EU countries may use their EU VAT ID, if you add a field of this type and collect that information. When you define a field of this type, you can also configure which shopper group the customer will be moved to after successfully validating of his or her VAT ID. For example, we may create a shopper group named EU Wholesale, and add all the customers to this shopper group upon successful validation of their EU VAT ID.
For creating the EU VAT ID field, follow the similar steps for other types of fields. In the Add/Edit User Fields screen, configure the fields as shown in the following screenshot:
As you can see, we have selected the EU Wholesale shopper group where customers will be moved upon successfully validating their EU VAT ID. The field we created now, will be displayed in the user registration and account maintenance form same as text input field:
When customers enter their EU VAT ID in the European Union VAT ID field, and along with other information submits the form for registration, VirtueMart connects to the online database at http://ec.europa.eu/taxation_customs/vies/api/checkVatPort?wsdl and verifies the validity of the VAT ID provided by the customer. If it finds the VAT ID invalid, the customer will not be registered, or the VAT ID information will not be saved and an error message will be displayed. This type of field should remain optional, as not all customers will have EU VAT IDs.
Editor text area
Fields of this type are in fact a text area with the rich text editor enabled. Creating such fields may help you collect descriptive information with rich text. For example, we create a text area with the rich text editor where the customers may write something about themselves, with fancy formatting, color, bullets, and links. For creating a field of this type, just select Editor Text Area from the Field type drop-down list in the Add/Edit User Fields screen. Once created and published, the field will look like the following:
Fields of this type are a simple text area where customers can enter ample descriptive information. This does not show the rich text editor in the text area. For creating such field, select Text Area as the field type and specify other information. At the end of the Add/Edit User Fields screen, specify the Columns and Rows (for example, 40 and 10, respectively). Once saved and published, the field will look like the following screenshot:
You can make this text area smaller or larger by changing the values in the Columns and Widths fields in the Add/Edit User Fields screen.
Fields of this type show radio buttons with options you provide allowing customers to check only one radio button. For example, we can add the Sex field using radio buttons. For creating such a field, select Radio Button from the Field type drop-down list in the Add/Edit User Fields screen. Enter other information, and at the end, add the option title and value pairs by clicking on the Add a value button. When saved and published, it looks like the following in the registration or account maintenance forms.
Sometimes, it is better to use a Radio Button instead of a Drop Down (Single Select), especially when the options are limited. The benefit of using this is that the user can see all the options without clicking on the field. However, if there are many options (for example country field), then it is better to use a drop-down, otherwise it will be difficult to show all the options as radio buttons.
Fields of this type allow web addresses to be entered, and validates the input to ensure that these fields are in the URL format. In the Add/Edit User Fields screen, select Web Address as the field type and at the bottom, select the URL Only or the Hypertext and URL from the Field type drop-down list.
Fields of this type are used to group several fields and label that group. We have already seen that used. In the registration form, there are three groups of fields: Customer Information, Bill To Information, and Send Registration. You can create such a delimiter by selecting ===Fieldset Delimiter=== from the Field type drop-down list in the Add/Edit User Fields screen. You just need to provide a name and title for this field type:
Once you have saved the field, go back to the Manage User Fields screen and reorder the field. Fields that are going to be under this group should be placed under the delimiter. As we have created some additional fields, we can group these under this delimiter. Then, the list looks like the following:
From here, you can see that under our new delimiter vm_customgroup, there are three fields. Now, go to the user registration page in the frontend, and you will see the group as shown:
So far, we have discussed all the available field types. If you have installed components like Letterman, YANC, ANJEL, or CCNewletter, another field type for subscribing to newsletters will be available.
Editing a field
From the Manage User Fields screen, you can edit a field. Just click on the Field name in the list and that opens the Add/Edit User Fields screen:
Although you can edit all of the information provided in the screen, you cannot change the field type. For example, a field created as a checkbox cannot be changed into a drop-down list or a text box. However, you may delete the field and create another field of your desired type. In that case, any data collected through the fields will be deleted.
In creating additional fields, we have typed plain English in the Field title text box, which is displayed in the frontend as a label for that particular field. If you look into the built-in or system fields, you see the values in the Field title field are something like PHPSHOP_***. These language constants are defined in the language files for VirtueMart. These constants are required for localization of VirtueMart. Since we have not yet discussed language files or localization, we just typed English words
This article showed us how to manage different fields for user registration form in VirtueMart. The second part will describe about the User Manager, user Group, and Group permissions for Joomla! and VirtueMart.
If you have read this article you may be interested to view :
- Creating and Managing User Groups in Joomla! and VirtueMart
- Managing orders in Joomla! and VirtueMart
- Managing Manufacturers, Vendors, and Product Categories with Joomla! E-Commerce VirtueMart
About the Author :
Suhreed Sarkar is an IT consultant, trainer and technical writer. He studied Marine engineering, served on board the ship for two years, and then started journey in to IT world with MCSE in Windows NT 4.0 track. Later he studied business administration and earned MBA from University of Dhaka. He has a bunch of BrainBench certifications on various topics including PHP4, Project Management, RDBMS Concepts, E-commerce, Web Server Administration, Internet Security, Training Development, Training Delivery and Evaluation, and Technical Writing.
He taught courses on system administration, web development, e-commerce and MIS. He has consulted several national and international organizations including United Nations, and helped clients building and adopting their web portals, large scale databases and management information systems. At present he is working on building a framework for education sector MIS, and promoting use of ICTs in education.
Suhreed is renowned technical author in Bengali – having a dozen of books published on subjects covering web development, LAMP, networking, and system administration. He authored Zen Cart: E-commerce Application Development, Joomla! E-commerce with Virtuemart, and Joomla! with Flash, published by Packt Publishing.
While not busy with hacking some apps, blogging on his blog (http://www.suhreedsarkar.com), reading philosophy of Bertrand Russell or management thought of Peter F Drucker – he likes to spend some special moments with his family. Suhreed lives in Dhaka, Bangladesh
Books From Packt