spree_frontend 3.1.0 → 4.7.0

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

@@ -0,0 +1,41 @@
+//= require spree/frontend/viewport
+
+Spree.fetchProductCarousel = function (taxonId, htmlContainer) {
+  return $.ajax({
+    url: Spree.routes.product_carousel(taxonId)
+  }).done(function (data) {
+    htmlContainer.html(data);
+    htmlContainer.find('.carousel').carouselBootstrap4()
+  })
+}
+
+Spree.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')
+
+    Spree.fetchProductCarousel(taxonId, container)
+  }
+}
+
+Spree.loadsCarouselElements = function () {
+  $('div[data-product-carousel-taxon-id]').each(function (_index, element) { Spree.loadCarousel(element, this) })
+}
+
+document.addEventListener('turbo:load', function () {
+  var carouselPresent = $('div[data-product-carousel-taxon-id]')
+
+  if (carouselPresent.length) {
+    // load Carousels straight away if they are in the viewport
+    Spree.loadsCarouselElements()
+
+    // load additional Carousels when scrolling down
+    $(window).on('resize scroll', function () {
+      Spree.loadsCarouselElements()
+    })
+  }
+})

data/app/assets/javascripts/spree/frontend/views/spree/layouts/spree_application.js

@@ -0,0 +1,65 @@
+Spree.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-spree').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-spree').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 spreeLogoImage = document.getElementsByClassName('header-spree-fluid-logo')
+  var spreeMobileNavs = document.getElementsByClassName('mobile-navigation-list-item')
+  var navbarLinks = [
+    navBarCategoryLinks,
+    navBarCategoryButtons,
+    navBarCategoryImages,
+    navBarAccountIcon,
+    navBarCartIcon,
+    spreeLogoImage,
+    spreeMobileNavs
+  ]
+
+  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-spree').classList.remove('above-overlay')
+        });
+      });
+    });
+  };
+});

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

@@ -0,0 +1,30 @@
+//= require spree/frontend/viewport
+
+Spree.fetchRelatedProducts = function (id, htmlContainer) {
+  return $.ajax({
+    url: Spree.routes.product_related(id)
+  }).done(function (data) {
+    htmlContainer.html(data)
+    htmlContainer.find('.carousel').carouselBootstrap4()
+  })
+}
+
+document.addEventListener('turbo: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()) {
+          Spree.fetchRelatedProducts(productId, relatedProductsContainer)
+          relatedProductsFetched = true
+        }
+      })
+    }
+  }
+})

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

@@ -0,0 +1,337 @@
+//= require spree/frontend/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,
+      $optionValue.val().toString()
+    )
+  }
+
+  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 = $ov.val().toString()
+
+          $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.toString()
+      })
+
+      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 && self.$variantIdInput.val() && variant.id.toString() === self.$variantIdInput.val().toString()
+      })
+    }
+
+    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.toString()
+      })
+
+      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()
+}
+
+Spree.ready(function($) {
+  Spree.variantById = function($cartForm, variantId) {
+    var cartFormVariants = JSON.parse($cartForm.attr('data-variants'))
+    return (
+      cartFormVariants.find(function(variant) {
+        return variant.id.toString() === variantId
+      }) || null
+    )
+  }
+
+  Spree.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 = Spree.addToCartFormSubmissionOptions();
+
+    event.preventDefault()
+    $addToCart.prop('disabled', true);
+    Spree.ensureCart(function() {
+      SpreeAPI.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/spree/spree/blob/d894358e49b8c3a7f6944e838de7cd92510e31d0/api/docs/v2/storefront/index.yaml#L442
+        function(response) {
+          $addToCart.prop('disabled', false)
+          Spree.fetchCart()
+          Spree.showProductAddedModal(JSON.parse(
+            $cartForm.attr('data-product-summary')
+          ), Spree.variantById($cartForm, variantId))
+          $cartForm.trigger({
+            type: 'product_add_to_cart',
+            variant: Spree.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('turbo:request-start', function () {
+    Spree.hideProductAddedModal()
+  })
+})

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

@@ -0,0 +1,8 @@
+document.addEventListener('turbo: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/spree/frontend/views/spree/products/index.js

@@ -0,0 +1,102 @@
+Spree.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()))
+    );
+    Turbo.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/spree/frontend/views/spree/products/modal_carousel.js

@@ -0,0 +1,54 @@
+Spree.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/spree/frontend/views/spree/products/price_filters.es6

@@ -0,0 +1,46 @@
+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()
+  }
+});