Jump to content
remyessers

Change cover image based on layered navigation color selection

Recommended Posts

Hi,

 

Is it possible to change the cover image on product-list based on the selection of the color attribute in layered navigation?

 

If I click on red, it shows my products with the red attribute available, but with the default cover image (E.g. a black image). This is very confusing for my customers, how can I change this? It looks like a feature more people should find very usefull..

 

Best regards,

 

Remy

Share this post


Link to post
Share on other sites

Probably possible, if you know some javascript.

In themes/<your theme folder>/modules/blocklayered/blocklayered.tpl

(N.B. This is the overridden file of it's original one, found in/modules/blocklayered/blocklayered.tpl. (but probably exists already there. If not, copy from original)

 

You have code like this (there are more places you need to adjust, here just a partly example):

 

<input class="color-option {if isset($value.checked) && $value.checked}on{/if} {if !$value.nbr}disable{/if}" type="button" name="layered_{$filter.type_lite}_{$id_value}" rel="{$id_value}_{$filter.id_key}" id="layered_id_attribute_group_{$id_value}" {if !$value.nbr}disabled="disabled"{/if} style="background: {if isset($value.color)}{if file_exists($smarty.const._PS_ROOT_DIR_|cat:"/img/co/$id_value.jpg")}url(img/co/{$id_value}.jpg){else}{$value.color}{/if}{else}#CCC{/if};" onclick="changeImage();"/> // add red action

 

Javascript would be basically something like this:

 

<head>

<script type="text/javascript">

 

function changeImage() {

... <code for changing image>

}

 

</script>

</head>

 

 

Probably quite some work to find exactly all places where to add this, and you need to know javascript, make the function generic to make it work for all products etc

 

Maybe it gives you some idea. Furthermore no javascript programmer, so I cannot help you with that.

 

Maybe there is a module which does this already?? Anyone?

 

My 2 cents,

Pascal

Share this post


Link to post
Share on other sites

Thanks for your reply and pointing me in a direction. I'm no Javascript programmer, so to write a function like this is a bridge too far for me.. Perhaps there's a module or someting? Does anyone know more about this?

Share this post


Link to post
Share on other sites

I am also after a solution on this one...layered nav showing the colour that the customer has chosen to search for. Thanks!

Share this post


Link to post
Share on other sites

Hi, any coders please take up this challenge. This is a much needed modification.

Share this post


Link to post
Share on other sites

Hi, all,

 

anyone solved this issue? I'm trying to use the color filter and it works on layered module but it shows the default cover images on product-list.tpl result. I would like that if i choose "red" as color filter, then the website should show me just the red products as result.

 

Thanks

Share this post


Link to post
Share on other sites

This is in the standard application. Colors create combinations and you can assign a picture to each combination. You can see it even in Prestashop's demo shop.

 

Allocation pictures to combinations can be a bit of a fuzz but you can use the free Prestools Suite to make it easier.

Edited by musicmaster

Share this post


Link to post
Share on other sites

This is in the standard application. Colors create combinations and you can assign a picture to each combination. You can see it even in Prestashop's demo shop.

 

Allocation pictures to combinations can be a bit of a fuzz but you can use the free Prestools Suite to make it easier.

 

PS layered navigation always shows the default combination image, not the corresponding image based on color selection in layered navigation filter. Anyway, good to know about Prestools Suite!.

Share this post


Link to post
Share on other sites

I think some one should pick up the glove an do it. I do know I will pay for this.

ANd I need it today for a customer.

Share this post


Link to post
Share on other sites

Well, tommorow I will give a try to make this but I don't promise anything.

I would love to see this in my shop as well.

Edited by hakeryk2

Share this post


Link to post
Share on other sites

Hi to all I am trying to work on this.

is there a way to get in the smarty active colors filter in product-list page ?

Share this post


Link to post
Share on other sites

No luck I did buy advanced search 4.

 

Bye the way I think this will be my last project on prestashop.

 

Thinking to start to work with magento. because of all the stuff I found out that are missing.

 

in the that site I did I hat to get plugins for Pretsashop for stuff that are default in magento

  • Like 1

Share this post


Link to post
Share on other sites

Is there anyone who can  help with this? I Am looking for solution, but i don´t want install any 3rd party module just for this feature. Thanks !

Share this post


Link to post
Share on other sites

Hello,

sharing a "hacky way" that works on ps 1.5  & ps 1.6.  I Hope it will lead someone to making it as a nice solution for a client.

This should not be used as a permanent solution. If the blocklayered module gets update, the code will get overwritten.  P.S. the particular code works with all of the attributes, not only the color.

Edit /modules/blocklayered/blocklayered.php

1. Put this in the function ajaxCall() after the line $this->getProducts(...)

if (isset($selected_filters['id_attribute_group']) && $selected_filters['id_attribute_group']) {
			$this->switchProductImages($selected_filters, $products);
}

}

2. Put these at the very end of the file (before closing curly brace)

       private function switchProductImages($selected_filters, &$products) {
        foreach ($products as &$product) {
            foreach($selected_filters['id_attribute_group'] as $key => $value) {
               $attributeImageId = $this->getProductImage($product['id_product'], $key);
              if((int)($attributeImageId) > 0) {

                  $product['id_image'] = $product['id_product'].'-'.$attributeImageId;
              }
            }
        }
    }

    private function getProductImage($id_product, $id_attribute) {

        $query = 'SELECT `id_image` FROM `ps_product_attribute_combination`
        INNER JOIN `ps_product_attribute` ON `ps_product_attribute`.`id_product_attribute` = `ps_product_attribute_combination`.`id_product_attribute`
        INNER JOIN `ps_product_attribute_image` ON `ps_product_attribute_image`.`id_product_attribute` = `ps_product_attribute`.`id_product_attribute`
        WHERE `id_attribute` = \''.$id_attribute.'\' AND `id_product` = \''.$id_product.'\'';

        return DB::getInstance()->getValue($query);
    }

 

 

 

 

 

Edited by Binded
Added a check for empty attribute group, because sometimes attribute group is not set
  • Thanks 2

Share this post


Link to post
Share on other sites

Binded! You are my HERO !!!! I can´t beleive that someone, (as you) made the time, and posted solution like this one!

I can confim, that this solution is working. I am greatly happy to thank you so much !!!

 

More posts like this one, and presta will be the best.

Share this post


Link to post
Share on other sites

@Binded I will test this today and I will edit this post later. Just posting to not forget to do this :)

EDIT:

HOOOOOLY SH*T! :) This is working :D You are the best! I tested this even with 2 selected features.


@danirub check this out.

 

I would only change this first statement to

if (isset($selected_filters['id_attribute_group']) && $selected_filters['id_attribute_group']) {
			$this->switchProductImages($selected_filters, $products);
		}

because sometimes attribute group is not set and there will notice in logs.

@Kaper it is not hidden - the post is moved to the top of the page.

 

Imho much better solution for getProductImages is this function because it is taking a photo with regarding photo position.

private function getProductImage($id_product, $id_attribute) {

		$query = 'SELECT pai`.id_image` FROM `ps_product_attribute_combination` pac
        INNER JOIN `ps_product_attribute` ON pa.`id_product_attribute` = pac.`id_product_attribute`
        INNER JOIN `ps_product_attribute_image` ON pai.`id_product_attribute` = pa.`id_product_attribute`
        INNER JOIN `ps_image` i ON pai.`id_image` = i.`id_image`
        WHERE pac.`id_attribute` = '.(int)$id_attribute.' AND pa.`id_product` = '.(int)$id_product.'
        ORDER BY i.`position`' ;

		return DB::getInstance()->getValue($query);
	}

 

Edited by hakeryk2

Share this post


Link to post
Share on other sites

I am just asking...

Why is binded´s post hidden? :ph34r: If there is any reason ofcourse i will respect it, and keep the code for myself, but  I'm just wondering why ... Thanks :) 

Share this post


Link to post
Share on other sites

I don't know what I'm doing wrong but it does'nt work. Tell me if you need to add something besides the two functions from the beginning.

 

Sorry for the confusion already working :D sneaked in a space :D

 

Edited by wolfen1223

Share this post


Link to post
Share on other sites

Hi, I'm looking for a solution to this in PS 1.7.

I've tried changing the id_image value returned from the database query in the ps_facetedsearch module but that doesn't seem to affect the image which is displayed on the product list.

Any help or suggestions appreciated, thanks!

Share this post


Link to post
Share on other sites
On 2/10/2018 at 4:57 AM, Binded said:

Hello,

sharing a "hacky way" that works on ps 1.5  & ps 1.6.  I Hope it will lead someone to making it as a nice solution for a client.

This should not be used as a permanent solution. If the blocklayered module gets update, the code will get overwritten.  P.S. the particular code works with all of the attributes, not only the color.

Edit /modules/blocklayered/blocklayered.php

1. Put this in the function ajaxCall() after the line $this->getProducts(...)


if (isset($selected_filters['id_attribute_group']) && $selected_filters['id_attribute_group']) {
			$this->switchProductImages($selected_filters, $products);
}

}

2. Put these at the very end of the file (before closing curly brace)


       private function switchProductImages($selected_filters, &$products) {
        foreach ($products as &$product) {
            foreach($selected_filters['id_attribute_group'] as $key => $value) {
               $attributeImageId = $this->getProductImage($product['id_product'], $key);
              if((int)($attributeImageId) > 0) {

                  $product['id_image'] = $product['id_product'].'-'.$attributeImageId;
              }
            }
        }
    }

    private function getProductImage($id_product, $id_attribute) {

        $query = 'SELECT `id_image` FROM `ps_product_attribute_combination`
        INNER JOIN `ps_product_attribute` ON `ps_product_attribute`.`id_product_attribute` = `ps_product_attribute_combination`.`id_product_attribute`
        INNER JOIN `ps_product_attribute_image` ON `ps_product_attribute_image`.`id_product_attribute` = `ps_product_attribute`.`id_product_attribute`
        WHERE `id_attribute` = \''.$id_attribute.'\' AND `id_product` = \''.$id_product.'\'';

        return DB::getInstance()->getValue($query);
    }

 

 

 

 

 

This doesnt seem to work anymore -- anyone else?

Share this post


Link to post
Share on other sites
4 hours ago, hakeryk2 said:

Any more info? For me it is working perfectly with 1.6 vr. Change some of these as well to get better performance https://www.prestashop.com/forums/topic/240139-change-cover-image-based-on-layered-navigation-color-selection/?do=findComment&comment=2682625

 

Using PS 1.6.1.4

 

I tried both the original fix and your version and when i click on a combination it still does not change image.

 

My db prefix is p_ other than ps_ , which i have changed - still no good

 

Edit: blocklayered.php for reference: https://pastebin.com/mcaZXHNA

Edited by HouseofJewellery

Share this post


Link to post
Share on other sites

Just to ask, are You editing blocklayered.php in your modules/blocklayered or in your theme/modules/blocklayered? You should in your theme folder :)

Share this post


Link to post
Share on other sites
On 2018-08-03 at 6:35 PM, HouseofJewellery said:

Using PS 1.6.1.4

I tried both the original fix and your version and when i click on a combination it still does not change image.

My db prefix is p_ other than ps_ , which i have changed - still no good

Edit: blocklayered.php for reference: https://pastebin.com/mcaZXHNA

Me or other any developer in here could easily solve your problem, but I think it would be much more valuable to give you a hint: You have an error in the sql query. My original query works with 1.6.1.4, you can use it as a reference.

Share this post


Link to post
Share on other sites
On 9/3/2018 at 9:45 AM, Binded said:

Me or other any developer in here could easily solve your problem, but I think it would be much more valuable to give you a hint: You have an error in the sql query. My original query works with 1.6.1.4, you can use it as a reference.

        $query = 'SELECT `id_image` FROM `p_product_attribute_combination`
INNER JOIN `p_product_attribute` ON p_product_attribute.id_product_attribute = p_product_attribute_combination.id_product_attribute
INNER JOIN `p_product_attribute_image` ON p_product_attribute_image.id_product_attribute = p_product_attribute.id_product_attribute
      WHERE `id_attribute` = \''.$id_attribute.'\' AND `id_product` = \''.$id_product.'\'';

        return DB::getInstance()->getValue($query);

 

Whats wrong with it

 

edit: I even tried the original statement again no luck:

 

$query = 'SELECT `id_image` FROM `p_product_attribute_combination`
INNER JOIN `p_product_attribute` ON `p_product_attribute`.`id_product_attribute` = `p_product_attribute_combination`.`id_product_attribute`
INNER JOIN `p_product_attribute_image` ON `p_product_attribute_image`.`id_product_attribute` = `p_product_attribute`.`id_product_attribute`
WHERE `id_attribute` LIKE \''.$id_attribute.'\' AND `id_product` = \''.$id_product.'\'';

return DB::getInstance()->getValue($query);
Edited by HouseofJewellery

Share this post


Link to post
Share on other sites

Try with this and this is the last attempt.
 

private function getProductImage($id_product, $id_attribute) {

		$query = 'SELECT pai.`id_image` FROM `ps_product_attribute_combination` pac
        LEFT JOIN `ps_product_attribute` pa ON pa.`id_product_attribute` = pac.`id_product_attribute`
        LEFT JOIN `ps_product_attribute_image` pai ON pai.`id_product_attribute` = pa.`id_product_attribute`
        LEFT JOIN `ps_image` i ON pai.`id_image` = i.`id_image`
        WHERE pac.`id_attribute` = '.(int)$id_attribute.' AND pa.`id_product` = '.(int)$id_product.'
        ORDER BY i.`position`' ;

		return DB::getInstance()->getValue($query);
}

private function getProductImage($id_product, $id_attribute) {

		$query = 'SELECT pai.`id_image` FROM `ps_product_attribute_combination` pac
        LEFT JOIN `ps_product_attribute` pa ON pa.`id_product_attribute` = pac.`id_product_attribute`
        LEFT JOIN `ps_product_attribute_image` pai ON pai.`id_product_attribute` = pa.`id_product_attribute`
        LEFT JOIN `ps_image` i ON pai.`id_image` = i.`id_image`
        WHERE pac.`id_attribute` = '.(int)$id_attribute.' AND pa.`id_product` = '.(int)$id_product.'
        ORDER BY i.`position`' ;

		return DB::getInstance()->getValue($query);
	}

If this will not work then it might be related to Your hosting configuration. I menaged to get this "NOT" working on localhost because it had some weird mysql configuration.

Share this post


Link to post
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

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More