Files
Gainsight/Custom_Templates/customer_templates/Walmart Spark Sandbox/search.html.liquid

56 lines
1.8 KiB
Plaintext

{% assign enrolled_courses = courses.enrolled %}
{% include "mobile_header", title: "Search", back_icon: "fa-arrow-left", back_link: "javascript: goBack()" %}
{% include "sub_navigation" %}
<main class="np-main np-search np-subpage-container np-max-width">
<div class="np-header-search np-catalog-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="Search courses"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="Search"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-search-header">
<div class="np-resource-subtitle">
<span class="np-resource-subtitle-number">{{ results.count }}</span>
{% t .results_for %}
<span class="results-term">"{{ results.term }}"</span>
</div>
</div>
{% if results.items.any? %}
<div class="search-results-list">
{% render "search_result" for results.items as result %}
</div>
{% else %}
<div class="np-card np-search-zero-state">
<div class="np-card-container">
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
<div class="search-zero-state-img"></div>
<div class="np-zero-state-text">
<div class="zero-state-header">No results found</div>
<div>Please try another search item.</div>
</div>
</div>
</div>
</div>
{% endif %}
</main>
<script>
$(document).ready(function() {
const term = '{{ results.term }}'
sortSearchResultsByTerm(term)
const resultsCount = document.querySelector(".np-resource-subtitle-number")
const allResults = document.querySelectorAll(".np-search-result")
resultsCount.innerHTML = allResults.length
})
</script>