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

@@ -59,10 +59,17 @@
 
 /* basic search bar */
 .search-form {
-  background-color: #989898;
   margin-bottom: 0rem;
   padding: 2.4rem 2rem 1.6rem 2rem;
 
+  &.standard {
+    background-color: #989898;
+  }
+
+  &.alt {
+    background-color: #ffd700;
+  }
+
   details {
     &:first-of-type {
       margin-top: 1rem;

app/controllers/search_controller.rb

@@ -10,6 +10,11 @@ class SearchController < ApplicationController
   before_action :validate_geodistance_units!, only: %i[results]
 
   def results
+    # if we are loading results, the user submitted the form - so this experiment is finished
+    ab_finished(:ui_colors)
+
+    # ab_test(:result_format)
+
     # inject session preference for boolean type if it is present
     params[:booleanType] = cookies[:boolean_type] || 'AND'
 

app/views/search/_form.html.erb

@@ -1,4 +1,4 @@
-<form id="search-form" action="<%= results_path %>" method="get" role="search">
+<form id="search-form" class="<%= ab_test(:ui_colors, "standard", "alt") %>" action="<%= results_path %>" method="get" role="search">
   <h3>What can we help you find?</h3>
   <div class="form-wrapper">
     <input id="basic-search-main" type="search" class="field field-text basic-search-input" name="q" title="Keyword anywhere" placeholder="Search for anything" value="<%= params[:q] %>" required>