function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i .v-enter-active, .v-leave-active { transition: opacity 1s ease; } .v-enter-from, .v-leave-to { opacity: 0; } .ordertable { border: 1px solid gray; padding: 2px; /*max-width: 300px;*/ display: flex; flex-flow: row wrap; } .orderitem, .cost, .qty, .totalqty { flex: 1 16%; border-top-color: gray; font-size: 1.25em; font-weight: 100; } .totalqty { text-align: right; } .orderitem { flex: 1 52%; border-top-color: gray; font-size: 1.25em; font-weight: 100; } .table-cell input { /*border: 1px solid blue;*/ width: 80%; } .fullwidth { /*border: 1px solid green;*/ flex: 1 100%; } .additionalinfo { font-size: 0.75em; } input { border: 1px solid black; padding: 5px; width: 100%; } button { padding: 5px; margin: 5px; border: 1px solid black; background-color: #8dccd4; color: #ffffff; } Order empty 0" Item Cost Quantity Total cost {( l.params.drawerpackname )} {( "H:" + l.params.height + " W:" + l.params.width +" D:" + l.params.depth )} {( l.params.numberdrawers + " drawers")} {( l.params.style)} {( l.params.drawerbox)} {( l.cost )} {( l.qty )} {( l.qty * l.cost )} VAT {(invoice.vat)} Total {(invoice.total)} Proceed with quotation Please supply your details and then we will contact you with a confirmed quotation Your Name Your email address Your telephone number Request quotation confirmation const { createApp } = Vue var app = createApp({ mounted() { var c = readCookie(ordercookie); if (c) { var p = JSON.parse(c); for (var k in p.order) { //console.log("Set",k, p[k]) this.order[k] = p.order[k]; } } console.log("order",p, this.order); }, data() { return { state : "DRAFT", cuid : -1, order : { customerdetails: { name: "", email: "", telephone: "" }, items: [] } } }, computed: { invoice() { var total = 0; this.order.items.forEach(d = { console.log(d); total += d.cost * d.qty }) var vat = total*0.2; total *= 1.2; return { vat : vat.toFixed(2), total : total.toFixed(2) } } }, delimiters: ['{(', ')}'], methods: { edit(uid) { console.log(uid); return false; }, deletedp(uid) { console.log(uid); this.order.items = this.order.items.filter(item = item.uid != uid); createCookie(ordercookie, JSON.stringify({order:this.order}), 30); return false; }, getcuid() { var _instance = this; const url = 'https://api.diywardrobes.co.uk/uuid'; fetch(url, { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }) .then(response = response.json()) .then(function(d) { console.log(_instance.cuid, d); _instance.cuid = d.uuid; _instance.state = "READYTOSEND"; }); }, sendmsgfromweb() { var vm = this; const url = "https://api.diywardrobes.co.uk/msgfromweb"; fetch(url, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: this.order.customerdetails.email, telephone: this.order.customerdetails.telephone, name: this.order.customerdetails.name, job: "DP1", msg: JSON.stringify(this.order), uid: this.cuid }) }) .then(response = response.json()) .then(function(d) { console.log(d); if (d.result.error) { //console.log(d.result.error.details[0].message); //document.getElementById('feedback-error').innerHTML = "Message could not be sent: "+d.result.error.details[0].message; vm.$toast.open({ message: "Problem sending order "+d.result.error.details[0].message+" Please correct and try again", type: "error", duration: 10000, dismissible: true, position: "top" }); } else { vm.$toast.open({ message: "Many thanks for requesting a quotation! We will check through the order and respond within 24hours", type: "success", duration: 10000, dismissible: true, position: "top" }); vm.state = "QUOTATIONREQUESTED"; } }); } }, }); app.use(VueToast.ToastPlugin); app.mount('#orderpage')