diff --git a/app/assets/images/homepage/section-ipm.png b/app/assets/images/homepage/section-ipm.png new file mode 100644 index 000000000..ca485cb7d Binary files /dev/null and b/app/assets/images/homepage/section-ipm.png differ diff --git a/app/assets/javascripts/homepage_search_dropdown.es6 b/app/assets/javascripts/homepage_search_dropdown.es6 index a75d3ec18..e7b0dad29 100644 --- a/app/assets/javascripts/homepage_search_dropdown.es6 +++ b/app/assets/javascripts/homepage_search_dropdown.es6 @@ -3,13 +3,16 @@ function setupSearchDropdown() { const dropdown = $('#search-dropdown'); const allCategories = JSON.parse($('.homepage-search').attr('data-categories') || '[]'); - const mostPopularCategories = allCategories.slice(0, 3); + const mostPopularCategories = allCategories.slice(0, 2); const allInnovations = JSON.parse($('.homepage-search').attr('data-innovations') || '[]'); - const mostRecentInnovations = allInnovations.slice(0, 3); + const mostRecentInnovations = allInnovations.slice(0, 2); const allCommunities = JSON.parse($('.homepage-search').attr('data-communities') || '[]'); - const mostPopularCommunities = allCommunities.slice(0, 3); + const mostPopularCommunities = allCommunities.slice(0, 2); + + const allProducts = JSON.parse($('.homepage-search').attr('data-products') || '[]'); + const mostRecentProducts = allProducts.slice(0, 2); searchInput.focus(function() { dropdown.show(); @@ -18,10 +21,11 @@ function setupSearchDropdown() { searchInput.on('input', function() { let searchTerm = searchInput.val().toLowerCase(); - let filteredCategories = searchTerm ? allCategories.filter(category => category.name.toLowerCase().includes(searchTerm)).slice(0,3) : mostPopularCategories; - let filteredInnovations = searchTerm ? allInnovations.filter(innovation => innovation.name.toLowerCase().includes(searchTerm)).slice(0,3) : mostRecentInnovations; - let filteredCommunities = searchTerm ? allCommunities.filter(community => community.name.toLowerCase().includes(searchTerm)).slice(0,3) : mostPopularCommunities; - updateDropdown(filteredCategories, filteredInnovations, filteredCommunities); + let filteredCategories = searchTerm ? allCategories.filter(category => category.name.toLowerCase().includes(searchTerm)).slice(0,2) : mostPopularCategories; + let filteredInnovations = searchTerm ? allInnovations.filter(innovation => innovation.name.toLowerCase().includes(searchTerm)).slice(0,2) : mostRecentInnovations; + let filteredCommunities = searchTerm ? allCommunities.filter(community => community.name.toLowerCase().includes(searchTerm)).slice(0,2) : mostPopularCommunities; + let filteredProducts = searchTerm ? allProducts.filter(product => product.name.toLowerCase().includes(searchTerm)).slice(0,2) : mostRecentProducts; + updateDropdown(filteredCategories, filteredInnovations, filteredCommunities, filteredProducts); }); $(document).keydown(function(e) { @@ -56,8 +60,8 @@ function setupSearchDropdown() { }); } -function updateDropdown(categories, innovations, communities) { - $('#category-list, #practice-list, #community-list').empty(); +function updateDropdown(categories, innovations, communities, products) { + $('#category-list, #practice-list, #community-list, #product-list').empty(); categories.forEach(function(category) { let link = $('') @@ -94,6 +98,18 @@ function updateDropdown(categories, innovations, communities) { $('#community-list').append(listItem); }); + + products.forEach(function(product) { + let link = $('') + .attr('href', `/products/${encodeURIComponent(product.slug)}`) + .text(product.name); + let listItem = $('
') + .addClass('search-result') + .attr('data-product-id', product.id) + .append(link); + + $('#product-list').append(listItem); + }); } function setupClickTracking(listSelector, eventName, dataAttribute) { @@ -110,7 +126,17 @@ function setupClickTracking(listSelector, eventName, dataAttribute) { const id = e.target.closest('.search-result').getAttribute(dataAttribute); let properties = { from_homepage: true}; - properties[dataAttribute === 'data-practice-id' ? 'practice_name' : 'category_name'] = name; + switch(dataAttribute) { + case 'data-practice-id': + properties['practice_name'] = name; + break; + case 'data-product-id': + properties['product_name'] = name; + break; + default: // tags and communities-as-tags + properties['category_name'] = name; + } + properties[dataAttribute.slice(5)] = parseInt(id); // Removes 'data-' and uses the rest as the key ahoy.track(eventName, properties); @@ -149,5 +175,6 @@ addEventListener('turbolinks:load', function () { setupClickTracking('#practice-list', "Dropdown Practice Link Clicked", 'data-practice-id'); setupClickTracking('#category-list', "Category selected", 'data-category_id'); setupClickTracking('#community-list', "Category selected", 'data-category_id'); + setupClickTracking('#product-list', "Dropdown Product Link Clicked", 'data-product-id'); } }); diff --git a/app/assets/stylesheets/dm/pages/_home.scss b/app/assets/stylesheets/dm/pages/_home.scss index b51938d0b..b870d6655 100644 --- a/app/assets/stylesheets/dm/pages/_home.scss +++ b/app/assets/stylesheets/dm/pages/_home.scss @@ -46,7 +46,9 @@ #category-list, #practice-list, - #community-list { + #community-list, + #product-list + { a { text-decoration: none; color: color($theme-color-base-ink); @@ -106,8 +108,8 @@ } } - .homepage-section, #feature-nominate-innovation { - #submit-innovation-title { + .homepage-section, #feature-nominate-innovation, #ipm-section { + #submit-innovation-title, #ipm-section-title { @include at-media(tablet) { @include u-margin-top(0); } diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index 0234d099d..51bef21ed 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -7,6 +7,7 @@ def index @dropdown_categories = get_categories_by_popularity @dropdown_communities = get_categories_by_popularity(true) @dropdown_practices, @practice_names = get_dropdown_practices + @dropdown_products, @product_names = get_dropdown_products @homepage = Homepage.where(published: true)&.first if @homepage current_features = @homepage&.homepage_features @@ -143,6 +144,17 @@ def dropdown_practices scope end + def get_dropdown_products + product_names = [] + dropdown_products = Product.where(published: true, retired: false).order("created_at DESC") + products_hash = dropdown_products.pluck(:id, :name, :slug).map do |id, name, slug| + product_names << name + {name: name, id: id, slug: slug } + end + + return products_hash, product_names + end + def get_diffusion_histories(is_public_practice) DiffusionHistory.get_with_practices(is_public_practice).order(Arel.sql("lower(practices.name)")) end diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index ac285900c..4420bfdf2 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -26,6 +26,7 @@ data-categories="<%= @dropdown_categories.to_json %>" data-innovations="<%= @dropdown_practices.to_json %>" data-communities="<%= @dropdown_communities.to_json %>" + data-products="<%= @dropdown_products.to_json %>" >