document.addEventListener('DOMContentLoaded', function() { // console.log('Custom Helmet Form Script Loaded'); // For debugging // Function to check for captcha redirect success (may need adjustment or removal for non-Shopify) function checkCaptchaSuccess() { const urlParams = new URLSearchParams(window.location.search); // The Shopify-specific 'contact_posted' check might not be relevant. // You might need a different way to detect a successful submission if your forms app redirects. const contactPosted = urlParams.has('contact_posted') && urlParams.get('contact_posted') === 'true'; if (contactPosted) { // This condition might need to change const captchaSuccessDiv = document.getElementById('captcha-success'); // Assumes you keep this div const formPostedSuccessDiv = document.getElementById('form-posted-success'); // General success div if (captchaSuccessDiv) captchaSuccessDiv.style.display = 'block'; if (formPostedSuccessDiv) formPostedSuccessDiv.style.display = 'block'; // Show general success window.scrollTo(0, 0); // console.log('Showing success message based on URL params.'); // Clean up URL (this part is generally useful) setTimeout(() => { const cleanUrl = window.location.pathname; // Or current page without query params window.history.replaceState({}, document.title, cleanUrl); }, 3000); } } checkCaptchaSuccess(); // Call it, but be aware of its potential Shopify-dependency const form = document.getElementById('CustomHelmetForm'); if (!form) { // console.error('Form not found! Check if ID "CustomHelmetForm" exists'); return; } const nameInput = document.getElementById('CustomHelmetForm-Name'); const emailInput = document.getElementById('CustomHelmetForm-Email'); const modelSelect = document.getElementById('CustomHelmetForm-Model'); const sizeSelect = document.getElementById('CustomHelmetForm-Size'); const shellColorInput = document.getElementById('CustomHelmetForm-ShellColor'); const facemaskStyleSelect = document.getElementById('CustomHelmetForm-FacemaskStyle'); const facemaskColorSelect = document.getElementById('CustomHelmetForm-FacemaskColor'); const kitColorSelect = document.getElementById('CustomHelmetForm-KitColor'); const notesTextarea = document.getElementById('CustomHelmetForm-Notes'); const submitSection = document.getElementById('submit-section'); // Changed from submitButton to submit-section const helmetSpecificationsInput = document.getElementById('helmet-specifications'); // Status message elements const modelStatus = document.getElementById('model-status'); const sizeStatus = document.getElementById('size-status'); const shellColorStatus = document.getElementById('shell-color-status'); const facemaskStyleStatus = document.getElementById('facemask-style-status'); const facemaskColorStatus = document.getElementById('facemask-color-status'); const kitColorStatus = document.getElementById('kit-color-status'); const notesStatus = document.getElementById('notes-status'); const originalSizeOptions = Array.from(sizeSelect.options); const sizeMappings = { youth: ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'], varsityStandard: ['Medium', 'Large', 'X-Large'], varsityTrench: ['Large', 'X-Large'] }; function validateShellColor(value) { return /^SC\d{4}$/.test(value); // SC followed by 4 digits } const standardShellColors = { 'SC2700': 'High Gloss White', 'SC2701': 'High Gloss Black', 'SC2702': 'High Gloss Scarlet', 'SC2704': 'High Gloss Maroon', 'SC2706': 'High Gloss Orange', 'SC2709': 'High Gloss Navy', 'SC2711': 'High Gloss Gold', 'SC2717': 'High Gloss Purple', 'SC2788': 'High Gloss Cardinal', 'SC6066': 'High Gloss True Royal Blue', 'SC7057': 'High Gloss Kelly Green', 'SC7206': 'High Gloss Dark Green', 'SC6000': 'Matte Purple', 'SC6049': 'Matte Dark Green', 'SC5759': 'Matte Kelly Green', 'SC5769': 'Matte True Royal Blue', 'SC7415': 'Matte Black', 'SC7446': 'Matte Navy', 'SC7454': 'Matte Gold', 'SC7462': 'Matte Maroon', 'SC7464': 'Matte Scarlet', 'SC7466': 'Matte White', 'SC7491': 'Matte Cardinal', 'SC7494': 'Matte Orange', 'SC2720': 'Metallic Silver', 'SC2777': 'Metallic Vegas Gold' }; function checkForStandardColor(colorCode) { const noticeDiv = document.getElementById('standard-color-notice'); const restOfFormDiv = document.getElementById('rest-of-form'); const standardColorLink = document.getElementById('standard-color-link'); // Assuming you want to update a link if (standardShellColors[colorCode]) { const colorName = standardShellColors[colorCode]; noticeDiv.querySelector('p').innerHTML = ` Great news! ${colorName} is available in our helmet configurator!
You can customize and order this color directly without needing a special request form.

Go to Helmet Configurator`; if (standardColorLink) standardColorLink.href = "/pages/configurator"; // Example link update noticeDiv.style.display = 'block'; if (restOfFormDiv) restOfFormDiv.style.display = 'none'; } else { noticeDiv.style.display = 'none'; if (restOfFormDiv) restOfFormDiv.style.display = 'block'; } } function updateFieldStatus(element, message, isCompleted = false) { if (element) { if (message === '') { element.style.display = 'none'; } else { element.style.display = 'block'; element.textContent = message; element.className = isCompleted ? 'field-status completed' : 'field-status'; } } } function manageFormFlow() { const nameFilled = nameInput.value.trim() !== ''; const emailValid = emailInput.value.trim() !== '' && emailInput.checkValidity(); const shellColorValid = shellColorInput.value.trim() !== '' && validateShellColor(shellColorInput.value); const modelSelected = modelSelect.value !== ''; const sizeSelected = sizeSelect.value !== ''; const kitColorSelected = kitColorSelect.value !== ''; const facemaskStyleSelected = facemaskStyleSelect.value !== ''; const facemaskColorSelected = facemaskColorSelect.value !== ''; // Step 1: Enable Shell Color const step1Complete = nameFilled && emailValid; shellColorInput.disabled = !step1Complete; updateFieldStatus(shellColorStatus, step1Complete ? '' : 'Complete Name and Email to unlock this field', step1Complete); if (!step1Complete) shellColorInput.value = ''; // Reset if prerequisites not met // Step 2: Enable Model const step2Complete = step1Complete && shellColorValid && !standardShellColors[shellColorInput.value.toUpperCase()]; // Only enable if custom modelSelect.disabled = !step2Complete; updateFieldStatus(modelStatus, step2Complete ? '' : (step1Complete && !shellColorValid ? 'Enter a valid Shell Color to unlock this field' : (step1Complete && standardShellColors[shellColorInput.value.toUpperCase()] ? 'This standard color is not for custom request.' : '')), step2Complete); if (!step2Complete) modelSelect.value = ''; // Step 3: Enable Size const step3Complete = step2Complete && modelSelected; sizeSelect.disabled = !step3Complete; updateFieldStatus(sizeStatus, step3Complete ? '' : (step2Complete ? 'Select a Model to unlock this field' : ''), step3Complete); if (!step3Complete) sizeSelect.value = ''; // Step 4: Enable Kit Color const step4Complete = step3Complete && sizeSelected; kitColorSelect.disabled = !step4Complete; updateFieldStatus(kitColorStatus, step4Complete ? '' : (step3Complete ? 'Select a Size to unlock this field' : ''), step4Complete); if (!step4Complete) kitColorSelect.value = ''; // Step 5: Enable Facemask selections const step5Complete = step4Complete && kitColorSelected; facemaskStyleSelect.disabled = !step5Complete; facemaskColorSelect.disabled = !step5Complete; updateFieldStatus(facemaskStyleStatus, step5Complete ? '' : (step4Complete ? 'Select a Kit Color to unlock facemask selections' : ''), step5Complete); updateFieldStatus(facemaskColorStatus, step5Complete ? '' : (step4Complete ? 'Select a Kit Color to unlock facemask selections' : ''), step5Complete); // Assuming same message if (!step5Complete) { facemaskStyleSelect.value = ''; facemaskColorSelect.value = '';} // Step 6: Enable Notes and Submit const step6Complete = step5Complete && facemaskStyleSelected && facemaskColorSelected; notesTextarea.disabled = !step6Complete; updateFieldStatus(notesStatus, step6Complete ? '' : (step5Complete ? 'Complete all required facemask selections first' : ''), step6Complete); if (submitSection) { // check if submitSection exists submitSection.style.display = step6Complete ? 'block' : 'none'; } // Reset subsequent fields if a step becomes incomplete if (!step1Complete) { modelSelect.value = ''; /* and so on for other fields */ } if (!step2Complete) { sizeSelect.value = ''; /* etc. */ } if (!step3Complete) { kitColorSelect.value = ''; /* etc. */ } if (!step4Complete) { facemaskStyleSelect.value = ''; facemaskColorSelect.value = ''; } if (!step5Complete) { notesTextarea.value = ''; } } function handleShellColorInput() { let value = shellColorInput.value; let originalCursorPos = shellColorInput.selectionStart; let formattedValue = value.toUpperCase(); if (formattedValue.length > 0 && !formattedValue.startsWith('S')) { if (/\d/.test(formattedValue[0])) { // If starts with a digit formattedValue = 'SC' + formattedValue.replace(/[^0-9]/g, ''); } else { // Otherwise, if not starting with S, likely an error or unwanted char formattedValue = ''; // Or just 'S' if you want to be lenient } } else if (formattedValue.startsWith('S') && formattedValue.length > 1 && !formattedValue.startsWith('SC')) { if (formattedValue[1].toUpperCase() === 'C') { formattedValue = 'SC' + formattedValue.slice(2).replace(/[^0-9]/g, ''); } else if (/\d/.test(formattedValue[1])) { // S followed by a number formattedValue = 'SC' + formattedValue.slice(1).replace(/[^0-9]/g, ''); } else { // S followed by something not C and not a number formattedValue = 'S'; // Keep S, wait for C or number } } else if (formattedValue.startsWith('SC')) { formattedValue = 'SC' + formattedValue.slice(2).replace(/[^0-9]/g, ''); } // else if (formattedValue === 'S') // just S is fine, wait for C or number // Ensure it does not exceed maxlength if (formattedValue.length > 6) { formattedValue = formattedValue.slice(0, 6); } shellColorInput.value = formattedValue; // Try to restore cursor position // This is tricky because of potential character additions/removals // For simplicity, if characters were added at the start (like SC), adjust. if (formattedValue.startsWith('SC') && !value.toUpperCase().startsWith('SC') && value.length > 0) { originalCursorPos += (formattedValue.length - value.length); } else if (value.length > formattedValue.length) { // chars were removed originalCursorPos -= (value.length - formattedValue.length); } if(originalCursorPos < 0) originalCursorPos = 0; if(originalCursorPos > formattedValue.length) originalCursorPos = formattedValue.length; try { // Some browsers might complain if field is not focusable shellColorInput.setSelectionRange(originalCursorPos, originalCursorPos); } catch(e) {} shellColorInput.classList.remove('valid', 'invalid'); if (shellColorInput.value !== '') { if (validateShellColor(shellColorInput.value)) { shellColorInput.classList.add('valid'); checkForStandardColor(shellColorInput.value.toUpperCase()); } else { shellColorInput.classList.add('invalid'); document.getElementById('standard-color-notice').style.display = 'none'; const restOfFormDiv = document.getElementById('rest-of-form'); if (restOfFormDiv) restOfFormDiv.style.display = 'block'; // Show form if color is custom but invalid pattern } } else { document.getElementById('standard-color-notice').style.display = 'none'; const restOfFormDiv = document.getElementById('rest-of-form'); if (restOfFormDiv) restOfFormDiv.style.display = 'block'; // Show form if color field is emptied } manageFormFlow(); } function updateSizeOptions() { const selectedModelValue = modelSelect.value; let relevantSizes = []; if (selectedModelValue === '') { relevantSizes = originalSizeOptions.filter(opt => opt.value !== "").map(opt => opt.value); } else if (selectedModelValue.includes('VICIS Youth')) { relevantSizes = sizeMappings.youth; } else if (selectedModelValue.includes('Trench')) { relevantSizes = sizeMappings.varsityTrench; } else if (selectedModelValue.includes('VICIS Varsity')) { relevantSizes = sizeMappings.varsityStandard; } else { // Default to all sizes if no specific mapping (should not happen with current options) relevantSizes = originalSizeOptions.filter(opt => opt.value !== "").map(opt => opt.value); } const previouslySelectedSize = sizeSelect.value; sizeSelect.innerHTML = ''; // Clear existing options const placeholderOption = document.createElement('option'); placeholderOption.value = ""; placeholderOption.textContent = "Select a Size"; placeholderOption.disabled = true; placeholderOption.selected = true; sizeSelect.appendChild(placeholderOption); relevantSizes.forEach(sizeValue => { const option = document.createElement('option'); option.value = sizeValue; option.textContent = sizeValue; sizeSelect.appendChild(option); }); if (relevantSizes.includes(previouslySelectedSize)) { sizeSelect.value = previouslySelectedSize; } else { sizeSelect.value = ""; // Reset if previously selected size is no longer valid } manageFormFlow(); // Update dependent fields } // Attach Event Listeners [nameInput, emailInput, /* shellColorInput is handled separately for its specific logic */ /* modelSelect is handled separately for size updates */ sizeSelect, kitColorSelect, facemaskStyleSelect, facemaskColorSelect, notesTextarea] .forEach(element => { if (element) { // Ensure element exists const eventType = (element.tagName === 'SELECT' || element.tagName === 'TEXTAREA') ? 'change' : 'input'; element.addEventListener(eventType, manageFormFlow); } }); if (shellColorInput) { shellColorInput.addEventListener('input', handleShellColorInput); shellColorInput.addEventListener('blur', handleShellColorInput); // Validate on blur too } if (modelSelect) { modelSelect.addEventListener('change', function() { updateSizeOptions(); // This will then call manageFormFlow }); } // Initial setup updateSizeOptions(); // This also calls manageFormFlow // manageFormFlow(); // Called by updateSizeOptions, so might be redundant here if model has a default // Form submission handler if(form){ form.addEventListener('submit', function(e) { // Basic client-side check before allowing submission attempt if (!(nameInput.value.trim() !== '' && emailInput.value.trim() !== '' && emailInput.checkValidity() && shellColorInput.value.trim() !== '' && validateShellColor(shellColorInput.value) && !standardShellColors[shellColorInput.value.toUpperCase()] && // Ensure it's a custom color modelSelect.value !== '' && sizeSelect.value !== '' && kitColorSelect.value !== '' && facemaskStyleSelect.value !== '' && facemaskColorSelect.value !== '' )) { // console.log('Client-side validation failed. Preventing submission.'); // alert('Please fill out all required fields correctly before submitting.'); // e.preventDefault(); // Stop submission if basic validation fails // return; // Note: Shopify's form handler might do its own validation. // This custom client-side preventDefault might interfere if you rely solely on Shopify's. // For a generic HTML form, you WOULD want preventDefault() here if client validation fails. } const submitBtn = document.getElementById('button-submit'); if (submitBtn) { submitBtn.textContent = 'Submitting...'; submitBtn.disabled = true; } const shellColorValue = shellColorInput.value.toUpperCase(); const colorNameDisplay = standardShellColors[shellColorValue] || 'Custom Color (Not Standard)'; const emailBody = ` CUSTOM HELMET REQUEST Customer Information: - Name: ${nameInput.value} - Email: ${emailInput.value} - Request Date: ${new Date().toLocaleDateString()} Helmet Specifications: - Model: ${modelSelect.value} - Size: ${sizeSelect.value} - Shell Color: ${shellColorValue} (${colorNameDisplay}) - Kit Color: ${kitColorSelect.value} - Facemask Style: ${facemaskStyleSelect.value} - Facemask Color: ${facemaskColorSelect.value} ${notesTextarea.value.trim() ? `Additional Notes:\n${notesTextarea.value.trim()}` : 'No additional notes.'} Product Summary: Custom VICIS ${modelSelect.value.replace('VICIS ', '')} - ${sizeSelect.value} - ${colorNameDisplay} This is a custom helmet request form submission. Please review the specifications and contact the customer with pricing and availability. `.trim(); if (helmetSpecificationsInput) { helmetSpecificationsInput.value = emailBody; } else { // console.error('Hidden field "helmet-specifications" not found!'); } // console.log('Form data prepared for submission.'); // Actual submission will be handled by the form's action or your forms app }); } });// Ensures the script runs after the HTML DOM is fully loaded document.addEventListener('DOMContentLoaded', function() { const sportCoatDigitsInput = document.getElementById('sport_coat_digits'); const sportCoatDigitsPattern = /^[0-9]{4}$/; // Regex for 4 digits // Check if the input element actually exists on the page if (sportCoatDigitsInput) { sportCoatDigitsInput.addEventListener('input', function(event) { let value = event.target.value; // Remove any non-digit characters let sanitizedValue = value.replace(/[^0-9]/g, ''); // Limit length to 4 (maxlength attribute in HTML also helps) if (sanitizedValue.length > 4) { sanitizedValue = sanitizedValue.substring(0, 4); } // Update the input field's value only if it was changed by sanitization if (value !== sanitizedValue) { event.target.value = sanitizedValue; } // Use the sanitized value for validation styling value = sanitizedValue; // Visual Feedback based on the pattern if (sportCoatDigitsPattern.test(value)) { event.target.classList.remove('input-invalid'); event.target.classList.add('input-valid'); } else if (value.length > 0) { // Only show invalid if there's some input event.target.classList.remove('input-valid'); event.target.classList.add('input-invalid'); } else { // No input, remove validation styles event.target.classList.remove('input-valid'); event.target.classList.remove('input-invalid'); } }); sportCoatDigitsInput.addEventListener('blur', function(event) { const value = event.target.value; if (sportCoatDigitsPattern.test(value)) { event.target.classList.remove('input-invalid'); event.target.classList.add('input-valid'); } else if (value.length > 0) { event.target.classList.remove('input-valid'); event.target.classList.add('input-invalid'); } else { event.target.classList.remove('input-valid'); event.target.classList.remove('input-invalid'); } }); } else { // This message will appear in the browser console if the script can't find the input field // console.warn('Sport Coat Code input field (id="sport_coat_digits") was not found by the script.'); // You can uncomment the above line for debugging if needed. } }); // Reminder: When you actually process the form data (e.g., on submission), // you'll need to combine "SC" with the value from the 'sport_coat_digits' input. // Example: // const sportCoatDigitsValue = document.getElementById('sport_coat_digits').value; // const fullSportCoatCode = "SC" + sportCoatDigitsValue;

Catalog