Add drag and drop sorting to WooCommerce enhanced product select

sortable-select2.php

<?php
/**
 * Plugin Name: WooCommerce Sortable Enhanced Product Search
 * Plugin URI: https://gist.github.com/helgatheviking/279ebd34b1e4de7e2380ca3b9936e9c4
 * Description: Sort enhanced product search via drag and drop, ideal for Mix and Match, Bundles, etc
 * Version: 1.0.0b
 * Author: Kathy Darling
 * Author URI: http://kathyisawesome.com/
 *
 * Copyright: © 2016 Kathy Darling
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */
 
 /* NOTE: This will stop working when WooCommerce updates to Select2 v4 */

function select2_sortable_admin_header() { 

    // Get admin screen id
    $screen = get_current_screen();

    // WooCommerce product admin page
    if ( 'product' == $screen->id && 'post' == $screen->base ) { 

        ?>
        <style>
            #woocommerce-product-data .product_data .select2-container-multi .ui-sortable .select2-search-choice { cursor: move; }
        </style>
        <?php

        add_action( 'admin_footer', 'select2_sortable_footer_script' );

    }


}
add_action( 'admin_head', 'select2_sortable_admin_header' );


function select2_sortable_footer_script(){?> 

    <script>

        jQuery( function( $ ) {

            $( ':input.wc-product-search' ).filter( '.enhanced' ).each( function() {
                // cache the input
            	   $input = $(this);

                $(this).select2("container").find( 'ul.select2-choices' ).sortable({
                    containment: 'parent',
                    start: function() { $input.select2( 'onSortStart' ); },
                    update: function() { $input.select2( 'onSortEnd' ); }
                });

            });

        });


    </script>
<?php 
}

Hi @helgatheviking,

I tested this on WC master and the latest Mix n Match products (v1.1.5), and the drag & drop UI looks functional, however the new order isn't actually saved at all when the product is saved.

Thanks :)

@om4james Thanks for testing that! Something must've gone wrong because definitely thought it was working earlier. (Famous last words) I'll have to take a look at it and see what is happening.

@om4james I think I got it, so test again when you can. Thanks for reporting that!

@helgatheviking works great now, thank you!

Are you thinking of adding this functionality into Mix N Match, or are you aiming to get it into WC 2.7 via woocommerce/woocommerce#11107 ?

I suppose its a question of whether all inputs should get the drag & drop functionality automatically, or whether it should be opt-in via a data="sortable" attribute or similar.

@om4james I was hoping it would get into core, hence the PR. It really belongs there and then MNM would just add the appropriate data attribute and it would all be lovely. The issue is that Select2 has updated to v4 and it no longer uses a hidden text input to store the order, but rather on a hidden select input. So my code (as is) will stop working once WooCommerce updates to Select2 v4. Knowing that it will break soon means we'd have to add a lot of extra clutter for version checking and supporting both the current and next versions of Select2. so for now, that's a good reason for it to exist here as a temporary solution.

Without the hidden text input, it isn't really obvious how to make it work in v4, but some folks are trying.