Video-14-Product-Screen-UI (basir#14)

Author: basir

README.md

@@ -115,12 +115,16 @@ JS AMAZONA
  1. get product id from request
  2. implement /api/product/:id api
  3. send Ajax request to product api
- 4. create back to result link
- 5. create div.details with 3 columns
- 6. column 1 for product image
- 7. column 2 for product information
- 8. column 3 form product action
- 9. style .details and all columns
- 10. create add to cart button with add-button id
- 11. after_render() to add event to the button
- 12. redirect user to cart/:product_id
+14. Product Screen UI
+ 1. create back to result link
+ 2. create div.details with 3 columns
+ 3. column 1 for product image
+ 4. column 2 for product information
+ 5. column 3 form product action
+ 6. style .details and all columns
+ 7. create add to cart button with add-button id
+15. Product Screen Action
+ 1. after_render() to add event to the button
+ 2. add event handler for the button
+ 3. redirect user to cart/:product_id
+ 4. implement after_render in index.js

frontend/src/srceens/ProductScreen.js

@@ -1,5 +1,6 @@
 import { parseRequestUrl } from '../utils';
 import { getProduct } from '../api';
+import Rating from '../components/Rating';
 
 const ProductScreen = {
  render: async () => {
@@ -8,7 +9,56 @@ const ProductScreen = {
  if (product.error) {
  return `<div>${product.error}</div>`;
  }
- return `<h1>${product.name}</h1>`;
+ return `
+ <div class="content">
+ <div class="back-to-result">
+ <a href="/#/">Back to result </a>
+ </div>
+ <div class="details">
+ <div class="details-image">
+ <img src="${product.image}" alt="${product.name}" />
+ </div>
+ <div class="details-info">
+ <ul>
+ <li>
+ <h1>${product.name}</h1>
+ </li>
+ <li>
+ ${Rating.render({
+ value: product.rating,
+ text: `${product.numReviews} reviews`,
+ })}
+ </li>
+ <li>
+ Price: <strong>$${product.price}</strong>
+ </li>
+ <li>
+ Description:
+ <div>
+ ${product.description}
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="details-action">
+ <ul>
+ <li>
+ Price: $${product.price}
+ </li>
+ <li>
+ Status : 
+ ${
+ product.countInStock > 0
+ ? `<span class="success">In Stock</span>`
+ : `<span class="error">Unavailable</span>`
+ }
+ </li>
+ <li>
+ <button id="add-button" class="fw primary">Add to Cart </div>
+ </ul>
+ </div>
+ </div>
+ </div>`;
  },
 };
 export default ProductScreen;

frontend/style.css

@@ -16,6 +16,22 @@ a {
 a:hover {
  color: #f08040;
 }
+button {
+ font: 1.6rem helvetica;
+ padding: 1rem;
+ border: 0.1rem #808080 solid;
+ border-radius: 0.5rem;
+ cursor: pointer;
+}
+button:hover {
+ border: 0.1rem #404040 solid;
+}
+button.primary {
+ background-color: #f0c040;
+}
+.fw {
+ width: 100%;
+}
 .grid-container {
  display: grid;
  grid-template-areas:
@@ -102,3 +118,43 @@ footer {
  color: #444444;
  font-size: 1.4rem;
 }
+.content {
+ padding: 1rem;
+}
+/* Product Details */
+.details {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-wrap: wrap;
+}
+.details-image {
+ flex: 2 1 60rem;
+}
+.details-image img {
+ max-width: 60rem;
+ width: 100%;
+}
+.details-info,
+.details-action {
+ flex: 1 1 30rem;
+}
+.details-info ul,
+.details-action ul {
+ padding: 0;
+ list-style-type: none;
+}
+.details-info h1 {
+ font-size: 2rem;
+ margin: 0;
+}
+.details-info li,
+.details-action li {
+ margin-bottom: 1rem;
+}
+.details-action {
+ border: 0.1rem #808080 solid;
+ border-radius: 0.5rem;
+ background-color: #f8f8f8;
+ padding: 1rem;
+}