Estoy usando MixitUp con la extensión multifiltro para filtrar algunos de los tipos de habitaciones en un sitio que estoy desarrollando. El CMS es WordPress, por lo que la integración general es fácil y funcionaba hasta que se introdujeron menús desplegables de selección de estilo personalizado.
Encontré un script jQuery que genera listas desplegables de selección de estilo personalizado; esto me lleva a mi problema de hacer que mixitup haga lo suyo al seleccionar una opción de cualquiera de los menús desplegables, ya que jQuery replica una versión basada en div del menú de selección. ya no funciona Incluso cuando intento y console.log algo, no obtengo nada.
Esta es la parte de la plantilla para generar la siguiente:
<section class="relative bg-white-th lg:pb-16 pb-12">
<div class="container lg:mb-24 xl:px-0 lg:px-4 px-8">
<form action="" class="flex flex-row flex-wrap items-center">
<div class="lg:w-1/3 w-1/2 lg:pr-4 pr-1 lg:mb-0 mb-8">
<label for="people" class="uppercase lg:mb-4 opacity-40 lg:text-base text-sm">Book with us</label>
<select name="people" id="No. of People" class="search-select custom-select" data-filter-group data-logic="and">
<option value="">No. of People</option>
<option value=".people-2">Up 1 People</option>
<option value=".people-2">Up 2 People</option>
<option value=".people-4">Up 3 People</option>
<option value=".people-4">Up 4 People</option>
</select>
</div>
<div class="lg:w-1/3 w-1/2 lg:pr-2 pr-1 lg:mb-0 mb-8">
<label for="price" class="uppercase lg:mb-4 opacity-40 lg:text-base text-sm">Price</label>
<select name="price" id="Per Night" class="search-select custom-select" data-filter-group data-logic="and">
<option value="">Per Night</option>
<option value=".price-130">£130+ Per Night</option>
<option value=".price-140">£140+ Per Night</option>
<option value=".price-160">£160+ Per Night</option>
<option value=".price-180">£180+ Per Night</option>
</select>
</div>
<div class="lg:w-1/3 w-1/2 lg:pl-2 pl-1 lg:mb-0 mb-8">
<label for="features" class="uppercase lg:mb-4 opacity-40 lg:text-base text-sm">Features</label>
<select name="features" id="Features" class="search-select custom-select" data-filter-group data-logic="and">
<option value="">Features</option>
<option value=".disabled">Disabled Access</option>
<option value=".dog-friendly">Dog Friendly</option>
<option value=".ground-floor">Ground Floor</option>
<option value=".interlink-door">Interlink Door</option>
</select>
</div>
</form>
</div>
<div class="container lg:px-0 px-8" id="filter-container">
<?php
while(have_rows('rooms')) : the_row();
$post_object = get_sub_field('room');
$post = $post_object;
setup_postdata( $post );
$sleeps = get_field('sleeps');
$from = get_field('from');
$pets = get_field('pets');
$description = get_field('description');
$booking_link = get_field('booking_link');
$location = get_field('location');
?>
<div class="relative w-full lg:mb-16 mb-12 flex lg:flex-row flex-col mix price-<?php echo $from ?> people-<?php echo $sleeps ?>
<?php while(have_rows('features_list')) : the_row();
$features = get_sub_field('feature');
$mod_name = strtolower(str_replace(' ', '-', $features));
;?> <?php echo $mod_name ?><?php endwhile;?>">
<div class="lg:w-1/2 w-full relative search-image">
<img src="<?php the_post_thumbnail_url(); ?>" alt="Thumbnail Image" class="absolute object-cover w-full h-full">
</div>
<div class="lg:w-1/2 w-full relative lg:p-8">
<div class="w-full flex flex-row items-center justify-between mb-8">
<h4 class="text-3xl mb-2"><?php the_title(); ?></h4>
<svg class="accomo-fav" id="<?php the_ID(); ?>" width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 1C13.76 1 12.09 1.81 11 3.09C9.91 1.81 8.24 1 6.5 1C3.42 1 1 3.42 1 6.5C1 10.28 4.4 13.36 9.55 18.04L11 19.35L12.45 18.03C17.6 13.36 21 10.28 21 6.5C21 3.42 18.58 1 15.5 1Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
<path d="M15.5 1C13.76 1 12.09 1.81 11 3.09C9.91 1.81 8.24 1 6.5 1C3.42 1 1 3.42 1 6.5C1 10.28 4.4 13.36 9.55 18.04L11 19.35L12.45 18.03C17.6 13.36 21 10.28 21 6.5C21 3.42 18.58 1 15.5 1Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
</svg>
</div>
<p class="uppercase text-orange-th lg:mb-8"><?php echo $location ?></p>
<p class="mb-2"><strong>Sleeps:</strong> Up to <?php echo $sleeps ?></p>
<p class="mb-2"><strong>From:</strong> £<?php echo $from ?> per night</p>
<p class="mb-8"><strong>Features:</strong>
<?php
$i = 0;
$count = count(get_sub_field('features_list'));
while(have_rows('features_list')) : the_row();
$i++;
$feature = get_sub_field('feature');
?>
<span><?php echo $feature ?>,</span>
<?php
endwhile;
?>
</p>
<p class="mb-8"><?php echo $description ?></p>
<div class="w-full flex lg:flex-row flex-col">
<a href="<?php the_permalink(); ?>" class="btn-primary-transparent lg:w-auto w-full lg:mr-4 mr-0 lg:mb-0 mb-3">View Rooms</a>
<a href="hidden for privacy" target="_blank" class="btn-primary-transparent lg:w-auto w-full">Book Now</a>
</div>
</div>
</div>
<?php
wp_reset_postdata();
endwhile;
?>
</div>
</section>
Este es el script para MixitUp: se encuentra en la parte de la plantilla:
<script>
$(function(){
var containerEl = document.querySelector('#filter-container');
var mixer = mixitup(containerEl, {
controls: {
toggleLogic: 'and'
},
multifilter: {
enable: true
}
});
$('.custom-option').on('click', function() {
var filterString = $('.selection').data('value')
// var filterString = $(this).data('value') have also tried this as well to no avail
console.log(filterString)
mixer.filter(filterString);
});
});
</script>
Y este es el script que genera los menús desplegables de selección personalizados:
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template="<div class="" + classes + '">';
template += '<span class="custom-select-trigger">' + $(this).attr('id') + '</span>';
template += '<div class="custom-options">';
$(this).find("option").each(function() {
template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
});
template += '</div></div>';
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
$(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});
Entonces, actualmente, cuando se hace clic en una clase de opción personalizada, parece que no sucede nada, he intentado crear una sola función para manejar simplemente registrar un mensaje de cadena al hacer clic y parece que no hace nada, una vez que de alguna manera puedo pasar este valor entonces debería encontrar la misma cadena mezcladora que usé antes para hacer que la sección MixitUp funcione. Mi única teoría de trabajo es que estoy apuntando al selector incorrecto; ¿falla eso porque mi jQuery para MixitUp está dentro de la parte de la plantilla que se carga antes y causa algún tipo de problema de inicialización?
.