const dataJson = [{"category":"Face Prescription","question":"qbcc-7c799e0d","variants":["43872752304317","44071599538365"],"copy":"[RX] TO USE
As a facial serum: apply a few small drops to face and press into skin. As a makeup remover: simply add a few drops to a cotton pad and wipe to remove makeup and residue without stripping or altering the skin\'s pH."},{"category":"Body Prescription","question":"qbcc-3d1c9c33","variants":["43872752304317","44071599538365"],"copy":"[RX] TO USE
After bathing, while skin is still wet, apply oil all over body. This game-changing method creates a hydro-lipidic film, locking in moisture for double-duty nourishment."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["43872752304317","44071599538365"],"copy":"[RX] TO USE
To restore and nourish hair, apply 2-3 drops to the palm of your hand and work through damp mid-lengths and ends to lock in vital moisture."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["43923440959677"],"copy":"[RX] TO USE
Before applying, squeeze out excess moisture from wet hair to avoid dilution and boost product performance. Work Hydratant through mid-lengths and ends to increase penetration. Leave for 30 seconds to restore, then rinse well."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["42836274118845","42399185895613"],"copy":"[RX] TO USE
Lather in palms and apply to wet hair. Massage, leave for a few minutes, then rinse. Repeat for a deeper cleanse. We recommend double cleansing and washing less often for best results."},{"category":"Body Prescription","question":"qbcc-3d1c9c33","variants":["43022911340733","44702489149629"],"copy":"[RX] TO USE
For best results, apply to clean, dry skin. Use as part of your evening ritual for optimum hydration."},{"category":"Body Prescription","question":"qbcc-3d1c9c33","variants":["40624541630653"],"copy":"[RX] TO USE
Squeeze a cherry-sized amount into palm. Massage vigorously into skin, paying special attention to rough and hard-to- get-to areas. Emulsify with water, then rinse."},{"category":"Face Prescription","question":"qbcc-7c799e0d","variants":["44528920494269","42076676161725"],"copy":"[RX] TO USE
For best results, apply to dry skin aŁer showering. Use as part of your daily ritual for optimum hydration."},{"category":"Body Prescription","question":"qbcc-3d1c9c33","variants":["44528920494269","42076676161725"],"copy":"[RX] TO USE
For best results, apply to dry skin aŁer showering. Use as part of your daily ritual for optimum hydration."},{"category":"Face Prescription","question":"qbcc-7c799e0d","variants":["40630672490685","44077427982525"],"copy":"[RX] TO USE
Gently massage onto damp skin—the oil will lightly emulsify with water, turning milky. Work into areas as needed, then rinse. Skin will feel fresh and clean, yet hydrated."},{"category":"Body Prescription","question":"qbcc-3d1c9c33","variants":["40630672490685","44077427982525"],"copy":"[RX] TO USE
Massage onto damp skin—the oil will emulsify with water, turning milky. Work into areas as needed, then rinse. Skin will feel fresh and clean, yet hydrated."},{"category":"Face Prescription","question":"qbcc-7c799e0d","variants":["40630664855741"],"copy":"[RX] TO USE
Dispense 1 dropper of masque onto fingertips and smooth over clean, damp skin. Cover face and neck, avoiding the eye area. Leave for 10 minutes. Rinse skin with warm water. For best results, use weekly."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["42399186419901","42399186452669"],"copy":"[RX] TO USE
Before applying, squeeze out excess moisture from wet hair to avoid dilution and boost product performance. Work Hydratant through mid-lengths and ends to increase penetration. Leave for 30 seconds to restore, then rinse well."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["42877759291581"],"copy":"[RX] TO USE
As a conditioner: work a cherry-sized dollop through your hair\'s mid-lengths and ends to nourish and fortify. Leave for 30 seconds, then rinse well. As a serum or curl defining cream: work a pea-sized amount through mid-lengths and ends of damp hair to smooth and reduce frizz."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["43923446071485"],"copy":"[RX] TO USE
Lather in palms and apply to wet hair. Massage, leave for a few minutes, then rinse. Repeat for a deeper cleanse. We recommend double cleansing and washing less often for best results."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["43923446268093"],"copy":"[RX] TO USE
Apply prescribed Sans Hydratant to mid- lengths and ends. Do not rinse. Spritz 15–20 pumps of pH + Shine Corrector through hair. Work in with fingers, then rinse out."},{"category":"Body Prescription","question":"qbcc-3d1c9c33","variants":["40624681058493","40624681025725"],"copy":"[RX] TO USE
Pump a cherry-sized dollop onto shower mitt and massage into skin, allowing key ingredients to gently cleanse and heal."},{"category":"Face Prescription","question":"qbcc-7c799e0d","variants":["40625415913661"],"copy":"[RX] TO USE
Apply a generous layer to clean, towel-dried skin, covering the face and neck area. Do not rub in. For best results, apply 30 minutes before bed, allowing masque to fully absorb and actives to infuse overnight. Massage residual product in prior to sleeping and wake to calm, supple skin."},{"category":"Hair Prescription","question":"qbcc-07adc1a2","variants":["43923443843261"],"copy":"[RX] TO USE
Apply prescribed Sans Hydratant to mid- lengths and ends. Do not rinse. Spritz 15–20 pumps through hair. Work in with fingers, then rinse out."}]; // Config const logging = true // ======================= // Don't change below here const data = dataJson; const quizAnswers = answers; const logger = (...options) => logging && console.log('!!!', ...options) const error = (...options) => logging && console.error('!!!', ...options) console.log('!!! entrypoint') const targets = { section: ".results-content .result-block__container", sectionTitle: ".heading.results-slot_heading", product: ".slot-product__container", productTitle: ".slot-product__title-link", productVariants: ".select-variants option" } function findSectionEls(sr) { logger('findSectionEls', { sr }); const els = sr.querySelectorAll(targets.section) logger('findSectionEls', { els }); return els; } function findSectionType(sectionEl) { logger('findSectionType', { sectionEl }) const titleEl = sectionEl.querySelector(targets.sectionTitle) const titleText = titleEl.innerText logger('findSectionType', { titleText }) return titleText; } function findProductsEls(sectionEl) { logger('processSection', { sectionEl }); const els = sectionEl.querySelectorAll(targets.product) logger('findProductsEls', { els }); return els; } function findProductName(productEl) { logger('findProductName', { productEl }); const titleEl = productEl.querySelector(targets.productTitle) const titleText = titleEl.innerText logger('findProductName', { titleText }) return titleText; } function findProductVariants(productEl) { logger('findProductVariants', { productEl }); const productVariantsEls = productEl.querySelectorAll(targets.productVariants) if (!productVariantsEls || productVariantsEls.length === 0) { error('findProductVariants found no productVariantsEls in ', productEl) return []; } const productVariantIds = [] for (const productVariantsEl of productVariantsEls) { logger('findProductVariants->productVariantsEl', { productVariantsEl }); try { const gid = productVariantsEl.getAttribute('value') const id = gid.substring(gid.lastIndexOf('/')+1) productVariantIds.push(id) } catch (e) { error('findProductVariants->productVariantsEl', { productVariantsEl }, e); return []; } } return productVariantIds } function addText(productEl, copy) { logger('addText', { productEl, copy }); const titleEl = productEl.querySelector(targets.productTitle) const targetEl = titleEl.parentElement const copyDom3 = document.createElement('div') const copyDom2 = document.createElement('div') const copyDom1 = document.createElement('p') copyDom1.innerHTML = copy; copyDom2.setAttribute('class', 'slot-product__text') copyDom2.appendChild(copyDom1) copyDom3.appendChild(copyDom2) titleEl.parentElement.insertAdjacentElement('afterend', copyDom3) logger('addText->', { targetEl, copyDom3 }) } function processChange(productEl, productName, productVariants, sectionType, choicesRefs) { logger('processChange', { productEl, productName, productVariants, sectionType, choicesRefs }); try { const firstMatches = data.filter(d => ( d.category === sectionType // e.g. Face Prescription && choicesRefs.includes(d.question) // Question is in valid choices )) logger('processChange->firstRound matches', firstMatches) const secondMatch = firstMatches.find(d => d.variants.includes(productVariants[0])) logger('processChange->secondRound natch', secondMatch) logger('processChange->match', secondMatch); addText(productEl, secondMatch.copy) } catch (e) { error('processChange->', e) } } function processProduct(productEl, sectionType, choicesRefs) { logger('processProduct', { productEl, sectionType }); const productName = findProductName(productEl) logger('processProduct', { productName }); const productVariants = findProductVariants(productEl) logger('processProduct', { productVariants }); if (!productVariants || productVariants.length === 0) { error('processProduct found no productVariants in ', { productName }) return; } logger('processProduct found ', productVariants.length, 'productVariants in ', { productName }) processChange(productEl, productName, productVariants, sectionType, choicesRefs) } function processSection(sectionEl, choicesRefs) { logger('processSection', { sectionEl }); const sectionType = findSectionType(sectionEl) logger('processSection', { sectionType }); const productEls = findProductsEls(sectionEl) logger('processSection', { productEls }); if (!productEls || productEls.length === 0) { error('processSection-> found no products in ', sectionType) return; } logger('processSection-> found ', productEls.length, 'products in ', sectionType) for (const productEl of productEls) { processProduct(productEl, sectionType, choicesRefs) } } function findChoicesRefs(qa) { logger('findChoicesRefs', { qa }); const validAnswers = qa.filter(a => a.isValid) logger('findChoicesRefs', { validAnswers }); if (!validAnswers || validAnswers.length === 0) { error('findChoicesRefs-> found no validAnswers') return; } const choiceRefs = validAnswers.map(a => a.choicesRefs) if (!choiceRefs || choiceRefs.length === 0) { error('findChoicesRefs-> found no choiceRefs') return; } const choiceRefsFlat = choiceRefs.flat() logger('findChoicesRefs-> found ', choiceRefsFlat.length, ' choiceRefsFlat', choiceRefsFlat) return choiceRefsFlat; } function runProgram(sr) { logger('runProgram'); const choicesRefs = findChoicesRefs(quizAnswers) logger('runProgram-> getAnswersId', choicesRefs); const sectionEls = findSectionEls(sr) if (!sectionEls || sectionEls.length === 0) { error('runProgram-> found no sections') return; } logger('runProgram-> found ', sectionEls.length, 'sections') for (const sectionEl of sectionEls) { processSection(sectionEl, choicesRefs) } } function start() { const shadowRoot = document.getElementById('shadow-quiz').shadowRoot; logger('start', { shadowRoot }); // Wait for shadowRoot // $(shadowRoot).ready(function () { // runProgram(shadowRoot) // }); setTimeout(function () { runProgram(shadowRoot) },100) } // Initial wait for document // document.ready(start); start()

Jaclyn Hodes, Awave Awake Designer

Jaclyn Hodes, Awave Awake Designer