Image change on mouseover product (joomla3.9.x + virturemart3.8.x)

[teedesign]

Image change on mouseover product (joomla3.9.x + virturemart3.8.x)

1.go to components\com_virtuemart\views\category\view.html.php   

find

Code Select Expand

$imgAmount = VmConfig::get('prodimg_browse',1);
Place

Code Select Expand

$imgAmount = VmConfig::get('prodimg_browse',2);



2. after go to templates\your_template\html\com_virtuemart\sublayouts\products.php
find

Code Select Expand

<?php echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false); ?>

Place

Code Select Expand

<?php if(isset($product->images[0]) && isset($product->images[1])){ ?>

<img src="<?php echo $product->images[0]->file_url; ?>" onmouseover="this.src='<?php echo $product->images[1]->file_url; ?>'" onmouseout="this.src='<?php echo $product->images[0]->file_url; ?>'">
<?php }elseif(isset($product->images[0]) && !isset($product->images[1]))  { 
 echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                } ?>

Enjoy it.

[modernmagic]

I have swapped your code but it is not working.

Here is an example category page:  https://new.retaildisplayusa.com/wall-displays/outriggers/burnside
I attached a screenshot of the product having 2 images.

In public_html/components/com_virtuemart/views/category/view.html.php
I changed it to:

Code Select Expand

$imgAmount = VmConfig::get('prodimg_browse',2);

In /public_html/templates/ja_autoshop/html/com_virtuemart/sublayouts/products.php
I found the image code here:

Code Select Expand

// Show Products ?>
<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . $show_vertical_separator ?>">
<div class="spacer product-container" data-vm="product-container">
<div class="vm-product-media-container">

<a title="<?php echo $product->product_name ?>" href="<?php echo JRoute::_($product->link.$ItemidStr); ?>">
<?php
echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
?>
</a>

So it now looks like this:

Code Select Expand

// Show Products ?>
<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . $show_vertical_separator ?>">
<div class="spacer product-container" data-vm="product-container">
<div class="vm-product-media-container">

<a title="<?php echo $product->product_name ?>" href="<?php echo JRoute::_($product->link.$ItemidStr); ?>">
<?php if(isset($product->images[0]) && isset($product->images[1])){ ?>

<img src="<?php echo $product->images[0]->file_url; ?>" onmouseover="this.src='<?php echo $product->images[1]->file_url; ?>'" onmouseout="this.src='<?php echo $product->images[0]->file_url; ?>'">
<?php }elseif(isset($product->images[0]) && !isset($product->images[1]))  { 
 echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                } ?>
</a>

The site is j4.2.9 and VM 4.0.12

Can you please help me figure out how to make the 2 product images swap on hover?

[GJC Web Design]

try $imgAmount = 2;  instead of call the config which may have a setting for 1

[modernmagic]

Thank you for the reply but if I did it correctly, changing:
$imgAmount = VmConfig::get('prodimg_browse',2);
to
$imgAmount = 2;

Didn't work either.

I have attached the 2 files if you have a chance to test them more.

Do you have this swapping image code working on a site using VM4?

[GJC Web Design]

echo out your $product->images and see what is there

print 'Debug Line '.__LINE__.' $product->images <pre>'; print_r ($product->images); print "</pre><br />\n";

[Studio 42]

Manually add in the config file prodimg_browse=2
File is fYOURJOOMLASITE/administrator/components/com_virtuemart/virtuemart.cfg
After this, go to virtuemart config and save it and you should have now 2 images per product in the categories

[modernmagic]

Manually add in the config file prodimg_browse=2
File is fYOURJOOMLASITE/administrator/components/com_virtuemart/virtuemart.cfg
After this, go to virtuemart config and save it and you should have now 2 images per product in the categories

The products already have 2 images:  https://new.retaildisplayusa.com/wall-displays/outriggers/burnside/burnside-upright-outrigger-extension-detail

I made your changes but they had no effect. 

[modernmagic]

echo out your $product->images and see what is there

print 'Debug Line '.__LINE__.' $product->images <pre>'; print_r ($product->images); print "</pre><br />\n";

Iplaccedthis line in /templates/ja_autoshop/html/com_virtuemart/sublayouts/products.php

Code Select Expand

<?php print 'Debug Line '.__LINE__.' $product->images <pre>'; print_r ($product->images); print "</pre><br />\n"; ?>

Nothing new is displayed on: https://new.retaildisplayusa.com/wall-displays/outriggers/burnside

[GJC Web Design]

you must be in the wrong file then .. does your template even use a sublayout for the products?

[jenkinhill]

Could be a bootstrap3 template, in which case should it be bs3-products.php ?

[modernmagic]

you must be in the wrong file then .. does your template even use a sublayout for the products?

It does not appear that this site is using sublayouts. 

This menu item: https://new.retaildisplayusa.com/wall-displays/outriggers/burnside
Is using:
Menu / Virtuemart / Category Layout
and Sublayouts for products in category is set to No override

The template is: T3 FrameworkVersion:3.1.3 which uses Bootstrap 3.

[modernmagic]

Could be a bootstrap3 template, in which case should it be bs3-products.php ?

I did not find any lines in /components/com_virtuemart/views/category/tmpl/bs3-default.php OR /templates/ja_autoshop/html/com_virtuemart/category/bs3-default.php regarding "images".

[jenkinhill]

Wrong file. Try /components/com_virtuemart/sublayouts/bs3-default.php
This contains:

<div class="vm-product-media-container" data-mh="media-container">
                  <a title="<?php echo $product->product_name ?>" href="<?php echo JRoute::_($product->link.$ItemidStr); ?>">
                  <?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false); ?>
                  </a>
               </div>

[modernmagic]

I made the change to the bs3 file AND changed the configuration/ templates / Template and Layouts / Layout Bootstrap version FROM "None (Use Legacy)" to "Bootstrap 3".
This made the image swap work, but the layout is messed up.


Where is the file that is loaded when the option "None (Use Legacy)" is selected?

[jenkinhill]

The CSS files loaded in my test version, VM 4.0.21 10849 are

With Layout Bootstrap version None (Use Legacy)
<link href="/joomla4test/components/com_virtuemart/assets/css/vm-ltr-common.css?vmver=7f344d4d" rel="stylesheet" />
<link href="/joomla4test/components/com_virtuemart/assets/css/vm-ltr-site.css?vmver=7f344d4d" rel="stylesheet" />

With Layout Bootstrap version Bootstrap 3
<link href="/joomla4test/components/com_virtuemart/assets/css/vm-bs3-common.css?vmver=7f344d4d" rel="stylesheet" />

(Ignore the vmver on the filename)