Author Topic: VM ProductSnapshot - Theory, Usage and CSS (complete guide with screenshots)  (Read 41092 times)

klutzon

  • Full Member
  • ***
  • Posts: 319
  • Knuckles the Echidna
    • Rage3D
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 (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.



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

blurose

  • Beginner
  • *
  • Posts: 8
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.   :-\

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10275
  • VirtueMart Version: 3+
You dont enter it into the html

, ALSO, it will not render on virtuemart pages
I do NOT do development work for hire.

blurose

  • Beginner
  • *
  • Posts: 8
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.  ???

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10275
  • VirtueMart Version: 3+
are you adding it to as content article, or a module like a footer?

I do NOT do development work for hire.

blurose

  • Beginner
  • *
  • Posts: 8
As content.  I have my Article written with one image.  Below that, I enter {product_snapshot:id=1} (to use it as seen in the third screenshot, I have the parameters set).
And I am doing it in an Article, not Category or Section, don't know if that makes a difference.

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10275
  • VirtueMart Version: 3+
Did you enable the plugin?

I do NOT do development work for hire.

blurose

  • Beginner
  • *
  • Posts: 8
Yes, I enabled both plugins.  Do you think that possibly my VM wasn't installed correctly?  Everything else seems to work fine, products entered, I use VirtueMart's Menu to show the products on the site, no problem, but this is the only other thing I can think of it so uninstall and re-install the program.  Or maybe my editor?  JCE 1.5.2

blurose

  • Beginner
  • *
  • Posts: 8
I guess I can finish my test site as is, however, VirtueMart doesn't have anywhere to add metatags and this is a concern for me, so I thought this would be a nice solution.  As well as I need to find out how to adjust the vertical spacing for products listed using VirtueMart and a few other things (which I'll do more research on myself). The way I have it set up now, the only pages used in Joomla are Home, Contact Us and About Us.  Pretty much everything else comes from Virtuemart.

I'm not shooting down the product_snapshot, I know it's something I'm doing wrong.  Kudos to those that do use it,BanquetTable.pro for replying and Klutzon for writing a detailed guide on it.


blurose

  • Beginner
  • *
  • Posts: 8
Okay, time for my "AHA" moment.  It's not so much that I was doing it wrong, I wasn't following through.  Because I wasn't seeing the information show when I clicked the 'page preview', I thought it wasn't going to show on the site.  I had to look at the published site to actually see the change.  I'm a happy camper now.  :)

Again, I do appreciate the help and hope that, if somebody else goes through the same thing they follow through and actually look at the site, not just the 'page preview'.

/DOING THE HAPPY DANCE \:D/

emagin

  • Beginner
  • *
  • Posts: 18
I assume it's not possible to show a list of products from a category ID right?
Is there a way to tweak it to it so that I can show products in CatID=x  dynamically?

a.fraile

  • Beginner
  • *
  • Posts: 7
VirtueMart's Special Plugins

These two plugins are designed to be used on the Joomla side of your site [...] the VM ExtendedSearch 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).

Hello,

Is the VM ExtendedSearch supposed to work with Joom!Fish in a multilingual site? I have this bilingual site, results are returned in the main language only. Not sure why the database query in it is not 'translated' by Joom!Fish (i.e. retrieving correponding translated records from jf_content table).

The database query seems compatible to me (see http://www.joomfish.net/en/documentation/developer-docs/64-compatible-query-construction). I have tried to LEFT JOIN the jf_content records in a manner similar to the VM hack for shop_browse_queries.php but it's buggy and it does not seem proper anyway.

Any help much appreciated.

MurphyLaw

  • Beginner
  • *
  • Posts: 7
Well, works fine - but:
i've made categories in Virtuemart itself.
In these categories i want to promote a special produkt via snapshot - taht doesnt work!! why?

Brienly09

  • Beginner
  • *
  • Posts: 8
    • of russian wifes
VM ProductSnapshot Theory Usage and CSS complete guide with screenshots
« Reply #13 on: December 17, 2009, 14:55:41 pm »
I need to test out OSA 2 setting to render a scene. I recall testing a hacked source OSA 2 before,  but I have not had that source build in a while. I recall it being bloodly fast and just enough OSA, but I realy dont want to have to figure out how to build source right now

sooo I ask. Can Python set the OSA to 2 and render? Thats all I need

matpal

  • Beginner
  • *
  • Posts: 1
Can someone please tell me how to change the size of the displayed thumbnails?  I've looked in the code and did not seem to find it.