@beltouche, mulțumesc pentru ideile de module. Am ajuns să merg pe un alt traseu pentru că aveam nevoie ca filtrele să se actualizeze pe măsură ce se schimbau fiecare. Practic, la fel ca o fațetă, dar fără a reîncărca pagina. Sunt sigur că există câteva moduri de a face acest lucru și probabil într-un mod mai eficient, dar pentru cantitatea de articole și funcționalitatea de care aveam nevoie, pare să funcționeze destul de bine.
Pentru oricine altcineva care caută să încerce și să realizeze același lucru, iată pașii pe care i-am făcut pentru a realiza ceea ce aveam nevoie.
- Am un tip de conținut numit „inventar” care conține aproximativ 700 de intrări
- Există 3 câmpuri în „inventar” pe care aș dori să le folosesc pentru a filtra
- Am creat o vizualizare care arată conținut de tip „inventar”
- Denumiți vizualizarea „Căutare rapidă personalizată”
- Bifați pentru a „crea un bloc”
- Setați vizualizarea la „afișați câmpurile”
- Adăugați cele 3 câmpuri, stil, marca, model
- Setați elementele pe pagină la „toate”
- Creați șabloane de vizualizare personalizate:
- vizualizări-vizualizare-neformatată--căutare-rapidă-personalizată
- vizualizări-câmpuri-de-vizualizări--căutare-rapidă-personalizată
- vederi-vizualizare-câmp--stil-câmp
- vederi-vizualizare-câmp--câmp-face
- vederi-vizualizare-câmp--model-câmp
Codul pentru fiecare este după cum urmează:
vizualizări-vizualizare-neformatată--căutare-rapidă-personalizată
{% pentru rând în rânduri %}
{% dacă rândul|randarea|decuparea nu este goală %}
{{ row.content }}
{% endif %}
{% endfor %}
vizualizări-câmpuri-de-vizualizări--căutare-rapidă-personalizată
{% 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="ro">.*)','$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="ro">.*)','$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="ro">.*)','$1') %}
<div class="item" style="display: none;" data-category="{{ categorie_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="{{ categorie_name|trim |clasa_curată }}" />
{{ 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="{{ categorie_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 |clasa_curată }}" />
{{ 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 |clasa_curată }}" />
{{ model_name|trim }}</label>
</div>
</div>
vederi-vizualizare-câmp--stil-câmp
vederi-vizualizare-câmp--câmp-face
vederi-vizualizare-câmp--model-câmp
{{ ieșire }}
Plasați blocul pe o pagină înfășurată în următoarele:
<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>
Restul codului este JavaScript care schimbă câmpurile
/**
* Ștergeți dezactivat de la mărci și modele pe prima pagină
* Clonarea devine nesortată
* Eliminați intrările duplicate
* Reordonați în alpha desc și treceți în meniul drop-down
*/
funcția loadMakes(show_styles){
console.log(afișare_stiluri);
if( show_styles == 'toate' ){
jQuery('.quickSearch .item .-makes').clone().prependTo('.quickSearch .unsorted__makes');
}
altfel{
jQuery('.quickSearch .item .-makes[data-category="'+show_styles+'"]').clone().prependTo('.quickSearch .unsorted__makes');
}
//
// Eliminați duplicatele din meniul derulant al mărcilor.
var face = {};
jQuery('.unsorted__makes .-makes').each(function() {
var make = jQuery(this).attr('data-make');
dacă (face [face])
jQuery(this).remove();
altfel
face[face] = adevărat;
});
// Reordonați alpha și treceți la meniurile drop-down.
jQuery(funcție(){
jQuery('.unsorted__makes .-makes').sort(sort_makes).clone().prependTo('.filters-widget.-makes .filters-widget__copy');
funcția sort_makes(a, b){
return(jQuery(b).data('make')) < (jQuery(a).data('make')) ? 1 : -1;
}
});
}
/**
*
* Clonează modelele în nesortate
* Eliminați intrările duplicate
* Reordonați în alpha desc și treceți în meniul drop-down
*/
funcția loadModels(show_styles,show_makes){
if( show_makes == 'toate' ){
jQuery('.quickSearch .item .-models').clone().prependTo('.quickSearch .unsorted__models');
}
altfel{
jQuery('.quickSearch .item .-models[data-category="'+show_styles+'"][data-make="'+show_makes+'"]').clone().prependTo('.quickSearch .unsorted__models') ;
}
//
// Eliminați duplicatele din lista derulantă a modelelor.
var modele = {};
jQuery('.unsorted__models .-models').each(function() {
var model = jQuery(this).attr('data-model');
dacă (modele[model])
jQuery(this).remove();
altfel
modele[model] = adevărat;
});
// Reordonați alpha și treceți la meniurile drop-down.
jQuery(funcție(){
jQuery('.unsorted__models .-models').sort(sort_models).clone().prependTo('.filters-widget.-models .filters-widget__copy');
funcția sort_models(a, b){
return(jQuery(b).data('model')) <(jQuery(a).data('model')) ? 1 : -1;
}
});
}
/**
* Mutați stilurile în nesortate
* Eliminați intrările goale
* Eliminați intrările duplicate
* Reordonați în alpha desc și treceți în meniul drop-down
*/
// Eliminați intrările goale
jQuery('.quickSearch .item').each(function(){
if( jQuery(this).data('make') == nedefinit || jQuery(this).data('make') == null || jQuery(this).data('make') == '') {
jQuery(this).remove();
}
});
jQuery('.quickSearch .item .-styles').prependTo('.quickSearch .unsorted__styles');
// Eliminați duplicatele din meniul drop-down de stiluri.
var stiluri = {};
jQuery('.unsorted__styles .-styles').each(function() {
var stil = jQuery(this).attr('data-category');
dacă (stiluri[stil])
jQuery(this).remove();
altfel
stiluri[stil] = adevărat;
});
// Reordonați alpha și treceți la meniurile drop-down.
jQuery(funcție(){
jQuery('.unsorted__styles .-styles').sort(sort_styles).prependTo('.filters-widget.-styles .filters-widget__copy');
funcția sort_styles(a, b){
return(jQuery(b).data('categorie')) < (jQuery(a).data('categorie')) ? 1 : -1;
}
});
// Afișează și ascunde mărcile și modelele pe baza stilului selectat
var show_styles = '';
jQuery('.-styles input[type=checkbox]').change(function(){
jQuery('.-styles input[type=checkbox]').not(this).prop('bifat', false);
jQuery('.-face .filters-widget__copy, .-models .filters-widget__copy').html('');
jQuery('.unsorted__makes, .unsorted__models').html('');
show_styles = jQuery(this).parent().data('categorie');
loadMakes(afișați_stiluri);
loadModels(stiluri_afișați,stiluri_afișați);
});
// Afișează și ascunde mărcile și modelele pe baza stilului selectat
var show_makes = '';
jQuery('.-makes').on('schimbare', 'input[tip=checkbox]', function(){
jQuery('.-makes input[type=checkbox]').not(this).prop('bifat', false);
jQuery('.-models .filters-widget__copy').html('');
jQuery('.unsorted__models').html('');
show_styles = jQuery(this).parent().data('categorie');
show_makes = jQuery(this).parent().data('make');
loadModels(stiluri_afișați,stiluri_afișați);
});
// Butonul de trimitere Căutare rapidă
jQuery('.quickSearch .form-submit').on('clic', function(){
stiluri = jQuery('.-styles input:checked').val();
face = jQuery('.-makes input:checked').val();
modele = jQuery('.-models input:checked').val();
var quick_search_url = '';
if( stiluri && !facă && !modele ){
quick_search_url = 'categorie/'+stiluri;
}
else if( stiluri && face && !modele ){
quick_search_url = 'categorie/'+stiluri;
quick_search_url += '/make/'+makes;
}
else if( stiluri && !facă && modele ){
quick_search_url = 'categorie/'+stiluri;
quick_search_url += '/model/'+modele;
}
else if( stiluri && marcă && modele ){
quick_search_url = 'categorie/'+stiluri;
quick_search_url += '/make/'+makes;
quick_search_url += '/model/'+modele;
}
else if( !stiluri && face && !modele ){
quick_search_url += '/make/'+makes;
}
else if( !styles && make && modeles ){
quick_search_url += '/make/'+makes;
quick_search_url += '/model/'+modele;
}
else if( !stiluri && !facă && modele ){
quick_search_url += '/model/'+modele;
}
window.location.href = '/inventory-search/'+quick_search_url;
});
loadMakes('toate');
loadModels('toate', 'toate');
}
