nathan/ptcoffee_django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update newsletter with captcha

Browse Source
This commit is contained in:
Nathan Chapman 2022-05-24 19:35:18 -06:00
parent 0cfc0638a3
commit e2c9b197b1
1 changed files with 341 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
src/storefront/templates/storefront/partials/_newsletter.html
View File

@ -1,57 +1,45 @@
<form method="POST" action="https://ptcoffee.activehosted.com/proc.php" id="_form_3_" class="_form _form_3 _inline-form _dark" novalidate> <form action="https://ptcoffee.activehosted.com/proc.php" class="_form _form_3 _inline-form _dark" id="_form_3_" method="post" name="_form_3_" novalidate="">
<input type="hidden" name="u" value="3" /> <input name="u" type="hidden" value="3"> <input name="f" type="hidden" value="3"> <input name="s" type="hidden"> <input name="c" type="hidden" value="0"> <input name="m" type="hidden" value="0"> <input name="act" type="hidden" value="sub"> <input name="v" type="hidden" value="2"> <input name="or" type="hidden" value="976f58eb66df9127e2ab7e5003a0ca69">
<input type="hidden" name="f" value="3" />
<input type="hidden" name="s" />
<input type="hidden" name="c" value="0" />
<input type="hidden" name="m" value="0" />
<input type="hidden" name="act" value="sub" />
<input type="hidden" name="v" value="2" />
<input type="hidden" name="or" value="4ef7da616ee5aadd87ec694f0969cb87" />
<div class="_form-content"> <div class="_form-content">
<div class="_form_element _x15986148 _full_width _clear" > <div class="_form_element _x15986148 _full_width _clear">
<div class="_form-title"> <div class="_form-title">
<h5>Get 10% OFF</h5> <h5>Get 10% OFF</h5>
</div> </div>
</div> </div>
<div class="_form_element _x92496915 _full_width _clear" > <div class="_form_element _x92496915 _full_width _clear">
<div class="_html-code"> <div class="_html-code">
<p>Subscribe to get 10% off your first order!</p> <p>Subscribe to get 10% off your first order!</p>
</div> </div>
</div> </div>
<div class="_form_element _x55366865 _full_width " > <div class="_form_element _x55366865 _full_width">
<label for="fullname" class="_form-label"> <label class="_form-label" for="fullname">Full Name</label>
Full Name
</label>
<div class="_field-wrapper"> <div class="_field-wrapper">
<input type="text" id="fullname" name="fullname" placeholder="Type your name" /> <input id="fullname" name="fullname" placeholder="Type your name" type="text">
</div><!-- This STARTS the Custom Objects section -->
</div> </div>
<!-- This STARTS the Custom Objects section --> <div class="_form_element _x53687886 _full_width">
</div><br> <label class="_form-label" for="email">Email*</label>
<div class="_form_element _x53687886 _full_width " >
<label for="email" class="_form-label">Email*</label>
<div class="_field-wrapper"> <div class="_field-wrapper">
<input type="text" id="email" name="email" placeholder="Type your email" required/> <input id="email" name="email" placeholder="Type your email" type="text">
</div><!-- This STARTS the Custom Objects section -->
</div> </div>
<!-- This STARTS the Custom Objects section --> <br>
</div><br> <div class="_form_element _x71226546 _full_width">
<label class="_form-label" for="ls">Please verify your request*</label>
<div class="g-recaptcha" data-sitekey="6LcwIw8TAAAAACP1ysM08EhCgzd6q5JAOUR1a0Go"></div>
</div>
<br>
<div class="_button-wrapper _full_width"> <div class="_button-wrapper _full_width">
<p> <button class="_submit" id="_form_3_submit" type="submit">Subscribe</button>
<button id="_form_3_submit" class="_submit" type="submit">
Subscribe
</button>
</p>
</div> </div>
<div class="_clear-element"> <div class="_clear-element"></div>
</div> </div>
</div> <div class="_form-thank-you" style="display:none;"></div>
<div class="_form-thank-you" style="display:none;"> </form>
</div>
</form>
<script type="text/javascript"> <script type="text/javascript">
window.cfields = []; window.cfields = [];
window._show_thank_you = function(id, message, trackcmp_url, email) { window._show_thank_you = function(id, message, trackcmp_url, email) {
var form = document.getElementById('_form_' + id + '_'), var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you');
thank_you = form.querySelector('._form-thank-you');
form.querySelector('._form-content').style.display = 'none'; form.querySelector('._form-content').style.display = 'none';
thank_you.innerHTML = message; thank_you.innerHTML = message;
thank_you.style.display = 'block'; thank_you.style.display = 'block';
@ -61,16 +49,13 @@
visitorObject('setEmail', email); visitorObject('setEmail', email);
visitorObject('update'); visitorObject('update');
} else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) { } else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {
// Site tracking URL to use after inline form submission. // Site tracking URL to use after inline form submission.
_load_script(trackcmp_url); _load_script(trackcmp_url);
} }
if (typeof window._form_callback !== 'undefined') window._form_callback(id); if (typeof window._form_callback !== 'undefined') window._form_callback(id);
}; };
window._show_error = function(id, message, html) { window._show_error = function(id, message, html) {
var form = document.getElementById('_form_' + id + '_'), var form = document.getElementById('_form_' + id + '_'), err = document.createElement('div'), button = form.querySelector('button'), old_error = form.querySelector('._form_error');
err = document.createElement('div'),
button = form.querySelector('button'),
old_error = form.querySelector('._form_error');
if (old_error) old_error.parentNode.removeChild(old_error); if (old_error) old_error.parentNode.removeChild(old_error);
err.innerHTML = message; err.innerHTML = message;
err.className = '_error-inner _form_error _no_arrow'; err.className = '_error-inner _form_error _no_arrow';
@ -85,11 +70,9 @@
div.innerHTML = html; div.innerHTML = html;
err.appendChild(div); err.appendChild(div);
} }
}; };
window._load_script = function(url, callback) { window._load_script = function(url, callback) {
var head = document.querySelector('head'), var head = document.querySelector('head'), script = document.createElement('script'), r = false;
script = document.createElement('script'),
r = false;
script.type = 'text/javascript'; script.type = 'text/javascript';
script.charset = 'utf-8'; script.charset = 'utf-8';
script.src = url; script.src = url;
@ -102,8 +85,8 @@
}; };
} }
head.appendChild(script); head.appendChild(script);
}; };
(function() { (function() {
if (window.location.search.search("excludeform") !== -1) return false; if (window.location.search.search("excludeform") !== -1) return false;
var getCookie = function(name) { var getCookie = function(name) {
var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)')); var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));
@ -129,9 +112,7 @@
} }
var _removed = false; var _removed = false;
var form_to_submit = document.getElementById('_form_3_'); var form_to_submit = document.getElementById('_form_3_');
var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false;
tooltips = [],
submitted = false;
var getUrlParam = function(name) { var getUrlParam = function(name) {
var params = new URLSearchParams(window.location.search); var params = new URLSearchParams(window.location.search);
@ -178,10 +159,7 @@
} }
}; };
var create_tooltip = function(elem, text) { var create_tooltip = function(elem, text) {
var tooltip = document.createElement('div'), var tooltip = document.createElement('div'), arrow = document.createElement('div'), inner = document.createElement('div'), new_tooltip = {};
arrow = document.createElement('div'),
inner = document.createElement('div'),
new_tooltip = {};
if (elem.type != 'radio' && elem.type != 'checkbox') { if (elem.type != 'radio' && elem.type != 'checkbox') {
tooltip.className = '_error'; tooltip.className = '_error';
arrow.className = '_error-arrow'; arrow.className = '_error-arrow';
@ -203,8 +181,7 @@
}; };
var resize_tooltip = function(tooltip) { var resize_tooltip = function(tooltip) {
var rect = tooltip.elem.getBoundingClientRect(); var rect = tooltip.elem.getBoundingClientRect();
var doc = document.documentElement, var doc = document.documentElement, scrollPosition = rect.top - ((window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0));
scrollPosition = rect.top - ((window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0));
if (scrollPosition < 40) { if (scrollPosition < 40) {
tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _below'; tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _below';
} else { } else {
@ -218,9 +195,7 @@
} }
}; };
var validate_field = function(elem, remove) { var validate_field = function(elem, remove) {
var tooltip = null, var tooltip = null, value = elem.value, no_error = true;
value = elem.value,
no_error = true;
remove ? remove_tooltip(elem) : false; remove ? remove_tooltip(elem) : false;
if (elem.type != 'checkbox') elem.className = elem.className.replace(/ ?_has_error ?/g, ''); if (elem.type != 'checkbox') elem.className = elem.className.replace(/ ?_has_error ?/g, '');
if (elem.getAttribute('required') !== null) { if (elem.getAttribute('required') !== null) {
@ -228,7 +203,8 @@
var elems = form_to_submit.elements[elem.name]; var elems = form_to_submit.elements[elem.name];
if (!(elems instanceof NodeList || elems instanceof HTMLCollection) || elems.length <= 1) { if (!(elems instanceof NodeList || elems instanceof HTMLCollection) || elems.length <= 1) {
no_error = elem.checked; no_error = elem.checked;
} else { }
else {
no_error = false; no_error = false;
for (var i = 0; i < elems.length; i++) { for (var i = 0; i < elems.length; i++) {
if (elems[i].checked) no_error = true; if (elems[i].checked) no_error = true;
@ -237,10 +213,8 @@
if (!no_error) { if (!no_error) {
tooltip = create_tooltip(elem, "Please select an option."); tooltip = create_tooltip(elem, "Please select an option.");
} }
} else if (elem.type == 'checkbox') { } else if (elem.type =='checkbox') {
var elems = form_to_submit.elements[elem.name], var elems = form_to_submit.elements[elem.name], found = false, err = [];
found = false,
err = [];
no_error = true; no_error = true;
for (var i = 0; i < elems.length; i++) { for (var i = 0; i < elems.length; i++) {
if (elems[i].getAttribute('required') === null) continue; if (elems[i].getAttribute('required') === null) continue;
@ -302,17 +276,16 @@
return no_error; return no_error;
}; };
var needs_validate = function(el) { var needs_validate = function(el) {
if (el.getAttribute('required') !== null) { if(el.getAttribute('required') !== null){
return true return true
} }
if (el.name === 'email' && el.value !== "") { if(el.name === 'email' && el.value !== ""){
return true return true
} }
return false return false
}; };
var validate_form = function(e) { var validate_form = function(e) {
var err = form_to_submit.querySelector('._form_error'), var err = form_to_submit.querySelector('._form_error'), no_error = true;
no_error = true;
if (!submitted) { if (!submitted) {
submitted = true; submitted = true;
for (var i = 0, len = allInputs.length; i < len; i++) { for (var i = 0, len = allInputs.length; i < len; i++) {
@ -339,7 +312,7 @@
addEvent(input, 'change', function() { addEvent(input, 'change', function() {
validate_field(this, true); validate_field(this, true);
}); });
} else if (input.type == 'textarea') { } else if (input.type == 'textarea'){
addEvent(input, 'input', function() { addEvent(input, 'input', function() {
validate_field(this, true); validate_field(this, true);
}); });
@ -365,82 +338,34 @@
}; };
addEvent(window, 'resize', resize_tooltips); addEvent(window, 'resize', resize_tooltips);
addEvent(window, 'scroll', resize_tooltips); addEvent(window, 'scroll', resize_tooltips);
var _form_serialize = function(form) { window['recaptcha_callback'] = function() {
if (!form || form.nodeName !== "FORM") { // Get all recaptchas in the DOM (there may be more than one form on the page).
return var recaptchas = document.getElementsByClassName("g-recaptcha");
} for (var i in recaptchas) {
var i, j, q = []; // Set the recaptcha element ID, so the recaptcha can be applied to each element.
for (i = 0; i < form.elements.length; i++) { var recaptcha_id = "recaptcha_" + i;
if (form.elements[i].name === "") { recaptchas[i].id = recaptcha_id;
continue var el = document.getElementById(recaptcha_id);
} if (el != null) {
switch (form.elements[i].nodeName) { var sitekey = el.getAttribute("data-sitekey");
case "INPUT": var stoken = el.getAttribute("data-stoken");
switch (form.elements[i].type) { grecaptcha.render(recaptcha_id, {"sitekey":sitekey,"stoken":stoken});
case "text": }
case "number": }
case "date": }; _load_script("//www.google.com/recaptcha/api.js?onload=recaptcha_callback&render=explicit");
case "time": var _form_serialize = function(form){if(!form||form.nodeName!=="FORM"){return }var i,j,q=[];for(i=0;i<form.elements.length;i++){if(form.elements[i].name===""){continue}switch(form.elements[i].nodeName){case"INPUT":switch(form.elements[i].type){case"text":case"number":case"date":case"time":case"hidden":case"password":case"button":case"reset":case"submit":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"checkbox":case"radio":if(form.elements[i].checked){q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value))}break;case"file":break}break;case"TEXTAREA":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"SELECT":switch(form.elements[i].type){case"select-one":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"select-multiple":for(j=0;j<form.elements[i].options.length;j++){if(form.elements[i].options[j].selected){q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].options[j].value))}}break}break;case"BUTTON":switch(form.elements[i].type){case"reset":case"submit":case"button":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break}break}}return q.join("&")};
case "hidden": var form_submit = function(e) {
case "password":
case "button":
case "reset":
case "submit":
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case "checkbox":
case "radio":
if (form.elements[i].checked) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value))
}
break;
case "file":
break
}
break;
case "TEXTAREA":
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case "SELECT":
switch (form.elements[i].type) {
case "select-one":
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case "select-multiple":
for (j = 0; j < form.elements[i].options.length; j++) {
if (form.elements[i].options[j].selected) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value))
}
}
break
}
break;
case "BUTTON":
switch (form.elements[i].type) {
case "reset":
case "submit":
case "button":
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break
}
break
}
}
return q.join("&")
};
var form_submit = function(e) {
e.preventDefault(); e.preventDefault();
if (validate_form()) { if (validate_form()) {
// use this trick to get the submit button & disable it using plain javascript // use this trick to get the submit button & disable it using plain javascript
document.querySelector('#_form_3_submit').disabled = true; document.querySelector('#_form_3_submit').disabled = true;
var serialized = _form_serialize(document.getElementById('_form_3_')).replace(/%0A/g, '\\n'); var serialized = _form_serialize(document.getElementById('_form_3_')).replace(/%0A/g, '\\n');
var err = form_to_submit.querySelector('._form_error'); var err = form_to_submit.querySelector('._form_error');
err ? err.parentNode.removeChild(err) : false; err ? err.parentNode.removeChild(err) : false;
_load_script('https://ptcoffee.activehosted.com/proc.php?' + serialized + '&jsonp=true'); _load_script('https://ptcoffee.activehosted.com/proc.php?' + serialized + '&jsonp=true');
} }
return false; return false;
}; };
addEvent(form_to_submit, 'submit', form_submit); addEvent(form_to_submit, 'submit', form_submit);
})(); })();
</script> </script>