Help is on the way!

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

Description

The perfect companion for Virtuemart, Virtuemart Product Wall takes your online store to a whole new level!

Entice your customers by showcasing products in a myriad ways using pre-made templates or apply your own custom HTML and CSS to display product images, information and add to cart forms. Set your own selection criteria to build custom product layouts, Top sellers lists, Featured products, Product banners and more. Product can be shown in rows, columns and grids with one or more pages as well as special animation effects for page transitions.

Among its features are:

• Unlimited products support
• Supports multiple module copies with different configurations
• Arrange products in columns, rows and grids with one or more pages
• 42 button sets included
• 4 pre-made templates to get you started!
• 1 handy reference template
• 35 data tags to display information including image, price, Add-to-cart form and more
• Configurable date/time and size displays
• Display Parent, Children or both product types
• Enable or disable display of products on current category only
• Filter products by manufacturer
• Use global filtering options for product selection or set specific products
• Selectable Discount product filter
• Selectable "products with image" filter
• Display current or future available products
• Optional "minimum stock" product filter
• Optional Product rating filter with multiple values
• Custom product description lengths
• Custom product image size independent from Virtuemart
• Minimum and Maximum price filtering
• 5 sort options with ascending and descending modes
• JXTC Showcase Library for Sliders, Tooltips, Pop-ups and more animation effects.
• 100% Joomla Moo compatible effects.
• customizable Main and More Area HTML/CSS templates

Installation

Install the module using the regular Joomla! extension installer.

Configuration

The module can be customized using the standard Joomla! Module Manager.

Parameters are divided in two main sections: The Module Parameters section defines what data will be shown and how it should be presented. The Advanced Parameters allows you to configure the special effects and animations, if any were used. These parameters won't affect the data, but they can affect their display form.

To access these parameters go to the module manager and select the VM Product Wall Module

Module Parameters

Module parametersUse these parameters to customize the standard presentation of the module

 
SELECTION PARAMETERS - Use these parameters to select what products to show:

Category ID filter Use this parameter to select products from selected categories or all categories
Parents and Childs? Select to display parent, children or both types of products
Current category only? Use this parameter to display products from the category being shown
Manufacturer ID filter Use this parameter to filter the products by manufacturer
Current manufacturers only? Use this parameter to display products from the manufacturer currently being shown
Product ID filter Selecting specific products to show (works along the other filters)
Special products only? Enable this parameter to show only "Special" products
Discounted products only? Enable if you want to show only products with a discount
With image only? Enable if you want to show only products with an image
Availability filter Filter according to the availability of the product
Minimum stock Select the minimum number of products on stock
Minimum rate Select the minimum rating of product
Minimum price Select the minimum price of products
Maximum price Select the maximum price of products
Sort field Sorting criteria.
 
DISPLAY PARAMETERS - Use these parameters to customize the layout of the module box. The layout consists of a grid made up with one or more pages of pictures organized in rows and/or columns.

Columns Number of columns to show.
Rows Number of rows to show.
Pages Number of pages to show. Transition effects are enabled between page changes.
Display Style Special effects applied to the layout. Window modes work with one page only, all others require multiple pages of content to perform transitions between them.
Window Width Width (in pixels) of the window frame when using a Window special effect.
Window Height Height (in pixels) of the window frame when using a Window special effect.
Transition pause Pause time between page transitions in milliseconds. A value of -1 disables automatic transitions. Default value is: 4000.
Transition duration Page transition effect duration in milliseconds (default: 1500).
Slide orientation Slide transition orientation.
Transition type Transition animation type.
Transition Ease mode Ease in - Ease out - Ease in out

MODULE DISPLAY CONFIGURATION
- Use this parameters to define who you want to display the module.

Button Style Button graphic set to use when buttons tags are enabled.
Template To select one of our predesigned template. NOTE: Select -None selected- if want to use Module HTML template and Main Content HTML template fields.
Module HTML template HTML/CSS code to display the overall module box. You can embed any of the following tags:
{leftbutton} Draws a "Left/Back/Previous" button.
{mainarea} This tag draws the main layout area block, including the special effects.
{pages} Displays a numbered page list for quick browsing.
{rightbutton} Draws a "Right/Forward/Next" button.
Main Content HTML template HTML/CSS code to display each item. You can embed any of the following tags to display article information:
{category_description} This tag will show the description of the category that you set it on VirtueMart removing all the html tags
{category_name} Use this tag to show the name of the category that contains the product
{category_url} This tag will show the url to the category that contains the product show on the module.
{description} This tag will show the description of the product as you set it on VirtueMart
{form_addtocart} This tag will show the "Add to cart button" that you can see on the VirtueMart product page.
{manufacturer_name} Will show the name of the manufacturer of the product
{manufacturer_url} This tag will be converted on the VirtueMart url to the manufacturer of the product.
{product_adate d-m-Y} This tag will show the product available date in format d-m-Y, notice that you can change d-m-Y for the format that you want
{product_adate} This tag will show the product available date.
{product_availability_url} Using this tag you will get the url to the image that corresponds to the availabity of the product.
{product_availability} Use this tag to show the image corresponding to the availabity of the product.
{product_cdate d-m-Y} Use this tag to show the creation date of the product in format d-m-Y, notice that you can change d-m-Y for the format that you want
{product_cdate} Use this tag to show the creation date of the product.
{product_flypage} This tag will be transformed on the url to the details of the product
{product_full_image_url} Using this tag you will get the url to the first image that you set on the product.
{product_full_image} Using this tag you will get the first image that you set on the product on his original size.
{product_height} Shows the product height.
{product_image} Using this tag you will get the first image that you set on the product on the size that you set using the parameters of the module.
{product_length} Shows the product length.
{product_mdate d-m-Y} This tag will show the modification date of the product in format d-m-Y, notice that you can change d-m-Y for the format that you want.
{product_mdate} This tag will show the modification date of the product.
{product_name} Use this tag to show the name of the product
{product_price} Use to show the price of the product.
{product_rating_raw} Using this tag you will get only the value of the rating.
{product_rating} Using this tag you will get the rating as you can see it on VirtueMart.
{product_s_desc} Use this tag to show the product short description as you set it on VirtueMart.
{product_sku} This tag will show the SKU product of the product
{product_stock} This tag will show the number of products on stock.
{product_thumb_image_url} This tag will return the url to the thumbnail of the first image set on the module.
{product_thumb_image} This tag will return the first image that you set on the product details.
{product_url} This tag will show the url that you set on the product details
{product_weight} Shows the product weight.
{product_width} Shows the product width.
{raw_base_price (number format)} Display raw product base price value with optional formatting,
Number format is: prefix string|thousand separator character|decimal character|suffix
For example: $|,|.| Dollars
{raw_base_price_variant (number format)} Display raw product variant price value with optional formatting.
{raw_base_price_with_tax (number format)} Display raw product price with tax value with optional formatting.
{raw_category_description} This tag will show the description of the category as you set it on VirtueMart
{raw_description} This tag will show only the text of the description of the product that you set it on VirtueMart
{raw_discount_amount (number format)} Display raw product discount amount with optional formatting.
{raw_discounted_price_without_tax (number format)} Display raw product discounted price with optional formatting.
{raw_price_without_tax (number format)} Display raw product untaxed price with optional formatting.
{raw_product_height (number format)} Display raw product height value with optional formatting.
{raw_product_length (number format)} Display raw product length value with optional formatting.
{raw_product_price_raw (number format)} Display raw product price value with optional formatting.
{raw_product_weight (number format)} Display raw product weight value with optional formatting.
{raw_product_width (number format)} Display raw product width value with optional formatting.
{raw_sales_price (number format)} Display raw product sales price value with optional formatting.
{raw_sales_price_with_discount (number format)} Display raw product sales discounted price value with optional formatting.
{raw_tax_amount (number format)} Display raw product tax amount value with optional formatting.
Short description length Maximum length of {title} tag. Empty = no limit.
Show Add-To-Cart quantity box? Select if want show the "Add to cart" quantity box and his position.
Default quantity Select the value that will be set as default on the Add to cart quantity box
Max. description suffix Suffix to show when trimming description text.
Custom image width Select the width of the image show when you use the {product_image} tag
Custom image height Select the height of the image show when you use the {product_image} tag
Date format Date format (using PHP date function). Default is: Y-m-d
Module Class Suffix A suffix to be applied to the CSS class of the module.
 
Advanced Parameters

Module advanced parameters These parameters control the behavior of special content effects, please read the next section for more information about content effects and how to apply them.

 
Z layer Define the z-index layer to use for the special effect content.

Tooltip / Pop-Up FX Settings - Use these parameters to customize the Tooltip and Pop-Up effects:

In Opacity The opacity of the tooltip/pop-up when the mouse enters the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments.
Out Opacity The opacity of the tooltip/pop-up when the mouse leaves the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments.
In Animation Vertical The distance the tooltip/pop-up will move vertically (in pixels) when the mouse enters the trigger zone.
Out Animation Vertical The distance the tooltip/pop-up will move vertically (in pixels) when the mouse leaves the trigger zone.
In Animation Horizontal The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse enters the trigger zone.
Out Animation Horizontal The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse leaves the trigger zone.
Fade-in Duration The duration of the "In" animation when the mouse pointer enters the trigger zone (in milliseconds).
Fade-Out duration The duration of the "Out" animation when mouse pointer leaves the trigger zone (in milliseconds).
Pause The time the tooltip/pop-up will be shown between the "In" animation and the "Out" animation (in milliseconds).
Tooltip animation mode Select one of the many Moo functions to perform animations.
Tooltip / Popup ease mode The transition type. All transitions, except for "linear" transition, can be combined with a "Transition Ease".
Centered Popup Set this to "Yes" if you want pop-up effect displays to appear centered in the browser window.

Slide FX Settings
- These parameters control the "Slide" content effect:

Sliding Panels Settings Choose an animation style from the list.
Note: The following Settings are used ONLY when Slide Panels Settings is set to CUSTOM:
Slide Panel X in The distance (in pixels) from the left trigger zone border that the slide panel will go to when the mouse enters the trigger zone.
Slide Panel X out The distance (in pixels) from the left trigger zone border that the slide panel will go to when the mouse leaves the trigger zone.
Slide Panel Y in The distance (in pixels) from the top trigger zone border that the slide panel will go to when the mouse enters the trigger zone.
Slide Panel Y out The distance (in pixels) from the top trigger zone border that the slide panel will go to when the mouse leaves the trigger zone.
Slide animation mode Select one of the many Moo functions to animate the slide effects.
Slide ease mode Choose how to apply the animation effect. This setting is not used when "Slide Animation Mode" is set to Linear.
Frames per Second The frames per second used to animate the effect. Note: Using a high value in a heavy site could decrease the video performance. Combine this setting with "Frame Duration" to get a smooth effect.
Fame Duration The time (in milliseconds) the duration will last.

Hover FX Settings
- These Parameters Control the Hover Effect:

Hover Effect in Color The background color that will fade in when mouse enter the element with class="js_hover".
Hover Effect Out Color The background color that will fade out when mouse leaves the element with class="js_hover".
 
Special Effects

Besides the page transition effects, you can also include additional effects that apply to the content of each item. By adding certain CSS tags to your HTML code and organizing the layout of content, these effects allow you to build fully customizable tooltips, pop-ups and slide effects. Since all the content data tags are available on these effects as well, you can elaborate the display of your content as much as you want!

Keep in mind however, that with great power comes great responsibility: the HTML of both zones is still part of the HTML code of your page; if your HTML/CSS code has a bug, it may affect how other parts of your site look and work.

Content effects are activated by the user's mouse pointer but with subtle differences. How you can implement each effect and how they are activated is explained below:

Tooltips

A Tooltip will appear automatically when the mouse pointer hovers over a specific "trigger zone", this example code explains better how to use the necessary tags:

Code Sample

 

Sample Effect

 

This is the tooltip trigger zone
This is the tooltip content
This is the tooltip trigger zone
This is the tooltip content

Upon display, this code will show the "This is the tooltip trigger zone" legend by itself, but if you move the mouse pointer over it, a tooltip will come up displaying the "This is the tooltip content" legend. Each zone is wrapped within a tag, you must use the CSS tags "jxtctooltip" and "tip" as shown to make the effect work.

Pop-ups

A pop-up will appear when the user clicks on the "trigger zone", the Pop-up zone has its own Close and Drag buttons. This example code shows the necessary CSS tags in use:

Code Sample

 

Sample Effect

 

This is the pop-up trigger zone
This is the pop-up content
This is the pop-up trigger zone
This is the pop-up content

The trigger zone is made with the contents of the div with class "popuphover", and the pop-up content is hidden in the div with class "pop", it will be shown when the user clicks on the trigger zone.

Slides

Slides are useful to display content in different layers, for example imagine a picture with a footnote that expands to show a full description. Different than Tooltips or Pop-ups, Slides do not use a trigger zone, they react to mouse pointer over their own zones. This is an example code:

Code Sample

 

Sample Effect

 

This is the content zone
This is the slide content zone
This is the content zone
This is the slide content zone

Again, the container zone inside the div with CSS class "slidebox" will be shown first, and the contents of the slide on div "slidepanel" will be shown when the mouse hovers its zone.

Hover

The Hover is useful when you want to focus on specific zone of the content, for example a "clickable" zone that looks similar to other content, an image or name that want to highlight. Similar to Slides, they react to mouse pointer over their own zones and does not need a trigger zone. This is an example code:

Code Sample

 

Sample Effect

 

This is the content zone
The content with highlight
This is the rest of content zone
            
This is the content zone
The content with highlight
This is the rest of content zone

Once the mouse is over the js_hover zone the color will change automatically. As you can see this is the easier effect but provide you the power to catch the attention of your visitors.

Styling

As previously explained, the content is rendered in a grid fashion with one or more rows and columns and one or more pages, each page represents a single grid. Each cell in a grid contains the template code for one item with the placeholder tags translated to their corresponding data element such as titles, descriptions, images, etc.

In order to ease the visual styling of the grids, there are certain common CSS classes added to the HTML code for your convenience. You can put hard-coded CSS styling in the XTS template fields directly, but you may find using your template's CSS file a better option.

If you can't or don't want to alter your main CSS file, you can put any CSS code needed in the module's own file: css/wall.css. This file is located inside the module folder.

This is a brief explanation on how the HTML and classes are applied:

Each page in the module output is made with an HTML tag; the first table has CSS class firstpage, any inner pages have class centerpage and the last page has class lastpage. If there is only one page then it has class singlepage.

Each row within a table also has similar classes added to it: firstrow for the top row in the table, centerrow for any middle rows and lastrow for the bottom row of content. In the event that only a single row is used, it will have class singlerow assigned to it. These classes are repeated for as many tables (pages) are in the module output.

Likewise, columns also have similar tags: the left-most column has firstcol, the right-most column has lastcol and any middle column has centercol. Single columns have, you guessed it, singlecol. These classes are also applied on all pages shown.

Buttons also have extra CSS classes: prevbutton and nextbutton apply to the tags for each page change button. Page number buttons have tags as well: firstbutton, middlebutton, lastbutton and centerbutton.

You can have a common set of CSS styling code for these tags in your template's CSS file to maintain a consistent appearance on any modules being shown, or you can use them in combination with the module CSS class parameter to define specific styling for a particular module.

With these many options, the styling possibilities are unlimited! You are in total control of how the content will be shown in your site, just let the module handle the content gathering for you.

Video Tutorial

Copyright 2011 Monev Software LLC 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