2

How to put a Slider widget into the Better exposed filters and product search result view in Drupal 7 for Ubercart price and other product features?

enter image description here

I have developed an ecommerce shop, and need to a add slider widget to search products.

enter image description here

enter image description here

2

Jquery UI and most of its widgets are embedded with D7 core, in misc/ui folder. First add these lines to your theme template file (sites/all/themes/YOUR_THEME/template.php) :

/**
 * Implements template_preprocess_views_view().
 */
function YOUR_THEME_preprocess_views_view(&$vars) {//replace YOUR_THEME by your theme name
  $view = $vars['view'];
  switch($view->name) {      
    case 'YOUR_VIEW' : //replace YOUR_VIEW by your view name

      drupal_add_library('system','ui.slider');
      drupal_add_css('/misc/ui/jquery.ui.slider.css');
      break;
  }
}

Don't forget to clear cache.

Your filter must be compatible with is between, lower, greater operators. This is fine for numeric fields. In the filter setup, set it as exposed and choose "is between" operator.

Last, in views advanced settings, in the BEF setup screen, select Jquery ui slider for your filter and adjust other settings like range at convenience.

EDIT

To answer your comments, don't edit Bartik or other core files. You can easily create a subtheme as following :

  1. Create the folder: /sites/all/themes/vassia
  2. Create the file /sites/all/themes/vassia/vassia.info
  3. put this code in vassia.info

    name = vassia
    description = my first subtheme
    core = 7.x
    base theme = bartik
    
    stylesheets[all][] = css/vassia.css
    stylesheets[all][] = css/colors.css
    
    regions[header] = Header
    regions[help] = Help
    regions[page_top] = Page top
    regions[page_bottom] = Page bottom
    regions[highlighted] = Highlighted
    
    regions[featured] = Featured
    regions[content] = Content
    regions[sidebar_first] = Sidebar first
    regions[sidebar_second] = Sidebar second
    
    regions[triptych_first] = Triptych first
    regions[triptych_middle] = Triptych middle
    regions[triptych_last] = Triptych last
    
    regions[footer_firstcolumn] = Footer first column
    regions[footer_secondcolumn] = Footer second column
    regions[footer_thirdcolumn] = Footer third column
    regions[footer_fourthcolumn] = Footer fourth column
    regions[footer] = Footer
    
    settings[shortcut_module_link] = 0
    
  4. Create a file named: /sites/all/themes/vassia/css/vassia.css for your future css custom

  5. If you need colors features, copy the file /themes/bartik/css/colors.css to /sites/all/themes/vassia/css/colors.css and copy the folder and its contents /themes/bartik/color/ to /sites/all/themes/vassia/color/

  6. Go to the the Administration > Appearance page to enable your new subtheme called Vassia

Everything is very well explained in Creating a subtheme DO page. Now the slider part

  1. Create a file /sites/all/themes/vassia/template.php
  2. Write exactly this code in your template.php file :

    <?php 
    /**
     * Implements template_preprocess_views_view().
     */
    function vassia_preprocess_views_view(&$vars) {
      $view = $vars['view'];
      switch($view->name) {      
        case 'productviewwithsliders' :
    
          drupal_add_library('system','ui.slider');
          drupal_add_css('/misc/ui/jquery.ui.slider.css');
          break;
      }
    }
    
  3. Double check the view name. Clear all caches

Enjoy

9
  • have tried, slider does not appear, what to do to fix?
    – VassiaAlk
    Aug 26 '16 at 8:47
  • Where should I put that code exactly, in what file, and php tags are necessary? Thank you.
    – VassiaAlk
    Aug 26 '16 at 11:07
  • 1
    @VassiaAlk I edited the answer. Add it in template.php file as explained. If it's empty, put only opening <?php tags before, not closing tag after.
    – Kojo
    Aug 26 '16 at 12:05
  • I wrote in Bartik: /** * Implements template_preprocess_views_view(). */ function bartik_preprocess_views_view(&$vars) {//replace YOUR_THEME by your theme name $view = $vars['view']; switch($view->name) { case 'ProductViewWithsliders' : //replace YOUR_VIEW by your view name //global $theme_path; drupal_add_library('system','ui.slider'); drupal_add_css('/misc/ui/jquery.ui.slider.css'); break; } } No slider appears...
    – VassiaAlk
    Aug 26 '16 at 15:02
  • You should not edit core theme files. Don't you have your own theme ? Then please write the code you did put into your question below an edit title, and format it correctly so that I'm able to read it. Last, it seems it's not the system name of your view which you can find in the edit url something like /admin/structure/views/view/your_view_name, with lowercase and underscores instead of spaces. You're not far...
    – Kojo
    Aug 26 '16 at 15:16
1

Can you try Slide Field Views Module

The sliderfield module provides a new widget for number fields (decimal, float, and integer) and a form element. When creating a numeric field, select the slider widget.

This project uses the jQuery UI slider included with core.

Or this Module Select with Style

The Select with Style project download contains two modules containing three styleable widgets:

Slide with Style, contains a field widget to enter numbers or list values via sliders when creating content and also to filter using this widget in Views. This includes double-handled sliders to input "in-between" ranges. Select with Style, comprises two widgets to enter taxonomy fields, in particular hierarchical taxonomies, when creating content and also to filter by these taxonomy fields in Views These are light-weight solutions that have no external dependencies. No external libraries are required. Only minimum configuration, no permissions, no coding. Just style!

5
  • Nagarjuna, don't you think it's would be an overkill to add another module for the slider, since VassiaAlk already configured BEF for his project, which comes with Slider feature ? :)
    – Kojo
    Aug 26 '16 at 10:20
  • Nāgārjuna is the name of a Buddhist monk who founded the Mahāyāna Buddhist school... Is it a nickname or your real name ? Sorry for being curious ;)
    – Kojo
    Aug 26 '16 at 10:22
  • I provided an option if you don't wanna code, few people like that few not. And It is my Name :). So nice of you, you just shared that I dont know
    – NTT
    Aug 26 '16 at 10:22
  • Nice of you, dear patriarch !
    – Kojo
    Aug 26 '16 at 10:25
  • thank you, people, Select with Style and Slide Views widgets do not apprear in BEF. Only JQ UI appears but on a final view there is not. I am trying to add that code you have published.
    – VassiaAlk
    Aug 26 '16 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.