X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)
-   -   How to display product image as product thumbnail instead of default product variant. (https://forum.x-cart.com/showthread.php?t=77614)

The Knotty Celt 02-06-2020 12:10 PM

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?

cflsystems 02-06-2020 01:01 PM

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.

The Knotty Celt 02-07-2020 11:07 AM

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.

cflsystems 02-07-2020 11:31 AM

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

The Knotty Celt 02-07-2020 12:06 PM

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.

cflsystems 02-07-2020 12:13 PM

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.

The Knotty Celt 02-07-2020 12:27 PM

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.

cflsystems 02-07-2020 01:04 PM

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


All times are GMT -8. The time now is 03:01 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.