<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" media="all" href="search-style.css" />
  <link rel="stylesheet" media="all" href="autocomplete.css" />
  <!--[if lt IE 10]>
    <script type="text/javascript" src="http://components.swiftype.com/vendor/polyfills/swiftypecomponents-ie.js"></script>
  <![endif]-->
</head>

<body>
  <!-- <div data-st-raw-params></div> -->
  <div id="wrapper">
    <div id="header">
      <div id="search_form">
        <div data-st-search-form="search_form"></div>
      </div>
      <h1>My Clothing Store</h1>
    </div>

    <div id="content">
      <div id="left_column">
        <div data-st-sort-selector="sort"></div>
        <div class="search_element">
          <div data-st-checkbox-facet="category_facet"></div>
        </div>
      </div>
      <div id="search-status">
        <span class="st-no-results">
          Showing results
          <span data-st-page-start></span> -
          <span data-st-page-end></span> of
          <span data-st-total-results></span>
          <span class="st-no-query">for
            <span data-st-query></span>
          </span>
        </span>
        <span class="st-not-loading">loading...</span>
        <span class="st-not-failed-loading">there was a problem with the search</span>
        <span class="st-no-results inverse">no results found...</span>
      </div>
      <div id="search_results">
        <div data-st-results-liquid="result"></div>
        <script type="text/liquid" id="result">
          <div class="search_result">
            <img src="{{ result.image }}" />
            <div>{{ result | highlight: 'title' }}</div>
            <div>${{ result.price }}</div>
          </div>
        </script>
      </div>
    </div>

    <div id="footer">
      <div class="st-no-results">
        <span data-st-first-page>&lt;&lt; First</span>
        <span data-st-previous-page>&lt; Previous</span>
        <span data-st-pagination-range="pagination"></span>
        <span data-st-next-page>Next &gt;</span>
        <span data-st-last-page>Last &gt;&gt;</span>
      </div>
    </div>

  </div>

  <!-- These two components mixin behavior only. -->
  <div data-st-manage-conditionals></div>
  <span data-st-defaults="products_only"></span>
    
    <!-- 
      The following line is a HUGE package for demos only and is likely to move. Please
      use our packaging tool at http://components.swiftype.com/documentation before
      publishing this page.
    -->
    <script type="text/javascript" src="http://components.swiftype.com/builds/swiftypecomponents.full.min.js"></script>
    
    <!-- The webcomponents configuration file. -->
    <script type="text/javascript" src="configuration.js"></script>
    
    <!-- Now we mount the components. -->
    <script type="text/javascript">
      SwiftypeComponents.onReady(function() {
        SwiftypeComponents.react.mountAll();
      });
    </script>
</body>

</html>
SwiftypeComponents.config = {
  
  search_form: {
    placeholder: "Search",
    onsubmit: [
      { type: 'clear_all', update_results: true, reset_pagination: true },
      { type: "add_param", data: { field: 'q' } }
    ],
    autocomplete: {
      engineKey: "Wy5Dtw8Ee_pDQF_iJy3a",
      renderFunction: function(document_type, item) {
        var out = '<div class="ac_result"><div class="ac_image"><img src="' + item['image'] + '" /></div>';
        out = out.concat('<div class="ac_title">'+ item['title'] +'</div>');
        if (item['price']) {
          out = out.concat('<div class="ac_price">$' + item['price'] + '</div>');
        }
        out = out.concat('</div>');
        return out;
      }
    }
  },
  
  sort: {
    sortables: [{ label: "Relevancy",  value: "_score desc" },
                { label: "Price (Lowest first)", value: "price asc"   },
                { label: "Price (Highest first)", value: "price desc"   },
                { label: "Title (A-Z)", value: "title asc"   },
                { label: "Title (Z-A)", value: "title desc"  }
    ]
  },
  
  products_only: {
    actions: [
      { type: 'add_filter', update_state: 'defaults', data: { field: 'page_type', value: 'product' } },
      { type: 'add_filter', data: { field: 'page_type', value: 'product' }, update_results: true }
    ]
  },

  category_facet: {
    title: "Category",
    clear_link: "clear",
    field: 'category',
    disable_checkbox: true,
    sort_by: ['count', 'name'],      // name, count, selected, or function
    sort_by_direction: [false, true] // false = desc, true = asc
  },
  
  pagination: {
    inner_window: 2
  },
  
  result: {
    result_class: "result",
    template_id: "result"
  },

  // An array of stores to save the search results in.
  store_names: ['search'],

  // Default values for all components.
  defaults: {
    store_name: 'search'
  },
  
  // The following defines defaults for the api. For more information see:
  //   https://swiftype.com/documentation/searching
	store_parameters: {
    defaults: {
      apiURL: "https://api.swiftype.com/api/v1/public/engines/search.json",
      engine_key: "Wy5Dtw8Ee_pDQF_iJy3a",  // Replace with your engine key.
      page: 1,                             // Start at page 1
      document_type: "page",               // "page" is for crawler based engines
      q: "",                               // Start with no query
      per_page: 15,                        // The default page number
      sort_direction: {}                   // Defaults to sorting by relevancy descending
    }
  }
};
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  padding: 20px;
}

h1 {
  font-weight: 300;
}

#search_form {
  float: right;
}

#search_form input {
  padding: 10px;
  font-size: 1rem;
  font-weight: 300;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#search_form input[type="submit"] {
  background: #efefef;
  border: 1px solid #ccc;
  margin-left: 10px;
}

#left_column {
  float: left;
  width: 160px;
}

#search_results {
  margin-left: 160px;
  padding-left: 10px;
  margin-top: 20px;
  border-left: 1px solid #CCC;
}

.search_element {
  padding-top: 20px;
}

#wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.result {
  width: 33.333333333%;
  float: left;
  height: auto;
  padding: 10px;
  margin-bottom: 15px;
}

.search_result img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.search_result div:first-of-type {
  text-align: center;
  margin-bottom: 4px;
  height: 36px;
  overflow: hidden;
}

.search_result div:last-of-type {
  text-align: center;
  color: #777;
}

#footer {
  clear: both;
  text-align: center;
}

.st-no-results,
.st-no-query,
.st-not-loading,
.st-not-failed-loading,
.st-no-misspelling {
  display: none;
}

.st-no-results.inverse {
  display: inline;
}

.st-has-results.inverse {
  display: none;
}

.st-has-results {
  margin-left: 20px;
}

#st-search-form-input {
  width: 300px;
}

.ac_result {
  min-height: 50px;
}

.ac_image img {
  width: 50px;
  height: 50px;
  float: left;
}

.ac_title {
  font-weight: bold;
  padding-left: 60px;
}

.ac_price {
  padding-left: 60px;
}

.facet-container {
  overflow: hidden;
}

.facet-title,
.facet-container a {
  font-weight: bold;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 0.05em;
}

.facet-title {
  float: left;
}

.facet-container a {
  font-weight: 300;
  text-decoration: none;
  float: right;
  color: #aaa;
}

.facet-options {
  clear: both;
  margin-top: 20px;
}

.facet-option {
  position: relative;
  padding: 0 40px 0 20px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.facet-option input {
  position: absolute;
  left: 0;
  top: 1px;
}

.facet-count {
  position: absolute;
  right: 0;
  color: #aaa;
}

[data-st-sort-selector] select {
  width: 100%;
}

#footer {
  border-top: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
}

#footer a {
  text-decoration: none;
  display: inline-block;
  padding: 5px;
}

#footer .invalid {
  pointer-events: none;
  color: #ccc;
}
form input.st-search-input {
  font-size: 12px;
  padding: 5px 9px 5px 27px;
  height: 18px;
  width: 200px;
  color: #666;
  border: 1px solid #ccc;
  outline: none;
  background: #fcfcfc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUFJREFUeNqU0j0oRWEcx/Hj3ifvlMHL7C1lY7mDwUBKkoksBjKJxWIQu7xlOybDLVGukhhMZDFbxGBS8nIjKR3E96nf0dPjuuVfn+6tc35P//P8/yYMw8CpbgygGQlcYw8H+Ai8MvotxQImgt81hk1M4cEPF2IV43jCGo7wjk5MYhhlGMKbG+7BKO4wiGPn8DO1vIN+jGA9fpjQaUksecG4zjGPL3VQ5IZb9OAw+LtO1FkjatxwUuEoTzjSbRu9/xO+0W97nnArqvXuoxve1/9p1OUIlmNGU7EX9+KGt3GKNuyiC5WoQAe2NJFP3PpzzmoR0khpxle6h3pnkeKJPCPjbtglerVFfWhSVxfqJtK4qrChTMY4XdjVm9O21aIA92LrFcv6HHtAsclxQVnxa0WfsqgDUib4X9muStCA2W8BBgDJ0EeGeFZ8WAAAAABJRU5ErkJggg==) no-repeat 7px 7px;
}

.swiftype-widget .autocomplete {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background-color: #fff;
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  position: absolute;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  text-align: left;
}

.swiftype-widget .autocomplete ul {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background-color: #fff;
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  text-align: left;
}

.swiftype-widget .autocomplete li {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  padding: 10px 8px;
  font-size: 13px;
  list-style-type: none;
  background-image: none;
  margin: 0;
}

.swiftype-widget .autocomplete li:first-child {
  border-top: 1px solid #fff;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  -o-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

.swiftype-widget .autocomplete li:last-child {
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  -o-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

.swiftype-widget .autocomplete li.active {
  border-top: 1px solid #145A93;
  border-bottom: 1px solid #086aa8;
  background-color: #1285d5;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #37a3e9), color-stop(100%, #1285d5));
  background: -webkit-linear-gradient(#37a3e9, #1285d5);
  background: -moz-linear-gradient(#37a3e9, #1285d5);
  background: -o-linear-gradient(#37a3e9, #1285d5);
  background: linear-gradient(#37a3e9, #1285d5);
  -webkit-box-shadow: 0 1px 0 #69bdf3 inset;
  -moz-box-shadow: 0 1px 0 #69bdf3 inset;
  box-shadow: 0 1px 0 #69bdf3 inset;
}

.swiftype-widget .autocomplete li p {
  font-size: 13px;
  line-height: 16px;
  margin: 0;
  padding: 0;
}

.swiftype-widget .autocomplete li p.title {
  font-weight: bold;
  color: #1c6cb5;
}

.swiftype-widget .autocomplete li p.title em {
  color: #0b2644;
  font-style: normal;
  font-weight: bold;
}

.swiftype-widget .autocomplete li.active p.title {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
}

.swiftype-widget .autocomplete li.active p.title em {
  color: #fff;
  font-style: normal;
}

.swiftype-widget .autocomplete li .sections {
  color: #999;
  font-size: 11px;
}

.swiftype-widget .autocomplete li .sections em {
  color: #666;
  font-style: normal;
}

.swiftype-widget .autocomplete li .sections .section {
  display: inline;
}

.swiftype-widget .autocomplete li.active .sections {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: #a9d7f1;
}

.swiftype-widget .autocomplete li.active .sections em {
  color: #a9d7f1;
  font-style: normal;
}