workarea-product_grid_content 1.3.0

data/app/view_models/workarea/storefront/category_view_model.decorator

@@ -0,0 +1,11 @@
+module Workarea
+  decorate Storefront::CategoryViewModel, with: :product_grid_content do
+    decorated do
+      include Storefront::ProductGridContent
+    end
+
+    def product_grid_content_blocks
+      @product_grid_content_blocks ||= content_blocks_for(:in_grid)
+    end
+  end
+end

data/app/view_models/workarea/storefront/content_blocks/grid_content.rb

@@ -0,0 +1,40 @@
+module Workarea
+  module Storefront
+    module ContentBlocks
+      module GridContent
+        def position
+          # Product grid index starts at 0.
+          # Offset position to make admin UI more intuitive
+          data[:position] - 1
+        end
+
+        def preview_position
+          return position unless position > Workarea.config.grid_cell_content_preview_cells
+          position % Workarea.config.grid_cell_content_preview_cells
+        end
+
+        def cell_width_class
+          Workarea.config.product_grid_cell_classes[data[:width].to_sym]
+        end
+
+        def cell_styles
+          styles = []
+          styles << "float: #{float_side};" if float?
+          styles.join(" ")
+        end
+
+        def float?
+          data[:height].to_i > 1 || data[:float] != "none"
+        end
+
+        def float_side
+          if data[:height].to_i > 1 && data[:float] == "none"
+            "left"
+          else
+            data[:float]
+          end
+        end
+      end
+    end
+  end
+end

data/app/view_models/workarea/storefront/content_blocks/insights_grid_cell_view_model.rb

@@ -0,0 +1,25 @@
+module Workarea
+  module Storefront
+    module ContentBlocks
+      class InsightsGridCellViewModel < ProductInsightsViewModel
+        include GridContent
+
+        def products
+          super.first(number_of_products)
+        end
+
+        def sub_grid_cell_class
+          if data[:width] == '2'
+            'grid__cell--50-at-medium'
+          end
+        end
+
+        private
+
+        def number_of_products
+          (data[:width].presence || 1).to_i * (data[:height].presence || 1).to_i
+        end
+      end
+    end
+  end
+end

data/app/view_models/workarea/storefront/content_blocks/product_grid_cell_view_model.rb

@@ -0,0 +1,23 @@
+module Workarea
+  module Storefront
+    module ContentBlocks
+      class ProductGridCellViewModel < ContentBlockViewModel
+        include GridContent
+
+        def image
+          @image ||= find_asset(data[:asset])
+        end
+
+        def block_styles
+          styles = []
+          styles << background
+          styles.join(" ")
+        end
+
+        def background
+          "background: #{model.data[:background_color]} url(#{image.url}) no-repeat;"
+        end
+      end
+    end
+  end
+end

data/app/view_models/workarea/storefront/product_grid_content.rb

@@ -0,0 +1,17 @@
+module Workarea
+  module Storefront
+    module ProductGridContent
+      def product_position_offset
+        page_number = options[:page].present? ? options[:page].to_i - 1 : 0
+
+        page_number * Workarea.config.per_page
+      end
+
+      def product_grid_content_for(position)
+        product_grid_content_blocks.select do |block|
+          block.position == (position + product_position_offset)
+        end
+      end
+    end
+  end
+end

data/app/view_models/workarea/storefront/search_view_model.decorator

@@ -0,0 +1,12 @@
+module Workarea
+  decorate Storefront::SearchViewModel, with: :product_grid_content do
+    decorated do
+      include Storefront::ProductGridContent
+    end
+
+    def product_grid_content_blocks
+      return [] unless customization.persisted?
+      customization.content_blocks_for(:in_grid)
+    end
+  end
+end

data/app/views/layouts/workarea/storefront/in_grid_content_preview.html.haml

@@ -0,0 +1,55 @@
+- add_css(layout_content.css)
+- add_javascript(layout_content.javascript)
+
+- if @content.present?
+  - add_css(@content.css)
+  - add_javascript(@content.javascript)
+
+!!!
+/
+  Platform: Workarea Ecommerce
+  Web:      http://workarea.com
+  Email:    sales@workarea.com
+  Phone:    215-925-1800
+
+%html{ lang: 'en' }
+  %head
+    %meta{ charset: 'utf-8' }
+    %title= page_title
+    = csrf_meta_tags
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
+    %meta{ property: 'locale', content: I18n.locale }
+    %meta{ property: 'environment', content: Rails.env }
+    %meta{ property: 'analytics', content: 'disable' }
+    = alternate_locales_tags
+    = favicon_tags
+
+    :css
+      @-ms-viewport { width: device-width; }
+      @viewport { width: device-width; }
+    = yield :head
+    = stylesheet_link_tag Workarea.config.asset_manifests.storefront_stylesheet, media: 'all'
+    = yield :css
+
+    = append_partials('storefront.document_head')
+    = javascript_include_tag Workarea.config.asset_manifests.storefront_javascript_head
+
+  %body{ data: { disable_admin_toolbar: '' }, class: ('content-preview-visibility' unless params[:disable_visibility_classes].presence) }
+
+    - if @content.present?
+      .clearfix{ data: { content_block: '' } }
+        .pagination
+          .grid
+            - (0...Workarea.config.grid_cell_content_preview_cells).each do |cell_pos|
+              - if cell_pos == @block.preview_position
+                = yield
+              - else
+                .grid__cell{ class: Workarea.config.product_grid_cell_classes[:'1'] }
+                  .product-summary
+                    = render 'workarea/storefront/products/summary', product: @product
+    - else
+      = yield
+
+    = javascript_include_tag Workarea.config.asset_manifests.storefront_javascript
+    = yield :javascript
+    = append_partials('storefront.javascript')

data/app/views/workarea/storefront/content_blocks/_insights_grid_cell.html.haml

@@ -0,0 +1,8 @@
+.grid__cell{ class: view_model.cell_width_class, style: view_model.cell_styles, data: { pagination_item: '' } }
+  .insights-grid-cell-content-block{ data: { match_product_summary_height: { rows: height }.to_json } }
+    - if view_model.products.present?
+      .grid
+        - view_model.products.each do |product|
+          .grid__cell{ class: view_model.sub_grid_cell_class }
+            .product-summary
+              = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/content_blocks/_product_grid_cell.html.haml

@@ -0,0 +1,10 @@
+.grid__cell{ class: view_model.cell_width_class, style: view_model.cell_styles, data: { pagination_item: '' } }
+  .product-grid-cell-content-block{ style: view_model.block_styles, data: { match_product_summary_height: { rows: height }.to_json } }
+    - if link.present?
+      = link_to '', link, class: 'product-grid-cell-content-block__background-link'
+    - if heading.present? || link_text.present?
+      .product-grid-cell-content-block__content
+        - if heading.present?
+          %h2.product-grid-cell-content-block__heading= heading
+        - if link_text.present? && link.present?
+          %p.product-grid-cell-content-block__action= link_to link_text, link, class: link_style

data/app/views/workarea/storefront/shared/_product_grid_content_cell.html.haml

@@ -0,0 +1,3 @@
+- model = @category || @search
+- if model.product_grid_content_for(position).present?
+  = render_content_blocks(model.product_grid_content_for(position))

data/app/views/workarea/storefront/style_guides/components/_product_grid_cell_content_block.html.haml

@@ -0,0 +1,27 @@
+#product-grid-cell-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_grid_cell_content_block')
+
+  %p A content block that displays an image with positionable content in the product grid.
+  %p This content block is designed for use inside the product grid.
+  %p Options for width and height allow the admin user to create blocks that are 1x1, 1x2, 2x1, and 2x2 cells in size.
+  %p When creating a block that is taller than 1 cell the block will automatically be floated to the left to prevent breaking the grid. This float can be set to 'right' using controls in the admin.
+
+  - [1, 2].each do |width|
+    - [1, 2].each do |height|
+      %p
+        Should display a <b>#{width} x #{height} cell</b>
+        - if height > 1
+          and should automatically float left
+
+      - cell_width_class = Workarea.config.product_grid_cell_classes[width.to_s.to_sym]
+      - cell_styles = height > 1 ? "height: 500px; float: left;" : "height: 250px;"
+      .grid{ class: ('clearfix' if height > 1) }
+        .grid__cell{ class: cell_width_class, style: cell_styles, data: { pagination_item: '' } }
+          .product-grid-cell-content-block{ data: { match_product_summary_height: { rows: height }.to_json } }
+            .product-grid-cell-content-block__content
+              %h2 Heading Text
+              %p.product-grid-cell-content-block__action= link_to 'Link Text', '#', class: 'button'
+            .product-grid-cell-content-block__media-container.product-grid-cell-content-block__media-container--maintain-aspect-ratio
+              = link_to '#', class: 'product-grid-cell-content-block__image-link' do
+                = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: "image alt", class: 'product-grid-cell-content-block__image', style: "height: 100%"

data/bin/rails

@@ -0,0 +1,25 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path("..", __dir__)
+ENGINE_PATH = File.expand_path("../lib/workarea/product_grid_content/engine", __dir__)
+APP_PATH = File.expand_path("../test/dummy/config/application", __dir__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require "rails"
+# Pick the frameworks you want:
+require "active_model/railtie"
+require "active_job/railtie"
+# require "active_record/railtie"
+# require "active_storage/engine"
+require "action_controller/railtie"
+require "action_mailer/railtie"
+require "action_view/railtie"
+# require "action_cable/engine"
+require "sprockets/railtie"
+require "rails/test_unit/railtie"
+require 'rails/engine/commands'

data/config/initializers/appends.rb

@@ -0,0 +1,23 @@
+module Workarea
+  Plugin.append_javascripts(
+    "storefront.modules",
+    "workarea/storefront/product_grid_content/modules/match_product_summary_height"
+  )
+
+  Plugin.append_stylesheets(
+    "storefront.components",
+    "workarea/product_grid_content/components/content_block_product_grid_cell",
+    "workarea/product_grid_content/components/product_grid_cell_content_block",
+    "workarea/product_grid_content/components/pagination_product_grid_content"
+  )
+
+  Plugin.append_partials(
+    "storefront.category_browse_grid_item",
+    "workarea/storefront/shared/product_grid_content_cell"
+  )
+
+  Plugin.append_partials(
+    "storefront.search_grid_item",
+    "workarea/storefront/shared/product_grid_content_cell"
+  )
+end

data/config/initializers/content_block_config.rb

@@ -0,0 +1,17 @@
+Workarea.configure do |config|
+  config.content_areas = config.content_areas.merge(
+    "category" => %w(above_results in_grid below_results),
+    "customization" => %w(above_results in_grid)
+  )
+
+  config.product_grid_cell_classes = {
+    "1": "grid__cell--50 grid__cell--25-at-medium grid__cell--20-at-wide",
+    "2": "grid__cell--50-at-medium grid__cell--40-at-wide"
+  }
+
+  config.grid_cell_content_preview_cells = 10
+
+  config.product_grid_cell_content_block = {
+    color_presets: ["#000000", "#ffffff", "#999999", "#ff0000", "#00ff00", "#0000ff"]
+  }
+end

data/config/initializers/content_block_types.rb

@@ -0,0 +1,48 @@
+Workarea::Content.define_block_types do
+  block_type "Product Grid Cell" do
+    description "Content block for your product grid"
+    view_model "Workarea::Storefront::ContentBlocks::ProductGridCellViewModel"
+
+    fieldset "Grid" do
+      field "Position", :integer, default: 1, min: 1, tooltip: "Where the content block will appear within the product grid"
+      field "Width", :options, values: [["1 cell", 1], ["2 cells", 2]], default: 1, tooltip: "Set the width of the content block. Use preview to ensure that a 2 cell width block is positioned so that it will wrap correctly at all breakpoints."
+      field "Height", :options, values: [["1 cell", 1], ["2 cells", 2]], default: 1, tooltip: "Note: When creating a 2 cell height the block must be floated left or right in order for the grid to flow around the content properly. If float is set to 'none' it will automatically float left."
+      field "Float", :options, values: ["none", "left", "right"], default: "none", tooltip: "Forces the content block to the left or right side of the row. This setting is intended for use with a 2 cell height block."
+    end
+
+    fieldset "Content" do
+      field "Asset", :asset, file_types: "image", default: find_asset_id_by_file_name("960x470_light.png"), html_data_attributes: { media_mode: ["resize", "crop", "switch"] }
+      field "Background Color", :color, default: "#000000", presets: Workarea.config.product_grid_cell_content_block[:color_presets]
+      field "Heading", :string, default: "Shop the look"
+      field "Link", :url, default: "/"
+      field "Link Text", :string, default: "Click Me!"
+      field "Link Style", :options, values: ["button", "text-button", "link"], default: "button"
+    end
+  end
+
+  block_type "Insights Grid Cell" do
+    description "Injust insights driven products to the product grid"
+    view_model "Workarea::Storefront::ContentBlocks::InsightsGridCellViewModel"
+
+    fieldset "Grid" do
+      field "Position", :integer, default: 1, min: 1, tooltip: "Where the content block will appear within the product grid"
+      field "Width", :options, values: [["1 cell", 1], ["2 cells", 2]], default: 1, tooltip: "Set the width of the content block. Use preview to ensure that a 2 cell width block is positioned so that it will wrap correctly at all breakpoints."
+      field "Height", :options, values: [["1 cell", 1], ["2 cells", 2]], default: 1, tooltip: "Note: When creating a 2 cell height the block must be floated left or right in order for the grid to flow around the content properly. If float is set to 'none' it will automatically float left."
+      field "Float", :options, values: ["none", "left", "right"], default: "none", tooltip: "Forces the content block to the left or right side of the row. This setting is intended for use with a 2 cell height block."
+    end
+
+    fieldset "Insights" do
+      field 'Type', :options, values: [
+        'Cold Products',
+        'Hot Products',
+        'Most Discounted Products',
+        'Non Sellers',
+        'Products To Improve',
+        'Promising Products',
+        'Star Products',
+        'Top Products',
+        'Trending Products'
+      ], default: 'Top Products'
+    end
+  end
+end

data/lib/workarea/product_grid_content/engine.rb

@@ -0,0 +1,8 @@
+module Workarea
+  module ProductGridContent
+    class Engine < ::Rails::Engine
+      include Workarea::Plugin
+      isolate_namespace Workarea::ProductGridContent
+    end
+  end
+end

data/lib/workarea/product_grid_content/version.rb

@@ -0,0 +1,5 @@
+module Workarea
+  module ProductGridContent
+    VERSION = "1.3.0".freeze
+  end
+end

data/lib/workarea/product_grid_content.rb

@@ -0,0 +1,11 @@
+require "workarea"
+require "workarea/storefront"
+require "workarea/admin"
+
+require "workarea/product_grid_content/engine"
+require "workarea/product_grid_content/version"
+
+module Workarea
+  module ProductGridContent
+  end
+end

data/package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "eslint": "~5.16.0",
+    "eslint-config-recommended": "~4.0.0",
+    "stylelint": "~10.1.0",
+    "stylelint-config-recommended-scss": "~3.3.0",
+    "stylelint-scss": "~3.9.2"
+  }
+}

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative 'config/application'
+
+Rails.application.load_tasks

data/test/dummy/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+load Gem.bin_path('bundler', 'bundle')

data/test/dummy/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path('../config/application', __dir__)
+require_relative '../config/boot'
+require 'rails/commands'

data/test/dummy/bin/rake

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run

data/test/dummy/bin/setup

@@ -0,0 +1,28 @@
+#!/usr/bin/env ruby
+require 'fileutils'
+include FileUtils
+
+# path to your application root.
+APP_ROOT = File.expand_path('..', __dir__)
+
+def system!(*args)
+  system(*args) || abort("\n== Command #{args} failed ==")
+end
+
+chdir APP_ROOT do
+  # This script is a starting point to setup your application.
+  # Add necessary setup steps to this file.
+
+  puts '== Installing dependencies =='
+  system! 'gem install bundler --conservative'
+  system('bundle check') || system!('bundle install')
+
+  # Install JavaScript dependencies if using Yarn
+  # system('bin/yarn')
+
+  puts "\n== Removing old logs and tempfiles =="
+  system! 'bin/rails log:clear tmp:clear'
+
+  puts "\n== Restarting application server =="
+  system! 'bin/rails restart'
+end