workarea-swatches 1.0.5

data/app/view_models/workarea/storefront/product_templates/swatches_view_model.rb

@@ -0,0 +1,57 @@
+module Workarea
+  module Storefront
+    class ProductTemplates::SwatchesViewModel < ProductViewModel
+      include OptionSetViewModel
+
+      def images_by_option
+        @images_by_option ||= model
+          .images
+          .reject { |i| i.option.blank? }
+          .group_by { |i| i.option.optionize }
+          .with_indifferent_access
+          .transform_keys(&:optionize)
+      end
+
+      def swatches_by_option
+        @swatches_by_option ||= Hash[swatches_with_overrides.map { |s| [s.id, s] }]
+      end
+
+      def browse_link_options
+        return super unless current_browse_selection.present?
+        super.merge(browse_swatch_option.slug => current_browse_selection)
+      end
+
+      def browse_swatch_option
+        @browse_swatch_option ||=
+          Workarea.config.browse_swatch_option.call(self, options_for_selection)
+      end
+
+      def display_browse_swatches?
+        return false if model.try(:browse_option).present?
+        browse_swatch_option.present?
+      end
+
+      def current_browse_selection
+        return if browse_swatch_option.blank?
+        options[browse_swatch_option.slug]
+      end
+
+      def current_browse_selection?(selection)
+        current_browse_selection == selection
+      end
+
+      private
+
+      def swatches_with_overrides
+        (global_swatches + model.swatches).map do |swatch|
+          override_swatch = model.swatches.detect { |s| s.id == swatch.id }
+          override_swatch || swatch
+        end
+      end
+
+      def global_swatches
+        @global_swatches ||= Catalog::Swatch.all.to_a
+      end
+    end
+  end
+end

data/app/views/workarea/admin/activities/_catalog_product_swatch_create.html.haml

@@ -0,0 +1,10 @@
+.activity
+  .activity__header
+    .activity__avatar
+      = link_to_modifier(entry) do
+        = avatar_for entry.modifier
+    %h3.activity__name= link_to_modifier(entry)
+    %p.activity__time= activity_time(entry.created_at)
+  .activity__message
+    - name = entry.root.blank? ? t('workarea.admin.activities.a_product') : link_to(entry.root.name, catalog_product_path(entry.root))
+    = t('workarea.admin.activities.catalog_product_swatch_create_html', name: name)

data/app/views/workarea/admin/activities/_catalog_product_swatch_destroy.html.haml

@@ -0,0 +1,10 @@
+.activity
+  .activity__header
+    .activity__avatar
+      = link_to_modifier(entry) do
+        = avatar_for entry.modifier
+    %h3.activity__name= link_to_modifier(entry)
+    %p.activity__time= activity_time(entry.created_at)
+  .activity__message
+    - name = entry.root.blank? ? t('workarea.admin.activities.a_product') : link_to(entry.root.name, catalog_product_path(entry.root))
+    = t('workarea.admin.activities.catalog_product_swatch_destroy_html', name: name)

data/app/views/workarea/admin/activities/_catalog_swatch_create.html.haml

@@ -0,0 +1,12 @@
+.activity
+  .activity__header
+    .activity__avatar
+      = link_to_modifier(entry) do
+        = avatar_for entry.modifier
+    %h3.activity__name= link_to_modifier(entry)
+    %p.activity__time= activity_time(entry.created_at)
+  .activity__message
+    - if entry.audited.present?
+      = t('workarea.admin.activities.catalog_swatch_create_html', name: link_to(entry.audited.name, catalog_swatch_path(entry.audited)))
+    - else
+      = t('workarea.admin.activities.catalog_swatch_create_html', name: entry.model_name)

data/app/views/workarea/admin/activities/_catalog_swatch_destroy.html.haml

@@ -0,0 +1,10 @@
+.activity
+  .activity__header
+    .activity__avatar
+      = link_to_modifier(entry) do
+        = avatar_for entry.modifier
+    %h3.activity__name= link_to_modifier(entry)
+    %p.activity__time= activity_time(entry.created_at)
+  .activity__message
+    = t('workarea.admin.activities.catalog_swatch_destroy_html', name: entry.model_name)
+    = link_to_restore_for(entry)

data/app/views/workarea/admin/catalog_product_swatches/edit.html.haml

@@ -0,0 +1,52 @@
+- @page_title = t('workarea.admin.catalog_product_swatches.edit.edit_swatch_for', product: @product.name)
+
+.product-images.view
+  .view__header
+    .grid.grid--middle
+      .grid__cell.grid__cell--25
+        = render 'workarea/admin/releases/select'
+      .grid__cell.grid__cell--50
+        .view__heading
+          = link_to_index_for(@product)
+          %h1= link_to @product.name, url_for(@product)
+      .grid__cell.grid__cell--25
+        = render_aux_navigation_for(@product)
+
+  .view__container
+    = render_cards_for(@product, :swatches)
+
+  .view__container.view__container--narrow
+    .section
+      .product-images__option-group
+        .product-images__option
+          .product-images__option-header
+            .product-images__option-title= @swatch.option.present? ? "#{@swatch.option.titleize}  #{t('workarea.admin.catalog_product_swatches.edit.swatch')}" : t('workarea.admin.catalog_product_swatches.edit.without_options')
+
+          .product-images__image-group
+            .product-images__image
+              .product-images__image-summary
+                .product-images__image-summary-container= image_tag @swatch.image.process(:swatch).url, alt: "#{@swatch.option} #{t('workarea.admin.catalog_product_swatches.edit.swatch')}", id: @swatch.option.parameterize, class: 'product-images__image-summary-image'
+
+    .section
+      %h2= t('workarea.admin.catalog_product_swatches.edit.edit_swatch')
+
+      = form_tag catalog_product_swatch_path(@product, @swatch), method: :patch, multipart: true do
+        .property
+          = label_tag 'swatch_image', t('workarea.admin.fields.image'), class: 'property__name'
+          = file_field_tag 'swatch[image]', value: @swatch.url
+
+        .property
+          = label_tag 'swatch_option',  t('workarea.admin.fields.option'), class: 'property__name'
+          = text_field_tag 'swatch[option]', @swatch.option, class: 'text-box text-box--medium', data: { autocomplete_field: options_catalog_product_images_path(@product) }
+
+        = append_partials('admin.product_swatch_fields')
+
+        = append_partials('admin.product_swatches', product: @product)
+
+        .workflow-bar
+          .grid.grid--right.grid--middle
+            .grid__cell.grid__cell--20
+              = link_to t('workarea.admin.form.cancel'), catalog_product_swatches_path(@product), class: 'workflow-bar__button workflow-bar__button--delete'
+            .grid__cell.grid__cell--80
+              .grid.grid--auto.grid--right.grid--middle
+                .grid__cell= button_tag t('workarea.admin.form.save_changes'), value: 'save_product_image', class: 'workflow-bar__button workflow-bar__button--update'

data/app/views/workarea/admin/catalog_product_swatches/index.html.haml

@@ -0,0 +1,65 @@
+- @page_title = t('workarea.admin.catalog_product_swatches.index.swatches_for', product: @product.name)
+.product-images.view
+  .view__header
+    .grid.grid--middle
+      .grid__cell.grid__cell--25
+        = render 'workarea/admin/releases/select'
+      .grid__cell.grid__cell--50
+        .view__heading
+          = link_to_index_for(@product)
+          %h1= link_to @product.name, url_for(@product)
+      .grid__cell.grid__cell--25
+        = render_aux_navigation_for(@product)
+
+  .view__container
+    = render_cards_for(@product, :swatches)
+
+  .view__container.view__container--narrow
+    .section
+      - if @product.swatches.blank?
+        %h2.align-center= t('workarea.admin.catalog_swatches.index.no_swatches')
+      - else
+        %table.index-table
+          %thead
+            %tr
+              %th= t('workarea.admin.fields.name')
+              %th= t('workarea.admin.fields.color')
+              %th= t('workarea.admin.fields.image')
+              %th= t('workarea.admin.actions.remove')
+          %tbody
+            - @product.swatches.each do |swatch|
+              %tr.index-table__row
+                %td= swatch.name
+                %td
+                  = form_tag catalog_product_swatch_path(@product, swatch), method: 'patch' do
+                    = color_field_tag 'swatch[hex]', swatch.hex, class: 'color-picker__input', data: { form_submitting_control: '' }, id: nil
+                %td
+                  = form_tag catalog_product_swatch_path(@product, swatch), method: 'patch', multipart: true do
+                    = image_tag swatch.image.process(:small).url if swatch.image.present?
+                    = file_field_tag 'swatch[image]', class: 'text-box', data: { form_submitting_control: '' }, id: nil
+                %td
+                  = form_tag catalog_product_swatch_path(@product, swatch), method: 'delete', class: 'text-button text-button--destroy' do
+                    = button_tag value: 'remove_swatch', class: 'text-button text-button--destroy' do
+                      = inline_svg('workarea/admin/icons/delete.svg', class: 'text-button__icon', title: t('workarea.admin.actions.delete'))
+
+    .section
+      .grid.grid--center
+        .grid__cell.grid__cell--50
+          %h2.align-center= t('workarea.admin.catalog_swatches.index.add_new')
+
+          = form_tag catalog_product_swatches_path(@product), method: 'post', multipart: true do
+            .grid.grid--auto
+              .grid__cell
+                .property.property--required
+                  = label_tag 'swatch_name', t('workarea.admin.fields.name'), class: 'property__name'
+                  = text_field_tag 'swatch[name]', params.dig(:swatch, :name), class: 'text-box text-box--medium', required: true, id: nil
+              .grid__cell
+                .property
+                  = label_tag 'swatch_hex', t('workarea.admin.fields.color'), class: 'property__name'
+                  = color_field_tag 'swatch[hex]', params.dig(:swatch, :hex), class: 'color-picker__input', id: nil
+              .grid__cell
+                .property
+                  = label_tag 'swatch_image', t('workarea.admin.fields.image'), class: 'property__name'
+                  = file_field_tag 'swatch[image]', class: 'text-box text-box--large', id: nil
+
+            = button_tag t('workarea.admin.actions.save'), value: 'save_new_swatch', class: 'button'

data/app/views/workarea/admin/catalog_products/_swatches_card.html.haml

@@ -0,0 +1,27 @@
+.grid__cell
+  .card{ class: card_classes(:swatches, local_assigns[:active]) }
+    = link_to catalog_product_swatches_path(model), class: 'card__header' do
+      %span.card__header-text= t('workarea.admin.catalog_products.cards.swatches.title')
+      = inline_svg 'workarea/admin/icons/images.svg', class: 'card__icon'
+
+    - if local_assigns[:active].blank?
+      .card__body
+        - if model.swatches.empty?
+          %p= t('workarea.admin.catalog_products.cards.swatches.description')
+          = link_to catalog_product_swatches_path(model), class: 'card__button' do
+            %span.button.button--small= t('workarea.admin.catalog_products.cards.swatches.add_swatches')
+        - else
+          %ul.grid
+            - model.swatches.take(4).each_with_index do |swatch, i|
+              %li.grid__cell.grid__cell--50
+                - if i == 3 && model.swatches.size > 4
+                  .card__photo-box
+                    %span.card__photo +#{model.swatches.size - i}
+                - elsif swatch.image.present?
+                  .card__photo-box
+                    = image_tag swatch.image.process(:small_thumb).url, alt: swatch.name, class: 'card__photo'
+                - else
+                  .card__photo-box{ style: "background-color: #{swatch.hex};" }
+
+          = link_to catalog_product_swatches_path(model), class: 'card__button' do
+            %span.button.button--small= t('workarea.admin.catalog_products.cards.swatches.manage_swatches')

data/app/views/workarea/admin/catalog_swatches/_primary_navigation.html.haml

@@ -0,0 +1 @@
+%li{ class: "primary-nav__item" }= link_to t('workarea.admin.catalog_swatches.primary_navigation.swatches'), catalog_swatches_path, class: navigation_link_classes(catalog_swatches_path)

data/app/views/workarea/admin/catalog_swatches/index.html.haml

@@ -0,0 +1,78 @@
+- @page_title= t('workarea.admin.catalog_swatches.index.page_title')
+
+.view
+  .view__header
+    .grid.grid--center
+      .grid__cell.grid__cell--50
+        .view__heading
+          = link_to "↑ #{t('workarea.admin.catalog.dashboard_link')}", catalog_dashboards_path, class: 'view__dashboard-button'
+          %h1.heading--no-margin= t('workarea.admin.catalog_swatches.index.page_title')
+          %p= t('workarea.admin.catalog_swatches.index.description')
+
+  .view__container.view__container--narrow
+    .section
+      - if @swatches.blank?
+        %h2= t('workarea.admin.catalog_swatches.index.no_swatches')
+      - else
+        %table.index-table
+          %thead
+            %tr
+              %th= t('workarea.admin.fields.name')
+              %th= t('workarea.admin.fields.color')
+              %th= t('workarea.admin.fields.image')
+              %th= t('workarea.admin.actions.remove')
+          %tbody
+            - @swatches.each do |swatch|
+              %tr.index-table__row
+                %td= swatch.name
+                %td
+                  = form_tag catalog_swatch_path(swatch), method: 'patch' do
+                    = color_field_tag 'swatch[hex]', swatch.hex, class: 'color-picker__input', data: { form_submitting_control: '' }, id: nil
+                %td
+                  = form_tag catalog_swatch_path(swatch), method: 'patch', multipart: true do
+                    = image_tag swatch.image.process(:small).url if swatch.image.present?
+                    = file_field_tag 'swatch[image]', class: 'text-box', data: { form_submitting_control: '' }, id: nil
+                %td
+                  = form_tag catalog_swatch_path(swatch), method: 'delete', class: 'text-button text-button--destroy' do
+                    = button_tag value: 'remove_swatch', class: 'text-button text-button--destroy' do
+                      = inline_svg('workarea/admin/icons/delete.svg', class: 'text-button__icon', title: t('workarea.admin.actions.delete'))
+
+    .section
+      .grid
+        .grid__cell.grid__cell--50
+          %h2= t('workarea.admin.catalog_swatches.index.add_new')
+
+          = form_tag catalog_swatches_path, method: 'post', multipart: true do
+            .grid.grid--auto
+              .grid__cell
+                .property.property--required
+                  = label_tag 'swatch_name', t('workarea.admin.fields.name'), class: 'property__name'
+                  = text_field_tag 'swatch[name]', params.dig(:swatch, :name), class: 'text-box text-box--medium', required: true, id: nil
+              .grid__cell
+                .property
+                  = label_tag 'swatch_hex', t('workarea.admin.fields.color'), class: 'property__name'
+                  = color_field_tag 'swatch[hex]', params.dig(:swatch, :hex), class: 'color-picker__input', id: nil
+              .grid__cell
+                .property
+                  = label_tag 'swatch_image', t('workarea.admin.fields.image'), class: 'property__name'
+                  = file_field_tag 'swatch[image]', class: 'text-box text-box--large', id: nil
+
+            = button_tag t('workarea.admin.actions.save'), value: 'save_new_swatch', class: 'button'
+
+        .grid__cell.grid__cell--50
+          %h2= t('workarea.admin.catalog_swatches.index.manage_filters')
+
+          = form_tag search_settings_path, method: 'patch', data: { unsaved_changes: '' } do
+            = hidden_field_tag :return_to, catalog_swatches_path
+            .property
+              = label_tag 'swatch_facets_list', class: 'property__name' do
+                = t('workarea.admin.catalog_swatches.index.swatch_filters')
+                = link_to '#swatch-facets-info', data: { tooltip: '' } do
+                  = inline_svg('workarea/admin/icons/help.svg', class: 'svg-icon svg-icon--small svg-icon--blue', title: t('workarea.admin.catalog_swatches.index.swatch_filters'))
+
+              = text_field_tag 'settings[swatch_facets_list]', @search_settings.swatch_facets_list, class: 'text-box'
+              %span.property__note= t('workarea.admin.form.csv_field_note')
+              #swatch-facets-info.tooltip-content
+                %p= t('workarea.admin.catalog_swatches.index.swatch_facets_info')
+
+            = button_tag t('workarea.admin.actions.save'), value: 'save_settings', class: 'button'

data/app/views/workarea/api/storefront/facets/_swatches.json.jbuilder

@@ -0,0 +1,17 @@
+json.type facet.type
+json.name facet.name
+json.display_name facet.display_name
+
+json.results facet.results do |name, count|
+  json.name name
+  json.count count
+
+  @swatches_cache ||= Workarea::Catalog::Swatch.all.to_a
+  swatch = @swatches_cache.detect { |s| s.id == name.systemize }
+
+  if swatch&.image?
+    json.swatch_image swatch.image.process(:facet_swatch).url
+  elsif swatch&.hex?
+    json.swatch_hex swatch.hex
+  end
+end

data/app/views/workarea/storefront/facets/_swatches.html.haml

@@ -0,0 +1,14 @@
+%div{ class: "result-filters__section result-filters__section--#{facet.system_name}" }
+  %h2= t('workarea.storefront.products.filter_title', name: facet.display_name)
+  %ul.result-filters__group
+    - facet.results.each do |value_name, count|
+      %li.result-filters__filter{ class: facet.selected?(value_name) ? 'result-filters__filter--selected' : nil }
+        = link_to render_swatch_facet(value_name), facet_path(facet, value_name), rel: 'nofollow', class: 'results-filters__swatch-link'
+
+        = link_to facet_path(facet, value_name), rel: 'nofollow', class: 'result-filters__link' do
+          = value_name.titleize
+
+          - if facet.selected?(value_name)
+            %strong.result-filters__remove= t('workarea.storefront.products.remove_filter')
+          -else
+            %span.result-filters__count (#{count})

data/app/views/workarea/storefront/products/_swatch_summary.html.haml

@@ -0,0 +1,17 @@
+- if product.try(:display_browse_swatches?)
+  .swatch-options.swatch-options--small
+    %ul.swatch-options__group
+      - product.browse_swatch_option.selections.each do |selection|
+        - swatch = product.swatches_by_option[selection.optionize]
+        - swatch_content = render_browse_swatch(selection, swatch)
+
+        - if product.current_browse_selection?(selection)
+          %li.swatch-options__swatch.swatch-options__swatch--selected>
+            = swatch_content
+        - else
+          %li.swatch-options__swatch>
+            - selection_options = option_selection_url_for(product, product.browse_swatch_option, selection)
+            - product_path = product_path(product, product.browse_link_options.merge(selection_options))
+
+            = link_to product_path, title: selection, class: 'swatch-options__swatch-button', data: { product_summary_swatch: { url: summary_product_path(product, selection_options) }.to_json } do
+              = swatch_content

data/app/views/workarea/storefront/products/templates/_swatches.html.haml

@@ -0,0 +1,79 @@
+.grid.grid--rev
+  .grid__cell.grid__cell--60-at-medium
+
+    .product-details__name
+      %h1.product-details__heading{ itemprop: 'name' }= product.name
+
+      %p.product-details__id
+        %span{ itemprop: 'productID' }= product.id
+
+    .product-prices.product-prices--details{ itemprop: 'offers', itemscope: true, itemtype: 'http://schema.org/Offer' }
+      = render 'workarea/storefront/products/pricing', product: product
+
+    = append_partials('storefront.product_pricing_details', product: product)
+
+    - if product.description.present?
+      .product-details__description
+        %p= truncated_product_description(product, t('workarea.storefront.products.read_more'))
+
+    = form_tag cart_items_path, method: 'post', class: 'product-details__add-to-cart-form', data: { dialog_form: { dialogOptions: { closeAll: true, initModules: true } }, analytics: add_to_cart_analytics_data(product).to_json } do
+      = hidden_field_tag :product_id, product.id, id: dom_id(product, 'product_id')
+      = hidden_field_tag :sku, product.current_sku
+      = hidden_field_tag :via, params[:via], id: dom_id(product, 'via')
+
+      - product.options_for_selection.each do |option|
+        .property
+          = label_tag option.slug, nil, class: 'property__name', for: "#{option.slug}_#{dom_id(product)}" do
+            %span.property__text= option_label(option)
+          .value
+            - option.selections.each do |selection|
+              = radio_button_tag option.slug, selection, option.current == selection, required: true, title: selection, class: 'visually-hidden', id: nil
+              = link_to option_selection_url_for(product, option, selection), title: selection, class: "option-button option-button--#{selection.downcase.dasherize}#{' option-button--active' if option.current == selection}", data: { option_button: '' } do
+                - swatch_content = render_swatch_option(selection, product.swatches_by_option[selection.optionize])
+
+                - if swatch_content.present?
+                  = swatch_content
+                - elsif product.images_by_option[selection.optionize].present?
+                  = image_tag(product_image_url(product.images_by_option[selection.optionize].first, :small_thumb), alt: selection, class: 'option-button__image')
+                - else
+                  %span.option-button__text= selection
+
+      - unless product.currently_selected_options.blank?
+        = link_to t('workarea.storefront.products.clear_selections'), product_path(product), data: { option_button: '' }
+
+      = append_partials('storefront.add_to_cart_form', product: product)
+
+      - if product.purchasable?
+        .product-details__quantity
+          .property
+            = label_tag :quantity, nil, class: 'property__name', for: "quantity#{dom_id(product)}" do
+              %span.property__text= t('workarea.storefront.products.quantity')
+            .value
+              = number_field_tag :quantity, params[:quantity] || 1, class: 'text-box text-box--x-small', required: true, min: 1, id: "quantity#{dom_id(product)}"
+              - if product.current_sku.present?
+                .value__note= product.inventory_status
+
+        %p.product-details__add-to-cart-action= button_tag t('workarea.storefront.products.add_to_cart'), value: 'add_to_cart', class: 'button button--large'
+
+      - else
+        = hidden_field_tag :quantity, params[:quantity] || 1, id: "quantity#{dom_id(product)}"
+        %p.product-details__unavailable= t('workarea.storefront.products.unavailable')
+
+    = append_partials('storefront.product_details', product: product)
+
+    %p.product-details__full-details=link_to t('workarea.storefront.products.view_full_details'), product_path(product, color: params[:color]), class: 'text-button', itemprop: 'url'
+
+  .grid__cell.grid__cell--40-at-medium
+
+    .product-details__primary-image
+      = link_to(product_image_url(product.primary_image, :zoom), target: '_blank', rel: 'noopener', class: 'product-details__primary-image-link', data: { dialog_button: '' }) do
+        = image_tag product_image_url(product.primary_image, :detail), alt: t('workarea.storefront.products.image_alt_attribute', name: product.name), itemprop: 'image', class: 'product-details__primary-image-link-image'
+
+    - if product.images.length > 1
+      .product-details__alt-images
+        .grid.grid--auto
+          - product.images.each_with_index do |image, index|
+            .grid__cell
+              .product-details__alt-image
+                - button_class = index == 0 ? 'product-details__alt-image-link product-details__alt-image-link--selected' : 'product-details__alt-image-link'
+                = link_to(image_tag(product_image_url(image, :small_thumb), alt: t('workarea.storefront.products.zoom')), product_image_url(image, :zoom), class: button_class, target: '_blank', rel: 'noopener', data: { alternate_image_button: { src: product_image_url(image, :detail) }.to_json })