WordPress.org

Support

Support » Plugins and Hacks » dropdown with chosen.jquery.js

dropdown with chosen.jquery.js

  • 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

    Thanks for your feedback 🙂

    andymaciel

    @andymaciel

    Hey Kinolaev,

    Where exactly did you put that code?

    Warm regards!

    kinolaev

    @kinolaev

    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.

    Thanks.

    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

    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.