<!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><< First</span>
<span data-st-previous-page>< Previous</span>
<span data-st-pagination-range="pagination"></span>
<span data-st-next-page>Next ></span>
<span data-st-last-page>Last >></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;
}