Merge pull request #237 from creme332/theme

Redesign header
steamysips · Jul 17, 2024 · e2adcd4 · e2adcd4
2 parents 0749b1a + 2f2e3e8
commit e2adcd4
Show file tree

Hide file tree

Showing 8 changed files with 407 additions and 29 deletions.
diff --git a/public/js_original/cart-view.js b/public/js_original/cart-view.js
@@ -46,6 +46,11 @@ function updateCart(e) {
     currentCartItem.quantity = newQuantity;
     currentCart.addItem(currentCartItem);
   }
+
+  const itemCount = Cart().getCartSize();
+
+  // update cart item count in header
+  document.querySelector("#mini-cart-count").textContent = `(${itemCount})`;
 }
 
 async function checkout() {
@@ -102,6 +107,11 @@ function initCartPage() {
     input.addEventListener("change", updateCart);
     input.addEventListener("keydown", preventKeyboardInput);
   });
+
+  const itemCount = Cart().getCartSize();
+
+  // update cart item count in header
+  document.querySelector("#mini-cart-count").textContent = `(${itemCount})`;
 }
 
 async function uploadCart() {

diff --git a/public/js_original/global-view.js b/public/js_original/global-view.js
@@ -1,5 +1,16 @@
 import "@picocss/pico/css/pico.min.css";
 import "../styles/global.css";
+import "../styles/theme.css";
 import themeSwitcher from "./theme-switcher";
+import Aos from "aos/src/js/aos";
+import Splide from "@splidejs/splide";
+import Cart from "./models/Cart";
 
 themeSwitcher.init();
+
+document.addEventListener("DOMContentLoaded", function () {
+  const itemCount = Cart().getCartSize();
+
+  // update cart item count in header
+  document.querySelector("#mini-cart-count").textContent = `(${itemCount})`;
+});
diff --git a/public/js_original/models/Cart.js b/public/js_original/models/Cart.js
@@ -1,7 +1,7 @@
 /**
  * A function for managing the cart in localStorage.
  * @returns {{getItems: (function(): CartItem[]), removeItem: (function(CartItem): void), isEmpty: (function(): boolean),
- * clear: (function(): void), addItem: (function(CartItem): void)}}
+ * clear: (function(): void), addItem: (function(CartItem): void)}, getCartSize: (function(): number)}}
  */
 function Cart() {
   /**
@@ -82,7 +82,18 @@ function Cart() {
     localStorage.setItem("cart", "[]");
   }
 
-  return { addItem, isEmpty, getItems, removeItem, clear };
+  /**
+   *
+   * @returns {number} Total number of items in cart
+   */
+  function getCartSize() {
+    return getItems().reduce(
+      (accumulator, item) => accumulator + item.quantity,
+      0,
+    );
+  }
+
+  return { addItem, isEmpty, getItems, removeItem, clear, getCartSize };
 }
 
 export default Cart;
diff --git a/public/js_original/product-view.js b/public/js_original/product-view.js
@@ -27,6 +27,11 @@ function handleAddToCart(e) {
 
   // open modal to display success
   successAddToCartModal.openModal();
+
+  const itemCount = Cart().getCartSize();
+
+  // update cart item count in header
+  document.querySelector("#mini-cart-count").textContent = `(${itemCount})`;
 }
 
 function createRatingChart() {

diff --git a/public/styles/global.css b/public/styles/global.css
@@ -5,11 +5,27 @@ body > nav {
   background-color: var(--background-color);
 }
 
-body > nav .icon {
+nav a {
+  color: var(--contrast);
+}
+
+/*logo in nav*/
+body > nav > ul:nth-child(1) .icon {
   height: 40px;
   width: 40px;
 }
 
+/*other icons in nav*/
+body > nav > ul:nth-child(2) .icon {
+  height: 28px;
+  width: 28px;
+}
+
+body > nav .icon {
+  height: 20px;
+  width: 20px;
+}
+
 /*style logo on left hand side of navbar*/
 body > nav > ul li:nth-child(1) > a {
   display: flex;

diff --git a/public/styles/theme.css b/public/styles/theme.css
diff --git a/src/core/Controller.php b/src/core/Controller.php
@@ -107,6 +107,8 @@ public function view(
         $template_content = ob_get_contents();
         ob_end_clean();
 
+        $is_user_signed_in = $this->getSignedInClient() !== null;
+
         // display global view template
         require_once __DIR__ . "/../views/Template.php";
     }

diff --git a/src/views/Template.php b/src/views/Template.php
@@ -7,8 +7,8 @@
  * @var string $template_content HTML of the main content of page
  * @var string $template_meta_description Meta description of page
  * @var string $template_tags Additional tags (script, link, ...) for page
+ * @var bool $is_user_signed_in Whether user is signed in or not
  */
-
 ?>
 
 <!DOCTYPE html>
@@ -31,13 +31,13 @@
 
     <title><?= $template_title ?></title>
 </head>
-<body>
 
+<body>
 <nav class="container-fluid">
     <ul>
         <li>
-            <a href="/" class="contrast">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
+            <a href="/">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
@@ -49,25 +49,31 @@
                     <path d="M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z"/>
                     <path d="M16.746 16.726a3 3 0 1 0 .252 -5.555"/>
                 </svg>
-                <h4>steamy sips</h4>
+                <strong style="font-size: 25px">steamy sips</strong>
             </a>
         </li>
     </ul>
     <ul>
         <li>
-            <a href="/shop" class="contrast" data-tooltip="Shop" data-placement="bottom">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
-                     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
-                     stroke-linecap="round" stroke-linejoin="round">
+            <a href="/shop">
+                <strong>Shop</strong>
+            </a>
+        </li>
+        <li>
+            <a href="/profile">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
+                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                     stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                    <path d="M19 3v12h-5c-.023 -3.681 .184 -7.406 5 -12zm0 12v6h-1v-3m-10
-                     -14v17m-3 -17v3a3 3 0 1 0 6 0v-3"/>
+                    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
+                    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/>
                 </svg>
+                <strong><?= $is_user_signed_in ? "My account" : "Sign in" ?></strong>
             </a>
         </li>
         <li>
-            <a href="/cart" class="contrast" data-tooltip="Shopping cart" data-placement="bottom">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
+            <a href="/cart">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="12"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
@@ -76,17 +82,7 @@
                     <path d="M17 17h-11v-14h-2"/>
                     <path d="M6 5l14 1l-1 7h-13"/>
                 </svg>
-            </a>
-        </li>
-        <li>
-            <a href="/profile" class="contrast" data-tooltip="Profile" data-placement="bottom">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
-                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                     stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
-                    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/>
-                </svg>
+                <span><strong id="mini-cart-count">(0)</strong></span>
             </a>
         </li>
     </ul>
@@ -97,8 +93,8 @@
 <footer id="page-footer" class="container">
     <ul>
         <li><a class="secondary" href="/#about-us">About Us</a></li>
-        <li><a class="secondary" href="privacy-policy.html">Privacy Policy</a></li>
-        <li><a class="secondary" href="terms-of-use.html">Terms of Use</a></li>
+        <li><a class="secondary" href="/#">Privacy Policy</a></li>
+        <li><a class="secondary" href="/#">Terms of Use</a></li>
         <li><a class="secondary" href="/contact">Contact Us</a></li>
     </ul>
     <div>