From 4bbffe9d0ca786cfe8cf59ab743eef5f407fef0d Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Thu, 18 Nov 2021 22:32:55 -0300 Subject: [PATCH] payment logic done --- payment/css/styles.css | 23 +++++++++++++++ payment/css/styles.css.map | 2 +- payment/index.html | 3 +- payment/sass/styles.scss | 40 ++++++++++++++++++++++++- payment/script/calculateTotal.js | 10 +++++++ payment/script/getOrderData.js | 8 +++++ payment/script/logoLink.js | 12 ++++++++ payment/script/putOrderInHTML.js | 50 ++++++++++++++++++++++++++++++++ payment/script/script.js | 18 ++++++++++++ scripts/pagarLogica.js | 2 ++ 10 files changed, 165 insertions(+), 3 deletions(-) create mode 100644 payment/script/calculateTotal.js create mode 100644 payment/script/getOrderData.js create mode 100644 payment/script/logoLink.js create mode 100644 payment/script/putOrderInHTML.js create mode 100644 payment/script/script.js diff --git a/payment/css/styles.css b/payment/css/styles.css index b501582..623d587 100644 --- a/payment/css/styles.css +++ b/payment/css/styles.css @@ -26,6 +26,7 @@ header .logo { display: flex; user-select: none; margin-left: 1vw; + cursor: pointer; } header .logo h3 { font-weight: normal; @@ -76,9 +77,31 @@ header.sub-header { width: calc(40vw - 1vw); margin-right: calc(1vw * 2); } +.payment-container .column.second-column table { + border-collapse: collapse; + border-spacing: 2px; +} .payment-container .column.second-column table thead { border-bottom: 1px solid #858585; } +.payment-container .column.second-column table thead th:first-child { + text-align: initial; +} +.payment-container .column.second-column table tbody::before { + content: ""; + display: block; + height: 1vh; +} +.payment-container .column.second-column table tbody tr:first-child { + margin-top: 3vh; +} +.payment-container .column.second-column table tbody tr td { + text-align: center; + padding-bottom: 1vh; +} +.payment-container .column.second-column table tbody tr td.name { + text-align: initial; +} .payment-container .column.second-column .message { border: 1px solid #ff5858; background-color: #0008; diff --git a/payment/css/styles.css.map b/payment/css/styles.css.map index 0491599..dc81f67 100644 --- a/payment/css/styles.css.map +++ b/payment/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAOA;EAEI;EAEA;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;;AAGA;EAEI;EAEA;EACA;EAEA;;AAIR;EAEI;EAEA;EAEA;EACA;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA,YAlFkB;EAmFlB,gBAnFkB;;AAqFlB;EAEI;EAEA;EACA;;AAEA;EAxFJ;EA4FQ;;AAEA;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;AAMZ;EAzHJ;EA6HQ;;AAII;EAEI;;AAIR;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;EACA;;AAMR;EAEI;EACA;;AAGJ;EAEI","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAOA;EAEI;EAEA;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EAEA;EACA;EAEA;;AAIR;EAEI;EAEA;EAEA;EACA;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA,YAnFkB;EAoFlB,gBApFkB;;AAsFlB;EAEI;EAEA;EACA;;AAEA;EAzFJ;EA6FQ;;AAEA;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;AAMZ;EA1HJ;EA8HQ;;AAEA;EACI;EAEA;;AAEA;EAEI;;AAEA;EAEI;;AAIR;EAEI;EACA;EACA;;AAKA;EAEI;;AAKA;EAEI;EACA;;AAGJ;EAEI;;AAMhB;EAEI;EACA;EAEA;EAEA;;AAGJ;EAEI;EAEA;EACA;;AAMR;EAEI;EACA;;AAGJ;EAEI","file":"styles.css"} \ No newline at end of file diff --git a/payment/index.html b/payment/index.html index 4b6d2d6..784eb39 100644 --- a/payment/index.html +++ b/payment/index.html @@ -53,7 +53,7 @@ -

Total: 00

+

Total: 00 USD

Thanks for the interest, but this is not a real e-commerce. This is just a project to develop one. Thank you for your interest, I hope you liked it. Francisco Pessano.

@@ -64,4 +64,5 @@
+ \ No newline at end of file diff --git a/payment/sass/styles.scss b/payment/sass/styles.scss index 3ab91ad..54514c6 100644 --- a/payment/sass/styles.scss +++ b/payment/sass/styles.scss @@ -47,7 +47,8 @@ header { user-select: none; margin-left: 1vw; - + + cursor: pointer; h3 { @@ -130,10 +131,47 @@ header { margin-right: calc(#{$spaceBetweenColumns} * 2); table { + border-collapse:collapse; + + border-spacing: 2px; thead { border-bottom: 1px solid rgb(133, 133, 133); + + th:first-child { + + text-align: initial; + } + } + + tbody::before { + + content: ''; + display: block; + height: 1vh; + } // CREDITS: https://stackoverflow.com/questions/294885/how-to-put-spacing-between-tbody-elements + + tbody { + + tr:first-child { + + margin-top: 3vh; + } + + tr { + + td { + + text-align: center; + padding-bottom: 1vh; + } + + td.name { + + text-align: initial; + } + } } } diff --git a/payment/script/calculateTotal.js b/payment/script/calculateTotal.js new file mode 100644 index 0000000..3e9d056 --- /dev/null +++ b/payment/script/calculateTotal.js @@ -0,0 +1,10 @@ +const calculateTotal = (totalPrice) => { + + const totalElement = document.querySelector(".column.second-column h3 span") + + console.log(totalElement) + totalElement.innerText = totalPrice + +} + +export default calculateTotal diff --git a/payment/script/getOrderData.js b/payment/script/getOrderData.js new file mode 100644 index 0000000..e9915e8 --- /dev/null +++ b/payment/script/getOrderData.js @@ -0,0 +1,8 @@ +const getOrderData = () => { + + const data = JSON.parse(sessionStorage.getItem('order')) + + return data +} + +export default getOrderData diff --git a/payment/script/logoLink.js b/payment/script/logoLink.js new file mode 100644 index 0000000..26a8daf --- /dev/null +++ b/payment/script/logoLink.js @@ -0,0 +1,12 @@ +const logoLink = () => { + + const logo = document.querySelector('header .logo') + + logo.addEventListener('click', () => { + + window.location = '../' + }) + +} + +export default logoLink diff --git a/payment/script/putOrderInHTML.js b/payment/script/putOrderInHTML.js new file mode 100644 index 0000000..880eab3 --- /dev/null +++ b/payment/script/putOrderInHTML.js @@ -0,0 +1,50 @@ +const putOrderInHTML = (order) => { + + let totalPrice = 0 + + const table = document.querySelector('.column.second-column table tbody') + const documentFragment = document.createDocumentFragment() + + for (const element in order) { + + const product = order[element] + + const tr = document.createElement('tr') + + const orderData = { + + name: element, + quantity: product.quantity, + price: product.precioAcumulado, + } + + for (const key in orderData) { + + const element = orderData[key]; + + const td = document.createElement('td') + td.innerText = element + + if (key === 'name') { + + td.classList.add('name') + } + + if (key === 'price') { + + totalPrice = totalPrice + element + } + + tr.appendChild(td) + } + + documentFragment.appendChild(tr) + + } + + table.appendChild(documentFragment) + + return totalPrice +} + +export default putOrderInHTML diff --git a/payment/script/script.js b/payment/script/script.js new file mode 100644 index 0000000..d32fe53 --- /dev/null +++ b/payment/script/script.js @@ -0,0 +1,18 @@ +import logoLink from './logoLink.js' +logoLink() + +import getOrderData from './getOrderData.js' +const order = getOrderData() + +if (order === null || order === {}) { + + window.location = '../' +} + +console.log(order) + +import putOrderInHTML from './putOrderInHTML.js' +const totalPrice = putOrderInHTML(order) + +import calculateTotal from './calculateTotal.js' +calculateTotal(totalPrice) \ No newline at end of file diff --git a/scripts/pagarLogica.js b/scripts/pagarLogica.js index c882ed3..fb5c81d 100644 --- a/scripts/pagarLogica.js +++ b/scripts/pagarLogica.js @@ -34,6 +34,8 @@ const pagarLogica = (checkout) => { body.style.overflowY = 'hidden' + sessionStorage.setItem('order', JSON.stringify(checkout)) + setTimeout(() => { window.location.href = './payment'