Cacher is the code snippet organizer for pro developers

//require_once('lib/rest_trainings.php');

<?php


class d_rest_trainings
{
    public function __construct()
    {
        register_rest_route('wp/v2', '/d-trainings', array(
            'methods' => 'GET',
            'callback' => array($this, 'get_all_terms'),
         
        ));
    }

    public function get_all_terms($object)
    {
        $curLang = 'pl';

        $return = array();
        $return['d_params'] = $_GET;

        $posts_per_page = 9;

        // POSTS_START
        $args = array(
            'post_type' => 'szkolenia',
            // 'showposts' => -1,
            'posts_per_page' => -1,
        );
        if($_GET['term_id'] != 0) {
            $args['tax_query'] = array(
                array(
                    'taxonomy' => 'szkolenia_kategorie',
                    'field' => 'term_id', 
                    'terms' => (int)$_GET['term_id'],
                )
            );
        }   
        // if($_GET['type_select'] == 'lvl-sort' && $_GET['sort_type']) {
        if($_GET['sort_type']) {
            $args['orderby'] = 'meta_value_num';
            switch($_GET['sort_type']) {
                case 'sort-price-asc':
                    $args['meta_key'] = 'price';            
                    $args['order'] ='ASC';
                break;
                case 'sort-price-desc':
                    $args['meta_key'] = 'price';            
                    $args['order'] ='DESC';
                break;
                case 'sort-duration-asc':
                    $args['meta_key'] = 'duration';            
                    $args['order'] ='ASC';
                break;
                case 'sort-duration-desc':
                    $args['meta_key'] = 'duration';            
                    $args['order'] ='DESC';
                break;
            }
        }
        
        if($_GET['s'] != 'false') { //search
            $args['s'] = $_GET['s'];
        }
           
        //
        function genPag($total_posts, $current_page, $ppp) {
            $numpages = ceil($total_posts / $ppp); // e.g. ceil(33/10) = ceil(3.3) = 4

            if($numpages == 1) return null;

            //$current_page = '3';
            $loop = '';
            $prev = $current_page != 1 ? '<a class="prev page-numbers" href="#" data-page="'.($current_page - 1).'">«</a>' : null;
            $next = $current_page != $numpages ? '<a class="next page-numbers" href="#" data-page="'.($current_page + 1).'">»</a>' : null;

            for($i=1; $i <= $numpages; $i++) {
                if($i != $current_page) {
                    $loop .= '<a class="page-numbers" href="#" data-page="'.$i.'">'.$i.'</a>';
                }
                else $loop .= '<span aria-current="page" class="page-numbers current">'.$i.'</span>';
            }

            // <div> Total Posts '.$total_posts.'</div>
            // <div> Pages '.$numpages.'</div>

            return '
            <div class="col-md-12">

                <nav class="navigation pagination d_nav" role="navigation">
                <div class="nav-links">
                        '.$prev.'
                        '.$loop.'
                        '.$next.'
                </div>
                </nav>

            </div>
            ';
        }

        $prods = get_posts($args);
            
        if($prods) {
            include (locate_template( 'parts/catalog/card-data-for-item-global.php' )); //before loop    
            $prods_rendered = '';   
  
            $render_pag .= genPag(count($prods), $_GET['page'], $posts_per_page);
            //adding pagination 
            $args['offset'] = ($_GET['page'] - 1) * $posts_per_page;
            $args['posts_per_page'] = $posts_per_page;
            $prods = get_posts($args);

            foreach($prods as $prod) {
                $card_id = $prod->ID;
                $prods_rendered .= '<div class="col-md-4 col-card-prod">';
                    include (locate_template( 'parts/catalog/card-data-for-item.php' )); //in loop       
                    include (locate_template( 'parts/catalog/card-item.php' )); //outputs $render_card_item   
                $prods_rendered .= $render_card_item;
                $prods_rendered .= '</div>';
            }
            // $prods_rendered .= '<div style="width:100%;height:20px;background:red;"></div>'; 
            
            $return['posts'] = $prods;

            $prods_rendered .= $render_pag;
            $return['prods_rendered'] = $prods_rendered;
        } 
        else {
            $return['prods_rendered'] = '<div class="col-md-12 text-center animated fadeInUp"><div class="heading-3 heading-line-span"><span>Brak wyników</span></div></div>';
        }   
        // POSTS_END
      
        // RENDER TERMS START
        if($_GET['type'] === 'd_select' && $_GET['type_select'] != 'lvl-sort') {
            $o = get_terms(array('taxonomy' => 'szkolenia_kategorie', 'hide_empty' => false));
            $return['terms_all'] = $o;

            if($_GET['term_id'] != 0) {
                $parent_id = (int)$_GET['term_id'];
            } else $parent_id = 0;

            $selected_terms = array_filter($o, function ($elem) use ($parent_id){ 
                return $elem->parent === $parent_id;
            });
            $return['terms'] = $selected_terms;
            
            $selected_terms_rendered = '';
            foreach($selected_terms as $term) {
                $data_link = $term->term_id;
                $data_title = $term->name;
                include (locate_template( 'parts/catalog/filter-choose-elem.php' ));
                $selected_terms_rendered .= $loop_choose_elem;
            }
            $return['terms_rendered'] = $selected_terms_rendered;         
        }
        // RENDER TERMS END           

        return new WP_REST_Response($return, 200);
    }
}

add_action('rest_api_init', function () {
    $all_terms = new d_rest_trainings;
});

?>

jQuery(function ($) {
  // $(".d_disabled .mydropdown-header").click(function (e) {
  //   e.stopPropagation();
  //   alert("Najpierw wybierz filtr poprzedni");
  // });

  var d_endpoint = myVariables.my_url_site + "/wp-json/wp/v2/d-trainings/";

  function d_spinner() {
    $("#results_row_catalog").html("<div class='d_loader'>Loading...</div>");
  }
  function d_render_posts(posts) {
    $("#results_row_catalog").html(posts);
  }
  function d_show_results_row_catalog() {
    $("#results_row_catalog").css({ visibility: "visible" });
  }

  function d_enable(d_class) {
    $(".cat-select." + d_class).removeClass("d_disabled");
    d_clear(d_class);
  }
  function d_disable(d_class) {
    $(".cat-select." + d_class).addClass("d_disabled");
    d_clear(d_class);
  }
  function d_clear(d_class) {
    var elem = $(".cat-select." + d_class).find(".mydropdown-header span");
    elem.text(elem.attr("data-initial-badge"));
  }

  function d_load_select(d_class, terms) {
    $(".cat-select." + d_class + " .dropdown-menu").html(terms);
  }
  function d_renameChosenSelect(selectElem, textSelect) {
    selectElem.find(".mydropdown-header span").text(textSelect);
  }

  function d_init(term_id) {
    d_show_results_row_catalog();

    myVariables.szkol_term_id = term_id;
    myVariables.szkol_search = false;
    myVariables.szkol_page = 1;

    var data = {
      type: "d_init",
      term_id: myVariables.szkol_term_id,
      s: myVariables.szkol_search,
      page: myVariables.szkol_page,
    };

    d_spinner();
    jQuery.get(d_endpoint, data, function (response) {
      // console.log(response);
      d_render_posts(response.prods_rendered);
    });
  }

  $(document).on("click", ".cat-select .choose", function () {
    var selectLevel = $(this).parents(".cat-select").attr("data-class"); //lvl-1, lvl-2, lvl-3, lvl-sort

    var selectElem = $(this).parents(".cat-select");
    var textSelect = $(this).find("a").text();

    if (selectLevel !== "lvl-sort") {
      myVariables.szkol_term_id = $(this).attr("data-link");
      myVariables.szkol_search = false;
    }

    myVariables.szkol_page = 1;

    var data = {
      type: "d_select",
      type_select: selectLevel,
      term_id: myVariables.szkol_term_id,
      s: myVariables.szkol_search,
      page: myVariables.szkol_page,
    };

    if (selectLevel == "lvl-sort") {
      myVariables.sort_type = $(this).attr("data-link"); // sort:price-asc sort:price-desc sort:duration-asc sort:duration-desc
      data.sort_type = myVariables.sort_type;
    }

    d_spinner();
    jQuery.get(d_endpoint, data, function (response) {
      switch (selectLevel) {
        case "lvl-1":
          d_enable("lvl-2");
          d_load_select("lvl-2", response.terms_rendered);
          d_disable("lvl-3");
          d_renameChosenSelect(selectElem, textSelect);
          break;
        case "lvl-2":
          d_enable("lvl-3");
          d_load_select("lvl-3", response.terms_rendered);
          d_renameChosenSelect(selectElem, textSelect);
          break;
        case "lvl-3":
          d_renameChosenSelect(selectElem, textSelect);
          break;
        case "lvl-sort":
          // console.log(myVariables.szkol_term_id);
          break;
        default:
      }

      // console.log(response);
      d_render_posts(response.prods_rendered);
    });
  });

  if ($("#results_row_catalog").length) {
    d_init(myVariables.szkol_term_id);
  }

  //

  $('a[href="#collapse_search"]').click(function () {
    setTimeout(function () {
      $("#catalog_search_input").focus();
    }, 0);
  });
  //
  $("#catalog_search_form").submit(function (e) {
    e.preventDefault();

    myVariables.szkol_search = $("#catalog_search_input").val();
    myVariables.szkol_page = 1;

    var data = {
      // type: "d_search",
      term_id: 0,
      s: myVariables.szkol_search,
      page: myVariables.szkol_page,
    };

    d_spinner();
    jQuery.get(d_endpoint, data, function (response) {
      // console.log(response);
      d_render_posts(response.prods_rendered);
    });
  });

  $(document).on("click", ".d_nav.pagination a.page-numbers", function (e) {
    $("html, body").animate(
      { scrollTop: $(".data-cosm-filters-wr").offset().top - 110 },
      1200
    );
    e.preventDefault();

    myVariables.szkol_page = $(this).attr("data-page");
    var data = {
      // type: "d_search",
      term_id: myVariables.szkol_term_id,
      s: myVariables.szkol_search,
      page: myVariables.szkol_page,
      sort_type: myVariables.sort_type,
    };

    d_spinner();
    jQuery.get(d_endpoint, data, function (response) {
      // console.log(response);
      d_render_posts(response.prods_rendered);
    });
  });
});

<?php get_header(); ?>

<div class="container relative">

    <img class="el-moon-common" src="<?php echo $img_folder; ?>/el-moon-blue.svg" alt="">
    <img class="tr-elem-common" src="<?php echo $img_folder; ?>/tr-elem.png" alt="">

    <?php include (locate_template( 'parts/catalog/card-data-for-item-global.php' )); //before loop ?>
    
    <?php include (locate_template( 'parts/catalog/filters.php' )); ?>
    <div class="mb-7"></div>

    <div class="row" id="results_row_catalog">

        <?php if(have_posts()) { ?>
            
                <?php while(have_posts()) { the_post(); ?>
                    <?php $card_id = get_the_ID(); ?>
                    <div class="col-md-4 col-card-prod">                    
                        <?php include (locate_template( 'parts/catalog/card-data-for-item.php' )); //in loop ?>       
                        <?php include (locate_template( 'parts/catalog/card-item.php' )); //outputs $render_card_item ?>   
                        <?php echo $render_card_item; ?>    
                    </div>
                <?php } ?>
            
            <?php // _themename_the_posts_pagination(); ?>
        <?php } else { ?>
            <?php /*
                <div class="col-md-12"><p><?php echo esc_html__('Brak wyników', '_themename'); ?></p></div>
            */ ?>
        <?php } ?>

    </div><?php //row-results ?>
</div>
<?php get_footer(); ?>

.col-card-prod {
  margin-bottom: 30px;
}
.sub-card-prod {
  box-shadow: 0 0 6rem rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 100%
  );
  padding: 3rem 4rem 3rem 4rem;
  height: 100%;
  display: flex;
  flex-direction: column;

  .data-wr {
    border-top: 1px solid #e7e7e7;
    margin-top: 2rem;
    padding-top: 2rem;

    .data-info {
      display: flex;
      padding-bottom: 1rem;
      margin: 0 -15px;
      align-items: center;

      &.dur .label-wr {
        background-image: url(../images/ic-time.svg);
      }
      &.cer .label-wr {
        background-image: url(../images/ic-star.svg);
      }
      &.tim .label-wr {
        background-image: url(../images/ic-cal.svg);
      }
      .label-wr {
        background: no-repeat left center / 2rem;
        padding: 1rem 0 1rem 3rem;
      }

      .cl,
      .cr {
        padding: 0 15px;
      }
      .cl {
        width: 60%;
      }
      .cr {
        width: 40%;
      }

      .cl {
        color: $themecolor;
        font-size: 1.4rem;
      }
      .cr {
        color: $themecolor;
        font-size: 1.8rem;
        font-weight: 700;
      }
    }
  }
}

.data-price-wr {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

//
.sub-cta {
  position: relative;
  border-radius: 0.5rem;
  border: 0.1rem solid $themecolor;
  background-color: #f9fbfe;
  padding: 6rem 5rem 5rem 5rem;

  .ic-wr {
    width: 5rem;
    height: 5rem;
    background-color: $themecolor;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      // border: 1px solid red;
      width: 2rem;
    }
  }
}

.data-cosm-filters-wr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  > .cl {
    width: calc(100% - 10rem);
    padding-right: 2rem;
  }
  > .cr {
    width: 10rem;

    > a {
      color: $themecolor;
      display: inline-block;
      // border: 1px solid;
      background: url(../images/ic-search.svg) no-repeat right center / 2rem;
      padding: 1rem 3rem 1rem 0;
      font-weight: 700;
      font-size: 1.6rem;
      &:hover {
        color: $thirdcolor;
      }
    }
  }
}

#results_row_catalog {
  visibility: hidden;
}

.cat-select {
  &:before {
    content: "";
    width: 1.5rem;
    height: 1rem;
    position: absolute;
    background: url(../images/select.svg) no-repeat center / 100% 100%;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.5s;
  }
  &:after {
    content: "";
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    // background: rgba(red, 0.2);
  }

  border: 0.1rem solid #d9d9e2;
  border-radius: 0.3rem;

  &.show {
    border-color: $secondarycolor;
    &:before {
      transform: translateY(-50%) rotate(180deg);
    }
    .mydropdown-header {
      color: $themecolor;
    }
  }
  &.d_disabled {
    opacity: 0.5;
    .mydropdown-header {
      cursor: no-drop;
    }
    &:after {
      display: block;
    }
  }
  .mydropdown-header {
    cursor: pointer;
    color: #8282a1;
    font-size: 1.6rem;
    padding: 2rem;

    padding-right: 4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    // &:hover {
    //   color: $themecolor;
    // }
    span {
      // padding-bottom: 1rem;
      // border-bottom: 1px solid $themecolor;
    }
  }
  .dropdown-menu {
    max-height: 30rem;
    overflow: auto;

    margin-top: calc(0.5rem);
    border: 0;
    //display: block !important;
    font-size: 1.6rem;
    min-width: 100%;
    width: 100%;
    // min-width: 15rem;
    padding: 0;
    box-shadow: 0 1.4rem 2rem rgba(6, 6, 68, 0.07);
    border-radius: 0.4rem;
    border: 0.1rem solid #6961f9;
    background-color: #060644;

    .choose {
      a {
        //white-space: nowrap;
        display: block;
        transition: none;

        &:hover {
          background-color: rgba(105, 97, 249, 0.17);
        }

        padding: 2rem;

        color: #ffffff;
        font-size: 1.6rem;
        // font-weight: 600;
      }
      &:not(:last-child) {
        a {
          border-bottom: 0.1rem solid $secondarycolor;
        }
      }
    }
  }
}

#catalog_search_form {
  position: relative;
  input[type="image"] {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
  }

  margin-top: 30px;
  #catalog_search_input {
    transition: all 0.3s;
    width: 100%;
    border: 0.1rem solid #d9d9e2;
    border-radius: 0.3rem;
    color: #8282a1;
    font-size: 1.6rem;
    padding: 2rem;
    padding-right: 8rem;
    outline: none;

    &:focus {
      border-color: $secondarycolor;
    }
  }

  ::-webkit-input-placeholder {
    opacity: 1;
    color: #8282a1;
  }
  ::-moz-placeholder {
    opacity: 1;
    color: #8282a1;
  }
  :-ms-input-placeholder {
    opacity: 1;
    color: #8282a1;
  }
  :-moz-placeholder {
    opacity: 1;
    color: #8282a1;
  }
}

<?php global $img_folder; ?>

<div class="data-cosm-filters-wr">
    <div class="cl">
            <div class="row row-filters-cosm">
            <div class="col-6 col-md-3 col-filter-cosm">
                <?php 
                    $parent_terms = get_terms(array('parent' => 0, 'taxonomy' => 'szkolenia_kategorie', 'hide_empty' => false)); 
                    $data_choose = array();

                    if($parent_terms) {
                        for($i = 0;$i < count($parent_terms); $i++) {
                            $data_choose[$i]['data-link'] = $parent_terms[$i]->term_id;
                            $data_choose[$i]['title'] = $parent_terms[$i]->name;
                        }
                    }
                ?>
                <?php 
                    $string_wybierz = 'Wybierz kategorie';
                    echo d_render_dropdown($string_wybierz, $data_choose, 'lvl-1', null);
                ?>
            </div>
            <div class="col-6 col-md-3 col-filter-cosm">
                <?php 
                    $string_wybierz = 'Wybierz podkategorie';
                    $data_choose = array();
                    echo d_render_dropdown($string_wybierz, $data_choose, 'lvl-2', 'd_disabled');
                ?>
            </div>
            <div class="col-6 col-md-3 col-filter-cosm">
                <?php 
                    $string_wybierz = 'Wybierz temat';
                    $data_choose = array();
                    echo d_render_dropdown($string_wybierz, $data_choose, 'lvl-3', 'd_disabled');
                ?>
            </div>
            <div class="col-6 col-md-3 col-filter-cosm">
                <?php 
                    $string_wybierz = 'Sortowanie';
                    $data_choose = array(
                        array('data-link' => 'sort-price-asc', 'title' => 'Cena: od najniższej'),
                        array('data-link' => 'sort-price-desc', 'title' => 'Cena: od najwyższej'),
                        array('data-link' => 'sort-duration-asc', 'title' => 'Czas trwania: najkrótszy'),
                        array('data-link' => 'sort-duration-desc', 'title' => 'Czas trwania: najdłuższy'),
                    );
                    echo d_render_dropdown($string_wybierz, $data_choose, 'lvl-sort', '');
                ?>
            </div> 
        </div>
    </div>
    <div class="cr text-right">
        <a data-toggle="collapse" href="#collapse_search">Szukaj</a>
    </div>
</div>
        
<div id="collapse_search" class="collapse">
    <form id="catalog_search_form" action="">
        <input id="catalog_search_input" type="text" value="" placeholder="Wyszukaj szkolenie i naciśnij Enter">
        <input type="image" src="<?php echo $img_folder; ?>/ic-search-gray.svg" alt=""> 
    </form>
</div>
            

<?php $loop_choose_elem = '<div class="choose" data-link='.$data_link.'><a href="#/">'.$data_title.'</a></div>'; ?>