first commit

apps/frontend/templates/theme/cutlery/_search.html

@@ -0,0 +1,85 @@
+<form action="{urlfor internal="stProduct/list"}" class="form-inline search" method="get">
+    <div class="input-group">
+        <label class="sr-only" for="search">{__ text="Wyszukaj" langCatalogue="stSearchFrontend"}</label>
+        <input type="search" autocomplete="off" class="form-control" name="query" value="" placeholder='{__ text="Wyszukaj" langCatalogue="stSearchFrontend"}...' />
+        <span class="input-group-btn">
+            <button class="btn btn-default btn-search" type="submit">
+                <svg enable-background="new 0 0 512 512" height="16px" version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M497.913,497.913c-18.782,18.782-49.225,18.782-68.008,0l-84.862-84.863c-34.889,22.382-76.13,35.717-120.659,35.717  C100.469,448.767,0,348.312,0,224.383S100.469,0,224.384,0c123.931,0,224.384,100.452,224.384,224.383  c0,44.514-13.352,85.771-35.718,120.676l84.863,84.863C516.695,448.704,516.695,479.131,497.913,497.913z M224.384,64.109  c-88.511,0-160.274,71.747-160.274,160.273c0,88.526,71.764,160.274,160.274,160.274c88.525,0,160.273-71.748,160.273-160.274  C384.657,135.856,312.909,64.109,224.384,64.109z"/></svg>
+            </button>
+        </span>                                
+    </div>
+</form>
+
+{literal}
+<script id="search-result-tpl" type="text/x-template">
+    <div class="media">
+        <div class="media-left">
+            <a href="#">
+                <img class="media-object" src="{%=o.image%}" alt="{%=o.name%}">
+            </a>
+        </div>
+        <div class="media-body">
+            <h4 class="media-heading">{%=o.name%}</h4>
+            {% if (o.price) { %}
+                <div class="price-info">
+                    {% if (o.price.type == 'gross_net')  { %}
+                        <span class="price">{%=o.price.brutto%}</span>
+                    {% } else if (o.price.type == 'net_gross') { %}
+                        <span class="price">{%=o.price.netto%}</span>
+                    {% } else if (o.price.type == 'only_net') { %}
+                        <span class="price">{%=o.price.netto%}</span>
+                    {% } else { %}
+                        <span class="price">{%=o.price.brutto%}</span>
+                    {% } %}
+                </div>
+            {% } %}
+        </div>
+    </div>
+</script>
+
+<script type="text/javascript">
+    jQuery(function($) {
+        $('.search').submit(function() {
+            var input = $(this).find('input[name=query]');
+
+            if (!input.val()) {
+                input.parent().addClass('has-error');
+                return false;
+            } 
+
+            input.parent().removeClass('has-error');
+            return true;            
+        });
+
+        var products = new Bloodhound({
+            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            remote: {
+                url: '{/literal}{urlfor internal="@stSearchPlugin?action=typeahead"}?query=%QUERY{literal}',
+                wildcard: '%QUERY'
+            },
+            limit: 100
+        });
+     
+        products.initialize();
+
+        var tpl = tmpl($('#search-result-tpl').html());
+
+        var typeahead = $('.search input[type="search"]');
+        typeahead.typeahead({
+            source: products.ttAdapter(),
+            messages: {
+                noresults: "{/literal}{__ text='Brak produktów dla wybranych kryteriów' catalogue='stProduct'}{literal}"
+            }, 
+            viewport: { selector: '#header-navbar', padding: 0 },   
+            template: function(suggestions) {
+                var content = '';
+                for (var i = 0; i < suggestions.length; i++) {
+                    content += '<li data-url="'+suggestions[i].url+'">'+tpl(suggestions[i])+'</li>';
+                }
+                return content;
+            }
+        });
+    });
+</script>
+{/literal}