Walmart Supplier Sandbox templates. Updated prod templates too.

2025-04-21 17:17:41 -04:00
parent 26fd2a9615
commit 17f7d10b04
185 changed files with 7784 additions and 85 deletions
--- a/Sandbox/_getting-started-carousel.html.liquid
+++ b/Sandbox/_getting-started-carousel.html.liquid
@ -0,0 +1,100 @@
+<div class="carousel-wrapper">
+    <div class="carousel-heading">Getting Started</div>
+    <div class="carousel-filter-wrapper" id="carousel-filter-wrapper-started">
+        <div class="filter-container">
+            <div class="filter" id="filterToggle">Filter</div>
+        </div>
+        <div class="filter-content" id="filterContent">
+            <div class="filter-option">
+                <input class="filter-checkbox" type="checkbox" id="gs-not-started">
+                <label class="filter-name">Not Started</label>
+            </div>
+            <div class="filter-option">
+                <input class="filter-checkbox" type="checkbox" id="gs-in-progress">
+                <label class="filter-name">In Progress</label>
+            </div>
+            <div class="filter-option">
+                <input class="filter-checkbox" type="checkbox" id="gs-completed">
+                <label class="filter-name">Completed</label>
+            </div>
+        </div>
+    </div>
+    <div class="getting-started-carousel">
+        {% for course in courses.in_catalog %}
+            {% for category in course.categories %}
+                {% if category.name == 'Getting Started' %}
+                    <div class="carousel-cards-container gettin-started-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
+                        {% include 'cards_course' %}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.getting-started-carousel {
+  margin-top: 25px;
+}
+</style>
+
+<script>
+$(document).ready(function() {
+    $(".getting-started-carousel").slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });
+
+    document.getElementById("filterToggle").addEventListener("click", function() {
+        const filterWrapper = document.querySelector('.carousel-filter-wrapper');
+        filterWrapper.classList.toggle("filter-active");
+    });
+    document.addEventListener("click", function(event) {
+        const filterWrapper = document.querySelector('#carousel-filter-wrapper-started');
+        const isClickInside = filterWrapper.contains(event.target) || event.target.id === "filterToggle";
+
+        if (!isClickInside) {
+            filterWrapper.classList.remove("filter-active");
+        }
+    });
+    function filterCards() {
+        const selectedFilters = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id.replace('gs-', ''));
+        const cards = document.querySelectorAll('.gettin-started-courses');
+
+        $(".getting-started-carousel").slick('slickUnfilter');
+
+        if (selectedFilters.length === 0) {
+            $(".getting-started-carousel").slick('slickUnfilter');
+        } else {
+            $(".getting-started-carousel").slick('slickFilter', function(index, element) {
+                const cardProgress = element.getAttribute('progress'); 
+                return selectedFilters.includes(cardProgress); 
+            });
+        }
+    }
+
+    document.querySelectorAll('#filterContent .filter-checkbox').forEach(checkbox => {
+        checkbox.addEventListener('change', filterCards);
+    });
+});
+</script>