FacetWP Sort to Bootstrap 5 dropdown

facetwp.php

<?php
namespace App;

add_filter('facetwp_facets', function ($facets) {
   // Register Sort Facet
    $facets[] = array(
      "name" => "sort",
      "label" => "Sort",
      "type" => "sort",
      "default_label" => "Sort by",
      "sort_options" => array(
        array(
          "label" => "Latest",
          "name" => "latest",
          "orderby" => array(
            array(
              "key" => "date",
              "order" => "DESC",
              "type" => "CHAR"
            )
          )
        ),
        array(
          "label" => "Popularity",
          "name" => "popularity",
          "orderby" => array(
            array(
              "key" => "cf/total_sales",
              "order" => "DESC",
              "type" => "NUMERIC"
            )
          )
        ),
        array(
          "label" => "Rating",
          "name" => "rating",
          "orderby" => array(
            array(
              "key" => "cf/_wc_average_rating",
              "order" => "DESC",
              "type" => "NUMERIC"
            )
          )
        ),
        array(
          "label" => "Price Low To High",
          "name" => "price_low_to_high",
          "orderby" => array(
            array(
              "key" => "cf/_price",
              "order" => "ASC",
              "type" => "NUMERIC"
            )
          )
        ),
        array(
          "label" => "Price High To Low",
          "name" => "price_high_to_low",
          "orderby" => array(
            array(
              "key" => "cf/_price",
              "order" => "DESC",
              "type" => "NUMERIC"
            )
          )
        )
      )
    );
    return $facets;
});

add_filter('facetwp_facet_html', function ($output, $params) {
    // Adjust FacetWP "Sort" HTML output to be friendlier with our theme
    if ('sort' == $params['facet']['type']) {
        print_r($params['facet']);
        $output = '';
        $output .= '<div class="facet-sort dropdown">';
        $output .= '<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">';
        $output .= '</button>';
        $output .= '<div class="dropdown-menu w-100">';
        foreach ($params['facet']['sort_options'] as $key => $atts) {
            $output .= '<button class="dropdown-item facetwp-radio" data-value="' . $atts['name'] . '"> ' . $atts['label'] . '</button>' ;
        }
        $output .= '</div>';
        $output .= '</div>';
        return $output;
    }
    return $output;
}, 10, 2) ;

add_action('wp_footer', function () {
    ?>
    <script>
      (function($) {

        const sortfacet = 'sort';

        $(document).on('click', '.facet-sort .dropdown-item', function() {
          const text = $(this).text();
          $('.facet-sort .dropdown-toggle').html(text);
          const val = $(this).attr('data-value');
          FWP.facets[sortfacet] = [val];
          FWP.toggleOverlay('on'); 
          FWP.fetchData();
          FWP.setHash();
        });

        $(document).on('facetwp-loaded', function() {
          console.log('facets', FWP.facets)
          if ('undefined' !== typeof FWP.facets[sortfacet]) {
            if(!FWP.facets[sortfacet].length){
            $('.facet-sort .dropdown-toggle').html('Sort Products');
            } else {
              const value = $(`.facet-sort [data-value=${FWP.facets[sortfacet]}]`).text();
              console.log("value",value)
              $('.facet-sort .dropdown-toggle').html(value);
            }
            $('.facet-sort .dropdown-item').filter('[data-value="' + FWP.facets[sortfacet] + '"]').addClass("checked");
          }
        });

      })(jQuery);
    </script>
  <?php
}, 100);