Last active
December 1, 2021 04:34
-
-
Save helgatheviking/279ebd34b1e4de7e2380ca3b9936e9c4 to your computer and use it in GitHub Desktop.
Add drag and drop sorting to WooCommerce enhanced product select
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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.