Thiết kế web với joomla 1.6(5).x part 66 ppt

Part IV: Customizing and Extending the System 630 FIGURE 23.13 The Store Information dialogue. Chapter 23: Implementing e-Commerce with VirtueMart 631 The Store area includes the following options: l Store Name: This is the name of the store that will be displayed on the site. This is a required field. l Store Company Name: This is for the proper name of your business entity. This is dis- played in some correspondence and is used by the system as the default vendor. This field is required. l URL: Your Shop’s URL, as you want it to appear in correspondence. l Address 1: Address field for your physical location. This is displayed in some correspondence. l Address 2: Alternate field for address information. This is displayed in some correspondence. l City: The city where your business is physically located. This is displayed in some correspondence. l Country: The country where your business is physically located. This is displayed in some correspondence. Part IV: Customizing and Extending the System 632 l State/Province/Region: The State, Province, or Region where your business is physically located. This is displayed in some correspondence. l Zip/Postal Code: The Zip or Postal Code of your business. This is displayed in some correspondence. l Phone: Enter the telephone number you want associated with the Store. l Store Address Format: Input the variables you want to display in the order you want to display them. Hover the mouse over the info symbol underneath the label for a list of the available variables. l Store Date Format: Set the date format used by the Store. Click the info link to the right of the text field for more information on the options available here. The Contact Information area includes the following options: l Last Name: The last name of the person you want listed as the contact for the Store. l First Name: The first name of the person you want listed as the contact for the Store. l Middle Name: The middle name of the person you want listed as the contact for the Store. l Title: The title of the person listed as the contact for the Store. l Phone 1: The phone number of the person listed as the contact for the Store. l Phone 2: An alternate phone number for the person listed as the contact for the Store. l Fax: A fax number for the person listed as the contact for the Store. l Email: The e-mail address of the person listed as the contact for the Store. Caution You must change this e-mail address; if you don’t, all correspondence concerning the store will be directed to the VirtueMart.com address provided by default! The Store Information area includes the following options: l Full Information: Displays the current logo image associated with the store. Upload your own image using the following field. l Upload Image: Use this field to upload the logo of your choice for the Store. l Minimum purchase order value for your store: Set a minimum purchase order value, if you want to use one. l Minimum Amount for Free Shipping: Set a minimum order value to trigger free ship- ping, if you want to offer this option. The Currency Display Styles area includes the following options: l Currency: Select your primary currency from the combo box. l Currency symbol: Set the symbol you want to display with the currency. Chapter 23: Implementing e-Commerce with VirtueMart 633 l Decimals: Enter an integer value to specify the number of decimals displayed with the price. l Decimal symbol: Enter the character you want to use to separate the decimal in the price. l Thousands separator: Enter the character you want to use to separate thousands units in the price. l Positive format: Select from the combo box the format for positive numbers. l Negative format: Select from the combo box the format for negative numbers. l List of accepted currencies: Select the currency options you want to offer to Store users. Note that every currency you select here will be available at checkout! If you do not want to offer users their choice of currency, select only your default currency. The Description area includes a text field with a WYSIWYG editor bar. Enter into this field the descriptive text or images you want to display to visitors when they arrive to the Store. The Terms of Service text field is provided to allow you to enter the text for your Store’s Terms of Service. Working with products and categories The VirtueMart system is capable of supporting a wide range of product attributes. By default, you can classify products by manufacturer, vendor, type, or category. For larger shops, the various options are useful, but for a small shop sometimes they are a bit overwhelming. To work in the sim- plest configuration, you need only create products. That said, as a Shop owner, if you have more than just a few products, you may find that product management is significantly improved if you also cre- ate categories for grouping your products. Categories are not required but they are very useful. The following sections cover the basics of creating categories and products. The information cov- ered is sufficient to get your Store started. If you need additional classifications for your products, such as manufacturer or type, you can always add them later. Overview of the Category Manager Categories are used for the grouping of products. The system supports the creation of both parent and child categories, allowing you to create a logical organization for your site. Categories make organizing the products easier on both the front end and the back end and make it easier for your users to find things quickly. To get started adding categories to your Shop, either click the Category Tree icon on the VirtueMart Control Panel or click on the option labeled List Categories under the Products menu. In either case, you can see the Category Tree, as shown in Figure 23.14. The toolbar at the top of the Category Tree provides the following functions: l New: Click to add a new category. l Publish: Select one or more categories from the list and then click this icon to publish them. Part IV: Customizing and Extending the System 634 l Unpublish: Select one or more categories from the list and then click this icon to unpublish them. l Remove: Select one or more categories from the list and then click this icon to delete them. FIGURE 23.14 The Product Category Tree, shown here with the sample data installed. The main content area of the screen contains a list of all the categories in your Shop. The columns provided are: l #: An indexing number assigned by the system. This number cannot be changed. l Checkbox (no label): Click in a checkbox to select a category; this is needed if you want to use several of the toolbar options. l Category Name: This field displays the name of the category. Click on the name to edit the category’s details. l Category Description: This field displays the description of the category. l Products: The number of products in the category. Click the Show link to view them. l Publish: A green checkmark in this column indicates that the category is active. The field will show a red X if the category is disabled. Administrators can toggle between the two settings by clicking the icon shown. Chapter 23: Implementing e-Commerce with VirtueMart 635 l List Order: Click the up and down arrows to move the category up or down in the order. l Order (no label): Enter numerical values to indicate the sequence of display for the cate- gories; then click the save icon to save the changes. l Remove: Click to delete a category. l ID: The system-generated user ID number. At the bottom of the screen, below the content area, is the Display # option. Change the value in the combo box control to alter the number of categories that are displayed on the page. The default value can be altered by changing the List Length option on the Global Configuration Manager. Creating a new category Click the New icon at the top of the Category Tree page to add a new product category to your Shop. Clicking on the icon displays the New Category dialogue, as shown in Figure 23.15. FIGURE 23.15 The New Category dialogue. Part IV: Customizing and Extending the System 636 The toolbar at the top of the Global Configuration Manager provides the following functions: l Save: Click to save any changes you’ve made. After saving, the system exits the New Category dialogue and returns you to the Category Tree. l Apply: Click this icon to save your work without exiting from the New Category dialogue. l Cancel: Cancels the task, exits the New Category dialogue and returns you to the Category Tree. The New Category dialogue provides two tabs — Category Information and Images. The Category Information tab includes the following fields: l Publish: An indexing number assigned by Joomla! This cannot be changed. l Category Name: Enter a name for the category. l Category Description: Enter a short description for the category. l List Order: You cannot control this at the time of category creation; new categories default to the bottom of the list. If you want to alter the order after creation, you can do so from the Category Tree interface or by editing the category. l Parent: If you want to create a sub-category, choose the Parent Category from the combo box. l Show x products per row: Enter an integer value to specify the number of products shown per row. Note the settings you choose here will override those specified in the VirtueMart Global configuration. l Category Browse Page: Select one of the system’s templates for the category browse page layout. Note the settings you choose here will override those specified in the VirtueMart Global configuration. l Category Flypage: Select one of the system’s templates for the product page layout. Note the settings you choose here will override those specified in the VirtueMart Global configuration. The Image tab is divided into two areas, Full Image and Thumbnail. Both areas include the same fields, all of which are optional: l Full Image: Click Browse to upload an image for the category. This will be used as the large category image. l Image Action: Select the Auto-Create Thumbnail? option if you want the system to create a thumbnail of the image. Click none if you do not want a thumbnail created. l URL: Associate an URL with the image. To create a new category, follow these steps: 1. Log in to the admin system on your site. 2. Access the VirtueMart component by clicking on VirtueMart under the Components menu. The VirtueMart Control Panel loads in your browser. Chapter 23: Implementing e-Commerce with VirtueMart 637 3. Select the Category Tree icon on the Control Panel. The Category Tree loads in your browser. 4. Click the New icon on the toolbar at the top of the Category Tree. When you click that icon, the New Category dialogue opens. (Refer to Figure 23.15.) 5. In the Name field, type a name for this category. This is the only required field. 6. Add additional information or optional settings as you see fit. 7. Click the Save icon on the toolbar at the top right to save your new category. The dialogue closes and returns you to the Category Tree. Editing and deleting categories Existing product categories can be edited from the Category Tree. To edit a category, click on the category name in the Category Tree; the system opens the Edit Category dialogue. The Edit Category dialogue is identical to the New Category dialogue, with the same fields and requirements as discussed in the previous section. To make changes to a category, simply alter the desired fields in the Edit Category dialogue, then click the Save or Apply icon on the toolbar. Any changes you have made are applied immediately. To delete one or more categories, follow these steps: 1. Open the Category Tree. 2. Select one or more categories. 3. Click the Remove icon. Caution Deleting a category is permanent and cannot be undone. Note, however, that a category cannot be deleted if there are sub-categories assigned to that category. If you wish to delete the category, you need to first delete or move any sub-categories to another category. Note that if there are products assigned to the category you are removing, they will be deleted, unless they are also members of another category. Overview of the Product List To view all the products in your Shop, click the Product List icon on the VirtueMart Control Panel, or select the option Product List from the Products menu. Either option displays the Product List as shown in Figure 23.16. The toolbar at the top of the Product List provides the following functions: l Add Attribute: Select one or more products from the list, then click this icon to add an attribute specific to the selected product(s). l List Prices: Select one or more products from the list, then click this icon to add multiple prices to the selected product(s). Part IV: Customizing and Extending the System 638 l Add Product Type: Select one or more products from the list, then click this icon to add a Product Type relevant to the selected product(s). l New: Click to add a new product. l Publish: Select one or more products from the list, then click this icon to publish them. l Unpublish: Select one or more products from the list, then click this icon to unpublish them. l Remove: Select one or more products from the list, then click this icon to delete the product(s). FIGURE 23.16 The Product List page, shown here with the sample data installed. Chapter 23: Implementing e-Commerce with VirtueMart 639 Below the icons and above the list of products are several sorting and searching tools to help you manage long lists of products: l The Filter field on the left sorts the view by Product Category. The page reloads and dis- plays all the products in the selected category. To clear the screen and return to a full list- ing, change the selection to the default Select a category. l The Search box in the middle of the screen is a free text search field. Type in the search query and then press the Return key or click the Search button to view the results. To clear the screen and return to a full listing, enter a blank space and press Return or click the Search button. l The Search Product boxes at the top right allow you to construct a more advanced search query with multiple criteria. The first box allows you to choose from one of three criteria: modified, with price modified, without price. This is then combined with the second combo box to put an additional condition on the search. There are two options on this combo box: before and after. Set the limiting criteria in these two boxes then enter a date in the text field. Click Search to see the results. To clear the screen and return to a full list- ing, enter a blank space and press Return or click the Search button. The main content area of the screen contains a list of all the products in your Shop. The columns provided are: l #: An indexing number assigned by Joomla! This cannot be changed. l Checkbox (no label): Click in a checkbox to select a product; this is needed if you want to use several of the toolbar options. l Product Name: This field displays the full name of the product. Click on the name to edit the product’s details. l Media: Shows the number of images associated with the product. Clicking on the value opens a pop-up window that lists the images. Note that a large image plus a thumbnail of the large image counts as two images, not one. l SKU: The SKU of the product. l Price: The base price of the product. Click to pop-up a window that lets you view all prices for all groups. You can also edit the price in the pop-up window. Note If you use the pop-up window to edit the price of a product you will need to refresh the Product List page to see the new value displayed. l Category: A list of the categories to which the product is assigned. l Manufacturer: The manufacturer associated with the product. l Customer Reviews: If the product has any reviews, this column shows the number of reviews and a link to show to reviews. If there are no reviews, the column shows an Add a Review link. Clicking on either link takes you to the Product Reviews page. [...]... range and can include not only orders, but also a summary of the products sold, as shown in Figure 23.25 651 Part IV: Customizing and Extending the System FIGURE 23.25 The VirtueMart Reports function Summary In this chapter, we have taken a look at the basics of setting up e-commerce on your Joomla! site with the VirtueMart extension You learned the following: l l How to set VirtueMart’s Global Configuration... to publish the product l SKU: Enter into this field an alphanumeric value to use for tracking the product in the system Typically this is called a Stock Keeping Unit - an SKU This field is required 641 Part IV: Customizing and Extending the System l Name: Enter a name for the product This field is required and will be shown on the front end of the site l URL: You have the option of associating a URL... Box Values: Set the high and low values and the increment for your Quantity box Note this parameter is only active if the previous Quantity parameter is selected FIGURE 23.18 The Display Options tab 643 Part IV: Customizing and Extending the System Clicking on the tab labeled Product Status displays the screen shown in Figure 23.19: FIGURE 23.19 The Product Status tab 644 Chapter 23: Implementing e-Commerce... for guidance in formatting your Attribute List Note that you can also add attributes to products after creation by using the Add Attribute option on the Product List page, or by editing the product 645 Part IV: Customizing and Extending the System Clicking on the tab labeled Product Dimensions and Weight displays the screen in Figure 23.20: FIGURE 23.20 The Product Dimensions and Weight tab The Product... for the product The image loaded under the heading Full Image will be used as the large product image The image loaded under the heading Thumbnail Image will be used as the product thumbnail image 647 Part IV: Customizing and Extending the System l Image Action: Select the Auto-Create Thumbnail? option if you want the system to create a thumbnail of the image Click none if you do not want a thumbnail... order, the system will create a record for the Shop owner To view all orders, click on the List Orders option under the Orders menu The Order List appears in your browser, as shown in Figure 23.23 649 Part IV: Customizing and Extending the System The screen shows all orders, whether pending, cancelled, or completed, along with additional information for at-a-glance viewing of the transaction history.. .Part IV: Customizing and Extending the System l Publish: A green checkmark in this column indicates that the contact is active The field will show a red X if the contact is disabled Administrators can . FIGURE 23 .18 The Display Options tab. Part IV: Customizing and Extending the System 644 Clicking on the tab labeled Product Status displays the screen shown in Figure 23 .19 : FIGURE 23 .19 The Product. icon displays the New Category dialogue, as shown in Figure 23 .15 . FIGURE 23 .15 The New Category dialogue. Part IV: Customizing and Extending the System 636 The toolbar at the top of the Global. combo box to put an additional condition on the search. There are two options on this combo box: before and after. Set the limiting criteria in these two boxes then enter a date in the text field.