Trigger JS nach Facettensuche Auswahl

Question

Mit BigCommerce Enterprise, irgendwelche Ideen, wie ich eine JS-Funktion auslösen kann nach die Facettensuche entweder lädt, oder wenn eine Auswahl von einem Benutzer vorgenommen wird?

Insbesondere versuche ich Elemente innerhalb der js-Facet-Wrapper-Klasse zu aktualisieren. Mein Problem ist, dass meine Funktionen diese Objekte nicht sehen oder verwenden können, wenn ich Dokument bereit ...

Alle Eingaben schätzen.

Answer 1

Da die Filter über Ajax geladen werden, müssen Sie Ihre Ereignisse an ein übergeordnetes Element binden, das beim Laden der Seite vorhanden ist, und dann das untergeordnete Element (das über Ajax geladen wird) von dort abrufen. Siehe Beispiel unten.

$('.Left').on('click', '.facet-option.js-facet-option', function(){ 
    adjustClasses(); 
}); 

Ich habe etwas ähnliches gemacht, wenn die Standardfunktionalität des mobilen facettierte Suche Drop-Down einzustellen versuchen, die Filter herausrutschen aus aus dem Bildschirm zu machen, dann das Menü zu schließen, wenn ein Filter ausgewählt, oder das Overlay ist angeklickt.

Ich lausche auf Klicks auf einer der Facetten usw. und die Klassen entsprechend anpassen.

$(".close-filter-menu").on("click", function(){ 
    $('.page').removeClass("filters"); 
    $('.filter-overlay').removeClass("filters-open"); 
    $(".Left.fleft.js-faceted-search-column").removeClass("mobile-in-view open"); 
}) 

$('.js-faceted-search-action.btn').on('click', function(event){ 
    event.preventDefault(); 
    var slideoutMenu = $('.Left.fleft.js-faceted-search-column'); 
    var slideoutMenuWidth = $('.Left.fleft.js-faceted-search-column').width(); 
    var overlay = $(".filter-overlay"); 

    // toggle open class 
    slideoutMenu.toggleClass("open"); 

    // slide menu 
    if (slideoutMenu.hasClass("open")) { 
     slideoutMenu.animate({ 
      right: "0px" 
     }); 
     $('html,body').scrollTop(0); 
     $('.page').addClass("filters"); 
     overlay.addClass("filters-open"); 
    } else { 
     slideoutMenu.animate({ 
      left: -slideoutMenuWidth 
     }, 250);  

    } 
}); 

function adjustClasses(){ 
    var width = $(window).width(); 
    if(width <= 768){ 
     $(".page").removeClass("filters"); 
     $(".filter-overlay").removeClass("filters-open");    
     $(".Left.fleft.js-faceted-search-column").removeClass("open"); 
     $(".Left.fleft.js-faceted-search-column").removeClass("mobile-in-view"); 
    } 
} 

$("html").on("click", "#ModalContainer .facet-option.js-facet-option", function(){ 
    adjustClasses(); 
}); 
$('.Left').on('click', '.facet-option.js-facet-option', function(){ 
    adjustClasses(); 
}); 
$('.Left').on('click', 'p.narrow-results-header', function(){ 
    adjustClasses(); 
}); 
$('.Left').on('click', '.btn.js-btn-facet-range-update', function(){ 
    adjustClasses(); 
}); 
$('.ToggleFilters').on('click', function(){ 
    adjustClasses(); 
}); 
$('.Left').on('click', '.filter-overlay.filters-open').on('click', function(){ 
    adjustClasses(); 
}); 
$('.Left').on('click', '.btn.btn-facet-more-options.more').on('click', function(){ 
    adjustClasses(); 
}); 

Funktionen auszuführen, wenn die Filter ursprünglich haben, können Sie ajaxStop() verwenden;

$(document).ajaxStop(function(){ 
    $('.js-faceted-search-action.btn').addClass("just-loaded"); 
}) 

Hoffe, das hilft.

Answer 2

Die facettierte Suche wird über eine eigene Xhr/Ajax-Anforderung geladen, die ausgeführt wird, nachdem das Dokument 'bereit' geworden ist. Sobald die Anfrage gestellt wurde, dauert es einige Sekunden, bis die Antwort empfangen und in das DOM injiziert wurde. Aus diesem Grund können Sie nicht auf die Elemente zugreifen, wenn das Dokument bereit ist, da sie noch nicht geladen wurden.

Die ideale Lösung wäre, die für die Durchführung der Xhr-Anfrage verantwortliche Funktion zu finden, die die facettierte Suche lädt, und einen Call in die eigene Funktion in ihrem Callback einzufügen (der Callback, der die facettierte Suchantwort erhält). Leider weiß ich nicht wo in der Vorlage diese Funktion liegt, obwohl mich das interessieren würde.

In der Zwischenzeit eine weniger als ideale Lösung wäre einfach für alle Ajax-Anfragen auf der Seite zu warten, zu beenden und dann Funktion aufrufen, da Sie dann sicher sein, dass die facettierte Suche geladen wurde:

ajaxStop

$(document).ajaxStop(function() { 
    //All Ajax requests finished, call your function here... 
    //You can also safely bind to and access the faceted search elements now. 
});