VirtueMart 1.1.x [ Old version - no longer supported ] > Mambots, Plugins VM 1.1

VM ProductSnapshot - Theory, Usage and CSS (complete guide with screenshots)

(1/5) > >>

Hey guys,

I'm sorry you guys are having such a hard time with VMProductSnapshots. After seeing so many different threads about this, all asking different questions and seemingly going nowhere, I thought I'd post this guide, as complete as I could make it, to explain what VM ProductSnapshot is, how to use it, and how to style it.

VirtueMart's Special Plugins
When you download VirtueMart, you will get in the package the VirtueMart component, a set of 10 or so modules, and 2 plugins. These plugins are VM Product SnapShots ( and VM Extended Search ( (I am referring to the plugin versions that come in the latest package of VirtueMart 1.1.3, but the plugins for previous versions work similarly).

These two plugins are designed to be used on the Joomla side of your site, not inside VirtueMart. The VM ProductSnapshots allows you to display a product and whatever details that go with that product inside a Joomla article, while the VM Extended Search allows you to search for VirtueMart products using the Joomla search bar (because normally, the Joomla search bar will only search through Joomla content, and you'd need a separate VirtueMart search bar to look for products on your site).

To install these plugins, you use the standard Extensions -> Install/Uninstall feature of Joomla. Once they're installed, you will need to enable them (in case they are not already enabled upon install) before you can use them, because if they're disabled then obviously Joomla will not include their functionality site wide. To do this, go to Extensions -> Plugin Manager, find the "VirtueMart Product Snapshot" and / or the "VirtueMart Extended Search Plugin" rows in the list, and enable them by clicking on the red circle with the x in it to turn it into a green tick (this will enable them).

How to use VM ProductSnapshot
To use the VM ProductSnapshot, open the Joomla article which you want to add the product details to and, as the "VM ProductSnapshot usage" thread, place the following HTML code in the article content area:


Look at the "VM ProductSnapshot usage" thread for the meaning of each variable available to you:

Let's use this as an example:


By placing this code into the Joomla article, you are telling it to display in the article on the front end the product name, product image and product price, and you identify the product by it's id. If you added "showdesc=y" to the string, it would show the product description, and so on and so forth. One thing you should remember is that it will show this information in the order that you coded them, so you can rearrange things when you feel the need to.

This code gives you the means to customize each usage of product_snapshot, meaning you can use some parameters in one line of product_snapshot and different parameters for the next. You also have access to these same parameters in the plugin's settings page (go to Extensions -> Plugin Manager and click on "VirtueMart Product Snapshot"). Using the parameters in the plugin settings will over-ride your customized code wherever you've used it in your Joomla article, but if you want all your products to show in Joomla articles using the same parameters, then setting the parameters in the plugin will make sure every instance of product_snapshot will look the same.

If you choose to use the plugin settings as oppose to your own, all you have to do is type {product_snapshot:id=x} where x is the id of your product, and the plugin will take care of the rest.


product_snapshot with customized parameters -

product_snapshot using plugin (parameters off) -

product_snapshot using plugin (parameters on) -

Styling VM ProductSnapshot
The default construct that the code builds whenever you use product_snapshot is as such:

It creates a table with a class of "productsnap", and in that table it will display as many table cells as you have parameters in your product_snapshop code. so in the above example, there are three parameters, so there will be three cells, each displaying what they've been assigned to, and each with their own class.

That should give you enough flexibility with CSS to manage quite well if you want to style the results yourself. But if you feel the need to customize the construct further, maybe replace the table and table cells with divs instead, you could edit the template that the plugin uses to display the table the product details go in. Inside your Joomla site directory, look in the "plugins" folder for vmproductsnapshots.php, and if you know what you're doing, you can easily include CSS-friendly code into the template that will further help you style how it comes out looking.

I hope this helps, if there's anything I left out or anything you don't understand, please ask. :)

This is exactly what I was looking for however, I have a problem with entering the code.  When I do, it only shows the code, it doesn't show the product.  I am entering it in HTML.
I am using:
Joomla 1.5.9
JCE 1.5.2
Virtuemart 1.1.3
VirtueMart Product Snapshot = enabled
VirtueMart Extended Search Plugin = enabled

Any help with this would be greatly appreciated since I've been looking for the answer for 2 days now.   :-\

You dont enter it into the html

, ALSO, it will not render on virtuemart pages

Okay, color me stupid.  I should have said that I've tried entering it HTML and in the body of my Article.  Either way I'm only getting the code, nothing else.  I've tried it several times in IE7 and Firefox3 and I know there is something I'm doing wrong, I just don't know WHAT I'm doing wrong here.  ???

are you adding it to as content article, or a module like a footer?


[0] Message Index

[#] Next page

Go to full version