Updated some Williams-Sonoma templates.

Custom_Templates/customer_templates/WSGC - Post-New Hire/catalog.html.liquid

@@ -0,0 +1,102 @@
+{% include "header" %}
+{% include "catalog_popup_message" %}
+
+{% 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="row">
+    <div class="col-xs-12 col-sm-6 col-md-3">
+      {% include "catalog_filter_sidebar" %}
+    </div>
+    <div class="col-xs-12 col-sm-6 col-md-9">
+      {% include "courses_catalog" %}
+    </div>
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  @media (min-width: 768px) {
+    .np-catalog-courses {
+      margin-top: 0;
+    }
+
+    .catalog-course .np-card {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+</style>
+
+<script>
+  window.addEventListener("DOMContentLoaded", function() {
+    const categoryFilters = document.querySelectorAll(".filter-link")
+    const courses = document.querySelectorAll(".catalog-course")
+
+    document.querySelectorAll(".filter-link").forEach((filter) => {
+      filter.addEventListener("click", (e) => {
+        updateActiveCategory(e.target, categoryFilters)
+        filterCourses()
+      })
+    })
+
+    document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
+      checkbox.addEventListener("change", () => {filterCourses()})
+    })
+
+    let params = new URLSearchParams(document.location.search);
+    let categoryParam = params.get("category");
+
+    if (categoryParam) {
+      document.querySelector(`.filter-link[data-filter-name="${categoryParam}"]`).click()
+    }
+  })
+
+  function updateActiveCategory(selectedFilter, categoryFilters) {
+    categoryFilters.forEach((filter) => {filter.classList.remove("active")})
+    selectedFilter.classList.add("active")
+  }
+
+  function filterCourses() {
+    const selectedCategoryFilterID = document.querySelector(".filter-link.active").getAttribute("data-filter-id")
+
+    let selectedDurationFilters = []
+    let selectedDifficultyFilters = []
+    const checkboxFilters = document.querySelectorAll(".filter-checkbox")
+
+    checkboxFilters.forEach((checkbox) => {
+      if (checkbox.checked) {
+        if (checkbox.classList.contains("duration-filter")) {
+          selectedDurationFilters.push(checkbox.getAttribute("data-filter-id-min"))
+          selectedDurationFilters.push(checkbox.getAttribute("data-filter-id-max"))
+        }
+      }
+    })
+
+    // console.log(selectedCategoryFilterID)
+    // console.log(selectedDurationFilters)
+
+    const minDuration = Math.min( ...selectedDurationFilters )
+    const maxDuration = Math.max( ...selectedDurationFilters )
+
+    const courses = document.querySelectorAll(".catalog-course")
+
+    courses.forEach((course) => {
+      const courseCategories = course.getAttribute("data-categories")
+      const courseDuration = course.getAttribute("data-duration")
+
+      if 
+        ((courseCategories.includes(selectedCategoryFilterID) || selectedCategoryFilterID == "all" ) && (!selectedDurationFilters.length || (courseDuration <= maxDuration && courseDuration >= minDuration))) {
+        course.style.display = "flex"
+      } else {
+        course.style.display = "none"
+      }     
+    })
+
+  }
+</script>