Gainsight/Custom_Templates/customer_templates/Walmart Scintilla Sandbox/catalog.html.liquid

{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <div class="np-resource-title">{{ catalog.headline }}</div>
      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
    </div>    
  </div>
  <div class="filter-wrapper">
    <div class="searchtext">
      <input id="searchboxInput" placeholder="Search:" class="searchbox np-input" type="text">
    </div>
    <div class="dropdown">
      <select
        class="category-filter-dropdown np-input"
        type="text"
        
        name="category-filter-dropdown"
        id="category-filter-dropdown"
        onchange="filterByCategory()">
   
        {% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
        <option class="category-filter-entry" value="All" selected>All Categories</option>
         {% comment %} Need to iterate over all filterable categories, target all searched cards, check if cat exists, render if found  {% endcomment %}

          {% comment %} Need to generate category entires dynamically? Might not be possible because liquid is server side. Would need to pull all cats before load but all Searched Results after render {% endcomment %}

          {% assign categoryname = "" %} 
          {% for category in sorted_categories  %}
            {% assign categoryfullname = category.name %} 
            {% assign nameArr = categoryfullname | remove: '['  | split: "]" %}
            {% assign categoryname = categoryname | append: nameArr[0] | append: ',' %} 
          {% endfor %}  
          <script>
            console.log("{{categoryname}}")
          </script>
          {% assign tempArr = categoryname  | split: "," %}
          {% assign catArr = tempArr  | uniq %}
          {% for catname in catArr %}
            <option class="category-filter-entry" value="{{  catname | remove: ' ' }}">{{ catname }}</option>         
          {% endfor %}
      </select>
    </div>
  </div> 

  {% for catname in catArr %}
    {% include "categorie_courses" categorie_name: catname  %} 
  {% endfor %}
 
  
  
  
</main>
{% include "footer" %}

<style>
  .category-filter-dropdown {
    background-color: #fefefe;
    border-radius: 4px;
    color: #363636;
    font-size: 1em;
    font-weight: 700;
    height: 60px;
    line-height: 1;
    padding: 5px 12px;
    text-decoration: none;
    width: auto;
  }
  .searchtext {
    width: 100%
  }
  .filter-wrapper {
    display: flex;
    gap: 4px;
    justify-content: space-between;
    padding: 20px 20px 20px 0px;
}
.searchbox {
  height: 60px;
  background: #fff
}

.showCourse {
  display: block !important;
}

.hideCourse {
  display: none !important;
}

.filtered{
    display: none !important;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  

function filterByCategory()
{
  
  let allCatSections = document.querySelectorAll('.categorie_section');

  for(let i = 0; i < allCatSections.length; i++){
    if(event.target.value == 'All'){
      allCatSections[i].classList.remove('hidden-by-product');
      if(!allCatSections[i].classList.contains('filtered')){
        allCatSections[i].style.display = 'block';
      }
    } else {
     
      if(allCatSections[i].dataset.categories != event.target.value){
        allCatSections[i].style.display = 'none';
        allCatSections[i].classList.add('hidden-by-product');
      } else {
        allCatSections[i].classList.remove('hidden-by-product');
        if(!allCatSections[i].classList.contains('filtered')){
          allCatSections[i].style.display = 'block';
        }
      };
    }
  }
}

function performSearch(searchTerm) {
   // var searchTerm = $('#searchboxInput').val().trim().toLowerCase();
    let allCourses = document.querySelectorAll('.np-card-content-title')
   console.log("searchTerm " + searchTerm)
   for(let i = 0; i < allCourses.length; i++)
   {
      if ( allCourses[i].textContent.trim().toLowerCase().includes(searchTerm.toLowerCase())) 
      {
       // console.log("found")
       // console.log(allCourses[i].className)
        let parent = allCourses[i].parentElement;

        while (!parent.classList.contains('feature-course-slide'))
            parent = parent.parentElement;

        
            parent.classList.add("showCourse")
            parent.classList.remove("hideCourse")
            //parent.style.display="block"
       // allCourses[i].parents(".feature-course-slide").style.display="block"
      }
      else
      {
        let parent = allCourses[i].parentElement;

        while (!parent.classList.contains('feature-course-slide'))
            parent = parent.parentElement;
            
            parent.classList.add("hideCourse")
            parent.classList.remove("showCourse")
            //parent.style.display="none"
      }
    }

    // Hide header if no courses are foud by search and only when All is selected as option
    if ($("#category-filter-dropdown").find(":selected").val() == "All")
      hideHeader();

}

function hideHeader() {

let allCatSections = document.querySelectorAll('.categorie_section');

  for(let i = 0; i < allCatSections.length; i++){ 
   
   let visiblelCoursesList = allCatSections[i].querySelectorAll(".showCourse")
  // console.log("visiblelCoursesList " + visiblelCoursesList.length)
  
    if (visiblelCoursesList.length == 0 )
      allCatSections[i].style.display = 'none';
    else
      allCatSections[i].style.display = 'block';


  }

}

  $('#searchboxInput').keyup(function(event) {
  //console.log("pressed backspace")
    const key = event.key;
    var searchTerm = $('#searchboxInput').val().trim().toLowerCase();
    performSearch(searchTerm);
 
  });

</script>