const BlurValidator = (() => { const _validators = []; function register(name, { match, test, message, priority = 10 }) { _validators.push({ name, match, test, message, priority }); _validators.sort((a, b) => a.priority - b.priority); } function _getValidators(field) { return _validators.filter(v => v.match(field)); } function validate(field) { for (const v of _getValidators(field)) { if (!v.test(field.value, field)) { return { valid: false, message: typeof v.message === 'function' ? v.message(field) : v.message }; } } return { valid: true, message: '' }; } function showError(field, message) { field.classList.add('error'); let el = field.parentElement?.querySelector('[data-blur-error]'); if (!el) { el = document.createElement('div'); el.setAttribute('data-blur-error', ''); el.classList.add('error-message'); el.style.color = 'red'; field.insertAdjacentElement('afterend', el); } el.textContent = message; } function clearError(field) { field.classList.remove('error'); field.parentElement?.querySelector('[data-blur-error]')?.remove(); } function _isVisible(field) { return !field.closest('.hidden_field'); } function _onBlur(field) { if (!_isVisible(field)) return; const result = validate(field); result.valid ? clearError(field) : showError(field, result.message); } function init(selector = '[aria-required="true"], .required', scope = document) { scope.querySelectorAll(selector).forEach(field => { if (field.dataset.blurValidatorInit) return; field.dataset.blurValidatorInit = 'true'; field.addEventListener('blur', () => _onBlur(field)); field.addEventListener('input', () => clearError(field)); }); } return { register, init, validate, showError, clearError }; })(); BlurValidator.register('required', { priority: 1, match: (field) => field.getAttribute('aria-required') === 'true' || field.classList.contains('required'), test: (value) => value.trim() !== '', message: 'This field is required.' }); BlurValidator.register('email', { priority: 2, match: (field) => field.type === 'email', test: (value) => value === '' || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), message: 'Please enter a valid email address.' }); BlurValidator.register('phone', { priority: 2, match: (field) => field.closest('.phone_div') != null && field.type === 'number', test: (value) => value === '' || /^\d{10}$/.test(value), message: 'Please enter a valid phone number.' }); // --- SKU VALIDATION RULE --- BlurValidator.register('sku_strict', { priority: 0, // Highest priority check match: (field) => field.name === "Product SKU or Product Name Dropdown" || field.id === 'form_input_10', test: (value, field) => { // Must have a valid selection from dropdown if (!skuAutoComplete.validated || !skuAutoComplete.selectedSku) { return false; } // The field value must match the selected SKU exactly if (value.trim() !== skuAutoComplete.selectedSku) { return false; } return true; }, message: 'Please select a valid product from the dropdown list.' }); // -------------------------------------------------- window.addEventListener('message', function(event) { if((event.data.form_name == "prefillForm")){ var customerData = event.data; $("#first_name").val(customerData.firstName).attr('readonly', true); $("#last_name").val(customerData.lastName).attr('readonly', true); $("#email").val(customerData.email).attr('readonly', true); } }, false); function setFormAttributes() { const attributes = [ { selector: '#form_input_0', attributes: { maxlength: '40' } }, { selector: '#form_input_1', attributes: { maxlength: '80' } }, { selector: 'input[name="Phone"]', attributes: { maxlength: '15' } }, { selector: '#form_input_3', attributes: { maxlength: '80' } }, { selector: '#form_input_4', attributes: { maxlength: '100' } }, { selector: 'input[name="Address line 1"]', attributes: { maxlength: '255' } }, { selector: 'input[name="Address line 2"]', attributes: { maxlength: '255' } }, { selector: 'input[name="City"]', attributes: { maxlength: '40' } }, { selector: 'input[name="Province"]', attributes: { maxlength: '80' } }, { selector: 'input[name="Zip code"]', attributes: { maxlength: '20' } }, { selector: 'select[name="Product SKU or Product Name Dropdown"]', attributes: { } }, { selector: 'input[name="Product Name"]', attributes: { maxlength: '4000' } }, { selector: '#form_input_11', attributes: { min: '0', max: '10' } }, { selector: 'input[name="Place of Purchase"]', attributes: { maxlength: '50' } }, { selector: 'input[name="Installed By"]', attributes: { maxlength: '50' } } ]; attributes.forEach(({ selector, attributes }) => { const element = document.querySelector(selector); if (element) { Object.entries(attributes).forEach(([key, value]) => { element.setAttribute(key, value); }); } }); } function replaceCountryField() { const countryField = document.querySelector('[name="Country"]'); if (countryField) { const newCountryField = document.createElement("input"); newCountryField.type = "text"; newCountryField.id = "displayedCountry"; newCountryField.value = "United States"; newCountryField.readOnly = true; newCountryField.classList.add("form-control"); newCountryField.classList.add("required"); newCountryField.setAttribute("name", "Displayed Country"); countryField.replaceWith(newCountryField); const countryFieldHidden = document.createElement("input"); countryFieldHidden.type = "text"; countryFieldHidden.id = "country"; countryFieldHidden.value = "United States"; countryFieldHidden.readOnly = true; countryFieldHidden.classList.add("form-control"); countryFieldHidden.classList.add("required"); countryFieldHidden.style.display = "none"; countryFieldHidden.setAttribute("name", "Country"); newCountryField.insertAdjacentElement('afterend', countryFieldHidden); } } function replaceProvinceField() { const provinceField = document.querySelector('[name="Province"]'); if (provinceField) { const states = [ { name: "Alabama", code: "AL" }, { name: "Alaska", code: "AK" }, { name: "Arizona", code: "AZ" }, { name: "Arkansas", code: "AR" }, { name: "California", code: "CA" }, { name: "Colorado", code: "CO" }, { name: "Connecticut", code: "CT" }, { name: "Delaware", code: "DE" }, { name: "Florida", code: "FL" }, { name: "Georgia", code: "GA" }, { name: "Hawaii", code: "HI" }, { name: "Idaho", code: "ID" }, { name: "Illinois", code: "IL" }, { name: "Indiana", code: "IN" }, { name: "Iowa", code: "IA" }, { name: "Kansas", code: "KS" }, { name: "Kentucky", code: "KY" }, { name: "Louisiana", code: "LA" }, { name: "Maine", code: "ME" }, { name: "Maryland", code: "MD" }, { name: "Massachusetts", code: "MA" }, { name: "Michigan", code: "MI" }, { name: "Minnesota", code: "MN" }, { name: "Mississippi", code: "MS" }, { name: "Missouri", code: "MO" }, { name: "Montana", code: "MT" }, { name: "Nebraska", code: "NE" }, { name: "Nevada", code: "NV" }, { name: "New Hampshire", code: "NH" }, { name: "New Jersey", code: "NJ" }, { name: "New Mexico", code: "NM" }, { name: "New York", code: "NY" }, { name: "North Carolina", code: "NC" }, { name: "North Dakota", code: "ND" }, { name: "Ohio", code: "OH" }, { name: "Oklahoma", code: "OK" }, { name: "Oregon", code: "OR" }, { name: "Pennsylvania", code: "PA" }, { name: "Rhode Island", code: "RI" }, { name: "South Carolina", code: "SC" }, { name: "South Dakota", code: "SD" }, { name: "Tennessee", code: "TN" }, { name: "Texas", code: "TX" }, { name: "Utah", code: "UT" }, { name: "Vermont", code: "VT" }, { name: "Virginia", code: "VA" }, { name: "Washington", code: "WA" }, { name: "Washington DC", code: "DC" }, { name: "West Virginia", code: "WV" }, { name: "Wisconsin", code: "WI" }, { name: "Wyoming", code: "WY" } ]; const newProvinceField = document.createElement("select"); newProvinceField.id = "province"; states.forEach(state => { const option = document.createElement("option"); option.value = state.code; option.textContent = state.name; newProvinceField.appendChild(option); }); newProvinceField.classList.add("form-control"); newProvinceField.classList.add("required"); newProvinceField.setAttribute("name", "Province"); provinceField.replaceWith(newProvinceField); const labelElement = document.querySelector('label[for="address_province"]'); if (labelElement) { labelElement.textContent = "State"; } } } function disableLabelTabbing() { document.querySelectorAll('#formGeneratorForm label').forEach((label) => { label.setAttribute('tabindex', '-1'); }); } function phoneNumberLimit () { const phoneNumberInput = document.querySelector('#formGeneratorForm input[name="Phone"]'); if (!phoneNumberInput) return; phoneNumberInput.addEventListener("input", function (e) { const maxLength = 15; e.target.value = e.target.value.slice(0, maxLength); }); } function normalizeCountryCode(countryCode) { const countryMap = { 'United States': 'US', 'Canada': 'CA', 'Mexico': 'MX' }; return countryMap[countryCode] || countryCode; } function emitAddressValidationEvent() { const { addressInput, addressInput2, cityInput, provinceInput, zipInput, countryInput } = getFormAddressFields(); const addressInfo = { streetLines: [addressInput?.value.trim() || '', addressInput2?.value.trim() || ''], city: cityInput?.value.trim() || '', stateOrProvinceCode: provinceInput?.value || '', postalCode: zipInput?.value.trim() || '', countryCode: normalizeCountryCode(countryInput?.value || 'United States') }; window.parent.postMessage({ type: 'addressUpdate', data: addressInfo }, '*'); } function validationAddress() { const { addressInput, addressInput2, cityInput, provinceInput, zipInput, countryInput } = getFormAddressFields(); function handleAddressValidation() { if (!addressFormStatus.validateOnNextFocusOut) return; addressFormStatus.validateOnNextFocusOut = false; const addressInfo = { streetLines: [addressInput?.value.trim() || '', addressInput2?.value.trim() || ''], city: cityInput?.value.trim() || '', stateOrProvinceCode: provinceInput?.value || '', postalCode: zipInput?.value.trim() || '', countryCode: normalizeCountryCode(countryInput?.value || 'United States') }; if (addressInfo.streetLines[0] && addressInfo.city && addressInfo.postalCode && addressInfo.stateOrProvinceCode) { window.parent.postMessage({ type: 'addressUpdate', data: addressInfo }, '*'); } } function updateFormStatus() { addressFormStatus.validated = false; addressFormStatus.validateOnNextFocusOut = true; } addressInput?.addEventListener('input', updateFormStatus); addressInput2?.addEventListener('input', updateFormStatus); cityInput?.addEventListener('input', updateFormStatus); zipInput?.addEventListener('input', updateFormStatus); addressInput?.addEventListener('focusout', handleAddressValidation); addressInput2?.addEventListener('focusout', handleAddressValidation); cityInput?.addEventListener('focusout', handleAddressValidation); zipInput?.addEventListener('focusout', handleAddressValidation); provinceInput?.addEventListener('change', () => { updateFormStatus(); handleAddressValidation(); }); countryInput?.addEventListener('change', () => { updateFormStatus(); handleAddressValidation(); }); } function listenToAddressValidationEvents() { window.addEventListener('message', function (event) { const { type, data } = event.data; const events = getEvents(); events[type]?.(data); }); } function getEvents() { return { "disableForm": handleDisableForm, "enableForm": handleEnableForm, "addressValidated": handleAddressValidated } } function handleDisableForm() { const form = document.querySelector('form'); Array.from(form.elements).forEach((element) => { element.disabled = true; }); } function handleEnableForm() { const form = document.querySelector('form'); Array.from(form.elements).forEach((element) => { element.disabled = false; }); } function handleAddressValidated(data) { const { addressInput, addressInput2, cityInput, provinceInput, zipInput, countryInput } = getFormAddressFields(); addressInput.value = data.streetLinesToken[0]; addressInput2.value = data.streetLinesToken[1] || ''; cityInput.value = data.city; provinceInput.value = data.stateOrProvinceCode; zipInput.value = data.postalCode; countryInput.value = data.countryCode || 'United States'; addressFormStatus.validated = true; addressFormStatus.validateOnNextFocusOut = false; } const addressFormStatus = { validated: false } const skuAutoComplete = { validated: false, selectedSku: null } function getFormAddressFields() { return { addressInput: document.querySelector('[name="Address line 1"]'), addressInput2: document.querySelector('[name="Address line 2"]'), cityInput: document.querySelector('[name="City"]'), provinceInput: document.querySelector('[name="Province"]'), zipInput: document.querySelector('[name="Zip code"]'), countryInput: document.querySelector('[name="Country"]') } } function addSubmitButtonCustomAction() { const buttonSubmit = document.querySelector('.form_submit_div button'); buttonSubmit.addEventListener('click', (e) => { const productField = document.querySelector('select[name="Product SKU or Product Name Dropdown"]') || document.querySelector('#form_input_10'); const productVisibleField = document.querySelector('#product_sku_search_input') || productField; // --- CRITICAL: STRICT SKU VALIDATION BEFORE SUBMISSION --- // 1. Must have validated flag set if (!skuAutoComplete.validated) { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // 2. Must have selected SKU stored if (!skuAutoComplete.selectedSku) { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // 3. Field value must match selected SKU (prevents manual edits post-selection) if (productField.value.trim() !== skuAutoComplete.selectedSku) { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // 4. Field cannot be empty if (!productField.value || productField.value.trim() === '') { e.preventDefault(); e.stopPropagation(); BlurValidator.showError(productVisibleField, 'Please select a product from the dropdown list.'); productVisibleField.scrollIntoView({ behavior: 'smooth', block: "center" }); productVisibleField.focus(); return; } // --------------------------------------------------------- const validations = [ { validated: addressFormStatus.validated, onError: () => { emitAddressValidationEvent(); const { addressInput } = getFormAddressFields(); addressInput.scrollIntoView({ behavior: 'smooth', block: "center" }); }, } ]; validations.some(({ validated, onError }) => { if (!validated) { e.preventDefault(); e.stopPropagation(); onError(); return true; } return false; }); }) } function initSkuDropdown() { const productField = document.querySelector('select[name="Product SKU or Product Name Dropdown"]') || document.querySelector('#form_input_10'); if (!productField) return; const productnameField = document.querySelector('input[name="Product Name"]') const searchInputId = 'product_sku_search_input'; const suggestionListId = 'product_sku_suggestion_list'; const suggestionItemClass = 'product-sku-suggestion-item'; let searchDebounceTimer = null; let activeSearchRequestId = 0; let productsByDisplayText = new Map(); let suppressSearchReset = false; let currentSuggestions = []; productField.classList.add('product-sku-select-hidden'); productField.setAttribute('tabindex', '-1'); productField.setAttribute('aria-hidden', 'true'); const productFieldContainer = productField.parentElement; if (productFieldContainer && getComputedStyle(productFieldContainer).position === 'static') { productFieldContainer.style.position = 'relative'; } function getOrCreateSearchInput() { let searchInput = document.querySelector(`#${searchInputId}`); if (searchInput) return searchInput; searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.id = searchInputId; searchInput.className = 'form-control product-sku-search'; searchInput.placeholder = 'Type to search by product name or model number'; searchInput.setAttribute('autocomplete', 'off'); searchInput.setAttribute('aria-label', 'Search product for dropdown'); productField.insertAdjacentElement('beforebegin', searchInput); return searchInput; } function getOrCreateSuggestionList() { let suggestionList = document.querySelector(`#${suggestionListId}`); if (suggestionList) return suggestionList; suggestionList = document.createElement('ul'); suggestionList.id = suggestionListId; suggestionList.className = 'product-sku-suggestion-list'; suggestionList.hidden = true; productField.insertAdjacentElement('beforebegin', suggestionList); return suggestionList; } const searchInput = getOrCreateSearchInput(); const suggestionList = getOrCreateSuggestionList(); function hideSuggestionList() { suggestionList.hidden = true; suggestionList.innerHTML = ''; currentSuggestions = []; } function showLoadingSuggestions() { suggestionList.innerHTML = ''; const loadingItem = document.createElement('li'); loadingItem.className = 'product-sku-suggestion-item product-sku-suggestion-item--loading'; loadingItem.setAttribute('aria-disabled', 'true'); loadingItem.innerHTML = ` Loading results... `; suggestionList.appendChild(loadingItem); suggestionList.hidden = false; } function renderSuggestionList(products) { currentSuggestions = products; suggestionList.innerHTML = ''; if (!products.length) { const noResults = document.createElement('li'); noResults.className = suggestionItemClass; noResults.textContent = 'No results found'; noResults.setAttribute('aria-disabled', 'true'); suggestionList.appendChild(noResults); suggestionList.hidden = false; return; } products.slice(0, 20).forEach((item, index) => { const option = document.createElement('li'); option.className = suggestionItemClass; option.setAttribute('role', 'option'); option.setAttribute('aria-selected', 'false'); option.dataset.displayText = item.displayText; option.dataset.sku = item.sku; option.dataset.title = item.title || ''; option.textContent = item.displayText; option.addEventListener('pointerdown', (event) => { event.preventDefault(); event.stopPropagation(); activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); selectProduct({ sku: item.sku, title: item.title || '' }); searchInput.value = item.displayText; BlurValidator.clearError(searchInput); hideSuggestionList(); }); option.addEventListener('mouseenter', () => { suggestionList.querySelectorAll('[aria-selected="true"]').forEach((selected) => { selected.setAttribute('aria-selected', 'false'); }); option.setAttribute('aria-selected', 'true'); }); suggestionList.appendChild(option); }); suggestionList.hidden = false; } function selectProduct({ sku, title }) { productField.value = sku; if (productnameField) productnameField.value = title; skuAutoComplete.validated = true; skuAutoComplete.selectedSku = sku; BlurValidator.clearError(productField); } function resetDropdownOptions(placeholderText = 'Please Select') { productField.innerHTML = ''; hideSuggestionList(); productsByDisplayText = new Map(); const placeholder = document.createElement('option'); placeholder.value = ''; placeholder.textContent = placeholderText; productField.appendChild(placeholder); } function addProductOptions(products) { const added = new Set(); products.forEach(({ displayText, sku, title }) => { const normalizedSku = (sku || '').trim(); if (!normalizedSku || added.has(normalizedSku)) return; const option = document.createElement('option'); option.value = normalizedSku; option.textContent = displayText; option.dataset.productTitle = title || ''; productField.appendChild(option); productsByDisplayText.set(displayText, { sku: normalizedSku, title: title || '', displayText }); added.add(normalizedSku); }); } function applySelectionFromInput() { const typedValue = (searchInput.value || '').trim(); if (!typedValue) return false; const directMatch = productsByDisplayText.get(typedValue); if (directMatch) { activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); selectProduct({ sku: directMatch.sku, title: directMatch.title }); BlurValidator.clearError(searchInput); return true; } const caseInsensitiveMatch = Array.from(productsByDisplayText.values()).find( (item) => item.displayText.toLowerCase() === typedValue.toLowerCase() ); if (caseInsensitiveMatch) { activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); selectProduct({ sku: caseInsensitiveMatch.sku, title: caseInsensitiveMatch.title }); searchInput.value = caseInsensitiveMatch.displayText; BlurValidator.clearError(searchInput); return true; } return false; } async function populateProductDropdown() { const requestId = activeSearchRequestId; if (requestId === 0) return; resetDropdownOptions('Loading products...'); skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; if ((searchInput.value || '').trim().length > 0) { showLoadingSuggestions(); } else { hideSuggestionList(); } try { const products = await getProducts(searchInput.value || ''); if (requestId !== activeSearchRequestId) return; resetDropdownOptions('Please Select'); if (!products.length) { if ((searchInput.value || '').trim().length > 0) { renderSuggestionList([]); } else { hideSuggestionList(); } return; } addProductOptions(products); const inputValue = (searchInput.value || '').trim().toLowerCase(); const suggestions = products.filter((item) => { if (!inputValue) return true; return item.displayText.toLowerCase().includes(inputValue); }); if (inputValue.length > 0) { renderSuggestionList(suggestions); } else { hideSuggestionList(); } } catch (error) { resetDropdownOptions('Please Select'); hideSuggestionList(); } Array.from(productField.options).forEach((option) => { if (option.value && option.value.trim().toLowerCase() === 'test') option.remove(); }); } activeSearchRequestId += 1; populateProductDropdown(); searchInput.addEventListener('input', () => { if (suppressSearchReset) return; skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; productField.value = ''; if (productnameField) productnameField.value = ''; BlurValidator.clearError(productField); BlurValidator.clearError(searchInput); activeSearchRequestId += 1; clearTimeout(searchDebounceTimer); searchDebounceTimer = setTimeout(() => { populateProductDropdown(); }, 300); }); searchInput.addEventListener('change', () => { if (!applySelectionFromInput()) { skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; productField.value = ''; if (productnameField) productnameField.value = ''; } }); searchInput.addEventListener('blur', () => { setTimeout(() => { if (document.activeElement === suggestionList || suggestionList.contains(document.activeElement)) return; const hasSelection = applySelectionFromInput(); if (!hasSelection) { BlurValidator.showError(searchInput, 'Please select a product from the dropdown list.'); hideSuggestionList(); return; } hideSuggestionList(); }, 120); }); searchInput.addEventListener('focus', () => { if ((searchInput.value || '').trim().length === 0) hideSuggestionList(); }); searchInput.addEventListener('keydown', (event) => { if (event.key === 'Escape') { hideSuggestionList(); return; } if (event.key === 'Enter') { const matched = applySelectionFromInput(); if (matched) { hideSuggestionList(); } } }); productField.addEventListener('change', () => { const selectedOption = productField.options[productField.selectedIndex]; if (!selectedOption || !selectedOption.value) { skuAutoComplete.validated = false; skuAutoComplete.selectedSku = null; if (productnameField) productnameField.value = ''; BlurValidator.showError(productField, 'Please select a product from the dropdown list.'); return; } suppressSearchReset = true; selectProduct({ sku: selectedOption.value, title: selectedOption.dataset.productTitle || '' }); searchInput.value = selectedOption.textContent || ''; suppressSearchReset = false; }); } async function getProducts(productQuery) { const endpoint = 'https://american-standard-production.myshopify.com/api/2023-07/graphql.json'; const headers = { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': 'b3593e90acc9d4213f7f69735c9d8c77' }; const allProducts = []; let afterCursor = null; let hasNextPage = true; let pageCount = 0; const maxPages = 20; while (hasNextPage && pageCount < maxPages) { const query = getSearchProductsQuery(productQuery, afterCursor); const response = await fetch(endpoint, { method: 'POST', headers, body: JSON.stringify({ query }) }); if (!response.ok) break; const data = await response.json(); const productsConnection = data?.data?.products; if (!productsConnection?.edges) break; allProducts.push(...productsConnection.edges); hasNextPage = Boolean(productsConnection.pageInfo?.hasNextPage); afterCursor = productsConnection.pageInfo?.endCursor || null; pageCount += 1; } return allProducts.flatMap(({ node: product }) => (product.variants?.edges || []).map(({ node: variant }) => { const optionsText = (variant.selectedOptions || []).map(({ value }) => value).join(' '); return { displayText: `${product.title} ${variant.title} ${optionsText}, ${variant.sku}`, sku: variant.sku, title: product.title, }; }) ); } function getSearchProductsQuery(productQuery, afterCursor = null) { const escapedQuery = String(productQuery || '').replace(/"/g, '\\"'); const queryFilter = escapedQuery.trim().length > 0 ? `, query: "${escapedQuery}"` : ''; const afterFilter = afterCursor ? `, after: \"${afterCursor}\"` : ''; return `query getProducts { products(first: 250${queryFilter}${afterFilter}) { pageInfo { hasNextPage endCursor } edges { node { title variants(first: 250) { edges { node { sku title selectedOptions { name value } } } } } } } }` } function addDropzoneConfigs() { const dz = Dropzone.forElement(".dropzone"); if(!dz) return; dz.options.acceptedFiles = "image/*,application/pdf"; document.querySelectorAll(".dz-hidden-input").forEach((input) => { input.setAttribute("accept", dz.options.acceptedFiles); }); } function addPurchaseDateListener() { const $purchaseInput = $('input[name="Purchase Date"]'); const $installationInput = $('input[name="Date of Installation"]'); $purchaseInput.on('dp.change', function (event) { const purchaseDate = event.date; $installationInput?.data('DateTimePicker')?.minDate(purchaseDate); }); } function setWebUrl(href) { const url = new URL(href); const hostname = url.hostname; const path = url.pathname.toLowerCase(); let language = "EN"; if (hostname.includes("americanstandard.ca")) { language = path.startsWith("/fr") ? "FR" : "EN"; } else if (hostname.includes("americanstandard.mx")) { language = path.startsWith("/en") ? "EN" : "ES"; } else if (hostname.includes("americanstandard-us.com")) { language = "EN"; } const webUrlInput = document.querySelector('input[name="Web URL"]'); if (webUrlInput) webUrlInput.value = hostname; const languageInput = document.querySelector('input[name="Language"]'); if (languageInput) languageInput.value = language; } function getParentHref() { window.addEventListener('message', (event) => { if (event.data.type === 'parentHref') { setWebUrl(event.data.href); } }); window.parent.postMessage({ type: 'requestHref' }, '*'); } function changeTermsAndConditionsText() { const termsAndConditions = document.querySelector('#terms_conditions')?.closest('label'); if (termsAndConditions) { const span = termsAndConditions.querySelector('#terms_conditions'); termsAndConditions.innerHTML = ''; termsAndConditions.appendChild(span); termsAndConditions.insertAdjacentHTML('beforeend', ` I have read and agree to the Terms and Conditions and Privacy Policy. `); } } document.addEventListener('DOMContentLoaded', function () {// Add CSS styling for autocomplete suggestions const styleEl = document.createElement('style'); styleEl.textContent = ` input.error { border-color: #dc3545 !important; } select.error { border-color: #dc3545 !important; } .product-sku-search { margin-bottom: 8px; position: relative; background: #fff; border: 1px solid #c9c9c9; border-radius: 0; box-shadow: none; color: #111; } .product-sku-select-hidden { display: none !important; } .product-sku-suggestion-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10000; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #d0d0d0; border-radius: 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); max-height: 280px; overflow-y: auto; } .product-sku-suggestion-item { padding: 12px 14px; color: #111; font-size: 14px; line-height: 1.35; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #eee; } .product-sku-suggestion-item:hover, .product-sku-suggestion-item[aria-selected="true"] { background: #f3f3f3; } .product-sku-suggestion-item[aria-disabled="true"] { color: #777; cursor: default; } .product-sku-suggestion-item--loading { display: flex; align-items: center; gap: 10px; justify-content: flex-start; } .product-sku-loading-dot { width: 10px; height: 10px; border-radius: 999px; background: #111; opacity: 0.2; animation: productSkuPulse 1s ease-in-out infinite; } @keyframes productSkuPulse { 0%, 100% { transform: scale(0.75); opacity: 0.2; } 50% { transform: scale(1.1); opacity: 0.8; } } .error-message { color: #dc3545; font-size: 12px; margin-top: 5px; } `; document.head.appendChild(styleEl); replaceCountryField(); replaceProvinceField(); setFormAttributes(); disableLabelTabbing(); changeTermsAndConditionsText(); phoneNumberLimit(); validationAddress(); addSubmitButtonCustomAction(); listenToAddressValidationEvents(); initSkuDropdown(); addDropzoneConfigs(); addPurchaseDateListener(); getParentHref(); BlurValidator.init(); document.querySelectorAll('label').forEach(label => { if (label.textContent.includes('*')) { const text = label.textContent.replace('*', '').trim(); label.innerHTML = `${text} `; } }); });

Handle Kit

Handle Kit

Validate this Address

Compared products