Vote up!
Vote down!

Facet Filter By Color - Change Product Display Node Image

Basically, our company sells bags in different colors and prints so one product has multiple variations of different print/colors. The user needs to be able to filter products by style and print/color. I have implemented both facet filters using commerce search API and apache Solr. Both filters work; however, when the user filters by a certain print or color, it correctly filters out products that do not contain a variation of the print, but does not display the correct variation image.

Product 1 has yellow and green variations.
Product 2 has yellow and black variations.
User Chooses to filter by green color.
Only product 1 is displayed, but the yellow variation product thumbnail is displayed because it is the first variation in product 1.

Has anyone discovered some way to accomplish this? Or is there anyone who could lead me into the right direction? (I'm not afraid of getting dirty and altering code or creating a module to override functions)

Drupal commerce is a great product and I'm very close to launching the store, I just need to get this feature working.

Thank you for your time!

Asked by: Djames24
on February 25, 2014


Djames24, I am having the exact same issue. I would be very interested if you or someone else had a solution.

- glalousi on February 27, 2014

2 Answers

Vote up!
Vote down!

Ok, even though I barely know how Drupal works, I managed to throw together a module that accomplishes this task. There are still some kinks; however, this code is working pretty much as expected from my minimal testing. To use this, create a taxonomy with your colors or prints, then add the field to your product variation type. Once that is completed, go to Configuration-> Search API-> [your search index]-> Fields and make sure that your product variations >> print or color field is added to the index. Once that is completed, go to the facets tab and enable your product variations >> print or color. Once you have completed this, go and enable the block in whichever region you would like. To see this module's effect, add an image to each product variation and select the appropriate print or color from your print or color taxonomy field. You should now be ready to apply this very rough module.

function search_results_custom_theme() {
$theme = array();
$theme['node--product--type--product--list'] = array(
'render element' => 'node',
'template' => '/profiles/commerce_kickstart/modules/commerce_kickstart/commerce_kickstart_product_ui/theme',

$searcher = <strong>'search_api@product_display';</strong> // your server id
$facetApiAdapter = facetapi_adapter_load($searcher);
$activeItems = $facetApiAdapter->getAllActiveItems();
$node_products as $node_product){

I have put emphasis on the specific field names that will need to be changed (to match the machine names of your fields) in order for this module to work.

"field_print" is the machine name of my print taxonomy that I use to tag each product variation.

"field_images" is the machine name of my image field on my variation types.

"search_api@product_display" is the machine name for my search server id (I found this in the database under that facetapi table).

To apply this, use ftp or some kind of file manager and go to the root directory, then navigate to sites->all->modules and create a directory (name it whatever you want). Then create a .module file with the above code in it and then another .info file with the following:

name = Search Results Custom
description = "Provides customized search results"
package = Search
core = 7.x
dependencies[] = facetapi
dependencies[] = search_api
dependencies[] = search_api_facetapi

version = "7.x-1.x-dev"
core = "7.x"
project = "Search Results Custom"
datestamp = "1380626876"

I know that this module is probably very inefficient and hackish, but I'm not really a programmer and this was the best I could come up with in a few days. Hopefully a similar feature can be added in to the drupal commerce search core.

Hope this helps somebody =)

Answer by: Djames24
Posted: Mar 2, 2014
Vote up!
Vote down!

I am having the exact same issue. I would be very interested if you or someone else had a solution.


Answer by: glalousi
Posted: Feb 27, 2014


I'm not sure why the system will not let me post this as an answer, but I figured out a way accomplish the task of displaying the correct product variation image when filtering by creating a module that preproccesses the nodes before they are rendered. Currently, since Drupal Commerce displays product nodes and since variations are objects referenced by the product nodes, when the Search API returns results, it just grabs the first image associated with the node and renders it in the content list. Essentially, what I did is create a function that retrieves the active facet color/print field id, and then compare it with each product variation color/print field id. If the field ids match, it grabs the image field of the particular variation and modifies the node display before it is rendered. When I have more time, I hope to refactor the code, and add admin configuration to the module in order to make it more user friendly.

The details can be found here:

Hope this helps you out=)

- Djames24 on March 2, 2014