harpiya_frontend 4.3.0.alpha

data/app/assets/javascripts/harpiya/frontend/turbolinks_scroll_fix.js

@@ -0,0 +1,55 @@
+; (function () {
+  // Tell the browser not to handle scrolling when restoring via the history or
+  // when reloading
+  if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual'
+  }
+
+  var SCROLL_POSITION = 'scroll-position'
+  var PAGE_INVALIDATED = 'page-invalidated'
+
+  // Persist the scroll position on refresh
+  addEventListener('beforeunload', function () {
+    sessionStorage.setItem(SCROLL_POSITION, JSON.stringify(scrollData()))
+  });
+
+  // Invalidate the page when the next page is different from the current page
+  // Persist scroll information across pages
+  document.addEventListener('turbolinks:before-visit', function (event) {
+    if (event.data.url !== location.href) {
+      sessionStorage.setItem(PAGE_INVALIDATED, 'true')
+    }
+    sessionStorage.setItem(SCROLL_POSITION, JSON.stringify(scrollData()))
+  })
+
+  // When a page is fully loaded:
+  // 1. Get the persisted scroll position
+  // 2. If the locations match and the load did not originate from a page
+  // invalidation,
+  // 3. scroll to the persisted position if there, or to the top otherwise
+  // 4. Remove the persisted information
+  addEventListener('turbolinks:load', function (event) {
+    var scrollPosition = JSON.parse(sessionStorage.getItem(SCROLL_POSITION))
+
+    if (shouldScroll(scrollPosition)) {
+      scrollTo(scrollPosition.scrollX, scrollPosition.scrollY)
+    } else {
+      scrollTo(0, 0)
+    }
+    sessionStorage.removeItem(PAGE_INVALIDATED)
+  });
+
+  function shouldScroll(scrollPosition) {
+    return (scrollPosition
+      && scrollPosition.location === location.href
+      && !JSON.parse(sessionStorage.getItem(PAGE_INVALIDATED)))
+  }
+
+  function scrollData() {
+    return {
+      scrollX: scrollX,
+      scrollY: scrollY,
+      location: location.href
+    }
+  }
+})()

data/app/assets/javascripts/harpiya/frontend/viewport.js

@@ -0,0 +1,7 @@
+$.fn.isInViewport = function () {
+  var elementTop = $(this).offset().top
+  var elementBottom = elementTop + $(this).outerHeight()
+  var viewportTop = $(window).scrollTop()
+  var viewportBottom = viewportTop + $(window).height()
+  return elementBottom > viewportTop && elementTop < viewportBottom
+}

data/app/assets/javascripts/harpiya/frontend/views/harpiya/home/product_carousels.js

@@ -0,0 +1,41 @@
+//= require harpiya/frontend/viewport
+
+Harpiya.fetchProductCarousel = function (taxonId, htmlContainer) {
+  return $.ajax({
+    url: Harpiya.routes.product_carousel(taxonId)
+  }).done(function (data) {
+    htmlContainer.html(data);
+    htmlContainer.find('.carousel').carouselBootstrap4()
+  })
+}
+
+Harpiya.loadCarousel = function (element, div) {
+  var container = $(element)
+  var productCarousel = $(div)
+  var carouselLoaded = productCarousel.attr('data-product-carousel-loaded')
+
+  if (container.length && !carouselLoaded && container.isInViewport()) {
+    var taxonId = productCarousel.attr('data-product-carousel-taxon-id')
+    productCarousel.attr('data-product-carousel-loaded', 'true')
+
+    Harpiya.fetchProductCarousel(taxonId, container)
+  }
+}
+
+Harpiya.loadsCarouselElements = function () {
+  $('div[data-product-carousel-taxon-id]').each(function (_index, element) { Harpiya.loadCarousel(element, this) })
+}
+
+document.addEventListener('turbolinks:load', function () {
+  var carouselPresent = $('div[data-product-carousel-taxon-id]')
+
+  if (carouselPresent.length) {
+    // load Carousels straight away if they are in the viewport
+    Harpiya.loadsCarouselElements()
+
+    // load additional Carousels when scrolling down
+    $(window).on('resize scroll', function () {
+      Harpiya.loadsCarouselElements()
+    })
+  }
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/layouts/harpiya_application.js

@@ -0,0 +1,65 @@
+Harpiya.ready(function ($) {
+  document.getElementById('overlay').addEventListener('click', function () {
+    var noProductElement = document.getElementById('no-product-available')
+    document.getElementById("overlay").classList.remove('shown');
+    document.getElementById("search-dropdown").classList.remove('shown');
+    document.querySelector('.header-harpiya').classList.remove('above-overlay')
+    if (noProductElement) noProductElement.classList.remove('shown');
+  }, false);
+
+  document.onkeydown = function(evt) {
+    var searchMenuElement = document.getElementsByClassName("navbar-right-search-menu")
+
+    if (searchMenuElement.length === 1) {
+      evt = evt || window.event;
+      var isEscape = false;
+      var isOpenSearchInput = searchMenuElement[0].classList.contains("shown")
+
+      if (isOpenSearchInput)
+        return;
+
+      if ("key" in evt) {
+        isEscape = (evt.key === "Escape" || evt.key === "Esc");
+      } else {
+        isEscape = (evt.keyCode === 27);
+      }
+      if (isEscape) {
+        document.querySelector(".navbar-right-dropdown-toggle").blur();
+        document.getElementById("overlay").classList.remove('shown');
+        document.querySelector('.header-harpiya').classList.remove('above-overlay')
+        document.getElementById("search-dropdown").classList.remove('shown');
+        $('.hide-on-esc').toggleClass('shown', false)
+      }
+    }
+  };
+
+  var searchDropdown = document.getElementById('search-dropdown')
+  var navBarCategoryLinks = document.getElementsByClassName('main-nav-bar-category-links')
+  var navBarCategoryButtons = document.getElementsByClassName('main-nav-bar-category-button')
+  var navBarCategoryImages = document.getElementsByClassName('category-image')
+  var navBarAccountIcon = [document.getElementById('account-button')]
+  var navBarCartIcon = [document.getElementById('link-to-cart')]
+  var harpiyaLogoImage = document.getElementsByClassName('header-harpiya-fluid-logo')
+  var harpiyaMobileNavs = document.getElementsByClassName('mobile-navigation-list-item')
+  var navbarLinks = [
+    navBarCategoryLinks,
+    navBarCategoryButtons,
+    navBarCategoryImages,
+    navBarAccountIcon,
+    navBarCartIcon,
+    harpiyaLogoImage,
+    harpiyaMobileNavs
+  ]
+
+  if (searchDropdown !== null) {
+    $.each(navbarLinks, function(index, navbarElements) {
+      $.each(navbarElements, function(index, navBarCategoryLink) {
+        navBarCategoryLink.addEventListener('click', function () {
+          document.getElementById('overlay').classList.remove('shown');
+          searchDropdown.classList.remove('shown');
+          document.querySelector('.header-harpiya').classList.remove('above-overlay')
+        });
+      });
+    });
+  };
+});

data/app/assets/javascripts/harpiya/frontend/views/harpiya/product/related.js

@@ -0,0 +1,30 @@
+//= require harpiya/frontend/viewport
+
+Harpiya.fetchRelatedProducts = function (id, htmlContainer) {
+  return $.ajax({
+    url: Harpiya.routes.product_related(id)
+  }).done(function (data) {
+    htmlContainer.html(data)
+    htmlContainer.find('.carousel').carouselBootstrap4()
+  })
+}
+
+document.addEventListener('turbolinks:load', function () {
+  var productDetailsPage = $('body#product-details')
+
+  if (productDetailsPage.length) {
+    var productId = $('div[data-related-products]').attr('data-related-products-id')
+    var relatedProductsEnabled = $('div[data-related-products]').attr('data-related-products-enabled')
+    var relatedProductsFetched = false
+    var relatedProductsContainer = $('#related-products')
+
+    if (!relatedProductsFetched && relatedProductsContainer.length && relatedProductsEnabled && relatedProductsEnabled === 'true' && productId !== '') {
+      $(window).on('resize scroll', function () {
+        if (!relatedProductsFetched && relatedProductsContainer.isInViewport()) {
+          Harpiya.fetchRelatedProducts(productId, relatedProductsContainer)
+          relatedProductsFetched = true
+        }
+      })
+    }
+  }
+})

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

@@ -0,0 +1,337 @@
+//= require harpiya/api/storefront/cart
+//= require ../shared/product_added_modal
+//= require ../shared/variant_select
+
+var ADD_TO_CART_FORM_SELECTOR = '.add-to-cart-form'
+var VARIANT_ID_SELECTOR = '[name="variant_id"]'
+var OPTION_VALUE_SELECTOR = '.product-variants-variant-values-radio'
+var ADD_TO_CART_SELECTOR = '.add-to-cart-button'
+
+var AVAILABILITY_TEMPLATES = {
+  notAvailableInCurrency: '.availability-template-not-available-in-currency',
+  inStock: '.availability-template-in-stock',
+  backorderable: '.availability-template-backorderable',
+  outOfStock: '.availability-template-out-of-stock'
+}
+
+function CartForm($, $cartForm) {
+  this.constructor = function() {
+    this.initialize()
+    this.bindEventHandlers()
+  }
+
+  this.initialize = function() {
+    this.urlQueryMatchFound = false
+    this.selectedOptionValueIds = []
+    this.variants = JSON.parse($cartForm.attr('data-variants'))
+    this.withOptionValues = Boolean($cartForm.find(OPTION_VALUE_SELECTOR).length)
+
+    this.$addToCart = $cartForm.find(ADD_TO_CART_SELECTOR)
+    this.$price = $cartForm.find('.price.selling')
+    this.$compareAtPrice = $cartForm.find('.compare-at-price')
+    this.$variantIdInput = $cartForm.find(VARIANT_ID_SELECTOR)
+
+    this.initializeQueryParamsCheck()
+    this.initializeColorVarianTooltip()
+
+    if (this.urlQueryMatchFound) {
+      this.setSelectedVariantFromUrl()
+    } else {
+      this.initializeForm()
+    }
+  }
+
+  this.initializeForm = function() {
+    if (this.withOptionValues) {
+      var $optionValue = this.firstCheckedOptionValue()
+      this.applyCheckedOptionValue($optionValue, true)
+      var singleOptionValues = this.getSingleOptionValuesFromEachOptionType()
+      if (singleOptionValues.length) {
+        singleOptionValues.forEach(function($value) {
+          this.applyCheckedOptionValue($value, true)
+        })
+      }
+    } else {
+      this.updateAddToCart()
+      this.triggerVariantImages()
+    }
+  }
+
+  this.bindEventHandlers = function() {
+    $cartForm.on('click', OPTION_VALUE_SELECTOR, this.handleOptionValueClick)
+  }
+
+  this.handleOptionValueClick = function(event) {
+    var currentTarget = $(event.currentTarget)
+    this.applyCheckedOptionValue(currentTarget)
+    currentTarget.blur()
+  }.bind(this)
+
+  this.applyCheckedOptionValue = function($optionValue, initialUpdate) {
+    this.saveCheckedOptionValue($optionValue)
+    this.showAvailableVariants()
+    this.updateAddToCart()
+    // we don't want to remove availability status on initial page load
+    if (!initialUpdate) this.updateVariantAvailability()
+    this.updateVariantPrice()
+    this.updateVariantId()
+
+    if (this.shouldTriggerVariantImage($optionValue)) {
+      this.triggerVariantImages()
+    }
+
+    if (initialUpdate) $optionValue.prop('checked', true)
+  }
+
+  this.saveCheckedOptionValue = function($optionValue) {
+    var optionTypeIndex = $optionValue.data('option-type-index')
+
+    this.selectedOptionValueIds.splice(
+      optionTypeIndex,
+      this.selectedOptionValueIds.length,
+      parseInt($optionValue.val())
+    )
+  }
+
+  this.showAvailableVariants = function() {
+    var availableOptionValueIds = this.availableOptionValueIds()
+    var selectedOptionValueIdsCount = this.selectedOptionValueIds.length
+
+    this.optionTypes().each(function(index, optionType) {
+      if (index < selectedOptionValueIdsCount) return
+
+      $(optionType)
+        .find(OPTION_VALUE_SELECTOR)
+        .each(function(_index, ov) {
+          var $ov = $(ov)
+          var id = parseInt($ov.val())
+
+          $ov.prop('checked', false)
+          $ov.prop('disabled', !availableOptionValueIds.includes(id))
+        })
+    })
+  }
+
+  this.optionTypes = function() {
+    return $cartForm.find('.product-variants-variant')
+  }
+
+  this.availableOptionValueIds = function() {
+    var selectedOptionValueIds = this.selectedOptionValueIds
+
+    return this.variants.reduce(function(acc, variant) {
+      var optionValues = variant.option_values.map(function(ov) {
+        return ov.id
+      })
+
+      var isPossibleVariantFound = selectedOptionValueIds.every(function(ov) {
+        return optionValues.includes(ov)
+      })
+
+      if (isPossibleVariantFound) {
+        return acc.concat(optionValues)
+      }
+
+      return acc
+    }, [])
+  }
+
+  this.firstCheckedOptionValue = function() {
+    return $cartForm.find(OPTION_VALUE_SELECTOR + '[data-option-type-index=0]' + ':checked')
+  }
+
+  this.getSingleOptionValuesFromEachOptionType = function() {
+    var singleOptionValues = []
+    this.optionTypes().each(function(_, optionType) {
+      var $optionValues = $(optionType).find(OPTION_VALUE_SELECTOR)
+      if ($optionValues.length === 1) {
+        singleOptionValues.push($optionValues.first())
+      }
+    })
+    return singleOptionValues
+  }
+
+  this.shouldTriggerVariantImage = function($optionValue) {
+    return $optionValue.data('is-color') || !this.firstCheckedOptionValue().data('is-color')
+  }
+
+  this.triggerVariantImages = function() {
+    var checkedVariantId
+    var variant = this.selectedVariant()
+
+    if (variant) {
+      checkedVariantId = variant.id
+    } else {
+      checkedVariantId = this.firstCheckedOptionValue().data('variant-id')
+    }
+
+    // Wait for listeners to attach.
+    setTimeout(function() {
+      $cartForm.trigger({
+        type: 'variant_id_change',
+        triggerId: $cartForm.attr('data-variant-change-trigger-identifier'),
+        variantId: checkedVariantId + ''
+      })
+    })
+  }
+
+  this.selectedVariant = function() {
+    var self = this
+
+    if (!this.withOptionValues) {
+      return this.variants.find(function(variant) {
+        return variant.id === parseInt(self.$variantIdInput.val())
+      })
+    }
+
+    if (this.variants.length === 1 && this.variants[0].is_master) {
+      return this.variants[0]
+    }
+
+    return this.variants.find(function(variant) {
+      var optionValueIds = variant.option_values.map(function(ov) {
+        return ov.id
+      })
+
+      return self.areArraysEqual(optionValueIds, self.selectedOptionValueIds)
+    })
+  }
+
+  this.areArraysEqual = function(array1, array2) {
+    return this.sortArray(array1).join(',') === this.sortArray(array2).join(',')
+  }
+
+  this.sortArray = function(array) {
+    return array.concat().sort(function(a, b) {
+      if (a < b) return -1
+      if (a > b) return 1
+
+      return 0
+    })
+  }
+
+  this.updateAddToCart = function() {
+    var variant = this.selectedVariant()
+
+    this.$addToCart.prop('disabled', variant ? !variant.purchasable : true)
+  }
+
+  this.availabilityMessage = function(variant) {
+    if (!variant.is_product_available_in_currency) {
+      return $(AVAILABILITY_TEMPLATES.notAvailableInCurrency).html()
+    }
+
+    if (variant.in_stock) {
+      return $(AVAILABILITY_TEMPLATES.inStock).html()
+    }
+
+    if (variant.backorderable) {
+      return $(AVAILABILITY_TEMPLATES.backorderable).html()
+    }
+
+    return $(AVAILABILITY_TEMPLATES.outOfStock).html()
+  }
+
+  this.updateVariantAvailability = function() {
+    var variant = this.selectedVariant()
+
+    if (!variant) {
+      return $cartForm
+        .find('.add-to-cart-form-general-availability .add-to-cart-form-general-availability-value')
+        .html('')
+    }
+
+    return $cartForm
+      .find('.add-to-cart-form-general-availability .add-to-cart-form-general-availability-value')
+      .html(this.availabilityMessage(variant))
+  }
+
+  this.updateVariantPrice = function() {
+    var variant = this.selectedVariant()
+
+    if (!variant) return
+
+    var shouldDisplayCompareAtPrice = variant.should_display_compare_at_price
+
+    this.$price.html(variant.display_price)
+
+    var compareAtPriceContent = shouldDisplayCompareAtPrice ? variant.display_compare_at_price : ''
+    this.$compareAtPrice.html(compareAtPriceContent)
+  }
+
+  this.updateVariantId = function() {
+    var variant = this.selectedVariant()
+    var variantId = (variant && variant.id) || ''
+
+    this.$variantIdInput.val(variantId)
+  }
+
+  this.constructor()
+}
+
+Harpiya.ready(function($) {
+  Harpiya.variantById = function($cartForm, variantId) {
+    var cartFormVariants = JSON.parse($cartForm.attr('data-variants'))
+    return (
+      cartFormVariants.find(function(variant) {
+        return variant.id.toString() === variantId
+      }) || null
+    )
+  }
+
+  Harpiya.addToCartFormSubmissionOptions = function() {
+    return {};
+  }
+
+  $('#product-details').on('submit', ADD_TO_CART_FORM_SELECTOR, function(event) {
+    var $cartForm = $(event.currentTarget);
+    var $addToCart = $cartForm.find(ADD_TO_CART_SELECTOR);
+    var variantId = $cartForm.find(VARIANT_ID_SELECTOR).val();
+    var quantity = parseInt($cartForm.find('[name="quantity"]').val());
+    var options = Harpiya.addToCartFormSubmissionOptions();
+
+    event.preventDefault()
+    $addToCart.prop('disabled', true);
+    Harpiya.ensureCart(function() {
+      HarpiyaAPI.Storefront.addToCart(
+        variantId,
+        quantity,
+        options, // options hash - you can pass additional parameters here, your backend
+        // needs to be aware of those, see API docs:
+        // https://github.com/harpiya/harpiya/blob/master/api/docs/v2/storefront/index.yaml#L42
+        function(response) {
+          $addToCart.prop('disabled', false)
+          Harpiya.fetchCart()
+          Harpiya.showProductAddedModal(JSON.parse(
+            $cartForm.attr('data-product-summary')
+          ), Harpiya.variantById($cartForm, variantId))
+          $cartForm.trigger({
+            type: 'product_add_to_cart',
+            variant: Harpiya.variantById($cartForm, variantId),
+            quantity_increment: quantity,
+            cart: response.attributes
+          })
+        },
+        function(error) {
+          if (typeof error === 'string' && error !== '') {
+            document.querySelector('#no-product-available .no-product-available-text').innerText = error
+          }
+          document.getElementById('overlay').classList.add('shown')
+          document.getElementById('no-product-available').classList.add('shown')
+          window.scrollTo(0, 0)
+          $addToCart.prop('disabled', false)
+        } // failure callback for 422 and 50x errors
+      )
+    })
+  })
+
+  $(ADD_TO_CART_FORM_SELECTOR).each(function(_cartFormIndex, cartFormElement) {
+    var $cartForm = $(cartFormElement)
+
+    CartForm($, $cartForm)
+  })
+
+  document.addEventListener('turbolinks:request-start', function () {
+    Harpiya.hideProductAddedModal()
+  })
+})