`; const createAccountMessage = `
Sign into your account to view your quiz results.
Login →
Don’t have an account?
Sign Up →
`; // hide default content $(submitContent).hide(); // show create account if (!customerId) { $(createAccountMessage).hide().insertAfter(heading).fadeIn(); // redirect to profile } else { $(redirectMessage).hide().insertAfter(heading).fadeIn(); setTimeout(function() { if(profileId) { window.location.href = '/account?profile='+profileId+'#recommendations'; } else { window.location.href = '/account#recommendations'; } }, 2000); } } } // Form Error Message function handleFormError(message) { const finalStep = document.querySelector('.js-final-step'); const content = finalStep.querySelector('.step-content'); const heading = content.querySelector('h2'); const submitContent = content.querySelector('.step-content-submit'); const errorMessage = `
Error: ${message}
`; heading.innerText = `There was an issue submitting the quiz. Please try again.`; // hide default content $(submitContent).hide(); $(errorMessage).hide().insertAfter(heading).fadeIn(); } // Update Table Data // - updates the table data based on the selected categories function updateTables(categories) { const experienceName = 'experience'; const hoursName = 'sunlight'; const experienceTable = document.querySelector('.js-experience-table'); const hoursTable = document.querySelector('.js-hours-table'); const experienceLevels = ['beginner', 'intermediate', 'advanced', 'expert']; const hours = ['less than 2 hours', '2-3 hours', '4-6 hours', '6-8 hours']; // Create Table Headers function createHeaders() { createTableHeaderHTML(experienceTable); createTableHeaderHTML(hoursTable); } // Create Table Header HTML function createTableHeaderHTML(table) { const columnClasses = ['table-body-columns--1', 'table-body-columns--2', 'table-body-columns--3','table-body-columns--4']; let cells = ''; if (categories.length > 2) { table.parentElement.classList.add('table-container--overflow'); } categories.map(category => cells += `
`); table.querySelector('thead').innerHTML = `
`; table.classList.remove(...columnClasses); table.classList.add(`table-body-columns--${categories.length}`); } // Update Table Data function updateTableData(table, name, data) { let tableBody = ''; // Experience data.map(value => { let cells = ''; categories.forEach(category => { const key = category.replaceAll(' ', '-'); cells += `
`; }); tableBody += `
`; }) table.querySelector('tbody').innerHTML = tableBody; } // Update table answers function populateTableAnswers() { currentProfile = allProfiles[profileId]; var garden = JSON.parse(currentProfile.garden); // Garden options for ( var k = 0; k < garden.length; k++){ var gardenData = garden[k]; $('#experience-' + garden[k]['category'].replace(/ /g, '-') + '-' + garden[k]['experience']).click(); $("[id='sunlight-" + garden[k]['category'].replace(/ /g, '-') + '-' + garden[k]['hoursOfSunlight']+"']").click(); } } createHeaders(); updateTableData(experienceTable, experienceName, experienceLevels); updateTableData(hoursTable, hoursName, hours); populateTableAnswers(); } // Get Form Values // - retreives the form object function getFormValues() { const formData = new FormData(form); let values = Object.fromEntries(formData.entries()); const categories = formData.getAll('categories'); const customerId = '' !== '' ? '' : null; const customerEmail = '' !== '' ? '' : null const getGardenData = function () { return categories.map(category => { const key = category.replaceAll(' ', '-'); const experience = values[`experience-${key}`] ? values[`experience-${key}`] : ''; const hoursOfSunlight = values[`sunlight-${key}`] ? values[`sunlight-${key}`] : ''; let features = formData.getAll(`features-${key}`); let exclusions = formData.getAll(`exclusions-${key}`); let colors = formData.getAll(`colors-${key}`); let data = { category: category, experience: experience, hoursOfSunlight: hoursOfSunlight, exclusions: exclusions, features: features } if (key == 'flowers') data.colors = colors; return data; }); } const garden = getGardenData(); const zipcode = formData.get('zipcode'); const exitStep = formData.get('exitStep'); const completedStep = formData.get('completedStep'); const initialValues = { action: 'gg_quiz', customerId: customerId, customerEmail: customerEmail, type: 'personal', title: document.getElementById('profileName').value, categories: categories, garden: [], exitStep: '', completedStep: '', ipAddress: userIP, zipcode: '', delayedEntry: false, tags: [] } values = { ...values, ...initialValues } if (garden.length > 0) values.garden = garden; if (zipcode) values.zipcode = zipcode; if (exitStep) values.exitStep = exitStep; if (completedStep) values.completedStep = completedStep; const tags = generateFormTags(values); values.tags = tags return values; } // Generate Form Tags // - create tags based on form data function generateFormTags(values) { const { categories, garden } = values; let tags = []; // create tags from categories const categoryTags = categories.map(category => createTag(category)); tags.push(categoryTags); // create garden tags if (garden) { garden.map(item => { const { category, colors, exclusions, experience, features, hoursOfSunlight } = item; const objArray = []; if (colors) { let colorSlugs = colors.map(item => createTag(`${category}-color-${item}`)); tags.push(colorSlugs); } if (exclusions) { let exclusionSlugs = exclusions.map(item => createTag(`${category}-exclude-${item}`)); if (exclusionSlugs.length == 0) tags.push(createTag(`${category}-include-all`)); tags.push(exclusionSlugs); } if (experience) { let experienceSlug = `${category}-exp-${experience}`; experienceSlug = createTag(experienceSlug); tags.push(experienceSlug); } if (features) { let featureSlugs = features.map(item => { let firstWord = item.includes('pops of color') ? 'colorpop' : item.replace(/ .*/,''); let featureSlug = createTag(`${category}-feature-${firstWord}`); return createTag(`${category}-feature-${firstWord}`) }); tags.push(featureSlugs); } if (hoursOfSunlight) { let lightSlug = `${category}-${hoursOfSunlight}`; lightSlug = createTag(lightSlug); tags.push(lightSlug); } }); } let combinedTags = [].concat.apply([], tags); return combinedTags; } // Create Tags // - modify tags to match the spreadsheet format function createTag(slug) { slug = stringToSlug(slug); let cleanSlug = slug .replace('indoor-plants', 'indoor') .replace('vegetables-and-fruits', 'vegetables') .replace('less-than-2-hours', 'light-2') .replace('2-3-hours', 'light-3') .replace('4-6-hours', 'light-6') .replace('6-8-hours', 'light-8') .replace('pelleted', 'pellet') .replace('good', 'container') .replace('pollinator', 'pollinate') .replace('comes', 'perennial') .replace('air', 'purify') .replace('bright', 'brightlight') .replace('low', 'lowlight') .replace('patterned', 'pattern') .replace('cascading', 'cascade') .replace('flowlighters', 'flowers') .replace('cauliflowlighter', 'cauliflower') return `prq_pers-${cleanSlug}`; } // Create Slug function stringToSlug (str) { str = str.replace(/^\s+|\s+$/g, ''); // trim str = str.toLowerCase(); // remove accents, swap ñ for n, etc let from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; let to = "aaaaeeeeiiiioooouuuunc------"; for (let i=0, l=from.length ; i
