Show Color Option Images on a Product List Page

1. basic setup

I am assuming that, at this point, you have either created a new extension or set up a customizations folder for this new functionality. Here’s the structure I’m going with:

PLPItemColors

• Modules
  • Configuration
    • PLPItemColors.json
  • JavaScript
    • PLPItemColors.Hover.View.js
    • PLPItemColors.js
  • Sass
    • _plp_itemcolors-hover.scss
  • Templates
    • plp_itemcolors_hover.tpl
• manifest.json

From here, we can start with the entrypoint file.

2.Create the Entrypoint

define('PLPItemColors'
, [
    'PLPItemColors.Hover.View'
  ]
, function
  (
    PLPItemColorsHoverView
  )
{
  'use strict';

  return {
    mountToApp: function mountToApp (container)
    {
      var PLP = container.getComponent('PLP')
    , Environment = container.getComponent('Environment')
    , customColorId = Environment.getConfig('plpItemColors.customColorId')
    , rejectDefault = Environment.getConfig('plpItemColors.rejectDefault');

      if (customColorId)
      {
        PLP.addChildView('ItemDetails.Options', function ()
        {
          return new PLPItemColorsHoverView(
          {
            customColorId: customColorId
          , rejectDefault: rejectDefault
          })
        });
      }
    }
  }
});

3.Add the View

define('PLPItemColors.Hover.View'
, [
    'plp_itemcolors_hover.tpl'

  , 'underscore'
  ]
, function
  (
    plp_itemcolors_hover_tpl

  , _
  )
{
  'use strict';

  return Backbone.View.extend({
    template: plp_itemcolors_hover_tpl

  , contextDataRequest: ['item']

  , getItemColors: function getItemColors ()
    {
      var itemOptionFields = this.contextData.item().itemoptions_detail.fields
      // `media`` is used in part of my site's image naming convention, which causes an additional nested object -- your site's may not be organized this way
      , itemImagesDetailsMedia = this.contextData.item().itemimages_detail.media
      , thumbnail = this.contextData.item().keyMapping_thumbnail.url
      , self = this

      var itemColors = _.find(itemOptionFields, function (field)
      {
        return field.internalid == self.options.customColorId
      }).values;

      itemColors = _.compact(_.map(itemColors, function (color)
      {
        if (color.internalid)
        {
          return {
            color: color.label
          , url: color.url
          }
        }
      }));

      _.each(itemColors, function (color)
      {
        var image = itemImagesDetailsMedia[color.color] && itemImagesDetailsMedia[color.color].urls ? itemImagesDetailsMedia[color.color].urls[0].url : ''

        color.image = image;
      });

      if (this.options.rejectDefault)
      {
        itemColors = _.reject(itemColors, function (color)
        {
          return color.image == thumbnail;
        });
      }

      return itemColors
    }

  , getContext: function getContext ()
    {
      return {
        itemColors: this.getItemColors()
      }
    }
  })
});

4.Create the Template

<div class="plpitemcolors-hover-container">
    {{#each itemColors}}
        <a class="plpitemcolors-hover-block" href="{{this.url}}">
            <img src="{{resizeImage this.image 'tinythumb'}}">
            <span>{{this.color}}</span>
        </a>
    {{/each}}
</div>

5.Create the Sass File

.plpitemcolors-hover-container {
    position: absolute;
    right: -1500px;
    top: 0;
    transition: 1s;
}

.facets-item-cell-list:hover .plpitemcolors-hover-container {
    right: 0;
}

.plpitemcolors-hover-block {
    display: inline-block;
}

.plpitemcolors-hover-block span {
    display: block;
    text-align: center;
}

5.Create the Configuration File

{
  "type": "object"
, "subtab":
  {
    "id": "plpItemColors"
  , "title": "PLP Item Colors"
  , "group": "catalog"
  }
, "properties":
  {
    "plpItemColors.customColorId":
    {
      "group": "catalog"
    , "subtab": "plpItemColors"
    , "type": "string"
    , "title": "Custom Field ID for Color"
    }
  , "plpItemColors.rejectDefault":
    {
      "group": "catalog"
    , "subtab": "plpItemColors"
    , "type": "boolean"
    , "title": "Hide Default Color"
    , "default": false
    }
  }
}