Help is on the way!

Browse our Documentation, Search the Knowledge Base, Still need help? Send us a support ticket.

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
Module title
Product box Product box
Product box Product box
Product box Product 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:



Floating boxes

Will fit the module box area with product boxes even when the browser window is stretched to a different size.

Grid

Displays products on a Grid (rows by columns) manner.

Numbered list

Show products in a vertically numbered list

Bullet list

Show products in a vertically list with bullet markers

Vertical slider

Available when multiple pages are used, applies a vertical sliding transition effect between pages

Horizontal slider

Available when multiple pages are used, applies a horizontal sliding transition effect between pages

Fader

Available when multiple pages are used, applies a fade transition effect between pages


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}<
<< a title="Links to Virtuemart product details page">< img src="/{image_url}" border="0" /><< /a><
{product_price}<
{form_addtocart}< /div>

Shovel

$ 99.99
Add to cart

This template shows contents within a 'DIV' block of 150 by 220 pixels. This is optional for table layouts, but having a fixed box size is required for "floating boxes" layout to work properly. In any case, feel free to explore design combinations as you wish!

Template product code:


< div style="border: 1px solid; background-color: #eeeeee; width: 150px; height: 220px; text-align: center;">{product_name}<
< img src="/{image_url}" border="0" />< br />{product_price}< br />{form_addtocart}< /div>

Shovel

$ 99.99
Add to cart

As you can see, you can include all sorts of complex designs in yout template!

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>

On Category name:
Add to cart $ 99.99

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

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET