workarea-product_grid_content 1.3.0

data/.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "rules": {
+    "block-no-empty": null,
+    "no-descending-specificity": null,
+    "property-no-unknown": [true, { "ignoreProperties": ["mso-hide"] }]
+  }
+}

data/CHANGELOG.md

@@ -0,0 +1,104 @@
+Workarea Product Grid Content 1.3.0 (2019-06-25)
+--------------------------------------------------------------------------------
+
+*   Adds a new in grid content block leveraging insights data.
+
+    The new insights grid cell block type allows retailers to strategically insert products, driven by insights data, at any position within their category browse page and search customization product grids
+    Workarea minimum version requirement bumped to v3.4 to support new insight types
+
+    WPGC-20
+    Jake Beresford
+
+*   Add link to cover background image
+
+    Due to implementation of image as a CSS background the link is applied as an absolutely-relative positioned element which covers the background, and is behind the content area, allowing that text to remain accessible.
+
+    WPGC-4
+    Jake Beresford
+
+
+
+Workarea Product Grid Content 1.2.0 (2019-02-19)
+--------------------------------------------------------------------------------
+
+*   Add test for in grid content on search customizations
+
+    WPGC-18
+    Jake Beresford
+
+*   Allow in-grid content for search customizations
+
+    * Update configuration to add in-grid area to search cusotmizations
+    * Add logic to read content for in grid area from customization in search controller
+
+    WPGC-18
+    Jake Beresford
+
+
+
+Workarea Product Grid Content 1.1.0 (2018-11-13)
+--------------------------------------------------------------------------------
+
+*   Update block type definition to use find_asset_id_by_file_name
+
+    * Minimum Workarea version requirement is now v3.1.13
+
+    WPGC-17
+    Jake Beresford
+
+*   Sets the content image as a background image
+
+    The change caused the content block to collapse in the admin preview since
+    the content is positioned with absolute relativity. In order to make this
+    block work properly in the admin a new layout was added for content previews
+    in any 'in grid' area.
+
+    * Adds config for number of products to display in grid preview.
+    * Renders the content block in a relevant position in the grid.
+    * Add calculation for preview position to grid_content view model, allowing
+    the preview position to look good and work for cell width, cell height,
+    and position controls.
+
+    WPGC-9
+    Jake Beresford
+
+*   Add tooltips to blocktype definition
+
+    WPGC-7
+    Jake Beresford
+
+*   Allow admin user to specify a background color in lieu of an image
+
+    WPGC-10
+    Jake Beresford
+
+
+
+Workarea Product Grid Content 1.0.2 (2018-10-02)
+--------------------------------------------------------------------------------
+
+*   Fix pagination on firefox
+
+    * Extends clearfix in .pagination to allow for floated content blocks within the paged product results
+    * Add missing heading class to improve developer experience
+
+    WPGC-14
+    Jake Beresford
+
+
+
+Workarea Product Grid Content 1.0.1 (2018-05-24)
+--------------------------------------------------------------------------------
+
+*   Clean up markdown formatting of readme
+
+    WPGC-12
+    Dave Barnow
+
+
+
+Workarea Product Grid Content 1.0.0 (2018-03-22)
+--------------------------------------------------------------------------------
+
+
+

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,3 @@
+View this plugin's code of conduct here:
+
+<https://github.com/workarea-commerce/workarea/blob/master/CODE_OF_CONDUCT.md>

data/CONTRIBUTING.md

@@ -0,0 +1,3 @@
+View this plugin's contribution guidelines here:
+
+<https://github.com/workarea-commerce/workarea/blob/master/CONTRIBUTING.md>

data/Gemfile

@@ -0,0 +1,5 @@
+source "https://rubygems.org"
+
+gemspec
+
+gem 'workarea', git: 'https://github.com/workarea-commerce/workarea.git'

data/LICENSE.md

@@ -0,0 +1,3 @@
+View this plugin's license here: 
+
+<https://github.com/workarea-commerce/workarea/blob/master/LICENSE.md>

data/README.md

@@ -0,0 +1,72 @@
+Workarea Product Grid Content
+================================================================================
+
+Product Grid Content plugin for the Workarea platform.
+
+Extend the merchandising abilities of the Workarea Ecommerce platform with content in product browse grids!
+
+Example of a 2x1 content block in the browse grid:
+![Sample 2x1 Grid Content](public/sample_grid_content.png)
+
+Block Type Grid Options
+--------------------------------------------------------------------------------
+
+* **Position:** An integer input that allows the admin to choose the position of content within the grid.
+* **Height & Width:** Allows admin to create 1x1, 1x2, 2x1, and 2x2 content blocks.
+* **Height - floating tall blocks:** When the height of a block is greater than 1 cell it must be floated either left or right. This avoids breaking the grid and looks good at all viewport widths. By default, a block that is 2 cells in height will automatically float left, even if the float select menu is set to none. The float select menu can be used to override this behavior and float the content to the right.
+* **Float:** Aside from 2 cell tall blocks it is unlikely that your admin will need to use this option.
+
+Configuring Cell Width Classes
+--------------------------------------------------------------------------------
+
+Since most applications customize the number of products per-row in the product browse grid we have provided a handy configuration for cell widths for in grid content blocks. Add the following to your host application workarea.rb
+
+    Workarea.configure do |config|
+        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"
+        }
+    end
+
+Content Block Compatibility
+--------------------------------------------------------------------------------
+
+The content block which ships with this plugin is the only block type that can be used in the product grid area out of the box.
+If you want to enable other block types for use in the product grid you will need to make the following changes to each block type:
+
+1. Add the 'Grid' fieldset to your block - you can copy and paste from the content block type defined in this plugin.
+2. Include the GridContent module in your content block's view model.
+3. Add the data binding for match_product_summary_height to your view
+4. Test the block type in a grid position, you may need to adjust styles and markup to fit your design at this point.
+
+Contentable Grids
+--------------------------------------------------------------------------------
+
+This plugin enables in-grid content for category/show and searches/show.
+If your application has another browse grid which you want to make contentable you will need to:
+
+1. Ensure your model is contentable
+2. Include Storefront::ProductGridContent in the view model
+3. Update the view to render content blocks as part of the loop over products. You may need to update your .each to .each_with_index as the index is necessary to render blocks for a given position.
+
+Roadmap
+--------------------------------------------------------------------------------
+
+* Figure out a solution for 'hanging products' which are caused by the presence
+    of content in the browse grid. The only workaround currently is to add significant
+    content to the page, forcing a full row of hanging products.
+    * Note that when using finite scroll pagination these hanging products are less
+    noticeable, gaps are filled when the next page of products is appended.
+* More controls for images in the block type (cropping/resizing)
+* Positioning the content in the context of the content editor is a bit cumbersome,
+    currently I cant think of a better solution which does not pose huge technical challenges.
+    Ideally, we could edit the position of the blocks in a nice drag and drop interface.
+
+Workarea Platform Documentation
+--------------------------------------------------------------------------------
+
+See [https://developer.workarea.com](https://developer.workarea.com) for Workarea platform documentation.
+
+Copyright & Licensing
+--------------------------------------------------------------------------------
+Workarea Commerce Platform is released under the [Business Software License](https://github.com/workarea-commerce/workarea/blob/master/LICENSE)

data/Rakefile

@@ -0,0 +1,59 @@
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+require "rdoc/task"
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "Product Grid Content"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.md")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load "rails/tasks/engine.rake"
+load "rails/tasks/statistics.rake"
+load "workarea/changelog.rake"
+
+require "rake/testtask"
+Rake::TestTask.new(:test) do |t|
+  t.libs << "lib"
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+end
+task default: :test
+
+$LOAD_PATH.unshift File.expand_path("../lib", __FILE__)
+require "workarea/product_grid_content/version"
+
+desc "Release version #{Workarea::ProductGridContent::VERSION} of the gem"
+task :release do
+  host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
+
+  Rake::Task["workarea:changelog"].execute
+  system "git add CHANGELOG.md"
+  system 'git commit -m "Update CHANGELOG"'
+  system "git push origin HEAD"
+
+  system "git tag -a v#{Workarea::ProductGridContent::VERSION} -m 'Tagging #{Workarea::ProductGridContent::VERSION}'"
+  system "git push --tags"
+
+  system "gem build workarea-product_grid_content.gemspec"
+  system "gem push workarea-product_grid_content-#{Workarea::ProductGridContent::VERSION}.gem --host #{host}"
+  system "rm workarea-product_grid_content-#{Workarea::ProductGridContent::VERSION}.gem"
+end
+
+desc "Run the JavaScript tests"
+ENV["TEASPOON_RAILS_ENV"] = File.expand_path("../test/dummy/config/environment", __FILE__)
+task teaspoon: "app:teaspoon"
+
+desc "Start a server at http://localhost:3000/teaspoon for JavaScript tests"
+task :teaspoon_server do
+  Dir.chdir("test/dummy")
+  teaspoon_env = File.expand_path("../test/teaspoon_env.rb", __FILE__)
+  system "RAILS_ENV=test TEASPOON_ENV=#{teaspoon_env} rails s"
+end

data/app/assets/images/workarea/admin/content_block_types/insights_grid_cell.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40.93"><title>insights grid cell</title><path d="M22,39H8V28H22ZM10,37H20V30H10Z"/><path d="M39,26H8V2H39ZM10,24H37V4H10Z"/><path d="M56,39H42V28H56ZM44,37H54V30H44Z"/><path d="M56,13H42V2H56ZM44,11H54V4H44Z"/><path d="M56,26H42V15H56ZM44,24H54V17H44Z"/><path d="M39,39H25V28H39ZM27,37H37V30H27Z"/><path d="M23.5,5.63a.35.35,0,0,0-.35.35V7.37a.35.35,0,1,0,.7,0V6a.35.35,0,0,0-.35-.35m-4.93,2a.36.36,0,0,0-.25.6l1,1a.35.35,0,0,0,.49-.49l-1-1a.32.32,0,0,0-.24-.11m9.86,0a.34.34,0,0,0-.24.11l-1,1a.35.35,0,0,0,.49.49l1-1a.36.36,0,0,0-.25-.6M23.5,8.77a4.12,4.12,0,0,0-4.19,4c0,3,2.27,3.67,2.27,5.79h3.84c0-2.12,2.27-2.76,2.27-5.79a4.12,4.12,0,0,0-4.19-4m-7,3.83a.35.35,0,0,0-.35.35.35.35,0,0,0,.35.35h1.4a.35.35,0,0,0,.35-.35.35.35,0,0,0-.35-.35h-1.4m12.56,0a.35.35,0,0,0-.35.35.35.35,0,0,0,.35.35h1.4a.35.35,0,0,0,.35-.35.35.35,0,0,0-.35-.35h-1.4m-7.5,6.63v.7h3.84v-.7H21.58m0,1.4a.7.7,0,0,0,.7.7h2.44a.7.7,0,0,0,.7-.7H21.58m1.22,1a.7.7,0,0,0,1.4,0H22.8"/></svg>

data/app/assets/images/workarea/admin/content_block_types/product_grid_cell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40.93"><title>Product Grid Cell</title><path d="M22,39H8V28H22ZM10,37H20V30H10Z"/><path d="M39,26H8V2H39ZM10,24H37V4H10Z"/><path d="M56,39H42V28H56ZM44,37H54V30H44Z"/><path d="M56,13H42V2H56ZM44,11H54V4H44Z"/><path d="M56,26H42V15H56ZM44,24H54V17H44Z"/><path d="M39,39H25V28H39ZM27,37H37V30H27Z"/><path d="M28,13H25V10a1,1,0,1,0-2,0v3H20a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V15h3a1,1,0,0,0,0-2Z"/></svg>

data/app/assets/javascripts/workarea/storefront/product_grid_content/modules/match_product_summary_height.js

@@ -0,0 +1,53 @@
+/**
+ * @namespace WORKAREA.matchProductsummaryHeight
+ */
+WORKAREA.registerModule('matchProductsummaryHeight', (function () {
+    'use strict';
+
+    var maxHeight = function ($pagination) {
+            var $productSummaries  = $('.product-summary', $pagination);
+
+            return _.reduce($productSummaries, function(result, value) {
+                return $(value).height() > result ? $(value).height() : result;
+            }, 0);
+        },
+
+        updatecontentBlock = function ($contentBlock, numberOfRows, $pagination) {
+            var height = maxHeight($pagination);
+            $contentBlock.height(height * numberOfRows);
+        },
+
+        setHeight = function($scope, index, contentBlock) {
+            var $contentBlock = $(contentBlock),
+                contentBlockData = $contentBlock.data('matchProductSummaryHeight'),
+                numberOfRows = contentBlockData.rows || 1,
+                $pagination = $contentBlock.closest('.pagination');
+
+            $contentBlock.height('100%');
+
+            // Dont set the height if the blocktype is outside of a pagination
+            // This prevents the display breaking in the admin content editor
+            if (_.isEmpty($pagination)) { return; }
+
+            // Need to wait for the stack to clear so that the height
+            // is calculated by the browser in time
+            _.defer(updatecontentBlock, $contentBlock, numberOfRows, $pagination);
+        },
+
+        refresh = function ($scope) {
+            $('[data-match-product-summary-height]', $scope).each(_.partial(setHeight, $scope));
+        },
+
+        onResize = _.once(function($scope) {
+            $(window).on('resize', _.debounce(_.partial(refresh, $scope), 200));
+        }),
+
+        init = function ($scope) {
+            $('[data-match-product-summary-height]', $scope).each(_.partial(setHeight, $scope));
+            onResize($scope);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/stylesheets/workarea/product_grid_content/components/_content_block_product_grid_cell.scss

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    #CONTENT-BLOCK--PRODUCT-GRID-CELL
+    Component modifier for .content-block
+\*------------------------------------*/
+
+.content-block--insights-grid-cell,
+.content-block--product-grid-cell {
+    display: inline;
+
+    &.content-block--hidden-for-small {
+        display: none;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline;
+        }
+    }
+
+    &.content-block--hidden-for-medium {
+        @include respond-to($medium-breakpoint) {
+            display: none;
+        }
+
+        @include respond-to($wide-breakpoint) {
+            display: inline;
+        }
+    }
+
+    &.content-block--hidden-for-wide {
+        @include respond-to($wide-breakpoint) {
+            display: none;
+        }
+
+        @include respond-to($x-wide-breakpoint) {
+            display: inline;
+        }
+    }
+
+    &.content-block--hidden-for-x-wide {
+        display: none;
+    }
+
+    .grid--flush & {
+        padding-left: 0;
+    }
+}

data/app/assets/stylesheets/workarea/product_grid_content/components/_insights_grid_cell_content_block.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #INSIGHTS-GRID-CELL-CONTENT-BLOCK
+\*------------------------------------*/
+
+.insights-grid-cell-content-block {
+    position: relative;
+    margin-bottom: $spacing-unit;
+    height: 100%;
+    overflow: hidden;
+}

data/app/assets/stylesheets/workarea/product_grid_content/components/_pagination_product_grid_content.scss

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    #PAGINATION
+    Extends the base pagination styles adding clearfix to ensure floated content
+    blocks do not break the page layout.
+\*------------------------------------*/
+
+.pagination {
+    @extend %clearfix;
+}

data/app/assets/stylesheets/workarea/product_grid_content/components/_product_grid_cell_content_block.scss

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #PRODUCT-GRID-CELL-CONTENT-BLOCK
+\*------------------------------------*/
+
+.product-grid-cell-content-block {
+    position: relative;
+    margin-bottom: $spacing-unit;
+    height: 100%;
+    overflow: hidden;
+}
+
+    .product-grid-cell-content-block__background-link {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    .product-grid-cell-content-block__content {
+        @include center;
+    }
+
+        .product-grid-cell-content-block__heading {}
+        .product-grid-cell-content-block__action {}
+
+    .product-grid-cell-content-block__media-container {}
+    .product-grid-cell-content-block__media-container--maintain-aspect-ratio {}
+
+        .product-grid-cell-content-block__image {}

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

@@ -0,0 +1,46 @@
+module Workarea
+  decorate Storefront::ContentBlocksController, with: :product_grid_content do
+    decorated do
+      layout :check_grid_preview, only: [:show, :draft]
+    end
+
+    def show
+      super
+
+      if @block.area.inquiry.in_grid?
+        get_product_for_grid_preview
+      end
+    end
+
+    def draft
+      draft = Content::BlockDraft.find(params[:id])
+
+      @content = draft.content
+      @block = Storefront::ContentBlockViewModel.wrap(
+        draft.to_block,
+        view_model_options
+      )
+
+      if @block.area.inquiry.in_grid?
+        get_product_for_grid_preview
+      end
+
+      render :show
+    end
+
+    private
+
+      def check_grid_preview
+        if @block.area.inquiry.in_grid?
+          "workarea/storefront/in_grid_content_preview"
+        else
+          "workarea/storefront/empty"
+        end
+      end
+
+      def get_product_for_grid_preview
+        product = Workarea::Catalog::Product.sample
+        @product = Workarea::Storefront::ProductViewModel.wrap(product)
+      end
+  end
+end