Downloaded Instacart's templates and deleted folders from churned customers.

Custom_Templates/customer_templates/Instacart - Carrot/_courses_carousel.html.liquid

@@ -0,0 +1,182 @@
+<style>
+  .course-carousel-container .catalog-card:not(:first-child) {
+    display: none;
+  }
+  .course-carousel-container .catalog-card {
+    visibility: hidden;
+  }
+</style>
+
+
+{% assign showOnlyInProgress = showOnlyInProgress | default: false %}
+{% assign hideOnlyCompleted = hideOnlyCompleted | default: false %}
+{% assign sortByPriority = sortByPriority | default: false %}
+{% assign showAllOnNoResults = showAllOnNoResults | default: false %}
+{% assign minified = minified | default: false %}
+{% assign displayedCount = 0 %}
+
+<div class="course-carousel-container">
+  {% if courses.enrolled.any? %}
+    {% for course in courses.enrolled %}
+      {% if showOnlyInProgress %}
+        {% if course.progress > 0 and course.progress < 100 %}
+          {% if minified %}
+            {% include "cards_course_minified" with course %}
+          {% else %}
+            {% include "cards_course" with course %}
+          {% endif %}
+          {% assign displayedCount = displayedCount | plus: 1 %}
+        {% endif %}
+      {% elsif hideOnlyCompleted %}
+        {% if course.progress < 100 %}
+          {% if minified %}
+            {% include "cards_course_minified" with course %}
+          {% else %}
+            {% include "cards_course" with course %}
+          {% endif %}
+          {% assign displayedCount = displayedCount | plus: 1 %}
+        {% endif %}
+      {% else %}
+        {% if minified %}
+          {% include "cards_course_minified" with course %}
+        {% else %}
+          {% include "cards_course" with course %}
+        {% endif %}
+        {% assign displayedCount = displayedCount | plus: 1 %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+  {% if showAllOnNoResults and displayedCount == 0 and courses.in_catalog.any? %}
+    {% for course in courses.in_catalog %}
+      {% if course.progress < 100 %}
+        {% include "cards_course" with course %}
+        {% assign displayedCount = displayedCount | plus: 1 %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+</div>
+
+<script>
+  const coursesCarousel = $('.course-carousel-container');
+
+   {% if displayedCount > 0 %}
+  $(document).ready(function(){
+  const windowWidth = $(window).width();
+  const maxItems = 5;
+  const cards = coursesCarousel.find('.catalog-card').get();
+
+  {% if sortByPriority %}      
+
+  cards.sort(function(a, b) {
+  const aPriority = extractPriority(a);
+  const bPriority = extractPriority(b);
+  if(aPriority === bPriority) {
+    // Sort alphabetically by title when priorities match
+    const aTitle = extractTitle(a);
+    const bTitle = extractTitle(b);
+    return aTitle.localeCompare(bTitle);
+  }else{
+    return bPriority - aPriority;
+  }
+  });
+
+  // Re-append sorted cards to container
+  $.each(cards, function(index, card) {
+  coursesCarousel.append(card);
+  });
+
+  {% endif %}
+
+  for(let i = 5; i < cards.length; i++) {
+  cards[i].remove();
+  }
+
+  let initialSlide = 0;
+
+  // Go to 2nd slide if width is higher than breakpoint
+  {% if displayedCount > 2 %}
+  if ($(window).width() > {{breakpoint}}) {
+    initialSlide = 1;
+  }
+  {% endif %}
+  {% if displayedCount > 1 %}
+    if(windowWidth > 768){
+    coursesCarousel.slick({
+  centerMode: true,
+  dots: false,
+  infinite: false,
+  speed: 300,
+  slidesToShow: 2,
+  slidesToScroll: 1,
+  initialSlide: initialSlide,
+  responsive: [
+  {
+    breakpoint: {{breakpoint}},
+    settings: {
+      slidesToShow: 1,
+      slidesToScroll: 1
+    }
+  }
+  ]
+  });
+  }else{
+    coursesCarousel.slick({
+  centerMode: true,
+  dots: false,
+  infinite: false,
+  speed: 300,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  initialSlide: 0
+  });
+  }
+  {% else %}
+  coursesCarousel.slick({
+  centerMode: true,
+  dots: false,
+  infinite: false,
+  speed: 300,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  initialSlide: 0
+  });
+  {% endif %}
+
+  
+
+  for (let i = 0; i < cards.length; i++) {
+      cards[i].classList.add('card-visible');
+  }
+
+  {% if displayedCount > 2 %}
+   // Redirect to slide 1 if user slides to slide 0 above breakpoint
+  setInterval(function() {
+    if ($(window).width() > {{breakpoint}}) {
+      const currentSlide = coursesCarousel.slick('slickCurrentSlide');
+      if (currentSlide === 0) {
+        coursesCarousel.slick('slickGoTo', 1);
+      }
+    }
+  }, 100); 
+  {% endif %}
+  });
+  {% endif %}
+
+  function extractPriority(element){
+    const priority = $(element).attr('priority');
+    return priority ? Number(priority) : 0;
+  }
+
+  function extractTitle(element){
+    const titleElement = $(element).find('.np-card-content-title');
+    return titleElement.length ? titleElement.text().trim() : '';
+  }
+</script>
+
+<style>
+  @media (max-width: {{breakpoint}}px) {
+    .course-carousel-container .catalog-card {
+      margin: 0 10px 32px;
+    }
+  }
+</style>