Zenjob Notes, and new Templates

2022-11-11 21:54:43 -05:00
parent 22704920d8
commit c599b8b792
1222 changed files with 2246 additions and 43 deletions
--- a/Custom_Templates/customer_templates/Walmart/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Walmart/homepage.html.liquid
@ -0,0 +1,138 @@
+{% include "header" %}
+
+<main class="np-main np-homepage">
+  <div class="np-homepage-hero">
+    <img class="np-homepage-hero-image"
+      src="{{ homepage.artwork_url }}"
+      alt="{{ homepage.headline }}"
+    />
+    
+    <div class="np-homepage-hero-content">
+      <div class="np-homepage-headline np-header-font-color" style="color:#fff">
+        {{ homepage.headline }}
+      </div>
+      <div class="np-homepage-subheadline np-header-font-color" style="color:#fff">
+        {{ homepage.subheadline }}
+      </div>
+      {% comment %} <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
+        Explore Courses
+      </a> {% endcomment %}
+    </div>
+  </div>
+  {% comment %} {% include "sub_navigation" %} {% endcomment %}
+  <div class="np-course-library np-max-width">
+  {% comment %} <h2 class="library-title">Course Library</h2> {% endcomment %}
+    {% if current_school.filterable_categories.any? %}
+      {% assign categories_by_name = current_school.filterable_categories %}
+      {% assign carousel_count = 1 %}
+      {% for category in categories_by_name %}
+        {% assign carousel_count = carousel_count | plus: 1 %}
+        {% assign courses_per_carousel = 0 %}
+
+        {% assign category_name_split = category.name | split: " " %}
+        {% assign category_name_joined = category_name_split | join: "-" | downcase %}
+
+        <div class="category-section" data-carousel="{{carousel_count}}" style="display:none;" id="{{ category_name_joined }}">
+          <div class="carousel-header-wrapper">
+            <h3 class="carousel-header">{{category.name}}</h3>
+            <a href="#" class="show-more" data-toggle-carousel="{{carousel_count}}" data-carousel-state="initialized">Show More</a>
+          </div>
+
+          {% assign catalog_courses = courses.in_catalog %}
+          {% if catalog_courses.any? %}
+              {% for course in catalog_courses %}           
+                {% for course_category in course.categories %}
+                    {% if category.name != "Videos" %}
+                      {% if category.name == course_category.name %}
+                        {% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
+                      {% endif %}
+                    {% endif %}
+                {% endfor %}
+              {% endfor %}
+          {% endif %}
+          
+          {% include "courses_carousel", category: category.name, num_of_slides: courses_per_carousel %}
+        </div>
+      {% endfor %}
+    {% endif %}
+  </div>
+     {% include "faq" %}
+</main>
+{% include "footer" %}
+
+<script>
+  $(document).ready(function() {
+    $(".category-section").each(function() {
+      let carousel = $(this).find(".category-carousel")
+      let carouselSize = $(carousel).attr("data-slider-size")
+
+      carousel.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
+        if(!slick.$dots){ return; }
+
+        (slick.$dots[0].children.length > 1) ? null : hideDotsAndShowMore()
+
+        function hideDotsAndShowMore() {
+          slick.$dots[0].classList.add("np-hidden")
+          carousel.closest(".category-section").find(".show-more").addClass("np-hidden")
+        }
+      });
+
+      if (carouselSize > 0) {
+        initSlickCarousel(carousel)
+        $(this).css("display", "block")
+        setTimeout(() => { $(this).css("opacity", "1") }, 300)
+      }
+
+    })
+  })
+
+  function initSlickCarousel(carousel) {
+    $(carousel).slick({
+      slidesToShow: 3,
+      slidesToScroll: 3,
+      cssEase: 'linear',
+      prevArrow: '<i class="fal fa-chevron-left"></i>',
+      nextArrow: '<i class="fal fa-chevron-right"></i>',
+      infinite: false,
+      dots: true,
+      arrows: true,
+      responsive: [
+        {
+          breakpoint: 1170,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 2,
+            arrows: true,
+            dots: true,
+          }
+        },
+        {
+          breakpoint: 768,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            dots: true,
+            arrows: false,
+          }
+        }
+      ]
+    });  
+  }
+
+$('.show-more').click(function(e) {
+   e.preventDefault();
+
+   let currentCarousel = $(this).closest(".category-section").find(".category-carousel");
+
+   if ($(this).attr("data-carousel-state") == "initialized") {
+     $(this).text("Show Less")
+     currentCarousel.slick('unslick');
+     $(this).attr("data-carousel-state", "destroyed")
+   } else if ($(this).attr("data-carousel-state") == "destroyed" ) {
+     $(this).text("Show More")
+     initSlickCarousel(currentCarousel);
+     $(this).attr("data-carousel-state", "initialized")
+   }
+});
+
+</script>