News:

Looking for documentation? Take a look on our wiki

Main Menu

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

Started by teedesign, August 16, 2020, 13:09:09 PM

Previous topic - Next topic

teedesign

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.



I LOVE JOOMLA.

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

GJC Web Design

try $imgAmount = 2;  instead of call the config which may have a setting for 1
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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";
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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

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. 

modernmagic

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

GJC Web Design

you must be in the wrong file then .. does your template even use a sublayout for the products?
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

jenkinhill

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

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

modernmagic

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.

modernmagic

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

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>
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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)
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum