WordPress.org

Ready to get started?Download WordPress

Forums

YITH WooCommerce Ajax Navigation
dropdown with chosen.jquery.js (7 posts)

  1. kinolaev
    Member
    Posted 1 year 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/

  2. sireneweb
    Member
    Posted 12 months ago #

    Thanks for your feedback :)

  3. andymaciel
    Member
    Posted 11 months ago #

    Hey Kinolaev,

    Where exactly did you put that code?

    Warm regards!

  4. kinolaev
    Member
    Posted 11 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.

  5. Watch Teller
    Member
    Posted 10 months ago #

    Thanks.

  6. Djibo
    Member
    Posted 9 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

  7. Dademaru
    Member
    Posted 9 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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic