workarea-swatches 1.0.5

data/app/assets/stylesheets/workarea/storefront/swatches/components/_option_button.scss

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #OPTION-BUTTON
+\*------------------------------------*/
+
+/**
+ * Extend the `.option-button` class from Workarea to include a swatch option.
+ *
+ * 1. These dimensions match the :small_thumb processor as configured out of the
+ *    box
+ */
+$option-button-swatch-height: 60px !default; /* [1] */
+$option-button-swatch-width: 60px !default; /* [1] */
+
+.option-button__swatch {
+    height: $option-button-swatch-height;
+    width: $option-button-swatch-width;
+}

data/app/assets/stylesheets/workarea/storefront/swatches/components/_swatch_facet.scss

@@ -0,0 +1,25 @@
+/*------------------------------------*\
+    #SWATCH-FACET
+\*------------------------------------*/
+
+/**
+ * Each `.swatch-facet` also receives an ID modifier class, in order to offer
+ * more granular control over the component, if needed. Since this is a
+ * dynamically generated value, they are not listed here.
+ */
+
+$swatch-facet-height: 20px !default;
+$swatch-facet-width:  20px !default;
+
+.swatch-facet {
+    display: inline-block;
+    width: $swatch-facet-width;
+    height: $swatch-facet-height;
+    text-decoration: none;
+    vertical-align: middle;
+}
+
+.swatch-facet--hex {}
+.swatch-facet--image {}
+.swatch-facet--empty {}
+

data/app/assets/stylesheets/workarea/storefront/swatches/components/_swatch_options.scss

@@ -0,0 +1,54 @@
+/*------------------------------------*\
+    #SWATCH-OPTIONS
+\*------------------------------------*/
+
+$swatch-options-outline: 1px solid $light-gray !default;
+$swatch-options-selected-outline:  1px solid $highlight-color !default;
+
+.swatch-options {}
+
+.swatch-options--small {}
+
+    .swatch-options__label {
+        margin: 0;
+    }
+
+    .swatch-options__group {
+        @extend %inline-list;
+    }
+
+        .swatch-options__swatch {
+            position: relative;
+            margin: 0 0 $spacing-unit;
+            width:  44px;
+            height: 44px;
+            outline: $swatch-options-outline;
+
+            & + & {
+                margin-left: $spacing-unit;
+            }
+
+            .swatch-options--small & {
+                margin-top:    $spacing-unit;
+                margin-bottom: 0;
+                width:  22px;
+                height: 22px;
+            }
+        }
+
+        .swatch-options__swatch--selected {
+            outline: $swatch-options-selected-outline;
+        }
+
+            .swatch-options__swatch-button,
+            .swatch-options__swatch-button-image,
+            .swatch-options__swatch-button-text {
+                display: block;
+                position: absolute;
+                top:    0;
+                right:  0;
+                bottom: 0;
+                left:   0;
+            }
+
+            .swatch-options__swatch-name {}

data/app/controllers/workarea/admin/catalog_product_swatches_controller.rb

@@ -0,0 +1,47 @@
+module Workarea
+  module Admin
+    class CatalogProductSwatchesController < Admin::ApplicationController
+      required_permissions :catalog
+      before_action :find_product
+
+      def index
+      end
+
+      def create
+        @swatch = @product.swatches.build(params[:swatch])
+
+        if @swatch.save
+          flash[:success] = t('workarea.admin.catalog_product_swatches.flash_messages.saved')
+          redirect_to catalog_product_swatches_path(@product)
+        else
+          render :index, status: :unprocessable_entity
+        end
+      end
+
+      def update
+        @swatch = @product.swatches.find(params[:id])
+
+        if @swatch.update_attributes(params[:swatch])
+          flash[:success] = t('workarea.admin.catalog_product_swatches.flash_messages.saved')
+          redirect_to catalog_product_swatches_path(@product)
+        else
+          flash[:error] = t('workarea.admin.catalog_product_swatches.flash_messages.error')
+          render :index
+        end
+      end
+
+      def destroy
+        @product.swatches.find(params[:id]).destroy
+        flash[:success] = t('workarea.admin.catalog_product_swatches.flash_messages.removed')
+        redirect_to catalog_product_swatches_path(@product)
+      end
+
+      private
+
+      def find_product
+        model = Catalog::Product.find_by(slug: params[:catalog_product_id])
+        @product = ProductViewModel.wrap(model, view_model_options)
+      end
+    end
+  end
+end

data/app/controllers/workarea/admin/catalog_swatches_controller.rb

@@ -0,0 +1,48 @@
+module Workarea
+  module Admin
+    class CatalogSwatchesController < Admin::ApplicationController
+      required_permissions :catalog
+      before_action :find_swatches
+
+      def index
+      end
+
+      def create
+        @swatch = Catalog::Swatch.new(params[:swatch])
+
+        if @swatch.save
+          flash[:success] = t('workarea.admin.catalog_swatches.flash_messages.saved')
+          redirect_to catalog_swatches_path
+        else
+          flash[:error] = @swatch.errors.full_messages
+          render :index
+        end
+      end
+
+      def update
+        @swatch = Catalog::Swatch.find(params[:id])
+
+        if @swatch.update_attributes(params[:swatch])
+          flash[:success] = t('workarea.admin.catalog_swatches.flash_messages.saved')
+          redirect_to catalog_swatches_path
+        else
+          flash[:error] = t('workarea.admin.catalog_swatches.flash_messages.error')
+          render :index
+        end
+      end
+
+      def destroy
+        Catalog::Swatch.find(params[:id]).destroy
+        flash[:success] = t('workarea.admin.catalog_swatches.flash_messages.removed')
+        redirect_to catalog_swatches_path
+      end
+
+      private
+
+      def find_swatches
+        @swatches = Catalog::Swatch.all
+        @search_settings = Search::Settings.current
+      end
+    end
+  end
+end

data/app/controllers/workarea/storefront/products_controller.decorator

@@ -0,0 +1,12 @@
+module Workarea
+  decorate Storefront::ProductsController, with: :swatches do
+    def summary
+      @product = Storefront::ProductViewModel.wrap(
+        Catalog::Product.find_by(slug: params[:id]),
+        view_model_options
+      )
+
+      render partial: 'summary', locals: { product: @product }
+    end
+  end
+end

data/app/helpers/workarea/storefront/swatches_helper.rb

@@ -0,0 +1,84 @@
+module Workarea
+  module Storefront
+    module SwatchesHelper
+      def render_swatch_option(selection, swatch)
+        id = selection.optionize
+
+        if swatch&.image?
+          image_tag(
+            swatch.image.process(:small_thumb).url,
+            alt: selection,
+            class: "option-button__image option-button__image--#{id}"
+          )
+        elsif swatch&.hex?
+          content_tag(
+            :div,
+            '',
+            class: "option-button__swatch option-button__swatch--#{id}",
+            style: "background-color: #{swatch.hex};"
+          )
+        end
+      end
+
+      def render_browse_swatch(selection, swatch)
+        id = selection.optionize
+
+        if swatch&.image?
+          image_tag(
+            swatch.image.process(:small_thumb).url,
+            alt: selection,
+            class: [
+              'swatch-options__swatch-button-image',
+              "swatch-options__swatch-button-image--#{id}"
+            ].join(' ')
+          )
+        elsif swatch&.hex?
+          content_tag(
+            :div,
+            '',
+            class: [
+              'swatch-options__swatch-button',
+              "swatch-options__swatch-button--#{id}"
+            ].join(' '),
+            style: "background-color: #{swatch.hex};"
+          )
+        else
+          content_tag(
+            :div,
+            selection,
+            class: 'swatch-options__swatch-button-text'
+          )
+        end
+      end
+
+      def render_swatch_facet(selection)
+        id = selection.optionize
+
+        @swatches_cache ||= Catalog::Swatch.all.to_a
+        swatch = @swatches_cache.detect { |s| s.id == id }
+        class_list = "swatch-facet swatch-facet--#{id}"
+
+        if swatch&.image?
+          image_tag(
+            swatch.image.process(:facet_swatch).url,
+            alt: selection,
+            class: "#{class_list} swatch-facet--image"
+          )
+        elsif swatch&.hex?
+          content_tag(
+            :div,
+            '',
+            class: "#{class_list} swatch-facet--hex",
+            style: "background-color: #{swatch.hex};"
+          )
+        else
+          content_tag(
+            :span,
+            '',
+            class: "#{class_list} swatch-facet--empty"
+          )
+        end
+      end
+    end
+  end
+end

data/app/models/workarea/catalog/product.decorator

@@ -0,0 +1,7 @@
+module Workarea
+  decorate Catalog::Product, with: 'swatches' do
+    decorated do
+      embeds_many :swatches, class_name: 'Workarea::Catalog::ProductSwatch'
+    end
+  end
+end

data/app/models/workarea/catalog/product_swatch.rb

@@ -0,0 +1,10 @@
+module Workarea
+  module Catalog
+    class ProductSwatch < Swatch
+      embedded_in :product,
+        class_name: 'Workarea::Catalog::Product',
+        inverse_of: :swatches,
+        touch: true
+    end
+  end
+end

data/app/models/workarea/catalog/swatch.rb

@@ -0,0 +1,37 @@
+module Workarea
+  module Catalog
+    class Swatch
+      include ApplicationDocument
+      extend Dragonfly::Model
+
+      field :_id, type: String, default: -> { name.optionize }
+      field :name, type: String
+      field :hex, type: String
+      field :image_name, type: String
+      field :image_uid, type: String
+
+      validates :name, presence: true
+      validates :hex, length: { is: 7, allow_blank: true }
+      validates :id, uniqueness: true
+
+      dragonfly_accessor :image, app: :workarea
+
+      before_validation :normalize_hex
+
+      def image?
+        image.present?
+      end
+
+      def hex?
+        hex.present?
+      end
+
+      private
+
+      def normalize_hex
+        return if hex.blank?
+        self.hex = hex.starts_with?('#') ? hex : "##{hex}"
+      end
+    end
+  end
+end

data/app/models/workarea/search/settings.decorator

@@ -0,0 +1,8 @@
+module Workarea
+  decorate Search::Settings, with: 'swatches' do
+    decorated do
+      field :swatch_facets, type: Array, default: []
+      list_field :swatch_facets
+    end
+  end
+end

data/app/queries/workarea/search/category_browse.decorator

@@ -0,0 +1,7 @@
+module Workarea
+  decorate Search::CategoryBrowse, with: 'swatches' do
+    decorated do
+      include Search::SwatchedFacets
+    end
+  end
+end

data/app/queries/workarea/search/product_search.decorator

@@ -0,0 +1,7 @@
+module Workarea
+  decorate Search::ProductSearch, with: 'swatches' do
+    decorated do
+      include Search::SwatchedFacets
+    end
+  end
+end

data/app/queries/workarea/search/swatched_facets.rb

@@ -0,0 +1,19 @@
+module Workarea
+  module Search
+    module SwatchedFacets
+      def facets
+        @swatched_facets ||= begin
+          swatch_facet_names = swatched_facets.map(&:name)
+          without_swatches = super.reject { |f| f.name.in?(swatch_facet_names) }
+          swatched_facets + without_swatches
+        end
+      end
+
+      def swatched_facets
+        Search::Settings.current.swatch_facets.map do |swatch_facet|
+          SwatchesFacet.new(self, swatch_facet)
+        end
+      end
+    end
+  end
+end

data/app/queries/workarea/search/swatches_facet.rb

@@ -0,0 +1,13 @@
+module Workarea
+  module Search
+    class SwatchesFacet < TermsFacet
+      # This class exists so we have a specific facet type to allow rendering
+      # a different partial in the storefront to give us the opportunity to show
+      # the swatches
+
+      def type
+        :swatches
+      end
+    end
+  end
+end

data/app/seeds/workarea/swatches_seeds.rb

@@ -0,0 +1,37 @@
+module Workarea
+  class SwatchesSeeds
+    COLORS = {
+      red: '#f44336',
+      pink: '#e91e63',
+      purple: '#9c27b0',
+      deep_purple: '#673ab7',
+      indigo: '#3f51b5',
+      blue: '#2196f3',
+      light_blue: '#03a9f4',
+      cyan: '#00bcd4',
+      teal: '#009688',
+      green: '#4caf50',
+      light_green: '#8bc34a',
+      lime: '#cddc39',
+      yellow: '#ffeb3b',
+      amber: '#ffc107',
+      orange: '#ff9800',
+      deep_orange: '#ff5722',
+      brown: '#795548',
+      grey: '#9e9e9e',
+      blue_grey: '#607d8b',
+      white: '#ffffff',
+      black: '#000000'
+    }
+
+    def perform
+      puts 'Adding swatches...'
+
+      COLORS.each do |name, hex|
+        Catalog::Swatch.create!(name: name.to_s.titleize, hex: hex)
+      end
+
+      Search::Settings.current.update_attributes!(swatch_facets: ['Color'])
+    end
+  end
+end