3dealer/resources/js/stimulus/product-form-controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
    static targets = ['price', 'image', 'swatch', 'colorName']
    static values  = { variants: Array, selected: Number }

    connect() {
        const params    = new URLSearchParams(window.location.search)
        const urlId     = parseInt(params.get('variant'))
        const defaultId = this.variantsValue[0]?.id

        this.selectedValue = urlId && this.variantsValue.find(v => v.id === urlId)
            ? urlId
            : defaultId
    }

    selectVariant(event) {
        const id = parseInt(event.currentTarget.dataset.variantId)
        this.selectedValue = id

        const url = new URL(window.location)
        url.searchParams.set('variant', id)
        window.history.pushState({}, '', url)
    }

    selectedValueChanged(id) {
        if (!id) return

        const variant = this.variantsValue.find(v => v.id === id)
        if (!variant) return

        if (this.hasPriceTarget && variant.price !== null) {
            this.priceTarget.textContent = '€' + parseFloat(variant.price).toFixed(2)
        }

        if (this.hasImageTarget && variant.image) {
            this.imageTarget.src = variant.image
        }

        this.swatchTargets.forEach(swatch => {
            const isSelected = parseInt(swatch.dataset.variantId) === id
            swatch.classList.toggle('is-selected', isSelected)
            swatch.setAttribute('aria-pressed', String(isSelected))

            if (isSelected && this.hasColorNameTarget) {
                this.colorNameTarget.textContent = swatch.getAttribute('aria-label')
            }
        })
    }
}