I’m trying to add a custom product category multi-select control to my customizer panel. I noticed some differences in the rendering of content and attributes in relation to the basic usage structure. I also did a test by placing the basic structure directly on my home page and the rendering was correct. So it looks like the problem occurs in the context of the customizer.
In the customizer, options render only with the “select2-results__option” class
In the basic structure of Select2, options have the class “select2-results__option–selectable” together with “select2-results__option”. The “select2-results__option–selectable” class is responsible for some CSS.
Another difference I noticed was in the element with the class “select2-search select2-search–inline”.
As you can see, in one the parent element is a <li> and in the other it is a <span> and the child element of one is an and in the other it is a .
I searched for part of the HTML in the Select2 files and the <textarea class=“select2-search__field” is in the search.js file in the src/js/select2/selection folder and the <input class=“select2-search__field” is in the search file .js from the src/js/select2/dropdown folder.
Which makes me think that everything is in fact rendering differently in some way.
Sorry for the English, I’m using a translator. And also for the abstract explanation.
Here is the custom control implementation code:
<?php
add_action('customize_controls_enqueue_scripts', 'rd_custom_load_admin_styles', 999);
function rd_custom_load_admin_styles() {
wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css', array(), '4.1.0');
wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js', array('jquery'), '4.1.0', true);
wp_enqueue_script('select2-pt-BR-js', get_stylesheet_directory_uri() . '/inc/select2/language/pt-BR.js', array('select2-js'), '4.1.0', true);
wp_add_inline_script('select2-js', "
wp.customize.bind('ready', function () {
jQuery(document).ready(function($) {
$('select.rd-multiselect').select2({
width: '100%',
});
});
});
");
}
add_action('customize_register', 'rd_add_customizer_settings');
function rd_add_customizer_settings($wp_customize) {
/**
* Creating the Multiselect Custom Control
*/
class RD_MultiSelect_Custom_Control extends WP_Customize_Control
{
public $type = 'multiselect'; // Define o tipo do controle
public function render_content()
{
if (empty($this->choices)) {
return;
}
$name = esc_attr($this->id) . '[]';
?>
<span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
<?php if (! empty($this->description)) : ?>
<span class="description customize-control-description"><?php echo esc_html($this->description); ?></span>
<?php endif; ?>
<select class="rd-multiselect" multiple="multiple" name="<?php echo $name; ?>" <?php $this->link(); ?>>
<?php
$selected_values = explode(',', $this->value()); // Transforma os valores selecionados em um array
foreach ($this->choices as $value => $label) {
printf(
'<option value="%s" %s>%s</option>',
esc_attr($value),
in_array($value, $selected_values) ? 'selected="selected"' : '', // Marca as opções selecionadas
esc_html($label)
);
}
?>
</select>
<?php
}
}
/**
* Sanitize Multiselect
*/
function rd_sanitize_multiselect($input)
{
if (is_array($input)) {
return implode(',', array_map('sanitize_text_field', $input));
}
return sanitize_text_field($input);
}
/**
* Get WooCommerce Product Categories
*/
function rd_get_woo_product_categories()
{
$categories = get_terms(array(
'taxonomy' => 'product_cat',
'hide_empty' => true,
));
$category_choices = array('' => __('Mostrar todas', 'rumordigital'));
foreach ($categories as $category) {
$category_choices[$category->slug] = $category->name;
}
return $category_choices;
}
/**
* Add Control
*/
$wp_customize->add_setting( 'rd_products_categories_1', array(
'default' => '',
'transport' => 'refresh',
'sanitize_callback' => 'rd_sanitize_multiselect' ));
$wp_customize->add_control(
new RD_MultiSelect_Custom_Control (
$wp_customize,
'rd_products_categories_1',
array(
'settings' => 'rd_products_categories_1',
'label' => 'Product Categories 1',
'section' => 'rd_products',
'type' => 'multiselect',
'choices' => rd_get_woo_product_categories()
)
)
);