Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to display product image as product thumbnail instead of default product variant.

 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 02-06-2020, 12:10 PM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is online now
 

Member
  
Join Date: Jan 2020
Posts: 12
 

Default How to display product image as product thumbnail instead of default product variant.

I am using the product variants module. On the category page or home page, products with variants are displaying the image from the default variant rather than the image from the product itself. I would prefer the product thumbnail to come from the product image, and not the product variant image. Is there any way to do this through either template editing or custom CSS?
__________________
X-Cart version 5.4.0.9
Reply With Quote
  #2  
Old 02-06-2020, 01:01 PM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,819
 

Default Re: How to display product image as product thumbnail instead of default product variant.

The cart takes all info from the product data and then if there are any variants overwrites the main product data with the same from the default or first variant. This is done in the code so the final product data passed to the template is already overwritten. So you can't really do this form the template itself. You have to do a custom module and overwrite variants module code to stop it from replacing the image.
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote
  #3  
Old 02-07-2020, 11:07 AM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is online now
 

Member
  
Join Date: Jan 2020
Posts: 12
 

Post Re: How to display product image as product thumbnail instead of default product variant.

Quote:
This is done in the code so the final product data passed to the template is already overwritten. ... You have to do a custom module and overwrite variants module code to stop it from replacing the image.
That's what I was afraid of. Can you offer any hints as to where within the Module structure I might find the code, and thus effectively create my override module? I have successfully written my own addon modules for other platforms, but am still quite new to X-Cart and its environ.


Thanks again for your quick and concise answer.
__________________
X-Cart version 5.4.0.9
Reply With Quote
  #4  
Old 02-07-2020, 11:31 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,819
 

Default Re: How to display product image as product thumbnail instead of default product variant.

The overwrite is done in

classes/XLite/Module/XC/ProductVariants/Model/Product.php
Code:
/** * Get image * * @return \XLite\Model\Image\Product\Image */ public function getImage() { return $this->isUseVariantImage() ? $this->getDefaultVariant()->getImage() : $this->getProductImage(); }


You can either change it to

Code:
/** * Get image * * @return \XLite\Model\Image\Product\Image */ public function getImage() { return $this->getProductImage(); }


or set



protected function isUseVariantImage()


to always return false


Note that this is probably used on products list pages and product details page so if you want one to show product image and the other variant image you will need to write some logic to distinguish between the two
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote
  #5  
Old 02-07-2020, 12:06 PM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is online now
 

Member
  
Join Date: Jan 2020
Posts: 12
 

Smile Re: How to display product image as product thumbnail instead of default product variant.

Thanks again, for your quick and informative reply.


I actually managed to solve the problem without having to write my own module to override the functions of the ProductVariants addon. Instead I created a custom template to override theme_tweaker/customer/items_list/product/parts/common.product-thumbnail.twig
Code:
<a href="{{ this.getProductURL(this.categoryId) }}" class="product-thumbnail"> {{ widget('\\XLite\\View\\Image', lazyLoad=true, image=this.product.getImage(), maxWidth=this.getIconWidth(), maxHeight=this.getIconHeight(), alt=this.getIconAlt(), className='photo') }} </a>


becomes...


Code:
<a href="{{ this.getProductURL(this.categoryId) }}" class="product-thumbnail"> {{ widget('\\XLite\\View\\Image', lazyLoad=true, image=this.product.getProductImage(), maxWidth=this.getIconWidth(), maxHeight=this.getIconHeight(), alt=this.getIconAlt(), className='photo') }} </a>


Essentially replacing the function call this.product.getImage() with this.product.getProductImage().


This changes the behaviour on the front page and category pages, but not on the product listing page itself, which is exactly the behaviour I am after.


Thank you for pointing me in the right direction. It was in reviewing the function definition you pointed out that I was able to notice the getProductImage() function, and try calling that from the template.
__________________
X-Cart version 5.4.0.9
Reply With Quote
  #6  
Old 02-07-2020, 12:13 PM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,819
 

Default Re: How to display product image as product thumbnail instead of default product variant.

That works too. Although I am against modifying templates like this. It is always better to do this things in the php class as their is inheritance in place. When you modify templates like this you always have to check when upgrading core or modules if these templates changed with the new version and either apply the changes to your modified template or delete your template and reapply it to the new one.
It is more work and one easily forgets to do it.
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote
  #7  
Old 02-07-2020, 12:27 PM
  The Knotty Celt's Avatar 
The Knotty Celt The Knotty Celt is online now
 

Member
  
Join Date: Jan 2020
Posts: 12
 

Smile Re: How to display product image as product thumbnail instead of default product variant.

Quote:
That works too. Although I am against modifying templates like this.

Complete agreement on that. So, to clarify, I used the built-in template editor of the Webmaster Kit module which generates override templates, keeping the core templates themselves intact. They can also be turned on and off, and deleted in the BO via Look & Feel->Edited Templates.


As a strict rule, I never edit core files directly. Overrides, which are easily managed are the better way to go. Where no override system is in place, then the fallback of a custom module is always there, too.
__________________
X-Cart version 5.4.0.9
Reply With Quote
  #8  
Old 02-07-2020, 01:04 PM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 13,819
 

Default Re: How to display product image as product thumbnail instead of default product variant.

It's not about editing core files. You should never do that as they get overwritten with every upgrade. it is about creating replacement file the way you described it.
So you took this
Code:
<a href="{{ this.getProductURL(this.categoryId) }}" class="product-thumbnail"> {{ widget('\\XLite\\View\\Image', lazyLoad=true, image=this.product.getImage(), maxWidth=this.getIconWidth(), maxHeight=this.getIconHeight(), alt=this.getIconAlt(), className='photo') }} </a>
and modified it. Now imagine tomorrow XC has an upgrade and this very same file now read
Code:
Some statement here for new functionality {# removed as it is not needed anymore <a href="{{ this.getProductURL(this.categoryId) }}" class="product-thumbnail"> {{ widget('\\XLite\\View\\Image', lazyLoad=true, image=this.product.getImage(), maxWidth=this.getIconWidth(), maxHeight=this.getIconHeight(), alt=this.getIconAlt(), className='photo') }} </a> #} Some other code doing something else...


Now what happens is while you do have this new file as part of the core system your cart will never run it because you have a custom template which runs instead. So your cart will continue to run the old template with the old behavior and none of the new functionality unless you redo your changes.


And what if these new changes actually removed "getProductImage()" method - now your cart will throw an error and you may have a hard time finding out where exactly this is happening.
Since it is in a template file that is not referenced directly.


Anyway for skipping on a custom module this works
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 12:16 AM.

   

 
X-Cart forums © 2001-2020