{"id":6766,"date":"2026-07-09T13:25:44","date_gmt":"2026-07-09T18:25:44","guid":{"rendered":"https:\/\/twinsgaragedoors.com\/wi\/?page_id=6766"},"modified":"2026-07-09T13:25:44","modified_gmt":"2026-07-09T18:25:44","slug":"door-builder","status":"publish","type":"page","link":"https:\/\/twinsgaragedoors.com\/wi\/door-builder\/","title":{"rendered":"Design Your New Garage Door"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6766\" class=\"elementor elementor-6766\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34923f1 elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"34923f1\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-\" data-id=\"\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element- elementor-widget elementor-widget-html\" data-id=\"\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"twx-hero\" style=\"background:var(--tw-navy)\"><div class=\"twx-hero-inner\" style=\"padding:64px 24px 56px\"><span class=\"twx-eyebrow\" style=\"color:var(--tw-yellow)\">Official Clopay Dealer<\/span><h1>Design Your New Garage Door<\/h1><p>Pick your collection, style, color and windows \u2014 we\u2019ll bring it to life at your free on-site consult.<\/p><div class=\"twx-ctas\"><a class=\"twx-btn\" href=\"tel:+16088888785\">Call (608) 888-8785<\/a><a class=\"twx-btn twx-btn--ghost\" href=\"https:\/\/twinsgaragedoors.com\/wi\/contact-us\/\">Get a Free Quote<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fba77ec elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"fba77ec\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-\" data-id=\"\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element- elementor-widget elementor-widget-shortcode\" data-id=\"\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"twxdb\" class=\"twxdb\" data-region=\"wi\" data-endpoint=\"https:\/\/twinsgaragedoors.com\/wp-json\/twins\/v1\/door-builder\"><\/div>\r\n<style id=\"twxdb-css\">\r\n.twxdb{max-width:1140px;margin:0 auto;color:var(--tw-navy)}\r\n.twxdb,.twxdb *{box-sizing:border-box}\r\n.twxdb img{max-width:100%}\r\n.twxdb button{font-family:inherit}\r\n.twxdb-h{font-family:Montserrat,sans-serif;font-weight:800;font-size:24px;line-height:1.15;color:var(--tw-navy);margin:0 0 8px}\r\n.twxdb-h:after{content:\"\";display:block;width:56px;height:4px;background:var(--tw-yellow);border-radius:2px;margin-top:10px}\r\n.twxdb-sub{font-size:15px;color:var(--tw-navy);opacity:.75;line-height:1.55;margin:0 0 18px}\r\n.twxdb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 18px}\r\n.twxdb-dots{display:flex;gap:9px;width:100%;order:-1;justify-content:center;padding:4px 0 10px}\r\n.twxdb-dot{width:11px;height:11px;border-radius:50%;background:#F2F5F7;border:2px solid var(--tw-navy);opacity:.3}\r\n.twxdb-dot.is-done{background:var(--tw-navy);opacity:1}\r\n.twxdb-dot.is-current{background:var(--tw-yellow);opacity:1}\r\n.twxdb-dot.is-skip{opacity:.12;border-style:dashed}\r\n.twxdb-back{background:white;border:2px solid #F2F5F7;color:var(--tw-navy);font-weight:700;font-size:14px;border-radius:6px;padding:10px 16px;min-height:44px;cursor:pointer}\r\n.twxdb-back:hover{border-color:var(--tw-navy)}\r\n.twxdb-skip{margin-left:auto;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:var(--tw-navy);text-decoration:underline;cursor:pointer;background:none;border:0;padding:10px 0;min-height:44px}\r\n.twxdb-hero{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;background:#F2F5F7;border-radius:12px;padding:14px;margin:0 0 20px}\r\n.twxdb-hero-img{flex:1 1 260px;min-width:0}\r\n.twxdb-hero-img img{display:block;width:100%;border-radius:8px;background:white}\r\n.twxdb-picks{flex:1 1 200px;display:flex;flex-direction:column;gap:8px;font-size:14px}\r\n.twxdb-pick{display:flex;align-items:center;gap:8px;background:white;border-radius:8px;padding:8px 12px;line-height:1.35}\r\n.twxdb-pick b{font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;min-width:82px}\r\n.twxdb-pick img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid #F2F5F7}\r\n.twxdb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\r\n.twxdb-card{display:flex;flex-direction:column;gap:8px;text-align:left;background:white;border:2px solid #F2F5F7;border-radius:10px;padding:10px;cursor:pointer;min-height:44px}\r\n.twxdb-card:hover{border-color:var(--tw-navy)}\r\n.twxdb-card.is-sel{border-color:var(--tw-yellow)}\r\n.twxdb-card img{display:block;width:100%;border-radius:6px;background:#F2F5F7;object-fit:cover;aspect-ratio:4\/3}\r\n.twxdb-card-t{font-family:Montserrat,sans-serif;font-weight:700;font-size:14.5px;color:var(--tw-navy);line-height:1.3}\r\n.twxdb-card-d{font-size:12.5px;color:var(--tw-navy);opacity:.7;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\r\n.twxdb-g{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:var(--tw-navy);margin:20px 0 10px}\r\n.twxdb-g:first-child{margin-top:0}\r\n.twxdb-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}\r\n.twxdb-chip{display:flex;flex-direction:column;align-items:center;gap:6px;background:white;border:2px solid #F2F5F7;border-radius:10px;padding:10px 6px;cursor:pointer;font-size:12px;color:var(--tw-navy);line-height:1.3;text-align:center;min-height:44px}\r\n.twxdb-chip:hover{border-color:var(--tw-navy)}\r\n.twxdb-chip.is-sel{border-color:var(--tw-yellow)}\r\n.twxdb-chip img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #F2F5F7}\r\n.twxdb-chip--wide{grid-column:span 2}\r\n.twxdb-chip--wide img{width:100%;height:auto;border-radius:6px}\r\n.twxdb-noneimg{display:block;width:46px;height:46px;border-radius:50%;background:#F2F5F7;border:2px solid var(--tw-navy)}\r\n.twxdb-cap{font-size:12.5px;color:var(--tw-navy);opacity:.7;line-height:1.5;margin:14px 0 0}\r\n.twxdb-disc{font-size:12px;color:var(--tw-navy);opacity:.6;line-height:1.5;margin:10px 0 0}\r\n.twxdb-form{background:white;border:2px solid #F2F5F7;border-radius:12px;padding:20px;max-width:460px;margin-top:18px}\r\n.twxdb-form label{display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:var(--tw-navy);margin:0 0 4px}\r\n.twxdb-form .twxdb-fld{margin:0 0 12px}\r\n.twxdb-in{width:100%;border:2px solid #F2F5F7;border-radius:6px;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--tw-navy);background:white;min-height:48px}\r\n.twxdb-in:focus{outline:none;border-color:var(--tw-navy)}\r\ntextarea.twxdb-in{min-height:84px;resize:vertical}\r\n.twxdb-btn{display:inline-block;width:100%;background:var(--tw-yellow);color:var(--tw-navy);font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;line-height:1;padding:16px 28px;border-radius:6px;border:0;letter-spacing:.02em;cursor:pointer;min-height:48px}\r\n.twxdb-btn:disabled{opacity:.6;cursor:default}\r\n.twxdb-err{background:#F2F5F7;border-left:4px solid var(--tw-yellow);border-radius:6px;padding:12px 14px;font-size:14px;color:var(--tw-navy);line-height:1.5;margin-top:12px}\r\n.twxdb-err a{color:var(--tw-navy);font-weight:700}\r\n.twxdb-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden}\r\n.twxdb-none{font-size:15px;color:var(--tw-navy);opacity:.8;line-height:1.55;margin:0 0 6px}\r\n.twxdb-load{padding:40px 0;text-align:center;font-size:15px;color:var(--tw-navy);opacity:.75}\r\n.twxdb-thanks{text-align:center;padding:44px 16px}\r\n.twxdb-thanks p{font-size:16px;line-height:1.6;margin:0 auto;max-width:520px}\r\n@media(min-width:700px){\r\n.twxdb-h{font-size:30px}\r\n.twxdb-grid{grid-template-columns:repeat(3,1fr)}\r\n.twxdb-dots{width:auto;order:0}\r\n.twxdb-hero-img{flex:1 1 380px}\r\n}\r\n@media(min-width:1000px){\r\n.twxdb-grid{grid-template-columns:repeat(4,1fr)}\r\n}\r\n<\/style>\r\n<script>\r\n(function () {\r\n\tvar root = document.getElementById('twxdb');\r\n\tif (!root) { return; }\r\n\tvar REGION = root.getAttribute('data-region') || 'main';\r\n\tvar ENDPOINT = root.getAttribute('data-endpoint');\r\n\tvar PHONES = { main: { disp: '(833) 833-2010', tel: '+18338332010' }, wi: { disp: '(608) 888-8785', tel: '+16088888785' } };\r\n\tvar PHONE = PHONES[REGION] || PHONES.main;\r\n\tvar LIST_URL = 'https:\/\/www.clopaydoor.com\/api\/v2\/GetProductsList\/GetProducts?productType=Residential';\r\n\tvar DETAIL_URL = 'https:\/\/www.clopaydoor.com\/api\/v2\/GetProductDetails\/GetProductData?productId=';\r\n\tvar FORCE_FAIL = \/[?&]twxdbfail=1\/.test(location.search);\r\n\tvar STEPS = ['collection', 'design', 'color', 'windows', 'glass', 'summary'];\r\n\tvar TITLES = { collection: 'Choose your collection', design: 'Pick your design', color: 'Pick your color', windows: 'Add windows', glass: 'Choose your glass', summary: 'Review and get your free quote' };\r\n\tvar BTN_LABEL = 'Get my free quote';\r\n\r\n\tvar state = { step: 'collection', products: null, product: null, design: null, color: null, window: null, glass: null, skipped: {}, history: [] };\r\n\r\n\t\/* --- sanitizers --- *\/\r\n\tfunction san(h) {\r\n\t\treturn String(h == null ? '' : h)\r\n\t\t\t.replace(\/<br\\b[^>]*>\/gi, '<br>')\r\n\t\t\t.replace(\/<(\\\/?)sup\\b[^>]*>\/gi, '<$1sup>')\r\n\t\t\t.replace(\/<(?!br>|\\\/?sup>)[^>]*>\/gi, '');\r\n\t}\r\n\tfunction plain(h) {\r\n\t\tvar t = document.createElement('textarea');\r\n\t\tt.innerHTML = String(h == null ? '' : h).replace(\/<[^>]*>\/g, ' ');\r\n\t\treturn t.value.replace(\/\\s+\/g, ' ').trim();\r\n\t}\r\n\tfunction esc(s) {\r\n\t\treturn String(s == null ? '' : s).replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;').replace(\/\"\/g, '&quot;');\r\n\t}\r\n\r\n\t\/* --- data --- *\/\r\n\tfunction cacheGet(k) { try { var v = sessionStorage.getItem(k); return v ? JSON.parse(v) : null; } catch (e) { return null; } }\r\n\tfunction cacheSet(k, v) { try { sessionStorage.setItem(k, JSON.stringify(v)); } catch (e) {} }\r\n\tfunction fetchJSON(url, timeoutMs) {\r\n\t\ttimeoutMs = timeoutMs || 10000;\r\n\t\tvar ctl = new AbortController();\r\n\t\tvar t = setTimeout(function () { ctl.abort(); }, timeoutMs);\r\n\t\treturn fetch(url, { signal: ctl.signal }).then(function (r) {\r\n\t\t\tclearTimeout(t);\r\n\t\t\tif (!r.ok) { throw new Error('http ' + r.status); }\r\n\t\t\treturn r.json();\r\n\t\t}, function (e) { clearTimeout(t); throw e; });\r\n\t}\r\n\tfunction loadList() {\r\n\t\tif (FORCE_FAIL) { return Promise.reject(new Error('forced fail')); }\r\n\t\tvar c = cacheGet('twxdb:list');\r\n\t\tif (c) { return Promise.resolve(c); }\r\n\t\treturn fetchJSON(LIST_URL).then(function (d) {\r\n\t\t\tif (!d || !d.length) { throw new Error('empty list'); }\r\n\t\t\tcacheSet('twxdb:list', d);\r\n\t\t\treturn d;\r\n\t\t});\r\n\t}\r\n\tfunction loadProduct(id) {\r\n\t\tvar k = 'twxdb:p:' + id;\r\n\t\tvar c = cacheGet(k);\r\n\t\tif (c) { return Promise.resolve(c); }\r\n\t\treturn fetchJSON(DETAIL_URL + encodeURIComponent(id)).then(function (d) {\r\n\t\t\tif (!d || !d.ProductId) { throw new Error('bad product'); }\r\n\t\t\tcacheSet(k, d);\r\n\t\t\treturn d;\r\n\t\t});\r\n\t}\r\n\r\n\t\/* --- navigation --- *\/\r\n\tfunction go(step) { state.history.push(state.step); state.step = step; render(true); }\r\n\tfunction back() { if (state.history.length) { state.step = state.history.pop(); render(true); } }\r\n\tfunction stepAvailable(s) {\r\n\t\tvar p = state.product;\r\n\t\tif (s === 'collection' || s === 'summary') { return true; }\r\n\t\tif (!p) { return false; }\r\n\t\tif (s === 'design') { return !!(p.ProductDesigns && p.ProductDesigns.length); }\r\n\t\tif (s === 'color') { return !!(p.Colors && p.Colors.length); }\r\n\t\tif (s === 'windows') { return !!(p.TopSections && p.TopSections.length); }\r\n\t\tif (s === 'glass') { return !!(state.window && !state.window.none && p.SpecialityGlassOptions && p.SpecialityGlassOptions.length); }\r\n\t\treturn false;\r\n\t}\r\n\tfunction nextAfter(s) {\r\n\t\tvar i = STEPS.indexOf(s);\r\n\t\tfor (var j = i + 1; j < STEPS.length - 1; j++) {\r\n\t\t\tif (stepAvailable(STEPS[j])) { return STEPS[j]; }\r\n\t\t\tstate.skipped[STEPS[j]] = true;\r\n\t\t}\r\n\t\treturn 'summary';\r\n\t}\r\n\r\n\t\/* --- shared view pieces --- *\/\r\n\tfunction dotsHTML() {\r\n\t\tvar cur = STEPS.indexOf(state.step);\r\n\t\treturn '<div class=\"twxdb-dots\" aria-hidden=\"true\">' + STEPS.map(function (s, i) {\r\n\t\t\tvar cls = 'twxdb-dot';\r\n\t\t\tvar chosen = { collection: state.product, design: state.design, color: state.color, windows: state.window, glass: state.glass, summary: null }[s];\r\n\t\t\tif (s === state.step) { cls += ' is-current'; }\r\n\t\t\telse if (state.product && !stepAvailable(s)) { cls += ' is-skip'; }\r\n\t\t\telse if (chosen || (i < cur && chosen)) { cls += ' is-done'; }\r\n\t\t\treturn '<span class=\"' + cls + '\" title=\"' + TITLES[s] + '\"><\/span>';\r\n\t\t}).join('') + '<\/div>';\r\n\t}\r\n\tfunction barHTML() {\r\n\t\tvar backBtn = (state.step !== 'collection') ? '<button type=\"button\" class=\"twxdb-back\" data-act=\"back\">&larr; Back<\/button>' : '<span><\/span>';\r\n\t\tvar skip = (state.step !== 'summary') ? '<button type=\"button\" class=\"twxdb-skip\" data-act=\"skip\">Skip to quote &rarr;<\/button>' : '<span><\/span>';\r\n\t\treturn '<div class=\"twxdb-bar\">' + backBtn + dotsHTML() + skip + '<\/div>';\r\n\t}\r\n\tfunction picksHTML() {\r\n\t\tvar rows = [];\r\n\t\tfunction row(label, valueHTML, img) {\r\n\t\t\treturn '<div class=\"twxdb-pick\">' + (img ? '<img decoding=\"async\" src=\"' + esc(img) + '\" alt=\"\" loading=\"lazy\">' : '') + '<b>' + label + '<\/b><span>' + valueHTML + '<\/span><\/div>';\r\n\t\t}\r\n\t\tif (state.product) { rows.push(row('Collection', san(state.product.Title), null)); }\r\n\t\tif (state.design) { rows.push(row('Design', san(state.design.Title), null)); }\r\n\t\tif (state.color) { rows.push(row('Color', san(state.color.Title), state.color.ProductImage)); }\r\n\t\tif (state.window) { rows.push(row('Windows', san(state.window.Title), null)); }\r\n\t\tif (state.glass) { rows.push(row('Glass', san(state.glass.Title), null)); }\r\n\t\treturn rows.join('');\r\n\t}\r\n\tfunction heroHTML() {\r\n\t\tif (!state.product || state.step === 'collection') { return ''; }\r\n\t\tvar img = state.design ? state.design.ProductImage : state.product.ShowcaseImage;\r\n\t\tvar alt = plain(state.design ? state.design.Title : state.product.Title);\r\n\t\treturn '<div class=\"twxdb-hero\"><div class=\"twxdb-hero-img\"><img decoding=\"async\" src=\"' + esc(img) + '\" alt=\"' + esc(alt) + '\" loading=\"eager\" data-no-lazy=\"1\"><\/div><div class=\"twxdb-picks\">' + picksHTML() + '<\/div><\/div>';\r\n\t}\r\n\tfunction formHTML() {\r\n\t\treturn '<form class=\"twxdb-form\" novalidate>'\r\n\t\t\t+ '<div class=\"twxdb-fld\"><label for=\"twxdb-name\">Name*<\/label><input class=\"twxdb-in\" id=\"twxdb-name\" name=\"name\" type=\"text\" required autocomplete=\"name\"><\/div>'\r\n\t\t\t+ '<div class=\"twxdb-fld\"><label for=\"twxdb-phone\">Phone*<\/label><input class=\"twxdb-in\" id=\"twxdb-phone\" name=\"phone\" type=\"tel\" required autocomplete=\"tel\"><\/div>'\r\n\t\t\t+ '<div class=\"twxdb-fld\"><label for=\"twxdb-email\">Email*<\/label><input class=\"twxdb-in\" id=\"twxdb-email\" name=\"email\" type=\"email\" required autocomplete=\"email\"><\/div>'\r\n\t\t\t+ '<div class=\"twxdb-fld\"><label for=\"twxdb-zip\">Zip*<\/label><input class=\"twxdb-in\" id=\"twxdb-zip\" name=\"zip\" type=\"text\" inputmode=\"numeric\" required autocomplete=\"postal-code\"><\/div>'\r\n\t\t\t+ '<div class=\"twxdb-fld\"><label for=\"twxdb-notes\">Anything else? (optional)<\/label><textarea class=\"twxdb-in\" id=\"twxdb-notes\" name=\"notes\"><\/textarea><\/div>'\r\n\t\t\t+ '<div class=\"twxdb-hp\" aria-hidden=\"true\"><label for=\"twxdb-website\">Website<\/label><input id=\"twxdb-website\" name=\"website\" type=\"text\" tabindex=\"-1\" autocomplete=\"off\"><\/div>'\r\n\t\t\t+ '<button type=\"submit\" class=\"twxdb-btn\">' + BTN_LABEL + '<\/button>'\r\n\t\t\t+ '<div class=\"twxdb-err\" hidden><\/div>'\r\n\t\t\t+ '<\/form>';\r\n\t}\r\n\tfunction groupBy(list, key) {\r\n\t\tvar out = [], idx = {};\r\n\t\t(list || []).forEach(function (it, i) {\r\n\t\t\tvar g = it[key] || '';\r\n\t\t\tif (!(g in idx)) { idx[g] = out.length; out.push({ name: g, items: [] }); }\r\n\t\t\tout[idx[g]].items.push({ it: it, i: i });\r\n\t\t});\r\n\t\treturn out;\r\n\t}\r\n\r\n\t\/* --- step views --- *\/\r\n\tfunction viewCollection() {\r\n\t\tvar cards = state.products.map(function (c, i) {\r\n\t\t\tvar sel = state.product && String(state.product.ProductId) === String(c.ProductId);\r\n\t\t\treturn '<button type=\"button\" class=\"twxdb-card' + (sel ? ' is-sel' : '') + '\" data-act=\"product\" data-i=\"' + i + '\">'\r\n\t\t\t\t+ '<img decoding=\"async\" src=\"' + esc(c.ShowcaseImage) + '\" alt=\"' + esc(plain(c.Title)) + '\" loading=\"lazy\">'\r\n\t\t\t\t+ '<span class=\"twxdb-card-t\">' + san(c.Title) + '<\/span>'\r\n\t\t\t\t+ '<span class=\"twxdb-card-d\">' + esc(plain(c.ShortDescription)) + '<\/span>'\r\n\t\t\t\t+ '<\/button>';\r\n\t\t}).join('');\r\n\t\treturn '<h2 class=\"twxdb-h\">' + TITLES.collection + '<\/h2>'\r\n\t\t\t+ '<p class=\"twxdb-sub\">' + state.products.length + ' Clopay collections. Pick one and we\\'ll build it up together.<\/p>'\r\n\t\t\t+ '<div class=\"twxdb-grid\">' + cards + '<\/div>';\r\n\t}\r\n\tfunction viewDesign() {\r\n\t\tvar cards = state.product.ProductDesigns.map(function (d, i) {\r\n\t\t\tvar sel = state.design === state.product.ProductDesigns[i];\r\n\t\t\treturn '<button type=\"button\" class=\"twxdb-card' + (sel ? ' is-sel' : '') + '\" data-act=\"design\" data-i=\"' + i + '\">'\r\n\t\t\t\t+ '<img decoding=\"async\" src=\"' + esc(d.ProductImage) + '\" alt=\"' + esc(plain(d.Title)) + '\" loading=\"lazy\">'\r\n\t\t\t\t+ '<span class=\"twxdb-card-t\">' + san(d.Title) + '<\/span>'\r\n\t\t\t\t+ '<\/button>';\r\n\t\t}).join('');\r\n\t\treturn '<h2 class=\"twxdb-h\">' + TITLES.design + '<\/h2><div class=\"twxdb-grid\">' + cards + '<\/div>';\r\n\t}\r\n\tfunction viewColor() {\r\n\t\tvar groups = groupBy(state.product.Colors, 'GroupName').map(function (g) {\r\n\t\t\tvar chips = g.items.map(function (o) {\r\n\t\t\t\tvar sel = state.color === o.it;\r\n\t\t\t\treturn '<button type=\"button\" class=\"twxdb-chip' + (sel ? ' is-sel' : '') + '\" data-act=\"color\" data-i=\"' + o.i + '\">'\r\n\t\t\t\t\t+ '<img decoding=\"async\" src=\"' + esc(o.it.ProductImage) + '\" alt=\"' + esc(plain(o.it.AlternativeText || o.it.Title)) + '\" loading=\"lazy\">'\r\n\t\t\t\t\t+ '<span>' + san(o.it.Title) + '<\/span><\/button>';\r\n\t\t\t}).join('');\r\n\t\t\treturn (g.name ? '<h3 class=\"twxdb-g\">' + esc(g.name) + '<\/h3>' : '') + '<div class=\"twxdb-chips\">' + chips + '<\/div>';\r\n\t\t}).join('');\r\n\t\tvar disc = plain(state.product.ColorDisclaimer) ? '<div class=\"twxdb-disc\">' + san(state.product.ColorDisclaimer) + '<\/div>' : '';\r\n\t\treturn '<h2 class=\"twxdb-h\">' + TITLES.color + '<\/h2>' + groups\r\n\t\t\t+ '<p class=\"twxdb-cap\">Colors shown as manufacturer swatches \u2014 you\\'ll see your exact door at your free on-site consult.<\/p>' + disc;\r\n\t}\r\n\tfunction viewWindows() {\r\n\t\tvar noneSel = state.window && state.window.none;\r\n\t\tvar noneCard = '<div class=\"twxdb-chips\"><button type=\"button\" class=\"twxdb-chip' + (noneSel ? ' is-sel' : '') + '\" data-act=\"window\" data-i=\"-1\">'\r\n\t\t\t+ '<span class=\"twxdb-noneimg\"><\/span><span>No windows (solid)<\/span><\/button><\/div>';\r\n\t\tvar groups = groupBy(state.product.TopSections, 'GroupName').map(function (g) {\r\n\t\t\tvar chips = g.items.map(function (o) {\r\n\t\t\t\tvar sel = state.window === o.it;\r\n\t\t\t\treturn '<button type=\"button\" class=\"twxdb-chip twxdb-chip--wide' + (sel ? ' is-sel' : '') + '\" data-act=\"window\" data-i=\"' + o.i + '\">'\r\n\t\t\t\t\t+ '<img decoding=\"async\" src=\"' + esc(o.it.ThumbnailImage) + '\" alt=\"' + esc(plain(o.it.AlternativeText || o.it.Title)) + '\" loading=\"lazy\">'\r\n\t\t\t\t\t+ '<span>' + san(o.it.Title) + '<\/span><\/button>';\r\n\t\t\t}).join('');\r\n\t\t\treturn (g.name ? '<h3 class=\"twxdb-g\">' + esc(g.name) + '<\/h3>' : '') + '<div class=\"twxdb-chips\">' + chips + '<\/div>';\r\n\t\t}).join('');\r\n\t\tvar disc = plain(state.product.TopSectionDisclaimer) ? '<div class=\"twxdb-disc\">' + san(state.product.TopSectionDisclaimer) + '<\/div>' : '';\r\n\t\treturn '<h2 class=\"twxdb-h\">' + TITLES.windows + '<\/h2>' + noneCard + groups + disc;\r\n\t}\r\n\tfunction viewGlass() {\r\n\t\tvar cards = state.product.SpecialityGlassOptions.map(function (g, i) {\r\n\t\t\tvar sel = state.glass === state.product.SpecialityGlassOptions[i];\r\n\t\t\treturn '<button type=\"button\" class=\"twxdb-card' + (sel ? ' is-sel' : '') + '\" data-act=\"glass\" data-i=\"' + i + '\">'\r\n\t\t\t\t+ '<img decoding=\"async\" src=\"' + esc(g.Image) + '\" alt=\"' + esc(plain(g.AlternativeText || g.Title)) + '\" loading=\"lazy\">'\r\n\t\t\t\t+ '<span class=\"twxdb-card-t\">' + san(g.Title) + '<\/span>'\r\n\t\t\t\t+ '<\/button>';\r\n\t\t}).join('');\r\n\t\treturn '<h2 class=\"twxdb-h\">' + TITLES.glass + '<\/h2><div class=\"twxdb-grid\">' + cards + '<\/div>';\r\n\t}\r\n\tfunction viewSummary() {\r\n\t\tvar picks = picksHTML();\r\n\t\tvar intro = picks\r\n\t\t\t? '<p class=\"twxdb-sub\">Here\\'s your door. Leave your details and we\\'ll bring the quote (and the real thing) to you.<\/p>'\r\n\t\t\t: '<p class=\"twxdb-none\">No door picked yet \u2014 no problem. Leave your details, tell us what you have in mind, and we\\'ll design it together.<\/p>';\r\n\t\treturn '<h2 class=\"twxdb-h\">' + TITLES.summary + '<\/h2>' + intro + formHTML();\r\n\t}\r\n\tfunction viewFallback() {\r\n\t\treturn '<div class=\"twxdb-app\"><h2 class=\"twxdb-h\">Get your free door quote<\/h2>'\r\n\t\t\t+ '<p class=\"twxdb-sub\">Our door catalog is taking a break \u2014 leave your details and we\\'ll design it together.<\/p>'\r\n\t\t\t+ formHTML() + '<\/div>';\r\n\t}\r\n\tfunction viewThanks() {\r\n\t\treturn '<div class=\"twxdb-app twxdb-thanks\"><h2 class=\"twxdb-h\" style=\"display:inline-block\">Thank you!<\/h2>'\r\n\t\t\t+ '<p>Thanks \u2014 your design is on its way to our team. We\\'ll call you shortly.<\/p><\/div>';\r\n\t}\r\n\r\n\t\/* --- render --- *\/\r\n\tvar booted = false;\r\n\tfunction render(scroll) {\r\n\t\tvar html;\r\n\t\tif (state.step === 'fallback') { html = viewFallback(); }\r\n\t\telse if (state.step === 'thanks') { html = viewThanks(); }\r\n\t\telse {\r\n\t\t\tvar views = { collection: viewCollection, design: viewDesign, color: viewColor, windows: viewWindows, glass: viewGlass, summary: viewSummary };\r\n\t\t\thtml = '<div class=\"twxdb-app\">' + barHTML() + heroHTML() + views[state.step]() + '<\/div>';\r\n\t\t}\r\n\t\troot.innerHTML = html;\r\n\t\tif (scroll && booted) { root.scrollIntoView({ behavior: 'smooth', block: 'start' }); }\r\n\t\tbooted = true;\r\n\t}\r\n\tfunction renderLoading(msg) { root.innerHTML = '<div class=\"twxdb-load\">' + esc(msg) + '<\/div>'; }\r\n\r\n\t\/* --- actions --- *\/\r\n\tfunction pickProduct(i) {\r\n\t\tvar item = state.products[i];\r\n\t\tstate.design = null; state.color = null; state.window = null; state.glass = null; state.skipped = {};\r\n\t\trenderLoading('Loading ' + plain(item.Title) + '\u2026');\r\n\t\tloadProduct(item.ProductId).then(function (p) {\r\n\t\t\tstate.product = p;\r\n\t\t\tgo(nextAfter('collection'));\r\n\t\t}).catch(function () {\r\n\t\t\tstate.step = 'fallback';\r\n\t\t\trender();\r\n\t\t});\r\n\t}\r\n\troot.addEventListener('click', function (ev) {\r\n\t\tvar el = ev.target.closest ? ev.target.closest('[data-act]') : null;\r\n\t\tif (!el || !root.contains(el)) { return; }\r\n\t\tvar act = el.getAttribute('data-act');\r\n\t\tvar i = parseInt(el.getAttribute('data-i') || '-1', 10);\r\n\t\tif (act === 'product') { pickProduct(i); }\r\n\t\telse if (act === 'design') { state.design = state.product.ProductDesigns[i]; go(nextAfter('design')); }\r\n\t\telse if (act === 'color') { state.color = state.product.Colors[i]; go(nextAfter('color')); }\r\n\t\telse if (act === 'window') {\r\n\t\t\tif (i < 0) { state.window = { Title: 'No windows (solid)', none: true }; state.glass = null; }\r\n\t\t\telse { state.window = state.product.TopSections[i]; }\r\n\t\t\tgo(nextAfter('windows'));\r\n\t\t}\r\n\t\telse if (act === 'glass') { state.glass = state.product.SpecialityGlassOptions[i]; go(nextAfter('glass')); }\r\n\t\telse if (act === 'back') { back(); }\r\n\t\telse if (act === 'skip') { go('summary'); }\r\n\t});\r\n\troot.addEventListener('submit', function (ev) {\r\n\t\tvar f = ev.target;\r\n\t\tif (!f.classList || !f.classList.contains('twxdb-form')) { return; }\r\n\t\tev.preventDefault();\r\n\t\tfunction g(n) { var el = f.querySelector('[name=\"' + n + '\"]'); return el ? el.value.trim() : ''; }\r\n\t\tvar err = f.querySelector('.twxdb-err');\r\n\t\tvar name = g('name'), phone = g('phone'), email = g('email'), zip = g('zip'), notes = g('notes'), hp = g('website');\r\n\t\tif (!name || !phone || !email || !zip) {\r\n\t\t\terr.hidden = false;\r\n\t\t\terr.textContent = 'Please fill in your name, phone, email and zip.';\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tvar payload = { name: name, phone: phone, email: email, zip: zip, region: REGION, website: hp };\r\n\t\tif (notes) { payload.notes = notes; }\r\n\t\tif (state.product) { payload.collection = plain(state.product.Title); }\r\n\t\tif (state.design) { payload.design = plain(state.design.Title); }\r\n\t\tif (state.color) { payload.color = plain(state.color.Title); }\r\n\t\tif (state.window) { payload.windows = plain(state.window.Title); }\r\n\t\tif (state.glass) { payload.glass = plain(state.glass.Title); }\r\n\t\tvar btn = f.querySelector('button[type=\"submit\"]');\r\n\t\tbtn.disabled = true;\r\n\t\tbtn.textContent = 'Sending\u2026';\r\n\t\terr.hidden = true;\r\n\t\tfetch(ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application\/json' }, body: JSON.stringify(payload) }).then(function (r) {\r\n\t\t\tif (!r.ok) { throw new Error('http ' + r.status); }\r\n\t\t\tstate.step = 'thanks';\r\n\t\t\trender(true);\r\n\t\t}).catch(function () {\r\n\t\t\tbtn.disabled = false;\r\n\t\t\tbtn.textContent = BTN_LABEL;\r\n\t\t\terr.hidden = false;\r\n\t\t\terr.innerHTML = 'Something went wrong sending your design. Call us at <a href=\"tel:' + PHONE.tel + '\">' + PHONE.disp + '<\/a> and we\\'ll take it from there.';\r\n\t\t});\r\n\t});\r\n\r\n\t\/* --- boot --- *\/\r\n\trenderLoading('Loading door collections\u2026');\r\n\tloadList().then(function (list) {\r\n\t\tstate.products = list;\r\n\t\trender();\r\n\t}).catch(function () {\r\n\t\tstate.step = 'fallback';\r\n\t\trender();\r\n\t});\r\n})();\r\n<\/script>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0297fe3 elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0297fe3\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-\" data-id=\"\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element- elementor-widget elementor-widget-html\" data-id=\"\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"twx-band twx-band--navy\"><div class=\"twx-band-inner\"><h2>Ready for your new door?<\/h2><a class=\"twx-btn\" href=\"https:\/\/twinsgaragedoors.com\/wi\/contact-us\/\">Get a Free Quote<\/a><a class=\"twx-phone\" href=\"tel:+16088888785\">(608) 888-8785<\/a><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Official Clopay Dealer Design Your New Garage Door Pick your collection, style, color and windows \u2014 we\u2019ll bring it to life at your free on-site consult. Call (608) 888-8785Get a Free Quote Ready for your new door? Get a Free Quote(608) 888-8785<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[],"tags":[],"class_list":["post-6766","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/pages\/6766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/comments?post=6766"}],"version-history":[{"count":3,"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/pages\/6766\/revisions"}],"predecessor-version":[{"id":6769,"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/pages\/6766\/revisions\/6769"}],"wp:attachment":[{"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/media?parent=6766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/categories?post=6766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/twinsgaragedoors.com\/wi\/wp-json\/wp\/v2\/tags?post=6766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}