VirtueMart Forum

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..

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

Regards

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!

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

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)

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:

<?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:

<?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

Hi,

its working!!!  :D :D :D :D :D

you helped two in a row..

thank you thank you thank you very much!!!  ;D ;D ;D

You are welcome :)

Good luck on your project

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>

Use as follows:


<?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

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

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

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?

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 ...  ;D

Link?

Hi Maxim

Thanks for the quick response. Below is the link to the dev site for my client.

http://tayloredwright.com/nortech1/index.php/buy/traffic.html (http://tayloredwright.com/nortech1/index.php/buy/traffic.html)

once you have the lightbox open the "Return to Shopping" button is on the top right of the lightbox.

Many thanks

In my browser (Firefox) everything is ok.

Could you post screen shot with your issue?

Hi Maxim

I have attached a screen shot and for interest sake i am using Chrome Version 28.0.1500.72 m (The latest version according to Google) but this happens on IE9, Firefox 22.0 aswell.

You will see on the lightbox issue button.jpg that is the button that brings the site up in a lightbox
and the lightbox issue.jpg is what happens when i select the button.

Hope this helps

[attachment cleanup by admin]

It could be issue with your template, overloaded by js scripts, or special structure of category page template override.

You could ask template author about support.

Ok Thanks for your help Maxim, i will look into that.

Thought I had figured this out using fancybox

BUT:-

The mod_virteumart_cart does not update until page is refreshed

Same problem when using the solution posted

<?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>


Using fancybox

1. Created new category override in template/html/category
2. added following code



$quikview = "

jQuery(document).ready(function($) {
$('a.quikview').fancybox({
type: 'iframe'

}); 
return false;
});
";

$document->addScriptDeclaration ($quikview);


And the display of a link:-


<?php
$quikview_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="quikview" rel="nofollow" href="<?php echo $quikview_url ?>">
     quick view
</a>



Has anyone got any suggestions??

Ever so friendly bump  :)

Maxim

Any ideas, I cannot give a live link as this is all being done on a local test server

My bad, Hutson. I didn't even try to understand what is going wrong.

Probably to links "Continue Shopping" and "Show Cart" should be attached one more time "close iframe" command.

What command closes this popup box in VM?

Hi Hutson,

If you go to: components/com_virtuemart/views/cart/tmpl/mini_cart.php

change this:

<a href="<?php echo $this->continue_link; ?>"><?php echo JText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') ?></a>

to:
<a target="_parent" href="<?php echo $this->continue_link; ?>"><?php echo JText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') ?></a>

;)

Liquid

Thanks for the response,  my response below is not in anyway trying to be negative about your suggestion, I can see your thinking and it certainly does update the cart and may be useful for someone out there!

I use fancybox so:-
Using fancybox for the "add to cart" so changing views/cart/tmpl/padded.php


echo '<a class="continue" target="_parent" href="' . $this->continue_link . '" >' . JText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';



However this has some pretty big problems:-

1. The user has to click the continue-shopping button, the page refreshes (as per code) and the view jumps back to top of page so lots more scrolling required and disorientating for customers
2. If the click the close frame, the cart is left unrefreshed
3. I reduce the time for fancybox popup so they click the "x" frame


And a page refresh seems somewhat excessive to just update a line in the cart_module

Anyone one got the way to get the ajax from the iframe to update the cart module?

Quote from: Hutson on July 30, 2013, 18:57:26 PM
1. The user has to click the continue-shopping button, the page refreshes (as per code) and the view jumps back to top of page so lots more scrolling required and disorientating for customers
2. If the click the close frame, the cart is left unrefreshed

1. Firefox able to scroll back page to its last position after refresh.
2. For such web 2.0 style web shop I would just create menu item "Cart" and get rid of VM cart module. Lesser time of loading web page without cart module. Faster browsing with Quick product viewing would look enough cool.

Thanx for your solution, Hutson.