SPS' V3 templates. Updated Harri's templates too to update the workato endpoints.

2025-05-13 16:55:51 -04:00
parent 89c35d0506
commit 72715d9d49
322 changed files with 8995 additions and 3731 deletions
--- a/Custom_Templates/customer_templates/SPS_Commerce/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/SPS_Commerce/homepage.html.liquid
@ -1,3 +1,136 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+{% include "sub_navigation" %}
+<main class="np-main np-dashboard np-subpage-container np-max-width">
+  <div class="row np-flex-center">
+    <div class="dashboard-content-container">
+      <div class="homepage-content-wrapper">
+        <div class="cards-section-container">
+          {% include 'lp_homepage' %}
+        </div>
+        <div class="events-homepage-container">
+          <div class="section-text-container">
+            <div class="dashboard-resources-title">
+              My Webinars
+            </div>
+          </div>
+              {% include "training_events_dashboard" %}
+        </div>
+      </div>
+      {% include 'courses_homepage' %}
+    </div>
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  .homepage-content-wrapper {
+  display: flex;
+  gap: 30px;
+}
+.events-homepage-container {
+  width: 25%;
+}
+.cards-section-container {
+  width: 75%;
+}
+.filter-container {
+  width: 25%;
+  background: #fff;
+  padding: 20px;
+  box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
+  border-radius: 8px;
+}
+.content-container {
+  display: flex;
+  margin-bottom: 30px;
+  gap: 30px;
+}
+.cards-wrapper {
+  width: 75%;
+}
+.filter-options-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.filter-option-container {
+  border-bottom: 1px solid #0000002e;
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.filter-title {
+  padding-bottom: 20px;
+  font-size: 20px;
+  font-weight: 700;
+}
+.input-checkbox {
+  width: 20px;
+  height: 20px;
+}
+.dashboard-content-container {
+  width: 100%;
+}
+.dashboard-resources-title {
+  font-size: 20px;
+  font-weight: 500;
+}
+.dashboard-resources-subtitle {
+  font-weight: 400;
+}
+.section-text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin: 30px 0;
+}
+.input-label {
+  width: 100%;
+}
+</style>
+
 <script>
-  window.location.replace("/app/dashboard")
+  document.addEventListener("DOMContentLoaded", function () {
+    function setupFilters(filterClass, cardClass) {
+        const filters = document.querySelectorAll(`.${filterClass} .input-checkbox`);
+        const allFilter = document.querySelector(`.${filterClass} .input-checkbox[name="all"]`);
+        const cards = document.querySelectorAll(`.${cardClass}`);
+
+        function filterCards() {
+            let selectedFilters = Array.from(filters)
+                .filter(f => f.checked && f.name !== "all")
+                .map(f => f.name.toLowerCase());
+
+            if (selectedFilters.length === 0) {
+                cards.forEach(card => card.style.display = "block");
+                return;
+            }
+
+            cards.forEach(card => {
+                let cardCategories = card.getAttribute("categories").toLowerCase().split(",");
+                let match = selectedFilters.some(filter => cardCategories.includes(filter));
+                card.style.display = match ? "block" : "none";
+            });
+        }
+
+        filters.forEach(filter => {
+            filter.addEventListener("change", function () {
+                if (this.name === "all") {
+                    filters.forEach(f => { if (f !== allFilter) f.checked = false; });
+                } else {
+                    allFilter.checked = false; 
+                }
+                filterCards();
+            });
+        });
+
+        filterCards();
+    }
+
+
+    setupFilters("lp-filter", "lp-card");
+    setupFilters("course-filter", "course-card");
+});
 </script>