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

<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>