spree_storefront 5.0.0.rc1

data/app/javascript/spree/storefront/controllers/checkout_delivery_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['shippingList', 'shippingRate', 'submit']
+
+  connect() {
+    document.addEventListener('turbo:submit-end', _event => {
+      this.enableShippingRates();
+      this.submitTarget.disabled = false
+    });
+  }
+
+  update() {
+    this.disableShippingRates();
+    this.submitTarget.disabled = true
+
+    // https://discuss.hotwired.dev/t/form-submit-with-turbo-streams-response-without-redirect/3290
+    const oldAction = this.element.getAttribute("action")
+    this.element.action = this.element.action + '?do_not_advance=true'
+    Turbo.navigator.submitForm(this.element)
+    this.element.action = oldAction
+  }
+
+  enableShippingRates() {
+    this.shippingListTarget.classList.remove('opacity-50');
+    this.shippingListTarget.classList.remove('cursor-wait');
+    this.shippingRateTargets.forEach((shippingRate) => {
+      shippingRate.style.pointerEvents = 'auto';
+    });
+  }
+
+  disableShippingRates() {
+    this.shippingListTarget.classList.add('opacity-50');
+    this.shippingListTarget.classList.add('cursor-wait');
+    this.shippingRateTargets.forEach((shippingRate) => {
+      shippingRate.style.pointerEvents = 'none';
+    });
+  }
+}

data/app/javascript/spree/storefront/controllers/checkout_promotions_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['promotionEmailField']
+
+  connect() {
+    this.element.addEventListener(
+      'submit',
+      this.copyEmailFieldToForm.bind(this)
+    )
+  }
+
+  disconnect() {
+    this.element.removeEventListener(
+      'submit',
+      this.copyEmailFieldToForm.bind(this)
+    )
+  }
+
+  copyEmailFieldToForm(e) {
+    const userEmailField = document.getElementById(
+      'order_ship_address_attributes_email'
+    )
+    if (userEmailField) {
+      this.promotionEmailFieldTarget.value = userEmailField.value
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/checkout_summary_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'container',
+    'content',
+    'wrapper',
+    'line_items',
+    'coupon_area'
+  ]
+
+  onCouponResize() {
+    this.line_itemsTarget.style.maxHeight = `${window.innerHeight - this.coupon_areaTarget.offsetHeight - 20}px`
+  }
+
+  connect() {
+    var wrapper = this.wrapperTarget
+    var summary = this.containerTarget
+    var content = this.contentTarget
+    var couponArea = this.coupon_areaTarget
+
+    summary.style.height = content.offsetHeight + 'px'
+    wrapper.classList.toggle('summary-folded', true)
+
+    this.observer = new ResizeObserver(function () {
+      summary.style.height = content.offsetHeight + 'px'
+    })
+
+    this.couponObserver = new ResizeObserver(this.onCouponResize.bind(this))
+
+    window.addEventListener('resize', this.onCouponResize.bind(this))
+
+    this.observer.observe(content)
+    this.couponObserver.observe(couponArea)
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    if (this.couponObserver) {
+      this.couponObserver.disconnect()
+    }
+    window.removeEventListener('resize', this.onCouponResize.bind(this))
+  }
+}

data/app/javascript/spree/storefront/controllers/clear_input_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'button']
+
+  connect() {
+    this.inputTarget.addEventListener('input', this.toggleButton)
+  }
+
+  clear() {
+    this.inputTarget.value = ''
+    this.inputTarget.focus()
+    this.toggleButton()
+  }
+
+  toggleButton = () => {
+    if (this.inputTarget.value.trim().length) {
+      this.buttonTarget.classList.remove('hidden')
+    } else {
+      this.buttonTarget.classList.add('hidden')
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/copy_input_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'copyButton']
+
+  connect() {
+    this.copyButtonTarget.addEventListener('click', this.copyText.bind(this))
+  }
+
+  disconnect() {
+    this.copyButtonTarget.removeEventListener('click', this.copyText.bind(this))
+  }
+
+  async copyText() {
+    this.inputTarget.select()
+    this.inputTarget.setSelectionRange(0, 99999)
+    await navigator.clipboard.writeText(this.inputTarget.value)
+  }
+}

data/app/javascript/spree/storefront/controllers/dropdown_controller.js

@@ -0,0 +1,14 @@
+import { Dropdown } from 'tailwindcss-stimulus-components'
+
+export default class extends Dropdown {
+  hide(event) {
+    let containsTarget = this.element.contains(event.target)
+    if (this.element.getRootNode() instanceof ShadowRoot) {
+      const trueTarget = event.composedPath()[0]
+      containsTarget = this.element.contains(trueTarget)
+    }
+    if (event.target.nodeType && containsTarget === false && this.openValue) {
+      this.openValue = false
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/header_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+import Headroom from 'headroom.js'
+
+export default class extends Controller {
+  static targets = ['header']
+
+  connect() {
+    this.headroom = new Headroom(this.element, {
+      offset: 200,
+      onNotTop: () => {
+        if (this.element.classList.contains('header-logo-centered'))
+          this.element
+            .querySelector('body:not(.inside-page-builder) .header-nav-container #header-logo')
+            ?.classList?.add('lg:sr-only')
+      },
+      onTop: () => {
+        if (this.element.classList.contains('header-logo-centered'))
+          this.element
+            .querySelector('body:not(.inside-page-builder) .header-nav-container #header-logo')
+            ?.classList?.remove('lg:sr-only')
+      }
+    })
+    this.headroom.init()
+  }
+
+  freeze() {
+    this.headroom.freeze()
+  }
+
+  unfreeze() {
+    this.headroom.unfreeze()
+  }
+}

data/app/javascript/spree/storefront/controllers/infinite_scroll_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus'
+import { get } from '@rails/request.js'
+
+export default class extends Controller {
+  static values = { offset: String }
+  initialize() {
+    this.intersectionObserver = new IntersectionObserver(this.checkIntersection, { rootMargin: this.offsetValue })
+  }
+
+  connect() {
+    this.intersectionObserver.observe(this.element)
+  }
+
+  disconnect() {
+    this.intersectionObserver.unobserve(this.element)
+  }
+
+  checkIntersection = async (entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        await this.loadMore()
+        break
+      }
+    }
+  }
+
+  async loadMore() {
+    this.element.disabled = true
+    await get(this.element.src, { responseKind: 'turbo-stream' })
+  }
+}

data/app/javascript/spree/storefront/controllers/lightbox_controller.js

@@ -0,0 +1,138 @@
+import { Controller } from '@hotwired/stimulus'
+import PhotoSwipeLightbox from 'photoswipe/lightbox'
+
+const closeSVG = `
+<svg class="pswp__icn" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M3.00029 3L21 20.9688M3 21L20.9997 3.03115" stroke="black" stroke-width="1.5"/>
+</svg>`
+const arrowPrevSVG = `
+<svg class="pswp__icn" width="24" height="24" viewBox="0 0 32 32" fill="none">
+  <path d="M2 16H30M2 16L16 2M2 16L16 30" stroke="black" stroke-width="1.5"/>
+</svg>`
+const arrowNextSVG = `
+<svg class="pswp__icn" width="24" height="24" viewBox="0 0 32 32" fill="none">
+  <path d="M30 16H2M30 16L16 2M30 16L16 30" stroke="black" stroke-width="1.5"/>
+</svg>`
+
+function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+}
+export default class extends Controller {
+  connect() {
+    this.addPhotoSwipeStyles()
+
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: this.element,
+      children: 'a',
+      bgOpacity: 1.0,
+      initialZoomLevel: 'fit',
+      secondaryZoomLevel: 1,
+      pswpModule: () => import('photoswipe'),
+      closeSVG,
+      arrowPrevSVG,
+      arrowNextSVG,
+      arrowPrev: true,
+      arrowNext: true,
+      preload: [1, 4] // https://photoswipe.com/options/#preload
+    })
+
+    lightbox.on('firstUpdate', () => {
+      if (isTouchDevice() && this.pinchToZoomEl) {
+        this.pinchToZoomEl.style.display = 'flex'
+      }
+    })
+
+    lightbox.on('pointerUp', () => {
+      if (this.pinchToZoomEl) this.pinchToZoomEl.style.display = 'none'
+    })
+
+    lightbox.on('uiRegister', function () {
+      lightbox.pswp.ui.registerElement({
+        name: 'bulletsIndicator',
+        className: 'pswp__bullets-indicator',
+        appendTo: 'wrapper',
+        onInit: (el, pswp) => {
+          const bullets = []
+          let bullet
+          let prevIndex = -1
+          const itemsCount = pswp.getNumItems()
+
+          if (itemsCount <= 1) {
+            return
+          }
+
+          for (let i = 0; i < itemsCount; i++) {
+            bullet = document.createElement('div')
+            bullet.className = 'pswp__bullet'
+            bullet.onclick = (e) => {
+              pswp.goTo(bullets.indexOf(e.target))
+            }
+            el.appendChild(bullet)
+            bullets.push(bullet)
+          }
+
+          pswp.on('change', () => {
+            if (prevIndex >= 0) {
+              bullets[prevIndex].classList.remove('pswp__bullet--active')
+            }
+            bullets[pswp.currIndex].classList.add('pswp__bullet--active')
+            prevIndex = pswp.currIndex
+          })
+        }
+      })
+
+      lightbox.pswp.ui.registerElement({
+        name: 'pagination',
+        className: 'pswp__pagination',
+        appendTo: 'wrapper',
+        onInit: (el, pswp) => {
+          const itemsCount = pswp.getNumItems()
+
+          if (itemsCount <= 1) {
+            return
+          }
+
+          const currentEl = document.createElement('span')
+          currentEl.className = 'pswp__pagination--current'
+          currentEl.innerHTML = String(pswp.currIndex + 1).padStart(2, '0')
+
+          const allEl = document.createElement('span')
+          allEl.className = 'pswp__pagination--all'
+          allEl.innerHTML = String(itemsCount).padStart(2, '0')
+
+          el.appendChild(currentEl)
+          el.appendChild(document.createTextNode('/'))
+          el.appendChild(allEl)
+
+          pswp.on('change', () => {
+            currentEl.innerHTML = String(pswp.currIndex + 1).padStart(2, '0')
+          })
+        }
+      })
+    })
+
+    lightbox.init()
+  }
+
+  get pinchToZoomEl() {
+    let pinchToZoom = document.querySelector('#pinch-to-zoom')
+    if (this.element.getRootNode() instanceof ShadowRoot) {
+      pinchToZoom = this.element.getRootNode().querySelector('#pinch-to-zoom')
+    }
+
+    return pinchToZoom
+  }
+
+  addPhotoSwipeStyles() {
+    if (document.getElementById('photoswipe-styles')) {
+      return
+    }
+
+    const link = document.createElement('link')
+    link.id = 'photoswipe-styles'
+    link.rel = 'stylesheet'
+    link.href = 'https://esm.sh/photoswipe@5.4.4/dist/photoswipe.css'
+    link.onerror = () => console.error('Failed to load PhotoSwipe CSS')
+    document.head.appendChild(link)
+  }
+}

data/app/javascript/spree/storefront/controllers/mobile_nav_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['submenuContainer']
+
+  openSubmenu(e) {
+    const template = e.target.querySelector('template')
+    if (template) {
+      this.submenuContainerTarget.innerHTML = template.innerHTML
+      this.element.style.setProperty('--tw-translate-x', '-100vw')
+    }
+  }
+
+  closeSubmenu() {
+    this.element.style.setProperty('--tw-translate-x', null)
+  }
+}

data/app/javascript/spree/storefront/controllers/modal_controller.js

@@ -0,0 +1,15 @@
+import { Modal } from 'tailwindcss-stimulus-components'
+
+export default class extends Modal {
+  static values = {
+    opened: Boolean
+  }
+
+  connect() {
+    super.connect()
+
+    if (this.openedValue) {
+      super.open({preventDefault: () => {}, target: { blur: () => {}}})
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/no_ui_slider_controller.js

@@ -0,0 +1,55 @@
+import noUiSlider from 'nouislider'
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    range: Array,
+    start: Array
+  }
+
+  static targets = ['slider', 'minInput', 'maxInput']
+
+  connect() {
+    if (this.sliderTarget.noUiSlider) {
+      this.sliderTarget.noUiSlider.destroy()
+    }
+
+    const slider = noUiSlider.create(this.sliderTarget, {
+      start: this.startValue,
+      connect: true,
+      step: 1,
+      range: {
+        min: [this.rangeValue[0]],
+        max: [this.rangeValue[1]]
+      }
+    })
+    this.wasSliderChanged = Array(this.startValue.length).fill(false)
+
+    slider.on('update', (values, handle) => {
+      if (!this.wasSliderChanged[handle] && parseFloat(values[handle]) === this.rangeValue[handle]) {
+        this.wasSliderChanged[handle] = true
+        return
+      }
+
+      if (handle) {
+        this.maxInputTarget.value = parseFloat(values[handle]).toFixed(0)
+      } else {
+        this.minInputTarget.value = parseFloat(values[handle]).toFixed(0)
+      }
+    })
+
+    this.minInputTarget.addEventListener('change', (event) => {
+      slider.set([event.currentTarget.value, null])
+    })
+
+    this.maxInputTarget.addEventListener('change', (event) => {
+      slider.set([null, event.currentTarget.value])
+    })
+  }
+
+  disconnect() {
+    if (this.sliderTarget.noUiSlider) {
+      this.sliderTarget.noUiSlider.destroy()
+    }
+  }
+}

data/app/javascript/spree/storefront/controllers/pdp_desktop_gallery_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+import Swiper from 'swiper/bundle'
+
+export default class extends Controller {
+  static targets = ['imagesSlider', 'imagesSliderPagination', 'imagesThumbsSlider', 'prevArrow', 'nextArrow']
+  connect() {
+    const thumbsSwiper = new Swiper(this.imagesThumbsSliderTarget, {
+      spaceBetween: 4,
+      direction: 'vertical',
+      slidesPerView: 'auto',
+      freeMode: { enabled: true, sticky: true },
+      watchSlidesProgress: true,
+      watchOverflow: true
+    })
+    new Swiper(this.imagesSliderTarget, {
+      slidesPerView: 1,
+      pagination: {
+        el: this.hasImagesSliderPaginationTarget ? this.imagesSliderPaginationTarget : undefined
+      },
+      thumbs: { swiper: thumbsSwiper, autoScrollOffset: 2 },
+      watchOverflow: true,
+      navigation: {
+        prevEl: this.prevArrowTarget,
+        nextEl: this.nextArrowTarget
+      }
+    })
+  }
+}

data/app/javascript/spree/storefront/controllers/plp_variant_picker_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['featuredImageContainer', 'colorsContainer', 'priceContainer', 'link', 'addToWishlist']
+  connect() {
+    this.canPreview = false
+    this.resetSelectedValues()
+    if (this.hasColorsContainerTarget && this.hasFeaturedImageContainerTarget) {
+      this.saveOriginalPreview()
+      this.setFeaturedImageHeight() // Set the height of the featured image container to prevent layout shift
+      this.colorsContainerTarget.addEventListener('mouseleave', this.restoreOriginalPreview)
+    }
+  }
+
+  disconnect() {
+    this.canPreview = false
+    this.resetSelectedValues()
+    if (this.hasColorsContainerTarget && this.hasFeaturedImageContainerTarget) {
+      this.restoreOriginalPreview()
+      this.colorsContainerTarget.removeEventListener('mouseleave', this.restoreOriginalPreview)
+    }
+  }
+
+  resetSelectedValues() {
+    this.selectedVariantFeaturedImageHTML = null
+    this.selectedVariantPriceHTML = null
+    this.selectedAddToWishlistHTML = null
+  }
+
+  showMoreColors(e) {
+    e.preventDefault()
+
+    const colors = [...this.colorsContainerTarget.children]
+    colors.forEach((child) => {
+      child.style.display = 'flex'
+    })
+
+    e.target.style.display = 'none'
+  }
+
+  redirectToVariant(e) {
+    const el = e.target.closest('[data-variant-id]')
+    const url = new URL(this.linkTarget.href)
+    url.searchParams.set('variant_id', el.dataset.variantId)
+    Turbo.visit(url)
+  }
+
+  handlePreview(e) {
+    if (window.matchMedia('(pointer: coarse)').matches) return
+
+    this.preview(e.target)
+  }
+
+  preview(target) {
+    if (!this.canPreview) return
+
+    const featuredImageTemplate = target.querySelector('template[data-featured-image-template]')
+
+    if (featuredImageTemplate) {
+      this.setFeaturedImageHTML(featuredImageTemplate.innerHTML)
+    } else {
+      this.restoreOriginalImage()
+    }
+
+    const priceTemplate = target.querySelector('template[data-price-template]')
+    if (priceTemplate) {
+      this.setPriceHTML(priceTemplate.innerHTML)
+    } else {
+      this.restoreOriginalPrice()
+    }
+
+    const addToWishlistTemplate = target.querySelector('template[data-add-to-wishlist-template]')
+    if (addToWishlistTemplate) {
+      this.setAddToWishlistHTML(addToWishlistTemplate.innerHTML)
+    } else {
+      this.restoreOriginalAddToWishlist()
+    }
+  }
+
+  saveOriginalPreview() {
+    this.originalFeaturedImageHTML = this.featuredImageContainerTarget.innerHTML
+    this.originalPriceHTML = this.priceContainerTarget.innerHTML
+    this.originalAddToWishlistHTML = this.addToWishlistTarget.innerHTML
+  }
+
+  restoreOriginalPreview = () => {
+    if (this.selectedVariantFeaturedImageHTML) {
+      this.setFeaturedImageHTML(this.selectedVariantFeaturedImageHTML)
+    } else {
+      this.restoreOriginalImage()
+    }
+    if (this.selectedVariantPriceHTML) {
+      this.setPriceHTML(this.selectedVariantPriceHTML)
+    } else {
+      this.restoreOriginalPrice()
+    }
+    if (this.selectedAddToWishlistHTML) {
+      this.setAddToWishlistHTML(this.selectedAddToWishlistHTML)
+    } else {
+      this.restoreOriginalAddToWishlist()
+    }
+  }
+
+  restoreOriginalImage() {
+    this.setFeaturedImageHTML(this.originalFeaturedImageHTML)
+  }
+
+  restoreOriginalPrice() {
+    this.setPriceHTML(this.originalPriceHTML)
+  }
+
+  restoreOriginalAddToWishlist() {
+    this.setAddToWishlistHTML(this.originalAddToWishlistHTML)
+  }
+
+  setPriceHTML(html) {
+    if (this.priceContainerTarget.innerHTML !== html) {
+      this.priceContainerTarget.innerHTML = html
+    }
+  }
+
+  setFeaturedImageHTML(html) {
+    if (this.featuredImageContainerTarget.innerHTML !== html) {
+      this.featuredImageContainerTarget.innerHTML = html
+    }
+  }
+
+  setAddToWishlistHTML(html) {
+    if (this.addToWishlistTarget.innerHTML !== html) {
+      this.addToWishlistTarget.innerHTML = html
+    }
+  }
+
+  setFeaturedImageHeight() {
+    const featuredImage = this.featuredImageContainerTarget.querySelector('img')
+    if (featuredImage) {
+      if (featuredImage.complete) {
+        this.featuredImageContainerTarget.style.height = `${this.featuredImageContainerTarget.offsetHeight}px`
+        this.canPreview = true
+      } else {
+        featuredImage.onload = () => {
+          this.featuredImageContainerTarget.style.height = `${this.featuredImageContainerTarget.offsetHeight}px`
+          // Disable preview if the image is not loaded - this prevents layout shift
+          this.canPreview = true
+        }
+      }
+    } else {
+      this.canPreview = true
+    }
+  }
+}