Skip to content
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

Redesign header #237

Merged
merged 3 commits into from
Jul 17, 2024
Merged

Redesign header #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
57002ef
add default picocss theme
creme332 Jul 9, 2024
10290a3
add getCartSize()
creme332 Jul 17, 2024
2f2e3e8
update header style
creme332 Jul 17, 2024
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
10 changes: 10 additions & 0 deletions public/js_original/cart-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
11 changes: 11 additions & 0 deletions public/js_original/global-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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})`;
});
15 changes: 13 additions & 2 deletions public/js_original/models/Cart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
/**
Expand Down Expand Up @@ -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;
5 changes: 5 additions & 0 deletions public/js_original/product-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
18 changes: 17 additions & 1 deletion public/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
327 changes: 327 additions & 0 deletions public/styles/theme.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/core/Controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Expand Down
48 changes: 22 additions & 26 deletions src/views/Template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"/>
Expand All @@ -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"/>
Expand All @@ -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>
Expand All @@ -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>
Expand Down