Product List with Quick View of Product Details

[ferdzpalaspas]

Hi,

im searched in google a plugin or a hack that will show the Product Details in lightbox,modal or fancybox or any script that will show a pop up but no luck..

can anyone please post the instruction on how to do this or link of a plugin..

tnx in advance..

[bytelord]

Hello,
Check that post: http://forum.virtuemart.net/index.php?topic=105972.0

Regards

[ferdzpalaspas]

hi,

thank you for your reply,but the link that you post doesn't have any link of tutorial or plugin that i can use..

any other help please?

tnx!

[bytelord]

did you actually try it?

-**removed**

Also change your link to products to open in lightbox. Take a look here: http://forum.virtuemart.net/index.php?topic=95686.0

Regards

[ferdzpalaspas]

Hi,

i already try the code that you post.but i don't know how/what to add a code in category page to show the product details in pop up window..

please check this link on how my client want to have in her website: http://www.modcloth.com/shop/clothing (please click the "QUick Look" in Product Image)

[bytelord]

Hello again,

Ok, i build one for you ...

Please do the follow:

If you have not already a template override for category view please create one by simple copy  the file default.php from joomla_folder\components\com_virtuemart\views\category\tmpl\default.php
to joomla_folder\templates\your_joomla_Template\html\com_virtuemart\category\default.php
*Create the folders if doesn't exist.

Edit your new file and around line 312 you will find the following code:

Code Select Expand

<?php // Product Details Button
echo JHTML::link ($product->link, JText::_ ('COM_VIRTUEMART_PRODUCT_DETAILS'), array('title' => $product->product_name, 'class' => 'product-details'));
?>

Replace it with:

Code Select Expand

<?php //New Product details button -> open product details page in modal
    $url = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id . '&tmpl=component');
?>
<a class="modal product-details" rel="{handler: 'iframe', size: {x: 700, y: 550}}" href="<?php echo $url ?>"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DETAILS') ?></a>

This code will create a new button for product details page that will open in modal (pop up) the product details page as you wish. If now you want to create a new layer button that comes on mouser over of the image you have to use also some CSS and javascipt maybe.

This is an example for everyone else want to use it ...

Some more information regarding template system and template overrides:
Template overrides: http://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Regards

[ferdzpalaspas]

Hi,

its working!!! 

you helped two in a row..

thank you thank you thank you very much!!! 

[bytelord]

You are welcome

Good luck on your project

[csimmo]

Thank you very much. This was very helpful. How do you link images to it to? I have tried to do it on my own with no success. Here is the original code I have:

<a href="<?php echo $product->link; ?>">                <?php /** @todo make image popup */                echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',false);                ?>                </a>                <h2 class="category-view"><?php echo JHTML::link($product->link, $product->product_name); ?></h2>

[bytelord]

Use as follows:

Code Select Expand

<?php //New link for image popup
    $url = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id . '&tmpl=component');
?>

<a class="modal product-details" rel="{handler: 'iframe', size: {x: 700, y: 550}}" href="<?php echo $url ?>">
      <?php /** @todo make image popup */
             echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',false);
       ?>
</a>

<h2 class="category-view"><?php echo JHTML::link($product->link, $product->product_name); ?></h2>

Never tested and please test...

Regards

[manifigueroa]

This worked for me also, except now the link to cart ("show cart" in facebox) opens also in the lightbox. Anyway I can make it open in the original category window? Just as the sample the other user provided: http://forum.virtuemart.net/index.php?topic=109953.0

[liquid.ideas]

ByteLord you are an absolute honey, thank you!! Any chance of keeping the format the same as the joomla template?

[MasterDKLB]

Thank you guys for this useful support.

I tried that, and it opens the product details in popup like described, however if i try add to card or go back or whatever button, it loads the whole site inside the popup.

Am i doing something wrong here?

[J3DI13]

Hi there guys

Im running VM 2.0.20b and J2.5.11

I seem to be having the same issue as MasterDKLB, I can add the products to the cart but when i click on "Go back to Shopping" button then the entire site is displayed in the lightbox.

Any help would be very much appreciated.

Thanks

Edit: Stated the wrong user ... 

[Maxim Pishnyak]

Link?