norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed Luminates name to Scintilla (changing on 5th Feb). Downloaded the sandbox with all of Raj's changes.

Browse Source
This commit is contained in:
Norm Rasmussen
2025-01-27 14:40:21 -05:00
parent 719792893f
commit 224627888a
461 changed files with 1658 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
Custom_Templates/customer_templates/Walmart Scintilla Sandbox/catalog.html.liquid Normal file
View File

@ -0,0 +1,193 @@
{% 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;
}
.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>