drpuur
/
wo-bisch-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

order form

This commit is contained in:
Joerg Lehmann 2021-04-01 20:46:19 +02:00
parent 8e023db730
commit 706df620e5
4 changed files with 166 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
snippets/order.html
View File

@ -1,19 +1,26 @@
{{define "body_content"}} {{define "body_content"}}
<p class="title is-4">Ich bestelle...</p> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<div class="message is-danger"> <script src="static/js/order.js"></script>
<div class="message-body">
Aktuell noch in Entwicklung, kommen Sie sp&auml;ter noch einmal vorbei...
</div>
</div>
<div class="columns"> <div id="modal" class="modal is-active">
<div class="column is-one-quarter"> <div class="modal-background"></div>
<img src="/static/images/wo-bisch-tracker-product.jpg"> <div class="modal-card">
</div> <header class="modal-card-head">
<div class="column is-three-quarters"> <p class="modal-card-title">GPS Tracker bestellen</p>
<p class="is-size-2 has-text-weight-bold">CHF 150.00</p> </header>
<p class="is-size-7 neg-margin-1">pro Stück, inkl. MwSt.</p> <div class="modal-card-body">
<br /> <!-- Content ... -->
<div class="columns">
<div class="column is-one-quarter">
<figure class="image is-1by1">
<img src="/static/images/wo-bisch-tracker-product.png" alt="GPS Tracker Produktbild">
</figure>
</div>
<div class="column is-three-quarters">
<p class="is-size-2 has-text-weight-bold">CHF 150.00</p>
<p class="is-size-7 neg-margin-1">pro Stück, inkl. MwSt.</p>
</div>
</div>
<div class="content"> <div class="content">
Im Preis enthalten: Im Preis enthalten:
<ul> <ul>
@ -23,71 +30,67 @@ Aktuell noch in Entwicklung, kommen Sie sp&auml;ter noch einmal vorbei...
<li>12 Monate Abo, <span class="has-text-weight-bold">anschliessend CHF 5.00 pro Monat</span></li> <li>12 Monate Abo, <span class="has-text-weight-bold">anschliessend CHF 5.00 pro Monat</span></li>
</ul> </ul>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<div class="field"> <div class="field">
<label class="label">Bestellmenge</label> <label class="label">Bestellmenge</label>
<div class="control"> <div class="control has-icons-right">
<input class="input" type="number" id="quantity" name="quantity" min="1" max="5" value="1"> <input class="input" type="text" id="quantity" value="1">
<span id="quantity_exclamation" class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p id="quantity_errormsg" class="help is-danger"></p>
</div>
</div>
<div class="column is-three-quarters">
<div class="field">
<label class="label">E-Mail</label>
<div class="control has-icons-left has-icons-right">
<input class="input" type="email" id="email" placeholder="max.mustermann@example.com" value="">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span id="email_exclamation" class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p id="email_errormsg" class="help is-danger"></p>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="columns">
</div> <div class="column is-half">
</div> <div class="field">
<label class="label">Lieferadresse</label>
<div class="columns"> <div class="control">
<div class="column is-half"> <textarea class="textarea has-fixed-size" rows="5" maxlength="250" id="delivery_address" placeholder="Lieferadresse" autocomplete="off"></textarea>
<div class="field"> </div>
<label class="label">E-Mail</label> </div>
<div class="control has-icons-left has-icons-right"> </div>
<input class="input is-danger" type="email" placeholder="max.mustermann@example.com" value=""> <div class="column is-half">
<span class="icon is-small is-left"> <div class="field">
<i class="fas fa-envelope"></i> <label class="label">Rechnungsadresse</label>
</span> <div class="control">
<span class="icon is-small is-right"> <textarea class="textarea has-fixed-size" rows="5" maxlength="250" id="billing_address" placeholder="leer lassen, wenn wie Lieferadresse" autocomplete="off"></textarea>
<i class="fas fa-exclamation-triangle"></i> </div>
</span> </div>
</div>
</div> </div>
<p class="help is-danger">This email is invalid</p>
</div> <div class="field">
</div> <div class="control">
</div> <label class="checkbox">
<input type="checkbox">
<div class="columns"> Ich stimme den <a href="#">Gesch&auml;ftsbedingungen</a> zu
<div class="column is-half"> </label>
<div class="field"> </div>
<label class="label">Lieferadresse</label>
<div class="control">
<textarea class="textarea" placeholder="Lieferadresse"></textarea>
</div> </div>
</div> </div>
</div> <footer class="modal-card-foot">
<div class="column is-half"> <button id="modal-save" class="button is-success">Bestellen</button>
<div class="field"> <button id="modal-close" class="button">Abbrechen</button>
<label class="label">Rechnungsadresse</label> </footer>
<div class="control">
<textarea class="textarea" placeholder="leer lassen, wenn wie Lieferadresse"></textarea>
</div>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
Ich stimme den <a href="#">Gesch&auml;ftsbedingungen</a> zu
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Bestellen</button>
</div>
<div class="control">
<button class="button is-link is-light">Abbrechen</button>
</div> </div>
</div> </div>
{{end}} {{end}}

BIN
static/images/wo-bisch-tracker-product.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
static/images/wo-bisch-tracker-product.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

90
static/js/order.js Normal file
View File

@ -0,0 +1,90 @@
function validate(what, text) {
console.log('Validate '+what);
if (what == 'quantity') {
var re = /^[0-9]{1,2}$/;
} else if (what == 'email') {
var re = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
} else if (what == 'delivery_address') {
var re = /^notpermitted$/;
} else if (what == 'billing_address') {
var re = /^notpermitted$/;
} else {
var re = /^notpermitted$/;
}
return re.test(text);
}
$(document).ready(function () {
console.log("I am ready!!!");
$("#quantity_exclamation").hide();
$("#email_exclamation").hide();
$("#modal-save").click(function() {
// Validation Code
var is_valid = true;
if (!validate('quantity',$('#quantity').val())) {
$('#quantity_errormsg').html('Ung&uuml;ltige Anzahl');
$("#quantity").addClass("is-danger");
$("#quantity_exclamation").show();
is_valid = false;
} else {
$('#quantity_errormsg').html('');
$("#quantity").removeClass("is-danger");
$("#quantity_exclamation").hide();
}
if (!validate('email',$('#email').val())) {
$('#email_errormsg').html('Ung&uuml;ltige E-Mail Adresse');
$("#email").addClass("is-danger");
$("#email_exclamation").show();
is_valid = false;
} else {
$('#email_errormsg').html('');
$("#email").removeClass("is-danger");
$("#email_exclamation").hide();
}
if (!(is_valid)) {
return;
}
$.ajax({
url: "order_tracker",
type: "post", //send it through post method
dataType: "json",
data: {
quantity: $('#quantity').val(),
email: $('#email').val(),
delivery_address: $("#delivery_address").val(),
billing_address: $("#billing_address").val()
},
success: function(response) {
console.log('order success');
if (response.rc == 0) {
console.log('response.rc == 0');
}
},
error: function(xhr) {
console.log('order error');
//Do Something to handle error
}
});
console.log("order");
$("#modal").removeClass("is-active");
});
$("#modal-close").click(function () {
$("#modal").removeClass("is-active");
});
function callback() {
console.log("Callback Funktion wird aufgerufen");
$('#quantity').focus().select();
}
setTimeout(callback, 10);
});