Skip to content

18l Solution #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SuperSimpleDev wants to merge 1 commit into
base: 18l
Choose a base branch
from
+89 −130
Open

18l Solution #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 3 additions & 130 deletions 2-copy-of-code/lesson-18/orders.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,137 +54,10 @@
<div class="main">
<div class="page-title">Your Orders</div>

<div class="orders-grid">
<div class="order-container">

<div class="order-header">
<div class="order-header-left-section">
<div class="order-date">
<div class="order-header-label">Order Placed:</div>
<div>August 12</div>
</div>
<div class="order-total">
<div class="order-header-label">Total:</div>
<div>$35.06</div>
</div>
</div>

<div class="order-header-right-section">
<div class="order-header-label">Order ID:</div>
<div>27cba69d-4c3d-4098-b42d-ac7fa62b7664</div>
</div>
</div>

<div class="order-details-grid">
<div class="product-image-container">
<img src="images/products/athletic-cotton-socks-6-pairs.jpg">
</div>

<div class="product-details">
<div class="product-name">
Black and Gray Athletic Cotton Socks - 6 Pairs
</div>
<div class="product-delivery-date">
Arriving on: August 15
</div>
<div class="product-quantity">
Quantity: 1
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html?orderId=123&productId=456">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>

<div class="product-image-container">
<img src="images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg">
</div>

<div class="product-details">
<div class="product-name">
Adults Plain Cotton T-Shirt - 2 Pack
</div>
<div class="product-delivery-date">
Arriving on: August 19
</div>
<div class="product-quantity">
Quantity: 2
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>
</div>
</div>

<div class="order-container">

<div class="order-header">
<div class="order-header-left-section">
<div class="order-date">
<div class="order-header-label">Order Placed:</div>
<div>June 10</div>
</div>
<div class="order-total">
<div class="order-header-label">Total:</div>
<div>$41.90</div>
</div>
</div>

<div class="order-header-right-section">
<div class="order-header-label">Order ID:</div>
<div>b6b6c212-d30e-4d4a-805d-90b52ce6b37d</div>
</div>
</div>

<div class="order-details-grid">
<div class="product-image-container">
<img src="images/products/intermediate-composite-basketball.jpg">
</div>

<div class="product-details">
<div class="product-name">
Intermediate Size Basketball
</div>
<div class="product-delivery-date">
Arriving on: June 17
</div>
<div class="product-quantity">
Quantity: 2
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>
</div>
</div>
<div class="orders-grid js-orders-grid">
</div>
</div>

<script type="module" src="scripts/orders.js"></script>
</body>
</html>
86 changes: 86 additions & 0 deletions 2-copy-of-code/lesson-18/scripts/orders.js
View file
Open in desktop
Copy link

@Flint15 Flint15 Dec 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also use more modular structure:

function renderPage() {
  updateCartDisplay()
  renderOrders()
}
renderPage()

function updateCartDisplay() {
  ...
}

function renderOrders() {
  const ordersContainer = document
    .querySelector('.js-orders-grid')
  let html = ''
  
  orders.forEach(order => {
    html += createOrderHTML(order)
  })

  ordersContainer.innerHTML = html
}

function createOrderHTML(order) {
  let html = `
    <div class="order-container">  
      <div class="order-header">
        ${renderOrderHeader(order)}
      </div>

      <div class="order-details-grid">
        ${renderOrderDetails(order)}
      </div>
    </div>
  `
  return html
}

function renderOrderHeader(order) {
  ...
}

function renderOrderDetails(order) {
  ...
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import {getProduct, loadProductsFetch} from '../data/products.js';
import {orders} from '../data/orders.js';
import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';
import formatCurrency from './utils/money.js';

async function loadPage() {
await loadProductsFetch();

let ordersHTML = '';

orders.forEach((order) => {
const orderTimeString = dayjs(order.orderTime).format('MMMM D');

ordersHTML += `
<div class="order-container">
<div class="order-header">
<div class="order-header-left-section">
<div class="order-date">
<div class="order-header-label">Order Placed:</div>
<div>${orderTimeString}</div>
</div>
<div class="order-total">
<div class="order-header-label">Total:</div>
<div>$${formatCurrency(order.totalCostCents)}</div>
</div>
</div>

<div class="order-header-right-section">
<div class="order-header-label">Order ID:</div>
<div>${order.id}</div>
</div>
</div>

<div class="order-details-grid">
${productsListHTML(order)}
</div>
</div>
`;
});

function productsListHTML(order) {
let productsListHTML = '';

order.products.forEach((productDetails) => {
const product = getProduct(productDetails.productId);

productsListHTML += `
<div class="product-image-container">
<img src="${product.image}">
</div>

<div class="product-details">
<div class="product-name">
${product.name}
</div>
<div class="product-delivery-date">
Arriving on: ${
dayjs(productDetails.estimatedDeliveryTime).format('MMMM D')
}
</div>
<div class="product-quantity">
Quantity: ${productDetails.quantity}
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html?orderId=${order.id}&productId=${product.id}">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>
`;
});

return productsListHTML;
}

document.querySelector('.js-orders-grid').innerHTML = ordersHTML;
Copy link

@verakissyou17 verakissyou17 Sep 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we used cart-class.js in our project how can we send the cart to the backend from local Storage? I've tried this:

  •     const response = await fetch(
    'https://supersimplebackend.dev/orders', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({cart: cart.cartItems})
  })   , but it doesn't work.

Copy link

@y3onhold y3onhold Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we used cart-class.js in our project how can we send the cart to the backend from local Storage? I've tried this:

  •     const response = await fetch(
    'https://supersimplebackend.dev/orders', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({cart: cart.cartItems})
  })   , but it doesn't work.

I think that might be because you have not imported cart onto scripts/order.js

Copy link

@verakissyou17 verakissyou17 Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to import the cart in scripts/order.js, because here we have to work with the data received from the backend. When Simon makes a POST request to the backend, doesn't import the cart in that file . I think the data that I send to the backend is wrong. 🙃 🫣😬

Copy link

@verakissyou17 verakissyou17 Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have private key for local Storage. Could this be a problem?

Copy link

@okontg okontg Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to import the cart in scripts/order.js, because here we have to work with the data received from the backend. When Simon makes a POST request to the backend, doesn't import the cart in that file . I think the data that I send to the backend is wrong. 🙃 🫣😬

the 'cart' was imported, check files you've imported.
body: JSON.stringify({
cart: cart
})

is the product in the cart (stored), that he used to fetched data from the backend.

Copy link

@verakissyou17 verakissyou17 Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in paymentSummary.js file, where we add event listener to the button, not in scripts/orders.js. In this file we retrieve the data from backend and render the orders.html file.

Copy link

@okontg okontg Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't really get you,
i don't know if this the section you're referring to.

document.querySelector('.js-place-order')
.addEventListener('click', async()=>{
try{
const response = await fetch('https://supersimplebackend.dev/orders',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
cart: cart
})
});

  const order = await response.json();
  console.log(order);
  addOrder(order);

}catch(error){
  console.log('unespected error. Try again later.');
}

//window.location.href = 'orders.html';

});

but to make a 'POST' we must give the backend data which we want from it, this is the data, body: JSON.stringify( cart: cart })
we gave to the backend when we makes the post

Copy link

@kirtick28 kirtick28 Oct 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in paymentSummary.js file, where we add event listener to the button, not in scripts/orders.js. In this file we retrieve the data from backend and render the orders.html file.

Troubleshooting Cart Submission Issue

I encountered a similar issue while working with paymentSummary.js. The problem lies in how the cart.cartItems are being handled. You are correctly sending cartItems to the backend, but the issue may be related to the structure or data types within cartItems.

Example of Correct cart Structure:

cart: [
  {
    productId: 'e43638ce-6aa0-4b85-b27f-e1d07eb678c6',
    quantity: 2,
    deliveryOptionId: '1'
  },
  {
    productId: '15b6fc6f-327a-4ec4-896f-486349e85a3d',
    quantity: 1,
    deliveryOptionId: '2'
  }
]

Key Points to Check:

deliveryOptionId Data Type:
Ensure that deliveryOptionId is a string. Initially, I used numbers like deliveryOptionId: 1, but this resulted in a 500 Internal Server Error. When I changed it to deliveryOptionId: '1', the backend accepted the data and returned the expected response.

Data Types of cartItems:
Verify that the data types for productId, quantity, and deliveryOptionId match the expected types in your backend API.

productId: String
quantity: Number
deliveryOptionId: String

Documentation:

Refer to the backend documentation to see the correct model for cart.cartItems.

Conclusion:

Check the data structure and types being sent from the frontend to the backend. Changing deliveryOptionId to a string resolved the issue for me. I hope this helps you too!

Copy link

@Taher01 Taher01 Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in paymentSummary.js file, where we add event listener to the button, not in scripts/orders.js. In this file we retrieve the data from backend and render the orders.html file.

Simply send the cart class to backend - body: JSON.stringify({cart: cart}) - backend itself retrieves the cartItem in its response. We don't need to worry about it

}

loadPage();