harpiya_frontend 4.3.0.alpha

data/app/assets/javascripts/harpiya/frontend/views/harpiya/products/description.js

@@ -0,0 +1,8 @@
+document.addEventListener('turbolinks:load', function () {
+  $('#product-description-arrow').click(function () {
+    document.getElementById('product-description-long').classList.remove('d-none')
+    document.getElementById('product-description-short').classList.add('d-none')
+    document.getElementById('product-description-arrow').classList.remove('d-flex')
+    document.getElementById('product-description-arrow').classList.add('d-none')
+  })
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/products/index.js

@@ -0,0 +1,102 @@
+Harpiya.ready(function ($) {
+  $('#sort-by-overlay-show-button').click(function () {
+    $('#sort-by-overlay').show();
+  });
+  $('#sort-by-overlay-hide-button').click(function () {
+    $('#sort-by-overlay').hide();
+  });
+
+  $('#filter-by-overlay-show-button').click(function () {
+    $('#filter-by-overlay').show();
+  });
+  $('#filter-by-overlay-hide-button').click(function () {
+    $('#filter-by-overlay').hide();
+  });
+
+  function closeNoProductModal() {
+    $('#no-product-available').removeClass('shown');
+    $('#overlay').removeClass('shown');
+  }
+
+  $('#no-product-available-close-button').click(closeNoProductModal);
+  $('#no-product-available-hide-button').click(closeNoProductModal);
+
+  function customEncodeURI(value) {
+    return encodeURI(
+      value.replace(/\s/g, '+').replace(/'/g, '%27').replace(/\$/g, '%24')
+    ).replace(/%25/g, '%');
+  }
+
+  function setNewUrl(searchParams) {
+    history.replaceState(
+      {},
+      '',
+      location.pathname +
+        '?' +
+        customEncodeURI(decodeURIComponent(searchParams.toString()))
+    );
+    Turbolinks.visit(location);
+  }
+
+  function updateFilters(event, $this, removeValue) {
+    event.preventDefault();
+    var data = $this.closest('a[data-params]').data();
+    var searchParams = new URLSearchParams(location.search);
+    var key = data.filterName;
+    var value = data.params[key].toString();
+
+    searchParams.delete('page');
+    if (!searchParams.has('menu_open') && data.params['menu_open']) {
+      searchParams.set('menu_open', data.params['menu_open']);
+    } else if (searchParams.has('menu_open') && !data.params['menu_open']) {
+      searchParams.delete('menu_open');
+    }
+
+    if (searchParams.get(key) === null || !data.multiselect) {
+      searchParams.set(key, value);
+    } else {
+      var arr = searchParams.get(key).toString().split(',');
+      var index = arr.indexOf(data.id.toString());
+
+      if (index > -1 && removeValue) {
+        arr.splice(index, 1);
+      } else {
+        arr.push(data.id.toString());
+      }
+
+      searchParams.set(key, arr.join(','));
+    }
+
+    setNewUrl(searchParams);
+  }
+
+  $('.plp-overlay-card-item').click(function (event) {
+    if (window.URLSearchParams) {
+      updateFilters(
+        event,
+        $(this),
+        $(this).hasClass('plp-overlay-card-item--selected')
+      );
+    }
+    $(this).toggleClass('plp-overlay-card-item--selected');
+  });
+
+  $(
+    '#filters-accordion .color-select, #plp-filters-accordion .color-select'
+  ).click(function (event) {
+    var colorItem = $(this).find('.plp-overlay-color-item');
+    if (window.URLSearchParams) {
+      updateFilters(
+        event,
+        $(this),
+        colorItem.hasClass('color-select-border--selected')
+      );
+    }
+    colorItem.toggleClass('color-select-border--selected');
+  });
+
+  $('.plp-overlay-ul-li').click(function() {
+    $('.plp-overlay-ul-li').removeClass('plp-overlay-ul-li--active')
+    $(this).addClass('plp-overlay-ul-li--active');
+  });
+});

data/app/assets/javascripts/harpiya/frontend/views/harpiya/products/modal_carousel.js

@@ -0,0 +1,54 @@
+Harpiya.ready(function($) {
+  var modalCarousel = $('#productModalThumbnailsCarousel')
+  if (modalCarousel.length) {
+    ThumbnailsCarousel($, modalCarousel)
+  }
+
+  var activeSingleImageIndex = function(sourceWrappingClass) {
+    var activeSingleImage = $('.' + sourceWrappingClass + ' .product-details-single [data-variant-id].active')
+    return activeSingleImage.index()
+  }
+
+  var selectThumbnail = function(imgIndex, carousel) {
+    var carouselPerPage = carousel.data('product-carousel-per-page')
+    var carouselItems = carousel.find('> div > div.carousel-item.product-thumbnails-carousel-item')
+    var carouselItem = carouselItems[Math.floor(imgIndex / carouselPerPage)]
+
+    carouselItems.removeClass('active')
+    $(carouselItems).find('img').removeClass('selected')
+    $(carouselItem).addClass('active')
+
+    var thumbnailsChildren = $(carouselItem).find('> div > div')
+      .children('.product-thumbnails-carousel-item-single--visible[data-variant-id]')
+    if (thumbnailsChildren.length > 0) {
+      $(thumbnailsChildren.get(imgIndex % carouselPerPage).getElementsByTagName('img')[0]).addClass('selected')
+    }
+  }
+
+  var selectModalThumbnail = function(imgIndex) {
+    selectThumbnail(imgIndex, modalCarousel)
+  }
+
+  var selectProductCarouselThumbnail = function() {
+    var imgIndex = activeSingleImageIndex('modal') - 1
+    var productCarousel = $('#productThumbnailsCarousel')
+    selectThumbnail(imgIndex, productCarousel)
+  }
+
+  var activateModalSingleImg = function(imgIndex, targetWrappingClass) {
+    $('.' + targetWrappingClass + ' .product-details-single [data-variant-id].active').removeClass('active')
+    var modalActiveSingleImage = $($('.' + targetWrappingClass + ' .product-details-single [data-variant-id]').parent().children().get(imgIndex))
+    modalActiveSingleImage.addClass('active')
+  }
+
+  $('#picturesModal').on('show.bs.modal', function() {
+    var rowActiveSingleImageIndex = activeSingleImageIndex('row')
+    selectModalThumbnail(rowActiveSingleImageIndex - 1)
+    activateModalSingleImg(rowActiveSingleImageIndex, 'modal')
+  })
+
+  $('#picturesModal').on('hide.bs.modal', function() {
+    activateModalSingleImg(activeSingleImageIndex('modal'), 'row')
+    selectProductCarouselThumbnail()
+  })
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/products/price_filters.es6

@@ -0,0 +1,46 @@
+Harpiya.ready(function() {
+  class PriceRangeFilter {
+    constructor(inputsContainer, filterButton) {
+      this.inputsContainer = inputsContainer
+      this.filterButton = filterButton
+
+      this.priceInputs = inputsContainer.querySelectorAll('input')
+      this.minPriceInput = inputsContainer.querySelector('input[name="min_price"]')
+      this.maxPriceInput = inputsContainer.querySelector('input[name="max_price"]')
+    }
+
+    handlePriceChange() {
+      this.priceInputs.forEach((priceInput) => {
+        priceInput.addEventListener('change', () => {
+          this.updatePricesForFiltering(
+            parseInt(this.minPriceInput.value) || 0,
+            parseInt(this.maxPriceInput.value) || 'Infinity'
+          )
+        })
+      })
+    }
+
+    updatePricesForFiltering(minPrice, maxPrice) {
+      const formattedPriceRange = `${minPrice}-${maxPrice}`
+      const url = new URL(this.filterButton.href)
+
+      url.searchParams.set('price', formattedPriceRange)
+      this.filterButton.href = `${url.pathname}${url.search}`
+    }
+  }
+
+  // we have 2 elements for filtering prices - desktop and mobile
+  const desktopElement = document.getElementById('filterPriceRangeDesktop')
+  if (desktopElement) {
+    const desktopFilterButton = desktopElement.querySelector('a')
+    const desktopPriceRangeFilter = new PriceRangeFilter(desktopElement, desktopFilterButton)
+    desktopPriceRangeFilter.handlePriceChange()
+  }
+
+  const mobileElement = document.getElementById('filterPriceRangeMobile')
+  if (mobileElement) {
+    const mobileFilterButton = document.getElementById('filterProductsButtonMobile')
+    const mobilePriceRangeFilter = new PriceRangeFilter(mobileElement, mobileFilterButton)
+    mobilePriceRangeFilter.handlePriceChange()
+  }
+});

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/carousel.js

@@ -0,0 +1,129 @@
+Harpiya.ready(function($) {
+  // Synchronize carousels.
+
+  var carouselGroupIdentifierAttributeName =
+    'data-product-carousel-group-identifier'
+  var carouselPerPageAttributeName = 'data-product-carousel-per-page'
+  var carouselIsSlaveAttributeName = 'data-product-carousel-is-slave'
+  var carouselToSlideAttributeName = 'data-product-carousel-to-slide'
+  var groupedCarousels = []
+  Harpiya.goToCarouselSlide = function(
+    $invokedCarousel,
+    slideIndex,
+    slideIndexLocalToSlide,
+    respectIsSlave
+  ) {
+    var elementGroupIdentifier = $invokedCarousel.attr(
+      carouselGroupIdentifierAttributeName
+    )
+
+    var carouselGroupDescription = groupedCarousels.find(function(
+      candidateCarouselGroupDescription
+    ) {
+      return (
+        candidateCarouselGroupDescription.identifier === elementGroupIdentifier
+      )
+    })
+
+    carouselGroupDescription.elements.forEach(function(element) {
+      var $candidateCarousel = element.$carousel
+      if (
+        (!respectIsSlave || element.isSlave) &&
+        !$candidateCarousel.is($invokedCarousel)
+      ) {
+        setTimeout(function() {
+          // setTimeout is required due to "Returns to the caller before the target item has been shown" issue.
+          // Details: https://getbootstrap.com/docs/4.0/components/carousel/#carouselnumber
+          if (slideIndexLocalToSlide) {
+            var invokedPerPage = carouselGroupDescription.elements.find(
+              function(element) {
+                var $candidateCarousel = element.$carousel
+                return $candidateCarousel.is($invokedCarousel)
+              }
+            ).perPage
+
+            $candidateCarousel.carouselBootstrap4(
+              Math.floor((slideIndex * invokedPerPage) / element.perPage)
+            )
+          } else {
+            $candidateCarousel.carouselBootstrap4(
+              Math.floor(slideIndex / element.perPage)
+            )
+          }
+        })
+      }
+    })
+  }
+
+  $('[' + carouselGroupIdentifierAttributeName + ']').each(function(
+    _carouselIndex,
+    carouselElement
+  ) {
+    var $carousel = $(carouselElement)
+
+    $carousel.carouselBootstrap4()
+
+    var elementGroupIdentifier = $carousel.attr(
+      carouselGroupIdentifierAttributeName
+    )
+    var perPage = parseInt($carousel.attr(carouselPerPageAttributeName)) || 1
+    var isSlave = !!$carousel.attr(carouselIsSlaveAttributeName)
+
+    var carouselGroupDescription = groupedCarousels.find(function(
+      candidateCarouselGroupDescription
+    ) {
+      return (
+        candidateCarouselGroupDescription.identifier === elementGroupIdentifier
+      )
+    })
+    if (carouselGroupDescription) {
+      carouselGroupDescription.elements.push({
+        $carousel: $carousel,
+        perPage: perPage,
+        isSlave: isSlave
+      })
+    } else {
+      groupedCarousels.push({
+        identifier: elementGroupIdentifier,
+        elements: [
+          {
+            $carousel: $carousel,
+            perPage: perPage,
+            isSlave: isSlave
+          }
+        ]
+      })
+    }
+  })
+
+  $('body').on('click', '[' + carouselToSlideAttributeName + ']', function(
+    event
+  ) {
+    var $invokedCarousel = $(
+      event.currentTarget.closest(
+        '[' + carouselGroupIdentifierAttributeName + ']'
+      )
+    )
+
+    var toSlideOnPageIndex = parseInt(
+      $(event.currentTarget).attr(carouselToSlideAttributeName)
+    )
+
+    Harpiya.goToCarouselSlide($invokedCarousel, toSlideOnPageIndex, false, false)
+  })
+
+  $('body').on(
+    'slide.bs.carousel',
+    '[' + carouselGroupIdentifierAttributeName + ']',
+    function(event) {
+      var invokedCarouselElement = event.relatedTarget.closest(
+        '[' + carouselGroupIdentifierAttributeName + ']'
+      )
+      var $invokedCarousel = $(invokedCarouselElement)
+      var toSlideIndex = event.to
+      Harpiya.goToCarouselSlide($invokedCarousel, toSlideIndex, true, true)
+    }
+  )
+
+  $('.carousel').carouselBootstrap4()
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/carousel/single.js

@@ -0,0 +1,139 @@
+Harpiya.ready(function($) {
+  // Adjust single carousel based on picked variant.
+
+  var productDetailsPage = $('#product-details')
+
+  if (productDetailsPage.length) {
+    var variantIdAttributeName = 'data-variant-id'
+    var carouselItemsContainerSelector = '.carousel-inner'
+    var carouselItemSelector = '[data-variant-id]'
+    var isMasterVariantAttributeName = 'data-variant-is-master'
+    var enabledCarouselItemClass = 'carousel-item'
+    var activeCarouselItemClass = 'active'
+    var getCarouselsWithVariantChangeTriggerSelector = function(triggerId) {
+      return (
+        '.product-carousel[data-variant-change-trigger-identifier=' +
+        triggerId +
+        ']'
+      )
+    }
+    var carouselEmptyClass = 'product-carousel--empty'
+    var carouselIndicatorsContainerSelector = '.product-carousel-indicators'
+    var carouselIndicatorSelector = '.product-carousel-indicators-indicator'
+    var enabledCarouselIndicatorClass =
+      'product-carousel-indicators-indicator--visible'
+    var activeCarouselIndicatorClass = 'active'
+    var carouselIndicatorSlidetoAttributeName = 'data-slide-to'
+
+    Harpiya.showSingleCarouselVariantImages = function($carousel, variantId) {
+      $carousel.carouselBootstrap4('dispose')
+      var oldActiveQualifiedIndex = null
+      var $firstQualifyingSlide = null
+      var qualifiedSlides = 0
+      var $carouselIndicatorsContainer = $carousel.find(
+        carouselIndicatorsContainerSelector
+      )
+      var $carouselItemsContainer = $carousel.find(carouselItemsContainerSelector)
+      var $carouselIndicators = $carousel.find(carouselIndicatorSelector)
+      $carousel
+        .find(carouselItemSelector)
+        .each(function(itemIndex, slideElement) {
+          var $slide = $(slideElement)
+          var qualifies =
+            $slide.attr(variantIdAttributeName) === variantId ||
+            $slide.attr(isMasterVariantAttributeName) === 'true'
+          var $slideIndicator = $carouselIndicators.eq(itemIndex)
+
+          if (qualifies) {
+            qualifiedSlides += 1
+            // Switch indicator slide to index based on picked variant.
+            $slideIndicator.attr(
+              carouselIndicatorSlidetoAttributeName,
+              qualifiedSlides - 1
+            )
+          } else {
+            $slideIndicator.detach()
+            $carouselIndicatorsContainer.append($slideIndicator)
+
+            $slide.detach()
+            $carouselItemsContainer.append($slide)
+          }
+
+          // Switch item visibility in the carousel based on picked variant.
+          $slide.toggleClass(enabledCarouselItemClass, qualifies)
+          // Switch indicator visibility in the carousel based on picked variant.
+          $slideIndicator.toggleClass(enabledCarouselIndicatorClass, qualifies)
+
+          // Safari doesn't correctly calculate width of $slideIndicator after page loading.
+          // w-100 class makes Safari work as expected. For visible images we don't need this class anymore.
+          $slideIndicator.find('img').toggleClass('w-100', !qualifies)
+
+          $slideIndicator.removeClass(activeCarouselIndicatorClass)
+
+          // Select an active image included in the new list of images for selected variant.
+          if (qualifies) {
+            if ($slide.hasClass(activeCarouselItemClass)) {
+              // Use the current active slide if it's still active after changing the variant.
+              oldActiveQualifiedIndex = qualifiedSlides - 1
+            }
+
+            if ($firstQualifyingSlide === null) {
+              $firstQualifyingSlide = $slide
+            }
+          } else {
+            $slide.removeClass(activeCarouselItemClass)
+          }
+        })
+
+      if (qualifiedSlides === 0) {
+        // There are no images to show after picking a variant. Disable the carousel.
+        $carousel.addClass(carouselEmptyClass)
+      } else {
+        $carousel.removeClass(carouselEmptyClass)
+
+        if (oldActiveQualifiedIndex === null) {
+          // Pick the first qualifying slide if the old active slide does not qualify.
+          $firstQualifyingSlide.addClass(activeCarouselItemClass)
+          // Activate first indicator.
+          $carouselIndicators
+            .filter('.' + enabledCarouselIndicatorClass)
+            .eq(0)
+            .addClass(activeCarouselIndicatorClass)
+        } else {
+          // Activate proper indicator based on active slide.
+          $carouselIndicators
+            .filter('.' + enabledCarouselIndicatorClass)
+            .eq(oldActiveQualifiedIndex)
+            .addClass(activeCarouselIndicatorClass)
+        }
+
+        $carousel.carouselBootstrap4()
+
+        setTimeout(function() {
+          // Add delay to allow other carousels to adjust their slides after a variant is picked before syncing slides.
+          var enabledSlides = $carousel.find('.' + enabledCarouselItemClass)
+          var toSlideIndex = enabledSlides.index(
+            enabledSlides.find('.' + activeCarouselItemClass)
+          )
+          Harpiya.goToCarouselSlide($carousel, toSlideIndex, true, true)
+          Harpiya.addSwipeEventListeners($carousel)
+
+          $carousel.on('slide.bs.carousel', function(event) {
+            $carousel.trigger('single_carousel:slide', event.to)
+          })
+        })
+      }
+    }
+
+    productDetailsPage.on('variant_id_change', function (options) {
+      var triggerId = options.triggerId
+      var variantId = options.variantId
+      $(getCarouselsWithVariantChangeTriggerSelector(triggerId)).each(function (
+        _carouselElementIndex,
+        carouselElement
+      ) {
+        Harpiya.showSingleCarouselVariantImages($(carouselElement), variantId)
+      })
+    })
+  }
+})