Я пытался использовать следующий код для достижения этого типа фильтра (https://codepen.io/angelagiese/pen/xPVgPv) (https://i.stack.imgur.com/I06cT.png), но он не работает для меня. Может кто-нибудь, пожалуйста, помогите! Я использую TWIG из расширенных пользовательских полей WordPress плагин также.
HTML:
<div class="course-selections filter-section without-background">
<div class="customlayout">
{% set category = bloc.training_course_list_compact %}
<h2 class="center-title">{{ category.headline }}</h2>
<!-- filter area -->
<div class="inner-class-selection padding-spacing-heading filter-inner-section filtering">
<div class="filter-courses filter-area filter-cat">
<div class="filter" name="course-solution" id="course-solution">
<div class="upper-filter"><h3>Solutions</h3><i class="fas fa-angle-down"></i></div>
<div class="filter-dropdown">
<select class="cat1">
<option class="all-cat" value="cat-all"><h3>Solutions</h3></option>
{% for category in bloc.training_course_list_compact.course_categories %}
{% set titleupper = category.title %}
<option class="{{ category.category_class }}" value="{{ titleupper|e('wp_kses_post') }}"><h4>{{ titleupper|e('wp_kses_post') }}</h4></option>
{% endfor %}
</select>
</div>
</div>
<div class="filter" name="course-type" id="course-type">
<div class="upper-filter"><h3>Class Format</h3><i class="fas fa-angle-down"></i></div>
<div class="filter-dropdown">
{% for category in bloc.training_course_list_compact.course_categories %}
{% for course in category.get_field('courses') %}
{% for classformats in course.get_field('dates') %}
{% set classformat = classformats.class_format %}
{% if classformat == "Lecture" %}
{% set classtype = "Lecture" %}
{% elseif classformat == "Online" %}
{% set classtype = "Online" %}
{% endif %}
<div class="class-types {{ classtype }}" data-value="{{ classtype }}"></div>
{% endfor %}
{% endfor %}
{% endfor %}
<select class="cat2">
<option class="all-cat" value="cat-all"><h3>Class Format</h3></option>
</select>
</div>
</div>
<div class="filter" name="course-location" id="course-location">
<div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
<div class="filter-dropdown">
{% for category in bloc.training_course_list_compact.course_categories %}
{% for locationcourse in category.get_field('courses') %}
{% for location in locationcourse.get_field('dates') %}
<div class="course-location {{ category.category_class }}" id="{{ category.category_class }}" data-value="{{ location.location }}"><span class="{{ locationcourse.course_title }}"></span></div>
{% endfor %}
{% endfor %}
{% endfor %}
<select class="cat3">
<option class="all-cat" value="cat-all"><h3>Class Format</h3></option>
</select>
</div>
</div>
<div class="filter" name="course-date" id="course-date">
<div class="upper-filter"><h3>Start Date</h3><i class="fas fa-angle-down"></i></div>
<div class="filter-dropdown">
{% for category in bloc.training_course_list_compact.course_categories %}
{% for datecourse in category.get_field('courses') %}
{% for dates in datecourse.get_field('dates') %}
<div class="course-date {{ category.category_class }}" id="{{ category.category_class }}" data-value="{{ dates.date }}"><span class="{{ locationcourse.course_title }}"></span></div>
{% endfor %}
{% endfor %}
{% endfor %}
<select class="cat4">
<option class="all-cat" value="cat-all"><h3>Start Date</h3></option>
</select>
</div>
</div>
</div>
<!-- end filter area -->
<!-- block area -->
<div class="class-blocks filter-cat-results">
{% for category in bloc.training_course_list_compact.course_categories %}
{% set thumbnail = category.thumbnail %}
{% set link = category.link %}
{% set titleupper = category.title %}
{% for course in category.get_field('courses') %}
{% set link = course.link %}
{% set title = course.title %}
{% set photoimgs = course.get_field('course_image') %}
{% set courseimg = TimberImage(photoimgs.image) %}
<div class="class-block f-cat">
{% for classformats in course.get_field('dates') %}
{% set classformat = classformats.class_format %}
{% if classformat == "Lecture" %}
{% set classtype = "Lecture" %}
{% elseif classformat == "Online" %}
{% set classtype = "Online" %}
{% endif %}
<div class="filter-assignments" data-cat="{{ titleupper|e('wp_kses_post') }}" data-cat2="{{ classtype }}" data-cat3="{{ classformats.location}}" data-cat4="{{ classformats.date }}"></div>
{% endfor %}
<a class="class-block-link" href="{{ link|e('esc_url') }}">
{% if courseimg is not empty %}
<div class="image"><a class="class-block-link" href="{{ link|e('esc_url') }}">
<img src="{{ Image(courseimg).src }}" alt="{{ photoimgs.alt }}"></a>
</div>
{% else %}
<div class="image default-img"><a class="class-block-link" href="{{ link|e('esc_url') }}">
<img src="/wp-content/uploads/education-Image-filler.png" alt="Blue background with {{ title }} white title."><h4>{{ title }}</h4></a>
</div>
{% endif %}
<div class="inner-course">
<h3>{{ title|e('wp_kses_post') }}</h3>
<h4 class="course-solution">{{ titleupper|e('wp_kses_post') }}</h4>
<p class="course-type"></p>
<p class="course-location"></p>
<p class="course-date"></p>
</div>
</a>
<div class="course-outer-link absolute-btn"><a class="course-link" href="{{ link|e('esc_url') }}">Course</a></div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
JQUERY:
//Education Filter
var filterActive;
function filterCategory(cat1, cat2, cat3, cat4) {
// reset results list
$('.filter-cat-results .f-cat').removeClass('active');
// the filtering in action for all criteria
var selector = ".filtering .f-cat .filter-assignments";
if (cat1 !== 'cat-all') {
selector = '[data-cat=' + cat1 + "]";
}
if (cat2 !== 'cat-all') {
selector = selector + '[data-cat2=' + cat2 + "]";
}
if (cat3 !== 'cat-all') {
selector = selector + '[data-cat3=' + cat3 + "]";
}
if (cat4 !== 'cat-all') {
selector = selector + '[data-cat3=' + cat3 + "]";
}
// show all results
$(selector).parents(".f-cat").addClass('active');
// reset active filter
filterActive = cat1;
}
// start by showing all items
$('.filtering .f-cat').addClass('active');
// call the filtering function when selects are changed
$('.filtering select').change(function() {
filterCategory($('.filtering select.cat1').val(), $('.filtering select.cat2').val(), $('.filtering select.cat3').val());
});
И: Точное совпадение значений присвоенному значению опции для местоположения класса и даты класса.
//Course Type Filter
// Extract the values to an array
$("#course-type").each(function() {
let courses = $('.class-types').map((i, e) => $(e).data('value')).toArray();
let reducer = (a, c) => {
// If the city doesn't exist
a[c] === undefined ?
a[c] = 1 : // One occurrence, else
a[c] = a[c] + 1; // Increment count
return a;
}
let courses_count = courses.reduce(reducer, {});
// Create HTML Elements
for (var course in courses_count) {
$('.cat2').append(`<option class="class-type type-filter" value="${course}">${course} ${courses_count[course]}</option`);
}
});
//Location Filter
// Extract the values to an array
$("#course-location").each(function() {
let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();
let reducer = (a, c) => {
// If the city doesn't exist
a[c] === undefined ?
a[c] = 1 : // One occurrence, else
a[c] = a[c] + 1; // Increment count
return a;
}
let location_count = locations.reduce(reducer, {});
// Create HTML Elements
for (var place in location_count) {
$('.cat3').append(`<option class="class-date type-filter" value="${place}">${place} ${location_count[place]}</option`);
}
});
//Date Filter
// Extract the values to an array
$("#course-date").each(function() {
let date = $('.course-date').map((i, e) => $(e).data('value')).toArray();
let reducer = (a, c) => {
// If the date doesn't exist
a[c] === undefined ?
a[c] = 1 : // One occurrence, else
a[c] = a[c] + 1; // Increment count
return a;
}
let date_count = date.reduce(reducer, {});
// Create HTML Elements
for (var dates in date_count) {
$('.cat4').append(`<option class="class-date type-filter" value="${dates}">${dates} ${date_count[dates]}</option`);
}
});