This module provides an extension to the existing Commerce Fancy Attributes module, it also extends Commerce Search API module, to display facets based on the images uploaded in a taxonomy term for example Color in an apparel product.

The functionality for facets is written in such a way that if a color image is not found, then it tries to find if a color hex exists, and if that is not found, it tries to load the default image for the taxonomy field for color image, and if that is not found it gracefully decays to a list item with title.

Usage

Example usage:

  1. Enable this module.
  2. Create a Color vocabulary, add a text field called "Color Hex" that will hold hex values. Go to "Manage Display", click the tab called "Add to Cart form - Attribute", enable only the color field (with the label hidden).
  3. Add an image field called "Color Image" that will hold the images for the color Go to "Manage Display", click the tab called "Add to Cart form - Attribute", enable "color image" field, make sure you give the display as "Color Image" (with the label hidden).
  4. Create several terms with matching hex colors (Black: #cccccc, White: #ffffff, etc). Optionally you can upload images for these colors too.
  5. Add a Color taxonomy_term_reference field to a product type.
  6. On the Field UI edit page for the Color field, select "Rendered
    term" as the attribute type.

The Add To Cart form will now show the colors.

To enable these color images to appear in Faceted Search, go to the "Configure Facet Display" page of the respective Facet and from the "Display Widget" select "Fancy attributes (with Images)", save the settings and now your facets should display the images / hex codes in the Faceted search page.

To enable support for Color Field based Hex colors, go to Store > Configuration > Commerce Fancy Image Attributes, In the settings form select "Color Field" as the hex color selector. In the "Add to Cart form - Attribute" of the Taxonomy's manage display select "Color Swatch" as the display output (configure height and width as per preference), now the module will render the Color Field module hex value as the visible color.

References

https://www.drupal.org/project/commerce_fancy_attributes
https://www.drupal.org/project/commerce_search_api

Module development was sponsored by KEENFX

Project information

  • caution Minimally maintained
    Maintainers monitor issues, but fast responses are not guaranteed.
  • caution Maintenance fixes only
    Considered feature-complete by its maintainers.
  • Project categories: E-commerce
  • chart icon60 sites report using this module
  • Created by fragger_fox on , updated
  • shieldStable releases for this project are covered by the security advisory policy.
    There are currently no supported stable releases.

Releases