Templates for DataSnipper and Williams-Sonoma

Custom_Templates/customer_templates/DataSnipper/_cards_course.html.liquid

@@ -1,7 +1,7 @@
 {% capture course_path %}
   {% route course, id: course.id %}
 {% endcapture %}
-<div class="np-card course-card">
+<div class="np-card course-card" categories="{%for category in course.categories%}{{category.name}}[$]{%endfor%}">
   <div class="np-card-container">
     <div class="np-progress-bar-container">
       <div style="width: {{ course.progress }}%" class="np-card-progress-bar"></div>

Custom_Templates/customer_templates/DataSnipper/_filter_sidebar_courses.html.liquid

@@ -9,10 +9,12 @@
           <label class="filter">
             {{ category.name }}
             <input
-              type="checkbox"
-              name="{{category.name}}"
+              class="filter-checkbox"
+							type="checkbox"
+							id="{{category.name}}"
+							name="{{category.name}}"
               value="{{category.name}}" />
-            <span class="checkmark"></span>
+            <span class="filter-checkmark"></span>
           </label>
         </div>
       {% endfor %}
@@ -21,7 +23,7 @@
   <div class="filter-group">
     <div class="filter-group-heading">What is your learning style?</div>
     <div class="filters"></div>
-  </div>
+	</div>
   <div class="filters-reset np-button" onClick="resetFilters()">Reset all Filters</div>
 </div>
 
@@ -66,7 +68,7 @@
     width: 0;
   }
 
-  .filter-item .checkmark {
+  .filter-item .filter-checkmark {
     position: absolute;
     top: 3px;
     left: 0;
@@ -77,17 +79,17 @@
     border-radius: 4px;
   }
 
-  .filter-item .checkmark:after {
+  .filter-item .filter-checkmark:after {
     content: "";
     position: absolute;
     display: none;
   }
 
-  input:checked ~ .checkmark:after {
+  input:checked ~ .filter-checkmark:after {
     display: block;
   }
 
-  .filter-item .checkmark:after {
+  .filter-item .filter-checkmark:after {
     left: 8px;
     top: 3px;
     width: 5px;
@@ -116,18 +118,64 @@
 </style>
 
 <script>
-  window.addEventListener("DOMContentLoaded", function() {})
+  window.addEventListener("DOMContentLoaded", function() {
+    var categoryCheckboxes = document.querySelectorAll('.filter-checkbox');
+		categoryCheckboxes.forEach(function (checkbox) {
+        checkbox.addEventListener('change', function () {
+            filterCourses();
+        });
+			filterCourses();
+		});
+	})
 
   function resetFilters() {
-    console.log("resettting filtes")
+    console.log("resetting filtes")
     const allFilters = document.querySelectorAll("input[type='checkbox']")
     allFilters.forEach(element => {
       element.checked = false;
     });
 
     const allCourses = document.querySelectorAll('.course-columns');
+		console.log(allCourses)
     allCourses.forEach(element => {
       element.style.display = 'flex';
     });
-  }
+	}
+
+function filterCourses() {
+    var selectedCategories = getSelectedCategories();
+		console.log(selectedCategories)
+    var cards = document.querySelectorAll('.np-card');
+
+    cards.forEach(function (card) {
+        var categories = card.getAttribute('categories');
+        var categoryMatch = selectedCategories.length === 0 || matchesCategories(categories, selectedCategories);
+
+        if (categoryMatch) {
+            card.parentElement.style.display = 'flex';
+        } else {
+            card.parentElement.style.display = 'none';
+        }
+    });
+}
+
+	function getSelectedCategories() {
+    var selectedCategories = [];
+    var checkboxes = document.querySelectorAll('.filter-checkbox:checked');
+    checkboxes.forEach(function (checkbox) {
+        selectedCategories.push(checkbox.id);
+    });
+    return selectedCategories;
+}
+
+function matchesCategories(courseCategories, selectedCategories) {
+    var courseCategoriesArray = courseCategories.split('[$]').map(function (category) {
+        return category.trim();
+    });
+
+    return selectedCategories.some(function (selectedCategory) {
+        return courseCategoriesArray.includes(selectedCategory);
+    });
+}
+
 </script>

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

@@ -1,4 +1,5 @@
 {% for course in courses.in_catalog %}
+	{% comment %} Change to courses.enrolled {%endcomment%}
 	{% for category in course.categories %}
 		{% if category.name contains "Featured Courses" %}
 			<div class="np-card" style="width:100%">

Todos.md

@@ -426,3 +426,11 @@ message](https://northpasshq.slack.com/archives/C04RER4PH09/p1709147957374999?th
 Nextweek deadline
 
 Run lighthouse on anthology templates and find list of things that need to be improved
+
+## 10-08-2024
+- [ ] WSGC - Add logic for [IC] in group name
+- [ ] WSGC - Change holiday course from catalog to enrolled
+- [ ] WSGC - Test iFrame (check Gong recordings)
+- [ ] Luminate - Search results in Canada not working
+- [ ] Spark - Enable search functionality
+- [X] DataSnipper - Figure out logic for filters function