Merge pull request #2577 from rehandalal/product-search-mobile

[bug 1172603] [bug 1172604] Search on mobile product pages

kitsune/bundles.py

@@ -407,6 +407,19 @@
         ),
         'output_filename': 'build/products-min.js'
     },
+    'mobile-products': {
+        'source_filenames': (
+            'sumo/js/templates/mobile-product-search-results.js',
+            'nunjucks/browser/nunjucks-slim.js',
+            'sumo/js/nunjucks.js',
+            'moment/moment.js',
+            'sumo/js/cached_xhr.js',
+            'sumo/js/search_utils.js',
+            'sumo/js/instant_search.js',
+            'sumo/js/mobile/products.js',
+        ),
+        'output_filename': 'build/mobile-products-min.js'
+    },
     'search': {
         'source_filenames': (
             'sumo/js/search.js',

kitsune/products/templates/products/mobile/documents.html

@@ -1,6 +1,7 @@
 {% extends 'mobile/base.html' %}
 
 {% set styles = ('mobile-products',) %}
+{% set scripts = ('mobile-products',) %}
 {% set classes = 'documents' %}
 {% if subtopic %}
   {% set headline = _(subtopic.title, 'DB: products.Topic.title') %}
@@ -14,6 +15,16 @@
   {% set return_url = url('products.product', slug=product.slug) %}
 {% endif %}
 
+{% block after_header %}
+  <div class="search-bar slide-on-exposed">
+    <form data-instant-search="form" action="{{ url('search') }}" method="get">
+      <input type="hidden" name="product" value="{{ product.slug }}" />
+      <input type="hidden" name="w" value="1" />
+      <input type="search" name="q" required="required" aria-required="true" placeholder="{{ _('Search support articles') }}" class="searchbox" id="search-q" />
+    </form>
+  </div>
+{% endblock %}
+
 {% block content %}
   {% if subtopic %}
     <div class="filter-bar">

kitsune/products/templates/products/mobile/product.html

@@ -2,11 +2,23 @@
 
 {% set title = _(product.title, 'DB: products.Product.title') %}
 {% set headline = title %}
+{% set classes = 'product-landing' %}
 {% set styles = ('mobile-products',) %}
+{% set scripts = ('mobile-products',) %}
 {% set return_url = url('products') %}
 
 {% block title %}{{ _('{product} Help')|f(product=_(product.title, 'DB: products.Product.title')) }}{% endblock %}
 
+{% block after_header %}
+  <div class="search-bar slide-on-exposed">
+    <form data-instant-search="form" action="{{ url('search') }}" method="get">
+      <input type="hidden" name="product" value="{{ product.slug }}" />
+      <input type="hidden" name="w" value="1" />
+      <input type="search" name="q" required="required" aria-required="true" placeholder="{{ _('Search support articles') }}" class="searchbox" id="search-q" />
+    </form>
+  </div>
+{% endblock %}
+
 {% block content %}
   <ul id="topics">
     {% for topic in topics %}

kitsune/sumo/static/sumo/js/instant_search.js

@@ -1,4 +1,4 @@
-(function($, _) {
+(function($) {
   var searchTimeout;
   var locale = $('html').attr('lang');
 
@@ -31,9 +31,16 @@
       $('#main-content').after($searchContent);
     }
 
-    $searchContent.html(_.render('search-results.html', context));
+    $searchContent.html(k.nunjucksEnv.render('search-results.html', context));
   }
 
+  window.k.InstantSearchSettings = {
+    hideContent: hideContent,
+    showContent: showContent,
+    render: render,
+    searchClient: search
+  };
+
   $(document).on('submit', '[data-instant-search="form"]', function(ev) {
     ev.preventDefault();
   });
@@ -42,14 +49,14 @@
     var $this = $(this);
     var params = {
       format: 'json'
-    }
+    };
 
     if ($this.val().length === 0) {
       if (searchTimeout) {
         window.clearTimeout(searchTimeout);
       }
 
-      showContent();
+      window.k.InstantSearchSettings.showContent();
     } else if ($this.val() !== search.lastQuery) {
       if (searchTimeout) {
         window.clearTimeout(searchTimeout);
@@ -64,10 +71,10 @@
 
       searchTimeout = setTimeout(function () {
         search.setParams(params);
-        search.query($this.val(), render);
+        search.query($this.val(), k.InstantSearchSettings.render);
       }, 200);
 
-      hideContent();
+      k.InstantSearchSettings.hideContent();
     }
   });
 
@@ -96,7 +103,7 @@
     cxhr.request($this.data('href'), {
       data: {format: 'json'},
       dataType: 'json',
-      success: render
+      success: k.InstantSearchSettings.render
     });
   });
-})(jQuery, k.nunjucksEnv);
+})(jQuery);

kitsune/sumo/static/sumo/js/mobile/products.js

@@ -0,0 +1,32 @@
+(function($) {
+  var $body = $('body');
+  var locale = $('html').attr('lang');
+  var search = k.InstantSearchSettings.searchClient;
+
+  if ($body.is('.product-landing') ||  $body.is('.documents')) {
+    k.InstantSearchSettings.hideContent = function() {
+      $('#content').hide();
+    };
+
+    k.InstantSearchSettings.showContent = function() {
+      $('#content').show();
+      $('#instant-search-content').remove();
+    };
+
+    k.InstantSearchSettings.render = function(data) {
+      var context = $.extend({}, data);
+      var base_url = '/' + locale + '/search?q=' + search.lastQuery;
+      base_url += '&' + search.serializeParams();
+      context['base_url'] = base_url;
+
+      if ($('#instant-search-content').length) {
+        var $searchContent = $('#instant-search-content');
+      } else {
+        var $searchContent = $('<div />').attr('id', 'instant-search-content');
+        $('#content').after($searchContent);
+      }
+
+      $searchContent.html(k.nunjucksEnv.render('mobile-product-search-results.html', context));
+    };
+  }
+})(jQuery);

kitsune/sumo/static/sumo/less/mobile/products.less

@@ -1,15 +1,42 @@
 @import '../variables.less';
 @import 'mixins.less';
 
+.product-landing,
 .documents {
-  h2 {
+  .search-bar {
+    background: #fff;
+    border-bottom: 1px solid @borderLightGrey;
+    height: 50px;
+    position: fixed;
+    top: 51px;
+    width: 100%;
+    z-index: 10;
+
+    input {
+      background: @mobileFormBackground;
+      border: 0;
+      box-sizing: border-box;
+      height: 50px;
+      padding: 0 16px;
+      width: 100%;
+    }
+  }
+
+  .search-header {
     background: @borderLightGrey;
-    font-size: 20px;
-    margin: 0;
-    padding: 10px 16px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 6px 16px;
+    text-transform: uppercase;
+  }
+
+  .wrapper {
+    top: 102px;
   }
+}
 
-  .document-list {
+.document-list {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -28,6 +55,14 @@
     }
   }
 
+.documents {
+  h2 {
+    background: @borderLightGrey;
+    font-size: 20px;
+    margin: 0;
+    padding: 10px 16px;
+  }
+
   > header {
     h1 {
       font-weight: bold;

kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html

@@ -0,0 +1,12 @@
+<div class="search-header">{{ 'Search results'|gettext }}</div>
+<ul class="document-list">
+  {% if num_results > 0 %}
+    {% for doc in results %}
+      <li>
+        <a href="{{ doc.url }}">{{ doc.title }}</a>
+      </li>
+    {% endfor %}
+  {% else %}
+    <li><a href="#">{{ 'No results found.'|gettext }}</a></li>
+  {% endif %}
+</ul>