new-moon-dessert-bar/shopping/shopping.php

194 lines
7.4 KiB
PHP

<!doctype html>
<html lang="en">
<?php
require_once '../php/connection.php';
$conn = connectMysql();
require_once '../php/logged_in_header.php';
?>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="../bootstrap-5.0.1-dist/css/bootstrap-grid.min.css" rel="stylesheet">
<link href="../bootstrap-5.0.1-dist/css/bootstrap.min.css" rel="stylesheet">
<!--=== Main Style CSS ===-->
<link href="../style/style.css" rel="stylesheet">
<!-- Font Awesome styles CDN Link -->
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<title>New Moon Dessert Bar</title>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body class="shopping_body">
<div class="wrapper_shopping">
<div class="container-fluid">
<div class="sectionShopping">
<?php include 'shopping_headerNav.php' ?>
<div class="row">
<div class="col-sm-12">
<h1> Shopping </h1>
<p>| · Click on the picture to add to the cart · |</p>
</div>
</div>
<div class="row">
<?php
$products = getAllProducts($conn);
foreach ($products as $product):
?>
<div class="col-sm-12 col-lg-6 col-xl-3">
<div class="my-img-class">
<a href="productDetails.php?<?=$product['Product_ID']?>">
<img class="imgItem" src="../img/<?= $product['Product_Img']; ?>" alt="<?=$product['Product_Img']?>">
</a>
<p class="shopping_productName"><?= $product['Product_Name']; ?></p>
<p class="shopping_productPrice">&dollar;<?= $product['Product_Price']; ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="row">
<nav class="shopping_pageNav" aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item">.toggleClass
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</li>
</ul>
</nav>
</div>
</div>
<div class="my-floating-btn active " id="shopping-my-floating-btn">
<button type="button" class="btn btn-lg my-btn btn-floating" id="sidebarCollapse">
<i class="fa fa-shopping-cart"></i>
</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Shopping Cart</h3>
</div>
<ul class="list-unstyled components">
<p></p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
</li>
<li>
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li>
</ul>
</nav>
</div>
</div>
<?php include_once '../footer.php'?>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<?php include_once '../scripts.php' ?>
</body>
</html>