Jump to content

Show all images for all product combination instead of only the image of the selected

Shin_P

By Shin_P
in General topics

 Share

Recommended Posts

Shin_P Explorer

Shin_P

Posted
Posted

Hello everyone

Is there a way to show all the combination images on the product page, instead of only the image of the currently selected combination?

 

The new (1.7) behavior is to show only the image associated to the selected combination, hiding all the other pictures.

 

On 1.6 and earlier, all images were shown. And that made sense, as it was engaging for the user to see that there were other colors, other sizes, multiple pictures for multiple attribute combinations.

 

I know there's a workaround  (to assign all the images to every combination),  but that just doesn't make sense.

Is there a way to revert to the previous behavior?

 

All these changes in 1.7 really dont make any sense.

 

Thank you for any help you could give me.

And please don't point me to a paid module, because it would really look like that developers have stripped the base CMS just to push more module sales..

 

 

Link to comment
Share on other sites
Shin_P Explorer

Shin_P

Posted
  • Author
Posted

hi and thank you for replying

 

I checked the backoffice demo on your module page

 

is it this one?

Produkt-Eigenschaften - Bitte wählen - Variantenauswahl als Pflicht

 

if so, note that the demo doesn't work (see the attached screenshot)

 

even so, still kinda sucks having to pay 70€ to get back a feature that has always been included in prestashop (until v. 1.7)

Firefox_Screenshot_2023-01-29T16-40-16.661Z.png

Link to comment
Share on other sites
ps8modules Grand Master

ps8modules

Posted
Posted (edited)

Hi @Shin_P,
if you have a selected image in the administration for the combination, not all images will be displayed, but only the ones you have selected.
If you want to display all the images you have uploaded to the product, it can be easily fixed in the database.

Can you please put a screenshot of how you have the image association set up in the administration and the selected combination?

Edited by ps8moduly.cz (see edit history)
Link to comment
Share on other sites
idnovate.com Proficient

idnovate.com

Posted
Posted (edited)
On 1/26/2023 at 11:19 PM, Shin_P said:

Hello everyone

Is there a way to show all the combination images on the product page, instead of only the image of the currently selected combination?

 

The new (1.7) behavior is to show only the image associated to the selected combination, hiding all the other pictures.

 

On 1.6 and earlier, all images were shown. And that made sense, as it was engaging for the user to see that there were other colors, other sizes, multiple pictures for multiple attribute combinations.

 

I know there's a workaround  (to assign all the images to every combination),  but that just doesn't make sense.

Is there a way to revert to the previous behavior?

 

All these changes in 1.7 really dont make any sense.

 

Thank you for any help you could give me.

And please don't point me to a paid module, because it would really look like that developers have stripped the base CMS just to push more module sales..

 

 

Edit function filterImagesForCombination() from class ProductLazyArray (src/Adapter/Presenter/Product/ProductLazyArray.php) : 

private function filterImagesForCombination(array $images, int $productAttributeId)
{
    return $images;

    ...
}

https://github.com/PrestaShop/PrestaShop/blob/2e5e9c6720f562e73f005ff3c9d21ea98da9389b/src/Adapter/Presenter/Product/ProductLazyArray.php#L736

Edited by idnovate.com (see edit history)
  • Sad 1
Link to comment
Share on other sites
Shin_P Explorer

Shin_P

Posted
  • Author
Posted (edited)

like it was on 1.6, on any other major ecommerce CMS and how logic would want..

 

  1. All product pictures are always displayed on the product page
  2. If I change combination, and there is a picture assigned to that specific combination, the main picture switches to that image
  3. bonus points: you click on the picture -> combination is switched

 

Edited by Shin_P
mother -> other lol (see edit history)
  • Like 1
Link to comment
Share on other sites
ps8modules Grand Master

ps8modules

Posted
Posted

Ok.

1. Modify ./src/Adapter/Presenter/Product/ProductLazyArray.php

2. find function fillImages

3. replace to: 

private function fillImages(array $product, Language $language): void
    {
        // Get all product images, including potential cover
        $productImages = $this->imageRetriever->getAllProductImages(
            $product,
            $language
        );

        // Get filtered product images matching the specified id_product_attribute
        $this->product['images'] = $productImages;


        $this->product['default_image'] = reset($this->product['images']);
        foreach ($this->product['images'] as $image) {
            // If one of the image is a cover it is used as such
            if (isset($image['cover']) && null !== $image['cover']) {
                $this->product['default_image'] = $image;

                break;
            }
        }

        // Get default image for selected combination (used for product page, cart details, ...)
        if ($product['id_product_attribute']){
            foreach ($productImages as $image) {
                if (in_array($product['id_product_attribute'], $image['associatedVariants'])) {
                    $this->product['default_image'] = $image;
                }
            }
        }

        // Get generic product image, used for product listing
        if (isset($product['cover_image_id'])) {
            // First try to find cover in product images
            foreach ($productImages as $productImage) {
                if ($productImage['id_image'] == $product['cover_image_id']) {
                    $this->product['cover'] = $productImage;
                    break;
                }
            }

            // If the cover is not associated to the product images it is fetched manually
            if (!isset($this->product['cover'])) {
                $coverImage = $this->imageRetriever->getImage(new Product($product['id_product'], false, $language->getId()), $product['cover_image_id']);
                $this->product['cover'] = array_merge($coverImage, [
                    'legend' => $coverImage['legend'],
                ]);
            }
        }

        // If no cover fallback on default image
        if (!isset($this->product['cover'])) {
            $this->product['cover'] = $this->product['default_image'];
        }
    }

 

Link to comment
Share on other sites
Shin_P Explorer

Shin_P

Posted
  • Author
Posted (edited)

Testing on the same product with originally only one picture (vanilla 1.7.8.8 with demo products)

Steps:

  1. I added 2 new pictures to the product , without assigning any new pic to a combination -> only the first old picture shown on product page (not the new ones) (NOT OK)
  2. I assigned one of the 2 new photos (only that) to a non-default combination -> default combination shows the new picture in the carousel below (OK). If I switch to the combination with the new pic assigned, the first picture is NOT shown on the carousel (NOT OK)
  3. I assigned the third picture to another combination -> everything working as intended

If no photos are assigned to a combination, but only loaded on the main product tab, they are not shown in the carousel.

So, without changing the code above, this fix works only if every picture is assigned to at least one combination.

Which is great, but not optimal.
Thank you very much tho! I feel you are almost there!

Edited by Shin_P
formatting (see edit history)
Link to comment
Share on other sites
  • 1 year later...
apavlinets Rookie

apavlinets

Posted
Posted

Hi. Did you manage to implement the task of displaying all images that are linked to different combinations?
Maybe there is also a solution that automatically switches the combination when hovering over a particular image?
True, I am already working on 8.2

Link to comment
Share on other sites
  • 3 weeks later...
Chisla Newbie

Chisla

Posted
Posted (edited)

For 8.2  

/src/Adapter/Presenter/Product/ProductLazyArray.php

function filterImagesForCombination 

private function filterImagesForCombination(array $images, int $productAttributeId)
    {
        $filteredImages = [];

        // flag to set cover to first associated image
        $need_set_cover_image = true;

        // first we collect all the associated images, the first one we put a cover
        foreach ($images as $image) {
            if (in_array($productAttributeId, $image['associatedVariants'])) {
                if($need_set_cover_image) {
                    $image['cover'] = 1;
                    $need_set_cover_image = false;
                } else {
                    $image['cover'] = null;
                }
                $filteredImages[] = $image;
            }
        }
        // add all images not associated with combinations to the array and remove the cover
        foreach ($images as $image) {
            if (empty($image['associatedVariants'])) {
                $image['cover'] = null;
                $filteredImages[] = $image;
            }
        }
        return (0 === count($filteredImages)) ? $images : $filteredImages;
    }

 

Edited by Chisla (see edit history)
Link to comment
Share on other sites
DsToys Rookie

DsToys

Posted
Posted

Hi, i'm trying to achieve this in a 1.7.6.5 versión of prestashop, but i have an error when i change the code of FillImages in /src/Adapter/Presenter/Product/ProductLazyArray.php

En 13/11/2024 a las 4:50 AM, Chisla dijo:

For 8.2  

/src/Adapter/Presenter/Product/ProductLazyArray.php

function filterImagesForCombination 

private function filterImagesForCombination(array $images, int $productAttributeId)
    {
        $filteredImages = [];

        // flag to set cover to first associated image
        $need_set_cover_image = true;

        // first we collect all the associated images, the first one we put a cover
        foreach ($images as $image) {
            if (in_array($productAttributeId, $image['associatedVariants'])) {
                if($need_set_cover_image) {
                    $image['cover'] = 1;
                    $need_set_cover_image = false;
                } else {
                    $image['cover'] = null;
                }
                $filteredImages[] = $image;
            }
        }
        // add all images not associated with combinations to the array and remove the cover
        foreach ($images as $image) {
            if (empty($image['associatedVariants'])) {
                $image['cover'] = null;
                $filteredImages[] = $image;
            }
        }
        return (0 === count($filteredImages)) ? $images : $filteredImages;
    }

 

Can you help me to solve this, i really need this feature in my site (if don't i have to buy a module...... not the best solution for me)

 

Thank you

error_3.png

error_02.png

error_01.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...