Question

使用BigCommerce Enterprise，关于如何在方面搜索之后触发JS函数运行的任何想法加载，或者当用户做出选择时？

具体来说，我试图更新js-facet-wrapper类中的元素。我的问题是，当我使用文档准备好时，我的功能无法查看或使用这些对象...

感谢任何输入。

Answer 1

因为过滤器是通过ajax加载的，所以你需要将事件绑定到页面加载时出现的父项，然后从那里获取子元素（通过ajax加载）。见下面的例子。

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

我在尝试调整移动分面搜索下拉列表的默认功能时做了类似的事情，以使滤镜从屏幕上滑出，然后在选择任何滤镜时关闭菜单，或点击叠加层

我正在聆听任何方面的点击等，并相应地调整课程。

$(".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();
});

要在过滤器最初运行函数，您可以使用ajaxStop（）;

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

希望这有帮助。

Answer 2

分面搜索是通过自己的Xhr / Ajax请求加载的，该请求是在文档准备好之后制作的。请求完成后，将需要几秒钟的时间来接收响应并将其注入DOM。这就是为什么在文档就绪时无法访问元素的原因，因为它们尚未加载。

理想的解决方案是找到负责执行加载分面搜索的Xhr请求的函数，并在其回调中插入对您自己的函数的调用（接收分面搜索响应的回调）。不幸的是我不知道这个函数在模板中的位置，虽然我有兴趣知道。

与此同时，一个不太理想的解决方案就是等待页面上的所有Ajax请求完成，然后调用你的函数，因为你可以确定已经加载了分面搜索：

的 ajaxStop

(Default)

在构面搜索选择之后触发JS

2 个答案: