JoomlaXTC Product Showcase module
Product Showcase module enhances your site with incredible power to display a selection of products available from a Virtuemart based store system. Choose products using Category, Manufacturer and many more criteria and display them with your own templates limited only by your imagination. Its the perfect marketing tool to increase customer awareness of your products.
Requirements
The guide assumes you already have Joomla! 1.5 and Virtuemart 1.1 up and running and that your product information has been entered into the system.
Usage
The module displays a selection of products from Virtuemart database within the module box area on your web page.
For reference, imagine your site web page is laid out like this:
Header |
|||||||||
| S i d e M e n u |
main area module box
|
||||||||
| Footer | |||||||||
The module box is marked in grey, and you can notice it contains six product boxes. Each box displays a single product. The parameters described in this guide allows you to define how many product boxes to show, what information they will contain and their visual design of your preference.
The amount of configuration options might seem complicated to setup, but after reading this guide please feel free to try out all the features and play with the parameters. You will certainly discover its power!
All module configuration options are edited using the regular Joomla! Module manager.
Module Parameters
Parameters are split in three groups:
Product Selection Criteria |
Selection parameters to choose products from your store catalog. |
Product Display Settings |
To specify how those products will be shown to customers. |
Advanced Parameters |
To configure advanced features of the module. |
Product Selection Criteria parameters:
These parameters set filters and characteristics for the products you want to display. By properly configuring and combining them you can establish what products to display from your catalog.
Parents and Childs? |
Type of products to display. |
Current category only? |
Only show products from the category currently browsed by the customer. |
Current manufacturer only? |
Only show products from the same manufacturer currently browsed by the customer. |
Special products only? |
Restrict selection to products marked as Special only. |
Discounted products only? |
Restrict selection to products having a discount only. |
With image only? |
Restrict selection to products having a full size image only. |
Availability filter |
Restrict products based on their available date. |
Minimum stock |
If specified, only products with equal or greater stock quantity are shown. A value of zero is required to show products out of stock and/or downloadable products. Use only numbers without comas. |
Minimum rate |
Products having a rate below this value will not be shown. Select 'All products' to include unrated products. |
Minimum price |
If specified, only products with a price greater than this will be shown. Use only numbers without comas, spaces or dollar signs. |
Maximum price |
If specified, only products with a price less than this amount will be shown. Use only numbers without comas, spaces or dollar signs. |
Product ID filter |
Display a specific selection of products only. Selected products are shown in combination with Category and Manufacturer filters. |
Category ID filter |
Display products from specific categories only. Selected categories are shown in combination with Product and Manufacturer filters. Selecting a category automatically includes all the products on it regardless of manufacturer. |
Manufacturer ID filter |
Display products from specific manufacturers only. Selected manufacturers are shown in combination with Product and Category filters. Selecting a manufacturer automatically includes all its products regardless of category. |
Here are some usage examples:
To promote all products $50 or less on "Video" category:
Set minimum price to 0, maximum price to 50 and mark "Video" on category filter.
To promote all Sony products regardless of category:
Mark "Sony" on manufacturer filter.
To promote all Sony products on "DVD players" category only:
Mark "Sony" on manufacturer filter, and "DVD Players" on category filter.
Product Display Settings
After you decide what products you want to show, this section contains the parameters that rule how they should be presented to the customer.
Product rows |
Specifies how many product box rows to show. In our example above, this is set to 3. |
||||||||||||||
Product columns |
Specifies how many product box columns to show. In our example above, this is set to 2. |
||||||||||||||
Product pages |
A Page is built by rows and columns of products, if you choose to have more than one page then special effects are available to perform transitions between each one (See Advanced parameters section). |
||||||||||||||
Product show order |
Show products ordered randomly, by most recent, sales or available dates. |
||||||||||||||
Display Style |
Here you can decide the graphic style to show product boxes on the web browser:
|
||||||||||||||
Use colored rows? |
When grid mode is selected: Alternate row colors using Joomla styles. |
||||||||||||||
Template head code |
HTML code used at the top of Showcase module. |
||||||||||||||
Template product code |
HTML code used to display each product. |
||||||||||||||
Template foot code |
HTML code used at the end of Showcase module. |
||||||||||||||
Add-To-Cart button style |
Select how to display 'Add-To-Cart' when {form_addtocart} tag appears on browse template. |
||||||||||||||
Add-to-Cart image filename |
Image filename to show as Add-to-cart button. Will use VM default if none specified. Store your images on 'components/com_virtuemart/shop_image/ps_image' directory. |
||||||||||||||
Show Add-To-Cart quantity box? |
Display a quantity box when {form_addtocart} tag appears on browse template. Position is relative to button. |
||||||||||||||
Add-To-Cart mode |
Behaviour of Add to cart: 'Ajax' will add product to cart and allows to continue browsing. 'Go to cart' adds product to cart and opens shopping cart page after. |
||||||||||||||
Default quantity |
Default quantity for Add-to-cart button or box |
||||||||||||||
Date format |
Display format applied to date fields (if present). Uses same values as PHP 'date()' function, eg: default value of 'Y-m-d' will display like '2007-08-28' |
||||||||||||||
Custom thumbnail width |
Thumbnail width for automatic thumbnail creation (in pixels). Will use VM default if none specified. |
||||||||||||||
Custom thumbnail height |
Thumbnail height for automatic thumbnail creation (in pixels). Will use VM default if none specified. |
||||||||||||||
CSS class name for product box |
This CSS class will be assigned to each product box. Enter the class name only. |
||||||||||||||
Module Class Suffix |
A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling |
Advanced Parameters:
These parameters tweak certain functions of the module.
Enable mambots/Plugins? |
Enable Joomla! mambots/plugins in the template and information shown. |
Short description length |
If set greater than zero, product short descriptions will bu cut off if they are longer than this amount of characters. |
Transition delay |
The time between page transitions (in milliseconds). |
Transition duration |
The duration of the transition effects once it starts (in milliseconds). |
Side orientation |
When sliding transitions are used, this paremeter sets the initial flow orientation of the effect. The flow orientation can change if a user clicks on forward/backward buttons. |
Transition type |
Choose among different transition equations from the Moo library. |
Button position |
Select back/forward button location, if desired. |
Button style |
Choose a predefined button style graphic. Feel free to replace the included image files in the module directory to suit your needs. |
Product Templates
One of the most exciting features of the module is the ability to use custom templates to display product information.
A product template is a text file that contains tags identifying product properties and can also contain HTML, CSS and even Javascript code. Its purpose is to serve as a "template mask" to show each product box.
You can use one of the samples listed below or design your own template according to your needs, entering all data in the 'Template head', 'Template product' and 'Template foot' code parameters.
Here is how a simple body template could look: |
And this is how the product box will look: |
Template product code: < div style="border: 1px solid ">< img src="/{image_url}" border="0" />< br />{product_name}< br />{product_price}< /div> |
 Shovel $ 99.99 |
Lets examine each line:
The first line has HTML code to show an image, the URL for it is given by {product_thumb_image} tag, and ends in a line break.
The second line contains the {product_name} tag which will show the product's name.
The last line contains {product_price} tag which will show the product's price.
As you can see, by editing a template you can specify what product properties to show and how.
This is the complete list of available placeholder tags you can use:
{category_name} |
Displays the category of the product. |
{category_url} |
URL for the browse page of product's category. |
{form_addtocart} |
Display an "Add to cart" button, this can be further customized (see below). |
{full_image_height} |
Display full image height, useful when used along IMG tags. |
{full_image_width} |
Display full image width, useful when used along IMG tags. |
{image_url} |
Gives the filesystem path for product images |
{manufacturer_name} |
Show the manufacturer name of the product. |
{manufacturer_url} |
Show the manufacturer URL of the product. |
{product_adate} |
Product available date |
{product_availability} |
Product availability |
{product_cdate} |
Display a product's creation date |
{product_details...} |
Display default "More details..." text |
{product_flypage} |
Displays a URL to the product's flypage (detailed view) |
{product_full_image} |
Display the URL for a product full size image |
{product_height} |
Product height (includes unit of measure) |
{product_length} |
Product length (includes unit of measure) |
{product_mdate} |
Displays last time a product was modified/updated |
{product_name} |
The product's name |
{product_price} |
The product price. This takes into account the user shopper group and any discounts applicable. The result is shown using standard VM format |
{product_rating} |
Product rating as shown on VM |
{product_s_desc} |
Product short description |
{product_sku} |
Shows product SKU |
{product_stock} |
in stock available for product |
{product_thumb_image} |
Display the URL for a product thumbnail image |
{product_url} |
Product URL as entered |
{product_weight} |
Product weight (includes unit of measure) |
{product_width} |
Product width (includes unit of measure) |
{thumb_image_height} |
Display thumbnail image height, useful when used along IMG tags. |
{thumb_image_width} |
Display thumbnail image width, useful when used along IMG tags. |
Important Note:
Placeholder tags must be keyed in lower case and are valid only for template product code.
Here are more product template samples for your reference:
Template product code: < div style="border: 1px solid "{product_name}< |
Shovel
$ 99.99 Add to cart |
Template product code: < div style="border: 1px solid; background-color: #eeeeee; width: 150px; height: 220px; text-align: center;">{product_name}< |
Shovel
$ 99.99 Add to cart |
Template product code: < div style="border: 1px solid #e0e0e0; margin: 5px; padding: 5px; width: 155px; text-align: left; background-color: #ffffff;"> < div>< a title="Category browse page">< strong>On {category_name}< /strong>< /a>< /div> < div style="margin: 5px 0pt; height: 26px;">< a href="/{product_flypage}" title="Product name and product flypage link ">{product_name}< /a>< /div> < div style="height: 150px; text-align: center;">< a href="/{product_flypage}" title="Product page link">< img src="/{product_thumb_image}" border="0" alt="Product page link" title="Product page link" />< /a>< /div> < table border="0" cellspacing="0" cellpadding="0" width="100%"> < tbody> < tr> < td>{form_addtocart}< /td> < td style="font-size: 15px; color: #f47511; white-space: nowrap; text-align: right; padding-right: 7px; height: 33px; line-height: 33px;">$ 99.99< /td> < /tr> < /tbody> < /table> < /div> |
The Template head code and Template foot code apply HTML code to the header and footer of the whole module box, enabling you to design even more complex module layouts and designs. For example, by including an tag for a custom image, you can have the module display its own stylized header above the products.
Hint: It is possible to use CSS styling attributes within the tamplate but you might want to store them on Virtuemart's or your site's template CSS files instead.
Notes
Despite all the parameters and options available, the module is as "Virtuemart compliant" as possible, therefore it obeys certain VM internal rules, among them:
Uses current vendor's currency
Shows prices according to user shopper group
Obeys VM "Check Stock" flag
Obeys VM "Show out of stock items" flag
Use VM "Dynamic thumbnail creation" flag (if not overriden in module)
Obeys VM "Allow reviews" flag
Obeys VM "Show prices" flag
Uses VM price styling (e.g. show "call for price" when applicable)
Supports Virtuemart SEF extensions.
Here is a list of useful tips if you are having problems with the module:
If you want to have multiple copies of the module for different product displays at the same time you need only to create a copy of the module using the Joomla! module control panel, then setup each module copy with their own set of parameters.
Product filters such as Special, Discounted, available date, etc. work together using an 'AND' condition. That means if you choose to show Special and Discounted products, the module will attempt to display products that are both Special AND Discounted.
If the module does not show any products, check the following:
Make sure the module is published and assigned to the right menu section on your Joomla! control panel.
Make sure your products and categories are marked as published.
Make sure there are products that suit the selection criteria you specify on the module.
Make sure the template is properly coded and contains at least a valid placeholder tag.
Copyright © 2009 Monev Software LLC.
All Rights Reserved
www.joomlaxtc.com
