Add price range filter

Gulpfile.js

@@ -21,6 +21,11 @@ gulp.task('sass', function() {
 gulp.task('scripts', function() {
     gulp.src([
             dir.bower + 'jquery/dist/jquery.min.js',
+            // jQuery UI widgets
+            dir.bower + 'jquery-ui/ui/core.js',
+            dir.bower + 'jquery-ui/ui/widget.js',
+            dir.bower + 'jquery-ui/ui/mouse.js',
+            dir.bower + 'jquery-ui/ui/slider.js',
             // Bootstrap JS modules
             dir.bootstrapJS + 'transition.js',
             dir.bootstrapJS + 'carousel.js',

app/Resources/scripts/main.js

@@ -15,27 +15,32 @@
          */
         globals: {
             navbar: {
-                dropdown:        '.navbar-dropdown',
-                content:         '.navbar-dropdown-content'
+                dropdown:           '.navbar-dropdown',
+                content:            '.navbar-dropdown-content'
             },
             topbar: {
-                dropdown:        '.topbar-dropdown',
-                content:         '.topbar-dropdown-content'
+                dropdown:           '.topbar-dropdown',
+                content:            '.topbar-dropdown-content'
             },
             header: {
-                searchInp:       '.page-header-search-inp',
-                searchBtn:       '.page-header-search-btn',
-                cartClose:       '.page-header-cart-close',
-                dropdownContent: '.topbar-dropdown-content'
+                searchInp:          '.page-header-search-inp',
+                searchBtn:          '.page-header-search-btn',
+                cartClose:          '.page-header-cart-close',
+                dropdownContent:    '.topbar-dropdown-content'
             },
             filter: {
-                checkbox:        '.sidebar-filters-item-checkbox',
-                collapse:        '.sidebar-filter-collapse',
-                body:            '.sidebar-filters-body'
+                checkbox:           '.sidebar-filters-item-checkbox',
+                collapse:           '.sidebar-filter-collapse',
+                body:               '.sidebar-filters-body',
+                slider:          {
+                    slider:         '.sidebar-filter-slider',
+                    min:            '.sidebar-slider-min',
+                    max:            '.sidebar-slider-max'
+                }
             },
-            featuredCarousel:    '#featured-carousel',
-            footerDropdown:      '.js-footer-dropdown-trigger',
-            scrollTop:           '.scroll-top'
+            featuredCarousel:       '#featured-carousel',
+            footerDropdown:         '.js-footer-dropdown-trigger',
+            scrollTop:              '.scroll-top'
         },
 
         /**
@@ -56,6 +61,7 @@
 
             this.bindFiltersCollapse(g.filter.collapse, g.filter.body);
             this.bindFilterCheckbox(g.filter.checkbox);
+            this.bindFilterSlider(g.filter.slider.slider, [g.filter.slider.min, g.filter.slider.max]);
 
             this.bindFeaturedCarousel(g.featuredCarousel);
             this.bindFooterDropdown(g.footerDropdown);
@@ -87,8 +93,35 @@
         bindFilterCheckbox: function(checkbox) {
             $(checkbox).click(function() {
                 $(this).toggleClass('glyphicon-ok');
-                var url = window.location.origin + $(this).next().attr('href');
-                location.href = url;
+                location.href = window.location.origin + $(this).next().attr('href');
+            });
+        },
+
+        /**
+         *
+         * @param element
+         * @param label
+         */
+        bindFilterSlider: function (element, label) {
+            var slider = $(element);
+
+            slider.slider({
+                range: true,
+                min: parseFloat(slider.data('min')),
+                max: slider.data('max'),
+                values: [
+                    parseFloat($(label[0]).text().replace(',', '.')),
+                    parseFloat($(label[1]).text().replace(',', '.'))
+                ],
+                slide: function (event, ui) {
+                    $(label[0]).text(ui.values[0].toString().replace('.', ','));
+                    $(label[1]).text(ui.values[1].toString().replace('.', ','));
+                },
+                stop: function () {
+                    location.pathname = slider.data('url')
+                        .replace('price_min', parseFloat($(label[0]).text().replace(',', '.')))
+                        .replace('price_max', parseFloat($(label[1]).text().replace(',', '.')));
+                }
             });
         },
 

app/Resources/style/ongr.scss

@@ -1,6 +1,10 @@
 // Vendor
 @import "./bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
 
+// jQuery UI
+@import "./bower_components/jquery-ui/themes/base/theme";
+@import "./bower_components/jquery-ui/themes/base/slider";
+
 // Utils
 @import "utils/mixins";
 @import "utils/scroll-top";

app/Resources/translations/messages.en.yml

@@ -3,6 +3,7 @@ filter:
     brand: Brand
     color: Color
     material: Material
+    price: Price
     all: All
 
 topbar:

app/Resources/views/macros/filters.html.twig

@@ -1,5 +1,5 @@
 {% macro term(filter, page_route, default_route_parameters) %}
-    {% if filter|default(false) and filter.choices|length %}
+    {% if filter|default(false) and filter.choices|default({})|length %}
         {% set default_route_parameters = default_route_parameters|default({}) %}
         <div class="sidebar-filters">
             <div class="sidebar-filters-heading clearfix">
@@ -25,5 +25,30 @@
                 </div>
             </div>
         </div>
+    {% else %}
+        <div class="sidebar-filters">
+            <div class="sidebar-filters-heading clearfix">
+                {{ ('filter.' ~ filter.name)|trans }}
+                <span class="sidebar-filter-collapse pull-right">-</span>
+            </div>
+            <div class="sidebar-filters-body">
+                {% if filter.minBounds is defined and filter.maxBounds is defined and filter.minBounds < filter.maxBounds %}
+                    <p>
+                        <span class="sidebar-slider-min">{{
+                            filter.urlParameters.p|default(false)
+                                ? filter.urlParameters.p|split(';')[0]|number_format(2, ',')
+                                : filter.minBounds|number_format(2, ',') }}</span> €
+                        - <span class="sidebar-slider-max">{{
+                            filter.urlParameters.p|default(false)
+                                ? filter.urlParameters.p|split(';')[1]|number_format(2, ',')
+                                : filter.maxBounds|number_format(2, ',') }}</span> €
+                    </p>
+                    <div class="sidebar-filters-item sidebar-filter-slider" data-min="{{
+                        filter.minBounds|number_format(2) }}" data-max="{{
+                        filter.maxBounds|number_format(2) }}" data-url="{{
+                        path(page_route, filter.getUrlParameters()|merge(default_route_parameters)|merge({'p': 'price_min;price_max'})) }}"></div>
+                {% endif %}
+            </div>
+        </div>
     {% endif %}
 {% endmacro %}

app/Resources/views/product/list.html.twig

@@ -14,6 +14,7 @@
     {{ filter_macros.term(filters.color, 'ongr_route', {'document':category}) }}
     {{ filter_macros.term(filters.brand, 'ongr_route', {'document':category}) }}
     {{ filter_macros.term(filters.material, 'ongr_route', {'document':category}) }}
+    {{ filter_macros.term(filters.price, 'ongr_route', {'document':category}) }}
 {% endblock %}
 
 {% block sorting %}

app/config/config.yml

@@ -104,6 +104,7 @@ ongr_filter_manager:
                 - brand
                 - material
                 - app_category
+                - price
             repository: 'es.manager.default.product'
     filters:
 #        field_value:
@@ -123,6 +124,11 @@ ongr_filter_manager:
                 request_field: 'm'
                 field: material
                 size: 10
+        range:
+            price:
+                request_field: 'p'
+                field: price
+                inclusive: true
         match:
             search:
                 request_field: 'q'
@@ -147,7 +153,6 @@ ongr_router:
         category: AppBundle:Product:list
         content: AppBundle:Content:show
 
-
 ongr_api:
     versions:
         v3:

bower.json

@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "bootstrap-sass": "~3.3.5",
-    "jquery": "~2.1.4"
+    "jquery": "~2.1.4",
+    "jquery-ui": "~1.11.4"
   }
 }

src/AppBundle/Controller/CartController.php

@@ -18,7 +18,7 @@ public function miniCartAction(Request $request)
 
         $products = [];
 
-        $cart = json_decode($request->cookies->get('ongr_basket'), TRUE);
+        $cart = json_decode($request->cookies->get('ongr_basket'), true);
 
         if (isset($cart['items'])) {
             foreach ($cart['items'] as &$item) {

src/AppBundle/Document/Product.php

@@ -61,4 +61,4 @@ class Product
      * @ES\Property(type="string", options={"index"="not_analyzed"})
      */
     public $categoryKeys;
-}
+}

src/AppBundle/Twig/ProductListExtension.php

@@ -67,7 +67,7 @@ public function getProductImage($product)
     public function getProductAttributes($product)
     {
         try {
-            $attributes = json_decode($product->attributes, TRUE);
+            $attributes = json_decode($product->attributes, true);
             $output = [];
             foreach ($attributes as $attribute) {
                 $output[ucfirst($attribute['name'])] = implode(',', $attribute['values']);