Implement a first experiment

This sets up a simple UI experiment, defining an alternative set of styles for the search form.

The search form starts in the _form.html.erb partial, with most users getting a "standard" class - the experimental group would get the "alt" class, which is rendered differently.

The experiment ends when a user reaches a search results page (i.e, they submitted the form and thus got results).

Curious folks can force themselves into one or the other pool by using a querystring such as

?ab_test[ui_colors]=alt
or
?ab_test[ui_colors]=standard

Author: matt-bernhardt

app/assets/stylesheets/partials/_search.scss

@@ -4,7 +4,15 @@
 
 /* basic search bar */
 .basic-search {
-  background-color: #989898;
+
+  &.standard {
+    background-color: #989898;
+  }
+
+  &.alt {
+    background-color: #ffd700;
+  }
+
   margin-bottom: 1rem;
   padding: 1.6rem 2rem;
 

app/controllers/search_controller.rb

@@ -2,6 +2,9 @@ class SearchController < ApplicationController
   before_action :validate_q!, only: %i[results]
 
   def results
+    # if we are loading results, the user submitted the form - so this experiment is finished
+    ab_finished(:ui_colors)
+
     # hand off to Enhancer chain
     @enhanced_query = Enhancer.new(params).enhanced_query
 

app/views/search/_form.html.erb

@@ -17,7 +17,7 @@ end
 
 %>
 
-<form id="basic-search" class="form-horizontal basic-search" action="<%= results_path %>" method="get">
+<form id="basic-search" class="form-horizontal basic-search <%= ab_test(:ui_colors, "standard", "alt") %>" action="<%= results_path %>" method="get">
   <div class="form-group">
     <label for="basic-search-main" class="field-label"><%= label %></label>
     <input id="basic-search-main" type="search" class="field field-text basic-search-input <%= "required" if search_required %>" name="q" placeholder="Enter your search" value="<%= params[:q] %>" <%= 'required="required" aria-required="true"' if search_required %>>