The easiest way to show a product in a joomla content page or in a joomla module, consists in enabling the vmproductsnapshots plugin in the Joomla Plugin Manager. If you want to show product with id=24 in the article, you need to enter the following tag:
{product_snapshot:id=24}
If you want to show products with id=24, id=25, and id=26, you need to enter the following tag in the content:
{product_snapshot:id=24|25|26}
You can use the following options to customize the display of the product snapshots:
{product_snapshot:id=XX,showname=y|n,showimage=y|n,showprice=y|n,
showdesc=y|n,showaddtocart=y|n,displayeach=h|v,displaylist=v|h,
width=90%,border=0,style=color:black;align:left}
Plugin download: http://dev.virtuemart.net/projects/virtuemart/files
Update Tutorial:
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 (vmproductsnapshots_1.1.3.j15.zip) and VM Extended Search (vmxsearch_1.1.3.j15.zip). (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:
{product_snapshot:id=XX,showname=y|n,showimage=y|n,showprice=y|n,showdesc=y|n,showaddtocart=y|n,displayeach=h,displaylist=v,width=90%,border=0,style=color:black;,align=left}
Look at the "VM ProductSnapshot usage" thread for the meaning of each variable available to you: http://forum.virtuemart.net/index.php?topic=39493.0
Let's use this as an example:
{product_snapshot:id=7,showname=y,showimage=y,showprice=y}
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.
Note:
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.
Screenshots:
product_snapshot with customized parameters - http://i108.photobucket.com/albums/n24/klutzon/vmps_1.gif
product_snapshot using plugin (parameters off) - http://i108.photobucket.com/albums/n24/klutzon/vmps_2.gif
product_snapshot using plugin (parameters on) - http://i108.photobucket.com/albums/n24/klutzon/vmps_3.gif
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.
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 (vmproductsnapshots_1.1.3.j15.zip) and VM Extended Search (vmxsearch_1.1.3.j15.zip). (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:
{product_snapshot:id=XX,showname=y|n,showimage=y|n,showprice=y|n,showdesc=y|n,showaddtocart=y|n,displayeach=h,displaylist=v,width=90%,border=0,style=color:black;,align=left}
Look at the "VM ProductSnapshot usage" thread for the meaning of each variable available to you: http://forum.virtuemart.net/index.php?topic=39493.0
Let's use this as an example:
{product_snapshot:id=7,showname=y,showimage=y,showprice=y}
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.
Note:
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.
Screenshots:
product_snapshot with customized parameters - http://i108.photobucket.com/albums/n24/klutzon/vmps_1.gif
product_snapshot using plugin (parameters off) - http://i108.photobucket.com/albums/n24/klutzon/vmps_2.gif
product_snapshot using plugin (parameters on) - http://i108.photobucket.com/albums/n24/klutzon/vmps_3.gif
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.
No comments:
Post a Comment