← back to Dw Theme Live Signin Split
snippets/dw-signin-modal.liquid
176 lines
{% comment %} DW sign-in popup — returning clients sign in first (passwordless, email-code); new visitors choose Retail (emailed code for 3 free samples) or Professional (moderated Apply for Trade). dw_trade flag consumed in templates/customers/account.liquid. {% endcomment %}
<style>
.dwsm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto;font-family:Lora,serif;}
.dwsm-overlay.dwsm-open{display:flex;}
.dwsm-card{width:100%;max-width:460px;background:#fff;border:1px solid #e4e4e4;border-radius:4px;padding:40px 40px 40px;box-shadow:0 8px 44px rgba(0,0,0,.28);position:relative;}
.dwsm-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;line-height:1;color:#999;cursor:pointer;}
.dwsm-close:hover{color:#000;}
.dwsm-offer{text-align:center;margin:0 0 20px;}
.dwsm-offer h2{font-weight:400;font-size:1.55rem;color:#000;margin:0 0 4px;letter-spacing:.02em;}
.dwsm-offer p{font-size:.86rem;color:#787878;margin:0;}
.dwsm-toggle{display:flex;gap:10px;margin:0 0 24px;}
.dwsm-opt{flex:1;text-align:center;border:1px solid #e4e4e4;border-radius:4px;padding:13px 8px;cursor:pointer;transition:all .15s ease;background:#fff;}
.dwsm-opt:hover{border-color:#b08212;}
.dwsm-opt.active{border-color:#b08212;background:#faf6ec;box-shadow:0 0 0 1px #b08212;}
.dwsm-opt .t{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#444;margin-bottom:3px;}
.dwsm-opt .s{display:block;font-size:.92rem;color:#b08212;}
.dwsm-gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 20px;background:#fff;border:1px solid #dadce0;border-radius:3px;cursor:pointer;font-family:Lora,serif;font-size:.92rem;color:#3c4043;margin-bottom:18px;}
.dwsm-gbtn:hover{background:#f7f8f8;}
.dwsm-div{display:flex;align-items:center;gap:14px;margin:0 0 18px;}
.dwsm-div span{font-size:.72rem;color:#999;text-transform:uppercase;letter-spacing:.1em;}
.dwsm-div i{flex:1;height:1px;background:#e4e4e4;}
.dwsm-field{margin-bottom:16px;}
.dwsm-field label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:#444;margin-bottom:6px;}
.dwsm-field input{width:100%;padding:12px 14px;border:1px solid #e4e4e4;border-radius:3px;font-family:Lora,serif;font-size:.95rem;color:#444;box-sizing:border-box;}
.dwsm-field input:focus{outline:none;border-color:#b08212;box-shadow:0 0 0 1px #b08212;}
.dwsm-overlay input.dwsm-submit{width:100%;padding:14px;background:#000 !important;color:#fff !important;border:none !important;border-radius:3px;font-family:Lora,serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;}
.dwsm-overlay input.dwsm-submit:hover{background:#262626 !important;}
.dwsm-err{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;font-size:.85rem;padding:10px 14px;border-radius:3px;margin-bottom:16px;text-align:center;}
.dwsm-return{margin:0 0 8px;}
.dwsm-return h2{font-weight:400;font-size:1.55rem;color:#000;margin:0 0 14px;letter-spacing:.02em;text-align:center;}
.dwsm-return-cap{font-size:.82rem;color:#787878;margin:2px 0 0;text-align:center;}
.dwsm-newdiv{display:flex;align-items:center;gap:14px;margin:22px 0 20px;}
.dwsm-newdiv span{font-size:.72rem;color:#999;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;}
.dwsm-newdiv i{flex:1;height:1px;background:#e4e4e4;}
.dwsm-foot{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid #e4e4e4;font-size:.85rem;color:#787878;}
.dwsm-foot a{color:#b08212;text-decoration:none;}
.dwsm-foot a:hover{text-decoration:underline;}
</style>
<div class="dwsm-overlay" id="dw-signin" data-dwsm-overlay>
<div class="dwsm-card" role="dialog" aria-modal="true" aria-label="Sign in">
<button class="dwsm-close" type="button" data-dwsm-close aria-label="Close">×</button>
{%- comment -%} (0) RETURNING SIGN-IN — first and most prominent. Passwordless: email -> 6-digit code. {%- endcomment -%}
{%- unless customer -%}
<div class="dwsm-return">
<h2>Welcome back</h2>
<input type="button" class="dwsm-submit" data-dwsm-login="{{ routes.account_login_url }}" value="Sign In" style="margin-bottom:12px;">
<button type="button" class="dwsm-gbtn" data-dwsm-login="{{ routes.account_login_url }}">
<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.81.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.47.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/></svg>
Continue with Google
</button>
<p class="dwsm-return-cap">Returning customer? Just enter your email — no password needed.</p>
</div>
<div class="dwsm-newdiv"><i></i><span>New to Designer Wallcoverings?</span><i></i></div>
<div class="dwsm-offer">
<h2>Free Samples, On Us</h2>
<p>Sign in — we'll email you a code for 3 free samples.</p>
</div>
<div class="dwsm-toggle">
<div class="dwsm-opt active" data-dwsm-type="retail" role="button" tabindex="0">
<span class="t">Retail</span><span class="s">code for 3 free</span>
</div>
<div class="dwsm-opt" data-dwsm-type="professional" role="button" tabindex="0">
<span class="t">Professional</span><span class="s">apply for trade</span>
</div>
</div>
{%- comment -%} Google sign-up offered up front; deep-links to the hosted portal's native Google. {%- endcomment -%}
<div data-dwsm-google>
<button type="button" class="dwsm-gbtn" data-dwsm-login="{{ routes.account_login_url }}">
<svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.81.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.47.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/></svg>
Continue with Google
</button>
<div class="dwsm-div"><i></i><span>or</span><i></i></div>
</div>
{%- endunless -%}
{%- if customer -%}
<div class="dwsm-return">
<h2>Apply for Trade Pricing</h2>
<p class="dwsm-return-cap">You're signed in — submit your business details and our team will review your trade account.</p>
</div>
{%- endif -%}
{%- comment -%} Moderated trade application — shown when "Professional" is selected. {%- endcomment -%}
<form class="dwsm-trade" data-dwsm-trade style="display:{% if customer %}block{% else %}none{% endif %};" novalidate>
<div class="dwsm-field">
<label>Business name</label>
<input type="text" name="business_name" autocomplete="organization" value="{{ customer.default_address.company }}" required>
</div>
<div class="dwsm-field">
<label>Work email</label>
<input type="email" name="email" autocomplete="email" value="{{ customer.email }}" required>
</div>
<div class="dwsm-field">
<label>Resale / business license #</label>
<input type="text" name="resale_cert">
</div>
<input type="button" class="dwsm-submit" data-dwsm-trade-submit value="Apply for Trade">
<p class="dwsm-trade-note" style="font-size:.78rem;color:#787878;margin:12px 0 0;text-align:center;">
Trade applications are reviewed by our team. We'll email you once approved.
</p>
</form>
{%- unless customer -%}
<div data-dwsm-retail>
<input type="button" class="dwsm-submit" data-dwsm-login="{{ routes.account_login_url }}" value="Sign In / Create Account">
<div class="dwsm-foot">
New to Designer Wallcoverings? <a href="{{ routes.account_register_url }}">Create account</a>
</div>
</div>
{%- endunless -%}
</div>
</div>
<script>
(function(){
var overlay=document.getElementById('dw-signin');
if(!overlay) return;
var TRADE_APPLY_URL = 'https://signup.designerwallcoverings.com/trade/apply'; // fulfillment service public URL
function open(){overlay.classList.add('dwsm-open');document.body.style.overflow='hidden';}
function close(){overlay.classList.remove('dwsm-open');document.body.style.overflow='';}
function persistTrade(){
var proEl=overlay.querySelector('[data-dwsm-type="professional"]');
var pro=proEl&&proEl.classList.contains('active');
try{pro?sessionStorage.setItem('dw_trade','1'):sessionStorage.removeItem('dw_trade');}catch(e){}
}
document.addEventListener('click',function(e){
var t=e.target.closest('[data-dw-signin], a[href="#dw-signin"], a[href$="#dw-signin"]');
if(t){e.preventDefault();open();return;}
var login=e.target.closest('[data-dwsm-login]');
if(login){e.preventDefault();persistTrade();window.location.href=login.getAttribute('data-dwsm-login');return;}
if(e.target.closest('[data-dwsm-close]')||e.target===overlay){close();}
});
document.addEventListener('keydown',function(e){if(e.key==='Escape')close();});
var opts=overlay.querySelectorAll('[data-dwsm-type]');
var retailBox=overlay.querySelector('[data-dwsm-retail]');
var googleBox=overlay.querySelector('[data-dwsm-google]');
var tradeForm=overlay.querySelector('[data-dwsm-trade]');
function setType(type){
opts.forEach(function(o){o.classList.toggle('active',o.getAttribute('data-dwsm-type')===type);});
var pro=(type==='professional');
if(retailBox) retailBox.style.display=pro?'none':'';
if(googleBox) googleBox.style.display=pro?'none':'';
if(tradeForm) tradeForm.style.display=pro?'block':'none';
try{pro?sessionStorage.setItem('dw_trade','1'):sessionStorage.removeItem('dw_trade');}catch(e){}
}
// Moderated trade application submit -> POST /trade/apply on the fulfillment service.
overlay.addEventListener('click',function(e){
if(!e.target.closest('[data-dwsm-trade-submit]')) return;
e.preventDefault();
var f=tradeForm; if(!f) return;
var body={
business_name:(f.business_name.value||'').trim(),
email:(f.email.value||'').trim(),
resale_cert:(f.resale_cert.value||'').trim()
};
if(!body.email||!body.business_name){alert('Business name and work email are required.');return;}
fetch(TRADE_APPLY_URL,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
.then(function(r){return r.json();})
.then(function(){f.innerHTML='<p style="text-align:center;color:#444;padding:8px 0;">Thanks — your trade application is in review. We\'ll email you once it\'s approved.</p>';})
.catch(function(){alert('Sorry, something went wrong. Please try again.');});
});
opts.forEach(function(o){
o.addEventListener('click',function(){setType(o.getAttribute('data-dwsm-type'));});
o.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();setType(o.getAttribute('data-dwsm-type'));}});
});
if(window.location.hash==='#dw-signin'){open();}
})();
</script>