Sha256: 6c348fecfcb196ea72ef1d56caf267be946f4c5268ef60c978691b207bdc58f4
Contents?: true
Size: 1.71 KB
Versions: 11
Compression:
Stored size: 1.71 KB
Contents
Spree.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()
}
});
Version data entries
11 entries across 11 versions & 1 rubygems