Image change on mouseover product (joomla3.9.x + virturemart3.8.x)
1.go to components\com_virtuemart\views\category\view.html.php
find
$imgAmount = VmConfig::get('prodimg_browse',1);
Place
$imgAmount = VmConfig::get('prodimg_browse',2);
2. after go to templates\your_template\html\com_virtuemart\sublayouts\products.php
find
<?php echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false); ?>
Place
<?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.
(http://badmintontshirt.com/images/mouseover.jpg)
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:$imgAmount = VmConfig::get('prodimg_browse',2);
In /public_html/templates/ja_autoshop/html/com_virtuemart/sublayouts/products.php
I found the image code here:
// 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:
// 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?
try $imgAmount = 2; instead of call the config which may have a setting for 1
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?
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";
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
Quote from: Studio 42 on May 02, 2023, 15:17:13 PM
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.
Quote from: GJC Web Design on May 01, 2023, 18:50:41 PM
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
<?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
you must be in the wrong file then .. does your template even use a sublayout for the products?
Could be a bootstrap3 template, in which case should it be bs3-products.php ?
Quote from: GJC Web Design on May 03, 2023, 08:59:57 AM
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.
Quote from: jenkinhill on May 03, 2023, 12:40:46 PM
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".
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>
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?
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)
Found it!
com_virtuemart/sublayouts/products_horizon.php
Thank you @jenkinhihll and @GJC Web Design for all your patience and help on this.