@beltouche, cảm ơn vì ý tưởng mô-đun. Cuối cùng, tôi đã đi theo một lộ trình khác vì tôi cần các bộ lọc cập nhật khi mỗi bộ lọc thay đổi. Về cơ bản, giống như một khía cạnh nhưng không cần tải lại trang. Tôi chắc rằng có một số cách để giải quyết vấn đề này và có thể là cách hiệu quả hơn nhưng đối với số lượng mặt hàng và chức năng tôi cần, cách này có vẻ hoạt động khá tốt.
Đối với bất kỳ ai khác đang muốn thử và đạt được điều tương tự, đây là các bước tôi đã thực hiện để đạt được những gì tôi cần.
- Tôi có một loại nội dung gọi là "khoảng không quảng cáo" chứa khoảng 700 mục nhập
- Có 3 trường trong "khoảng không quảng cáo" mà tôi muốn sử dụng để lọc theo
- Tôi đã tạo chế độ xem hiển thị nội dung thuộc loại "hàng tồn kho"
- Đặt tên cho chế độ xem "Tìm kiếm nhanh tùy chỉnh"
- Kiểm tra để "tạo một khối"
- Đặt chế độ xem thành "hiển thị Trường"
- Thêm 3 trường, style, make, model
- Đặt các mục trên mỗi trang thành "tất cả"
- Tạo các mẫu xem tùy chỉnh:
- lượt xem-xem-không được định dạng--tùy chỉnh-tìm kiếm nhanh
- lượt xem-xem-trường--tùy chỉnh-tìm kiếm nhanh
- lượt xem-xem-trường--kiểu trường
- lượt xem-xem-trường--trường-tạo
- view-view-field--field-model
Mã cho mỗi như sau:
lượt xem-xem-không được định dạng--tùy chỉnh-tìm kiếm nhanh
{% cho hàng trong hàng %}
{% nếu hàng|render|trim không trống %}
{{ row.content }}
{% endif %}
{% endfor %}
lượt xem-xem-trường--tùy chỉnh-tìm kiếm nhanh
{% set category_name = field.field_category.content|striptags %}
{% set category_id = field.field_category.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set category_id = category_id|preg_replace('(" hreflang="vi">.*)','$1') %}
{% set make_name = field.field_make.content|striptags %}
{% set make_id = field.field_make.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set make_id = make_id|preg_replace('(" hreflang="vi">.*)','$1') %}
{% set model_name = field.field_model.content|striptags %}
{% set model_id = field.field_model.content|preg_replace('(<a href="/taxonomy/term/)','$1') %}
{% set model_id = model_id|preg_replace('(" hreflang="vi">.*)','$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 |clean_class }}" />
{{category_name|trim}}</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 |clean_class }}" />
{{ make_name|trim }}</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 |clean_class }}" />
{{ model_name|trim }}</label>
</div>
</div>
lượt xem-xem-trường--kiểu trường
lượt xem-xem-trường--trường-tạo
view-view-field--field-model
{{ đầu ra }}
Đặt khối trên một trang được bọc trong phần sau:
<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>
Phần còn lại của mã là JavaScript hoán đổi các trường
/**
* Xóa vô hiệu hóa khỏi nhãn hiệu và kiểu máy trên trang nhất
* Clone biến thành unsorted
* Xóa các mục trùng lặp
* Sắp xếp lại thành alpha desc và chuyển sang danh sách thả xuống
*/
hàm loadMakes(show_styles){
console.log(show_styles);
nếu (show_styles == 'tất cả') {
jQuery('.quickSearch .item .-makes').clone().prependTo('.quickSearch .unsorted__makes');
}
khác{
jQuery('.quickSearch .item .-makes[data-category="'+show_styles+'"]').clone().prependTo('.quickSearch .unsorted__makes');
}
//
// Loại bỏ các mục trùng lặp khỏi danh sách thả xuống.
var làm = {};
jQuery('.unsorted__makes .-makes').each(function() {
var make = jQuery(this).attr('data-make');
nếu (làm [làm])
jQuery(this).remove();
khác
make[make] = true;
});
// Sắp xếp lại alpha và di chuyển xuống danh sách thả xuống.
jQuery(hàm(){
jQuery('.unsorted__makes .-makes').sort(sort_makes).clone().prependTo('.filters-widget.-makes .filters-widget__copy');
hàm sort_makes(a, b){
return(jQuery(b).data('make')) < (jQuery(a).data('make')) ? 1 : -1;
}
});
}
/**
*
* Sao chép các mô hình vào chưa sắp xếp
* Xóa các mục trùng lặp
* Sắp xếp lại thành alpha desc và chuyển sang danh sách thả xuống
*/
hàm loadModels(show_styles,show_makes){
nếu (show_makes == 'tất cả') {
jQuery('.quickSearch .item .-models').clone().prependTo('.quickSearch .unsorted__models');
}
khác{
jQuery('.quickSearch .item .-models[data-category="'+show_styles+'"][data-make="'+show_makes+'"]').clone().prependTo('.quickSearch .unsorted__models') ;
}
//
// Xóa các bản sao khỏi danh sách mô hình thả xuống.
mô hình var = {};
jQuery('.unsorted__models .-models').each(function() {
var model = jQuery(this).attr('data-model');
nếu (mô hình[mô hình])
jQuery(this).remove();
khác
mô hình [mô hình] = true;
});
// Sắp xếp lại alpha và di chuyển xuống danh sách thả xuống.
jQuery(hàm(){
jQuery('.unsorted__models .-models').sort(sort_models).clone().prependTo('.filters-widget.-models .filters-widget__copy');
hàm sort_models(a, b){
return(jQuery(b).data('model')) < (jQuery(a).data('model')) ? 1 : -1;
}
});
}
/**
* Di chuyển phong cách vào chưa sắp xếp
* Xóa các mục trống
* Xóa các mục trùng lặp
* Sắp xếp lại thành alpha desc và chuyển sang danh sách thả xuống
*/
// Xóa các mục trống
jQuery('.quickSearch .item').each(function(){
if( jQuery(this).data('make') == undefined || jQuery(this).data('make') == null || jQuery(this).data('make') == '') {
jQuery(this).remove();
}
});
jQuery('.quickSearch .item .-styles').prependTo('.quickSearch .unsorted__styles');
// Loại bỏ các bản sao từ menu thả xuống kiểu.
kiểu var = {};
jQuery('.unsorted__styles .-styles').each(function() {
var style = jQuery(this).attr('data-category');
nếu (kiểu [kiểu])
jQuery(this).remove();
khác
phong cách [phong cách] = true;
});
// Sắp xếp lại alpha và di chuyển xuống danh sách thả xuống.
jQuery(hàm(){
jQuery('.unsorted__styles .-styles').sort(sort_styles).prependTo('.filters-widget.-styles .filters-widget__copy');
hàm sort_styles(a, b){
return(jQuery(b).data('category')) < (jQuery(a).data('category')) ? 1 : -1;
}
});
// Hiển thị và ẩn nhãn hiệu và kiểu mẫu dựa trên kiểu đã chọn
var show_styles = '';
jQuery('.-style input[type=checkbox]').change(function(){
jQuery('.-styles input[type=checkbox]').not(this).prop('checked', false);
jQuery('.-makes .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);
});
// Hiển thị và ẩn nhãn hiệu và kiểu mẫu dựa trên kiểu đã chọn
var show_makes = '';
jQuery('.-makes').on('change', 'input[type=checkbox]', function(){
jQuery('.-makes input[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);
});
// Nút gửi tìm kiếm nhanh
jQuery('.quickSearch .form-submit').on('click', function(){
style = jQuery('.-styles input:checked').val();
make = jQuery('.-makes input:checked').val();
models = jQuery('.-models input:checked').val();
var quick_search_url = '';
if( phong cách && !makes && !models ){
quick_search_url = 'danh mục/'+kiểu dáng;
}
khác nếu ( kiểu && tạo && !model ){
quick_search_url = 'danh mục/'+kiểu dáng;
quick_search_url += '/make/'+make;
}
khác nếu (kiểu dáng && !makes && models ){
quick_search_url = 'danh mục/'+kiểu dáng;
quick_search_url += '/model/'+models;
}
khác nếu (kiểu && tạo && mô hình){
quick_search_url = 'danh mục/'+kiểu dáng;
quick_search_url += '/make/'+make;
quick_search_url += '/model/'+models;
}
khác nếu ( !styles && tạo && !models ){
quick_search_url += '/make/'+make;
}
khác nếu ( !styles && make && models ){
quick_search_url += '/make/'+make;
quick_search_url += '/model/'+models;
}
other if( !styles && !makes && models ){
quick_search_url += '/model/'+models;
}
window.location.href = '/inventory-search/'+quick_search_url;
});
loadMakes('tất cả');
loadModels('all','all');
}
