FacetWP: Добавьте HTML до и после фасета с jQuery - PullRequest
Новая
       15

FacetWP: Добавьте HTML до и после фасета с jQuery

1 голос
/ 03 марта 2020

Я хочу использовать элемент коллапса для своих аспектов и поэтому добавить немного HTML до и после вывода. Чтобы добиться этого, я использую следующий код:

Код изначально был для добавления метки перед фасетами и ее скрытия, если для нее нет опции. Я расширил код, добавив HTML до и после фасета. Точно так же, как на этикетке. Работает вроде нормально, но первый <div> закрывается до запуска фасета. Таким образом, развал не может работать.

Вот код: 

<script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
            $('.facetwp-facet').each(function() {
                var facet_name = $(this).attr('data-name');
                var facet_label = FWP.settings.labels[facet_name];
                if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                    // collapse button before
                    $(this).before('<a class="btn btn-primary" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '">' + facet_label + '</a>');

                    // open collapse element
                    $(this).before('<div class="collapse" id="collapse_facet_' + facet_name + '">');

                    // label
                    $(this).before('<p class="h4 facet-label" data-for="' + facet_name + '">' + facet_label + '</p>');

                    // close collapse element
                    $(this).after('</div>');


                } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                    $('.facet-label[data-for="' + facet_name + '"]').remove();
                }
            });
        });
    })(jQuery);
</script>

Что-то не так? Возможно JS не лучшее решение.

Я также нашел выходной хук для изменения фасета HMTL: https://facetwp.com/documentation/developers/output/facetwp_facet_html/

Но я понятия не имею как его использовать или где мне нужно добавить свой HTML. Или, если это правильный крюк.

1 Ответ

0 голосов
/ 03 марта 2020

Я нашел свою ошибку. Проблема в том, что вы можете вставлять только целые элементы в DOM (спасибо @Rory McCrossan: { ссылка }).

Поэтому мне пришлось изменить свой код следующим образом: 

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var facet_name = $(this).attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];
            if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                // wrapper around the whole facet and button
                $(this).wrap('<div class="facet-wrapper facet-wrapper-' + facet_name + '" data-for="' + facet_name + '></div>');


                // collapse button before
                $(this).before('<a class="facet-collapse-link" data-for="' + facet_name + '" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '"><p class="h5 facet-label" data-for="' + facet_name + '">' + facet_label + '</p></a>');


                // collapse element
                $(this).wrap('<div class="collapse d-lg-block facet-collapse" data-for="' + facet_name + '" id="collapse_facet_' + facet_name + '"></div>');

            } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                $('.facet-label[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-wrapper[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-link[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse[data-for="' + facet_name + '"]').remove();
            }
        });
    });
})(jQuery);

Теперь работает нормально.

...