dropdown with chosen.jquery.js

kinolaev
(@kinolaev)

12 years, 7 months ago

Hello!
Please make dropdown widget with chosen.jquery.js or something like that.
Now I use this code to replace list with dropdown:
var makeSelect = function(){ $("ul.yith-wcan-list").each(function(){ var select = '<select class="yith-wcan-dropdown yith-wcan" multiple="multiple">'; $('>li', this).each(function(){ if ($(this).is('.chosen')) { select += '<option value="' + $(this).attr('id') + '" selected="selected">' + $('>a', this).html() + '</option>'; } else { select += '<option value="' + $(this).attr('id') + '">' + $('>a', this).html() + '</option>'; } }); select += '</select>'; $(this).parent().append(select); $(this).hide();

var dd = $("+select.yith-wcan-dropdown", this);
var ov = dd.val(); if ( ov == null ) ov = [];
dd.change(function(){
var nv = dd.val(); if ( nv == null ) nv = [];
( nv.length > ov.length ) ? item = $(nv).not(ov).get(0) : item = $(ov).not(nv).get(0);
$(this).parent().find('li#' + item + '>a').click();
});
$("+select.yith-wcan-dropdown", this).chosen();
});
}
makeSelect();

Thank you for great work! (and sorry for my english)

http://wordpress.org/plugins/yith-woocommerce-ajax-navigation/

Viewing 6 replies - 1 through 6 (of 6 total)

sireneweb

(@sireneweb)

12 years, 7 months ago

Thanks for your feedback 🙂

andymaciel

(@andymaciel)

12 years, 6 months ago

Hey Kinolaev,

Where exactly did you put that code?

Warm regards!

Thread Starter

kinolaev

(@kinolaev)

12 years, 6 months ago

Recently I found a better way to make multiple dropdown. You need to modify three files:

1) /wp-content/plugins/yith-woocommerce-ajax-navigation/class.yith-wcan-frontend.php:
— remove '.$suffix.' in

wp_enqueue_script( 'yith_wcan_frontend', YITH_WCAN_URL . 'assets/js/yith-wcan-frontend'.$suffix.'.js', array('jquery'), $this->version, true );

— and just after this string add chosen script and css with

wp_enqueue_style( 'yith_wcan_chosen', YITH_WCAN_URL . 'chosen/chosen'.$suffix.'.css', false, $this->version );
wp_enqueue_script( 'yith_wcan_chosen', YITH_WCAN_URL . 'chosen/chosen.jquery'.$suffix.'.js', array('jquery'), $this->version, true );

— download chosen and unpack it in /wp-content/plugins/yith-woocommerce-ajax-navigation/chosen/

2) /wp-content/plugins/yith-woocommerce-ajax-navigation/widgets/class.yith-wcan-navigation-widget.php in section if ( $display_type == 'list' ) {...}:
— replace

echo "<ul class='yith-wcan-list yith-wcan'>";

with

echo "<ul class='yith-wcan-list yith-wcan' style='display:none;'>";

— add

$selected = 'selected';

just after

$class = 'class="chosen"';

and

$selected = '';

just after

$class = '';

— replace

echo '<li ' . $class . '>';
  echo ( $count > 0 || $option_is_set ) ? '<a href="' . esc_url( apply_filters( 'woocommerce_layered_nav_link', $link ) ) . '">' : '<span>';
  echo $term->name;
  echo ( $count > 0 || $option_is_set ) ? '</a>' : '</span>';
  echo ' <small class="count">' . $count . '</small></li>';
}
echo "</ul>";

with

if ( $count > 0 || $option_is_set ) {
    echo '<li id="'.$taxonomy.'-'.$term->term_id.'" '.$class.'><a href="'.esc_url( apply_filters( 'woocommerce_layered_nav_link', $link ) ).'"></a></li>';
    $option .= '<option value="'.$taxonomy.'-'.$term->term_id.'" '.$selected.'>'.$term->name.'</option>';
  }
}
echo "</ul>";
$taxonomy_name = get_taxonomy($taxonomy);
$taxonomy_name = $taxonomy_name->labels->name;
echo "<select class='yith-wcan-dropdown yith-wcan' data-placeholder='".$taxonomy_name."' multiple>".$option."</select>";

3) /wp-content/plugins/yith-woocommerce-ajax-navigation/assets/js/yith-wcan-frontend.js:
— after

$('.woocommerce-info').wrap('<div class="yit-wcan-container"></div>');

add

var makeSelect = function(){
  $(".yith-wcan-dropdown").each(function(){
    var ov = $(this).val(); if ( ov == null ) ov = [];
    $(this).chosen({width: "100%"}).change(function(){
      var nv = $(this).val(); if ( nv == null ) nv = [];
      var item = ( nv.length > ov.length ) ? $(nv).not(ov).get(0) : $(ov).not(nv).get(0);
      $(this).parent().find('li#' + item + '>a').click();
    });
  });
}
makeSelect();

— and after

//load new widgets
$('.yith-woo-ajax-navigation').each(function(){
  var id = $(this).attr('id');
  $(this).html( $(response).find('#'+id).html() );
  if( $(this).text() == '' ) {
    $(this).hide();
  } else {
    $(this).show();
  }
});

add

makeSelect();

It’s all.

Watch Teller

(@watchteller)

12 years, 5 months ago

Thanks.

Bojan Zidarevic

(@djibo)

12 years, 4 months ago

I’m trying to build a product finder, for example, on the home page lists all categories with thumbnails, user choose one (example “Cars”)then new page is opened and then he can select “car manufacturer” from a drop down which then populates a second drop down with a list of “car models”.
So if they select FORD from car manufacturer the second drop down will list the sub-cats of FORD, such as Focus, S-Max, etc. Any ideas?
Tnx

Dademaru

(@xendo)

12 years, 4 months ago

Hi,

any possibility to see kinolaev’s solution applied to this plugin?
So you don’t need to edit plugin files and the plugin remains update-friendly.
I think it’s important to have dropdown option since you may have lots of terms for some attributes and using lists or labels is not the best solution.

Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘dropdown with chosen.jquery.js’ is closed to new replies.

Tags