franpcode/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND
1
0
Fork 0
mirror of https://github.com/FranP-code/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND.git synced 2025-10-12 23:52:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

payment logic done

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-18 22:32:55 -03:00
parent 0ff5b5b92a
commit 4bbffe9d0c
10 changed files with 165 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
payment/css/styles.css
View File

@@ -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;

2
payment/css/styles.css.map
View File

@@ -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"}
{"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"}

3
payment/index.html
View File

@@ -53,7 +53,7 @@
</tbody>
</table>
<h3>Total: <span>00</span></h3>
<h3>Total: <span id="totalNumber">00</span> USD</h3>
<div class="message">
<p>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.</p>
@@ -64,4 +64,5 @@
</div>
</body>
<script src="./script/script.js" type="module"></script>
</html>

40
payment/sass/styles.scss
View File

@@ -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;
}
}
}
}

10
payment/script/calculateTotal.js Normal file
View File

@@ -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

8
payment/script/getOrderData.js Normal file
View File

@@ -0,0 +1,8 @@
const getOrderData = () => {
const data = JSON.parse(sessionStorage.getItem('order'))
return data
}
export default getOrderData

12
payment/script/logoLink.js Normal file
View File

@@ -0,0 +1,12 @@
const logoLink = () => {
const logo = document.querySelector('header .logo')
logo.addEventListener('click', () => {
window.location = '../'
})
}
export default logoLink

50
payment/script/putOrderInHTML.js Normal file
View File

@@ -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

18
payment/script/script.js Normal file
View File

@@ -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)

2
scripts/pagarLogica.js
View File

@@ -34,6 +34,8 @@ const pagarLogica = (checkout) => {
body.style.overflowY = 'hidden'
sessionStorage.setItem('order', JSON.stringify(checkout))
setTimeout(() => {
window.location.href = './payment'