@beltouche, спасибо за идеи модуля. В итоге я пошел другим путем, потому что мне нужно было, чтобы фильтры обновлялись по мере изменения каждого из них. По сути, так же, как фасет, но без перезагрузки страницы. Я уверен, что есть несколько способов сделать это и, возможно, более эффективный способ, но для количества элементов и функциональности, которые мне нужны, это работает довольно хорошо.
Для всех, кто хочет попробовать сделать то же самое, вот шаги, которые я предпринял для достижения того, что мне нужно.
- У меня есть тип контента под названием «инвентарь», который содержит около 700 записей.
- В «инвентаре» есть 3 поля, которые я хотел бы использовать для фильтрации.
- Я создал представление, показывающее содержимое типа «инвентарь».
- Назовите представление «Пользовательский быстрый поиск».
- Установите флажок «Создать блок».
- Установите представление «Показать поля»
- Добавьте 3 поля, стиль, марка, модель
- Установите элементы на странице как «все»
- Создайте настраиваемые шаблоны представления:
- просмотры-просмотр-неформатированный-пользовательский-быстрый-поиск
- представления-просмотр-поля--пользовательский-быстрый-поиск
- представления-вид-поле-стиль поля
- представления-просмотр-поле--поле-сделать
- представления-просмотр-поле--поле-модель
Код для каждого из них следующий:
просмотры-просмотр-неформатированный-пользовательский-быстрый-поиск
{% для строки в строках %}
{%, если строка|рендеринг|обрезка не пуста %}
{{строка.содержимое}}
{% конец%}
{% конец для %}
представления-просмотр-поля--пользовательский-быстрый-поиск
{% set category_name = fields.field_category.content|striptags %}
{% set category_id = fields.field_category.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set category_id = category_id|preg_replace('(" hreflang="en">.*)','$1') %}
{% set make_name = fields.field_make.content|striptags %}
{% set make_id = fields.field_make.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set make_id = make_id|preg_replace('(" hreflang="en">.*)','$1') %}
{% set model_name = fields.field_model.content|striptags %}
{% set model_id = fields.field_model.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set model_id = model_id|preg_replace('(" hreflang="en">.*)','$1') %}
<div class="item" style="display: none;" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class }}">
<div class="-styles" data-category="{{ category_name|clean_class }}">
<label for="{{ category_name|clean_class }}" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class } }">
<input type="checkbox" name="{{ category_name|trim }}" value="{{ category_id|trim }}" class="{{ category_name|trim|clean_class }}" id="{{ category_name|trim |чистый_класс }}" />
{{ category_name|обрезать }}</label>
</div>
<div class="-makes" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}">
<label for="{{ make_name|clean_class }}" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class } }">
<input type="checkbox" name="{{ make_name|trim }}" value="{{ make_id|trim }}" class="{{ make_name|trim|clean_class }}" id="{{ make_name|trim |чистый_класс }}" />
{{ make_name|обрезать }}</label>
</div>
<div class="-models" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class }}">
<label for="{{ model_name|clean_class }}" data-category="{{ category_name|clean_class }}" data-make="{{ make_name|clean_class }}" data-model="{{ model_name|clean_class } }">
<input type="checkbox" name="{{ model_name|trim }}" value="{{ model_id|trim }}" class="{{ model_name|trim|clean_class }}" id="{{ model_name|trim |чистый_класс }}" />
{{ model_name|обрезка }}</label>
</div>
</div>
представления-вид-поле-стиль поля
представления-просмотр-поле--поле-сделать
представления-просмотр-поле--поле-модель
{{ вывод }}
Поместите блок на страницу, обернутую следующим образом:
<div class="quickSearch hidden">
<div class="quickSearch__content">
<div class="quickSearch__filters">
<div class="filters-widget -styles">
<div class="filters-widget__items">
<div class="filters-widget__item">
<div class="filters-widget__header">
<h4>Styles</h4>
<i class="fas fa-expand-alt"></i>
<i class="far fa-compress-alt"></i>
</div>
<div class="filters-widget__copy">
</div>
</div>
</div>
</div>
<div class="filters-widget -makes">
<div class="filters-widget__items">
<div class="filters-widget__item">
<div class="filters-widget__header">
<h4>Makes</h4>
<i class="fas fa-expand-alt"></i>
<i class="far fa-compress-alt"></i>
</div>
<div class="filters-widget__copy">
</div>
</div>
</div>
</div>
<div class="filters-widget -models">
<div class="filters-widget__items">
<div class="filters-widget__item">
<div class="filters-widget__header">
<h4>Models</h4>
<i class="fas fa-expand-alt"></i>
<i class="far fa-compress-alt"></i>
</div>
<div class="filters-widget__copy">
</div>
</div>
</div>
</div>
<div class="unsorted__styles" style="display: none;"></div>
<div class="unsorted__makes" style="display: none;"></div>
<div class="unsorted__models" style="display: none;"></div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
<input data-drupal-selector="edit-submit-custom-search-inventory" type="submit" id="edit-submit-custom-search-inventory" value="Search" class="button js-form-submit form-submit -brand-01">
</div>
{{ drupal_entity('block', 'views_block__custom_quick_search_block_quick_search', check_access=false) }}
</div>
<div class="quickSearch__links">
{{ drupal_entity('block_content', '8') }}
</div>
</div>
</div>
Остальной код — это JavaScript, который меняет местами поля.
/**
* Очистить отключенные марки и модели на главной странице
* Клон превращается в несортированный
* Удалить повторяющиеся записи
* Переупорядочить в альфа-описание и перейти в раскрывающийся список
*/
функция loadMakes(show_styles){
console.log(show_styles);
если( show_styles == 'все' ){
jQuery('.quickSearch .item .-makes').clone().prependTo('.quickSearch .unsorted__makes');
}
еще{
jQuery('.quickSearch .item .-makes[data-category="'+show_styles+'"]').clone().prependTo('.quickSearch .unsorted__makes');
}
//
// Удалить дубликаты из выпадающего меню.
вар делает = {};
jQuery('.unsorted__makes .-makes').each(function() {
var make = jQuery(this).attr('data-make');
если (делает [делает])
jQuery(это).удалить();
еще
делает [делает] = истина;
});
// Изменить порядок альфы и перейти к раскрывающимся спискам.
jQuery (функция () {
jQuery('.unsorted__makes .-makes').sort(sort_makes).clone().prependTo('.filters-widget.-makes .filters-widget__copy');
функция sort_makes(a, b){
return(jQuery(b).data('сделать')) < (jQuery(a).data('сделать')) ? 1 : -1;
}
});
}
/**
*
* Клонировать модели в несортированные
* Удалить повторяющиеся записи
* Переупорядочить в альфа-описание и перейти в раскрывающийся список
*/
функция loadModels (show_styles, show_makes) {
если( show_makes == 'все' ){
jQuery('.quickSearch .item .-models').clone().prependTo('.quickSearch .unsorted__models');
}
еще{
jQuery('.quickSearch .item .-models[data-category="'+show_styles+'"][data-make="'+show_makes+'"]').clone().prependTo('.quickSearch .unsorted__models') ;
}
//
// Удалить дубликаты из выпадающего списка моделей.
вар модели = {};
jQuery('.unsorted__models .-models').each(function() {
var model = jQuery(this).attr('data-model');
если (модели [модель])
jQuery(это).удалить();
еще
модели [модель] = правда;
});
// Изменить порядок альфы и перейти к раскрывающимся спискам.
jQuery (функция () {
jQuery('.unsorted__models .-models').sort(sort_models).clone().prependTo('.filters-widget.-models .filters-widget__copy');
функция sort_models (а, б) {
return(jQuery(b).data('модель')) < (jQuery(a).data('модель')) ? 1 : -1;
}
});
}
/**
* Переместить стили в несортированные
* Удалить пустые записи
* Удалить повторяющиеся записи
* Переупорядочить в альфа-описание и перейти в раскрывающийся список
*/
// Удалить пустые записи
jQuery('.quickSearch .item').каждый(функция(){
if( jQuery(this).data('make') == undefined || jQuery(this).data('make') == null || jQuery(this).data('make') == '') {
jQuery(это).удалить();
}
});
jQuery('.quickSearch .item .-styles').prependTo('.quickSearch .unsorted__styles');
// Удалить дубликаты из выпадающего списка стилей.
стили вар = {};
jQuery('.unsorted__styles .-styles').each(function() {
var style = jQuery(this).attr('категория данных');
если (стили[стиль])
jQuery(это).удалить();
еще
стили[стиль] = истина;
});
// Изменить порядок альфы и перейти к раскрывающимся спискам.
jQuery (функция () {
jQuery('.unsorted__styles .-styles').sort(sort_styles).prependTo('.filters-widget.-styles .filters-widget__copy');
функция sort_styles (а, б) {
return(jQuery(b).data('категория')) < (jQuery(a).data('категория')) ? 1 : -1;
}
});
// Показать и скрыть марки и модели в зависимости от выбранного стиля
вар show_styles = '';
jQuery('.-styles input[type=checkbox]').change(function(){
jQuery('.-styles input[type=checkbox]').not(this).prop('checked', false);
jQuery('.-создает .filters-widget__copy, .-models .filters-widget__copy').html('');
jQuery('.unsorted__makes, .unsorted__models').html('');
show_styles = jQuery(this).parent().data('category');
loadMakes(show_styles);
loadModels (show_styles, show_styles);
});
// Показать и скрыть марки и модели в зависимости от выбранного стиля
вар show_makes = '';
jQuery('.-делает').on('изменить', 'ввод[тип=флажок]', function(){
jQuery('.-делает ввод[type=checkbox]').not(this).prop('checked', false);
jQuery('.-models .filters-widget__copy').html('');
jQuery('.unsorted__models').html('');
show_styles = jQuery(this).parent().data('category');
show_makes = jQuery(this).parent().data('make');
loadModels (show_styles, show_makes);
});
// Кнопка отправки быстрого поиска
jQuery('.quickSearch .form-submit').on('щелчок', function(){
стили = jQuery('.-styles input:checked').val();
make = jQuery('.-make input:checked').val();
models = jQuery('.-models input:checked').val();
вар quick_search_url = '';
если( стили && !делает && !модели ){
quick_search_url = 'категория/'+стили;
}
иначе если( стили && делают && !модели ){
quick_search_url = 'категория/'+стили;
quick_search_url += '/make/'+делает;
}
иначе если( стили && !делает && модели ){
quick_search_url = 'категория/'+стили;
quick_search_url += '/model/'+models;
}
иначе если( стили && марки && модели ){
quick_search_url = 'категория/'+стили;
quick_search_url += '/make/'+делает;
quick_search_url += '/model/'+models;
}
else if( !styles && makes && !models ){
quick_search_url += '/make/'+делает;
}
else if( !стили && производит && модели ){
quick_search_url += '/make/'+делает;
quick_search_url += '/model/'+models;
}
else if( !стили && !делает && модели ){
quick_search_url += '/model/'+models;
}
window.location.href = '/inventory-search/'+quick_search_url;
});
loadMakes('все');
loadModels('все','все');
}
