Finished checkout page and added a prototype sidebar
This commit is contained in:
CodeServer
parent
6f08764bc0
commit
8a59de3d6f
10
footer.php
10
footer.php
@ -35,13 +35,3 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>-->
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="../bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="../style/style.js"></script>
|
||||
@ -304,8 +304,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="style/style.js"></script>
|
||||
<?php include_once 'scripts.php' ?>
|
||||
</body>
|
||||
</html>
|
||||
@ -6,6 +6,7 @@ session_start();
|
||||
$product_id = $_GET['product_id'];
|
||||
$product_name = $_GET['product_name'];
|
||||
$product_price = $_GET['product_price'];
|
||||
$product_img = $_GET['product_img'];
|
||||
$quantity = (int)$_GET['quantity'];
|
||||
|
||||
|
||||
@ -17,19 +18,12 @@ if(array_key_exists($product_id, $mycar)){
|
||||
$mycar[$product_id]['buy_price'] += $product_price*$quantity;
|
||||
|
||||
} else {
|
||||
$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_num'=>$quantity);
|
||||
$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_img'=>$product_img, 'buy_num'=>$quantity);
|
||||
$mycar[$product_id]['buy_price'] += $product_price*$quantity;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if($_GET[clear]=="yes"){
|
||||
$_SESSION['mycar']="";
|
||||
}
|
||||
|
||||
$_SESSION['mycar'] = $mycar;
|
||||
|
||||
header('location: ../shopping/cart.php');
|
||||
|
||||
18
php/cart_delProduct.php
Normal file
18
php/cart_delProduct.php
Normal file
@ -0,0 +1,18 @@
|
||||
<?php
|
||||
include 'connection.php';
|
||||
$conn = connectMysql();
|
||||
session_start();
|
||||
|
||||
$buy_id = $_GET['id'];
|
||||
$mycar = $_SESSION['mycar'];
|
||||
|
||||
foreach ($mycar as $product) {
|
||||
if($product['buy_id'] == $buy_id){
|
||||
unset($mycar[$buy_id]);
|
||||
}
|
||||
}
|
||||
|
||||
$_SESSION['mycar'] = $mycar;
|
||||
|
||||
header('location: ../shopping/cart.php');
|
||||
?>
|
||||
4
scripts.php
Normal file
4
scripts.php
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="../bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="../style/style.js"></script>
|
||||
@ -52,20 +52,10 @@
|
||||
<div class="col-sm-12" id="shopping_cart">
|
||||
<form action="checkout.php" method="get">
|
||||
<table class="cartTable">
|
||||
<thead>
|
||||
<!-- <tr style="margin:auto; border: 2px solid black;">
|
||||
<td>Product</td>
|
||||
|
||||
<td>Quantity</td>
|
||||
|
||||
<td>Price</td>
|
||||
|
||||
</tr> -->
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
|
||||
<?php $totalprice = 0;?>
|
||||
<?php $totalprice = 0;?>
|
||||
|
||||
<?php foreach ($_SESSION['mycar'] as $product): ?>
|
||||
<tr>
|
||||
@ -73,30 +63,33 @@
|
||||
<h3> <?=$product['buy_num']?> </h3>
|
||||
|
||||
</td>
|
||||
|
||||
<td class="cart_img">
|
||||
<img src="../img/<?=$product['buy_img'];?>" style="width: 70px; padding:5px; border: 1px solid black;">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span> <?=$product['buy_name']?> </span>
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="cart_priceP">
|
||||
<span> $<?=$product['buy_price']?> </span>
|
||||
</td>
|
||||
|
||||
<td class="cart_deleteP">
|
||||
<a href="cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
|
||||
<a href="../php/cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<?php $totalprice += $product['buy_price']?>
|
||||
<?php endforeach; ?>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<div class="subtotal">
|
||||
<span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: $<span><?= $totalprice ?></span></span>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
<div class="d-grid gap-2 col-lg-4 mx-auto">
|
||||
@ -111,9 +104,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<?php include '../footer.php' ?>
|
||||
<?php include_once '../footer.php' ?>
|
||||
<?php include_once '../scripts.php' ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -35,11 +35,69 @@
|
||||
<div class="container-fluid">
|
||||
<div class="sectionShopping">
|
||||
<?php include 'shopping_headerNav.php' ?>
|
||||
<h1>Checkout</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="shopping_cartTitle">
|
||||
<?php
|
||||
$totalprice = 0;
|
||||
foreach ($_SESSION['mycar'] as $product):
|
||||
$totalprice += $product['buy_price'];
|
||||
endforeach;
|
||||
?>
|
||||
<h1>Comfirm Order</h1>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row checkoutProduct">
|
||||
<div class="col-sm-12 customer-col">
|
||||
<table class="checkoutTable">
|
||||
<thead>
|
||||
<tr class="tr_title">
|
||||
<td>Product</td>
|
||||
|
||||
<td>Quantity</td>
|
||||
|
||||
<td>Price</td>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<?php $totalprice = 0;?>
|
||||
|
||||
<?php foreach ($_SESSION['mycar'] as $product): ?>
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
<span> <?=$product['buy_name']?> </span>
|
||||
</td>
|
||||
|
||||
<td id="td_num">
|
||||
<span > <?=$product['buy_num']?> </span>
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
<td class="cart_priceP">
|
||||
<span> $<?=$product['buy_price']?> </span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<?php $totalprice += $product['buy_price']?>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row customerInformation">
|
||||
<div class="col"></div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Customer Information</h2>
|
||||
<div class="col-sm-8"></div>
|
||||
<div class="col-sm-4 customer-col">
|
||||
<label>Full Name:</label>
|
||||
<label><?php echo $_SESSION['username']?></label>
|
||||
<br>
|
||||
@ -51,82 +109,53 @@
|
||||
<br>
|
||||
<label>Full Address:</label>
|
||||
<br>
|
||||
<label><?php echo $row["C_UNIT"]?>, <?php echo $row["C_ADDRESS"]?></label>
|
||||
<label><?php if ($row["C_UNIT"] !== '') { echo $row["C_UNIT"] ; echo '-'; }?><?php echo $row["C_ADDRESS"]?></label>
|
||||
<br>
|
||||
<label><?php echo $row["C_CITY"]?>, <?php echo $row["C_ZIP"]?></label>
|
||||
<br>
|
||||
<label><?php echo $row["C_COUNTRY"]?></label>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="shopping_cartTitle">
|
||||
<?php
|
||||
$totalprice = 0;
|
||||
foreach ($_SESSION['mycar'] as $product):
|
||||
$totalprice += $product['buy_price'];
|
||||
endforeach;
|
||||
?>
|
||||
<h1>Total</h1> <h1>CA$<?php echo $totalprice?></h1>
|
||||
|
||||
<div class="row checkoutSubtotal">
|
||||
<div class="col-sm-12 customer-col">
|
||||
<span class="checkout_subtotalSpan" >Subtotal: $<span class="checkout_subtotalPrice"><?= $totalprice ?></span></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row checkoutComfirm">
|
||||
<div class="col-sm-8"></div>
|
||||
<div class="col-sm-4 customer-col">
|
||||
<a class="btn btn-primary checkout_back_button" type="button" href="cart.php"> ⮪ Back To Cart</a>
|
||||
<button class="btn btn-primary checkout_confirm_button" data-bs-toggle="modal" data-bs-target="#checkoutModal">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<table class="cartTable">
|
||||
<thead>
|
||||
<!-- <tr style="margin:auto; border: 2px solid black;">
|
||||
<td>Product</td>
|
||||
|
||||
<td>Quantity</td>
|
||||
|
||||
<td>Price</td>
|
||||
|
||||
</tr> -->
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
|
||||
<?php $totalprice = 0;?>
|
||||
|
||||
<?php foreach ($_SESSION['mycar'] as $product): ?>
|
||||
<tr>
|
||||
<td class="cart_quantity">
|
||||
<h3> <?=$product['buy_num']?> </h3>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<span> <?=$product['buy_name']?> </span>
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="cart_priceP">
|
||||
<span> $<?=$product['buy_price']?> </span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<?php $totalprice += $product['buy_price']?>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<div class="subtotal">
|
||||
<span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: $<span><?= $totalprice ?></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
|
||||
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
|
||||
<div class="modal-content">
|
||||
|
||||
|
||||
<div class="modal-body">
|
||||
<h1 class="checkMarkIcon"></h1>
|
||||
<h1>Checkout Successful!</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php include '../footer.php' ?>
|
||||
<?php include_once '../footer.php' ?>
|
||||
<?php include_once '../scripts.php' ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -43,18 +43,42 @@
|
||||
<section class="shopping_productDetails">
|
||||
<h1><?=$product['Product_Name']?></h1>
|
||||
<form action="../php/addingToCart.php" method="get">
|
||||
|
||||
<img src="../img/<?= $product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;">
|
||||
<h2 style="font-size: 40px;text-transform: uppercase; "></h2>
|
||||
<h2>Price: $<?=$product['Product_Price']?></h3>
|
||||
|
||||
<h3>Quantity: <input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
|
||||
|
||||
<input type="submit" value="Add To Cart"></h3>
|
||||
|
||||
<input type="hidden" name="product_id" value="<?=$product['Product_ID']?>">
|
||||
<input type="hidden" name="product_name" value="<?=$product['Product_Name']?>">
|
||||
<input type="hidden" name="product_price" value="<?=$product['Product_Price']?>">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<img src="../img/<?=$product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;">
|
||||
</div>
|
||||
<div class="col-sm-3"></div>
|
||||
<div class="col-sm-5 productDetail-col">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2>Price: $<?=$product['Product_Price']?></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h3>Quantity: </h3>
|
||||
</div>
|
||||
<div class="col-sm-8 quantity">
|
||||
<input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<a class="btn btn-primary productDetail_back_button" type="button" href="shopping.php">Back To Shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<input class="btn btn-primary productDetail_add_button" type="submit" value="Add To Cart">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 style="font-size: 40px;text-transform: uppercase; "></h2>
|
||||
<input type="hidden" name="product_id" value="<?=$product['Product_ID']?>">
|
||||
<input type="hidden" name="product_name" value="<?=$product['Product_Name']?>">
|
||||
<input type="hidden" name="product_price" value="<?=$product['Product_Price']?>">
|
||||
<input type="hidden" name="product_img" value="<?=$product['Product_Img']?>">
|
||||
|
||||
</form>
|
||||
</section>
|
||||
@ -69,6 +93,7 @@
|
||||
</div>
|
||||
|
||||
<?php include_once '../footer.php'?>
|
||||
<?php include_once '../scripts.php' ?>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@ -25,73 +25,170 @@
|
||||
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="container-fluid">
|
||||
<div class="wrapper_shopping">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="sectionShopping">
|
||||
<?php include 'shopping_headerNav.php' ?>
|
||||
<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">$<?= $product['Product_Price']; ?></p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1> Shopping </h1>
|
||||
<p>| · Click on the picture to add to the cart · |</p>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<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">$<?= $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">«</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">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<nav class="shopping_pageNav" aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</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">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
@ -108,7 +108,8 @@
|
||||
|
||||
|
||||
</div>
|
||||
<?php include '../footer.php' ?>
|
||||
<?php include_once '../footer.php' ?>
|
||||
<?php include_once '../scripts.php' ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -10,6 +10,7 @@
|
||||
.shopping-footer
|
||||
background-color: grey
|
||||
padding-left: 10%
|
||||
margin-top: 2%
|
||||
h1
|
||||
color: #fff
|
||||
font-size: 35px
|
||||
|
||||
@ -21,6 +21,11 @@
|
||||
a
|
||||
color: $button-color
|
||||
text-decoration: none
|
||||
|
||||
.my-floating-btn.active
|
||||
display: block
|
||||
|
||||
#index-my-floating-btn
|
||||
button
|
||||
float: right
|
||||
border-radius: 50%
|
||||
@ -29,20 +34,29 @@
|
||||
width: 100%
|
||||
position: fixed
|
||||
|
||||
.my-floating-btn.active
|
||||
display: block
|
||||
#shopping-my-floating-btn
|
||||
button
|
||||
float: right
|
||||
border-radius: 50%
|
||||
margin-right: 20px
|
||||
top: 90%
|
||||
width: 100%
|
||||
position: fixed
|
||||
|
||||
.cart_button_1
|
||||
|
||||
|
||||
.cart_button_1, .checkout_back_button, .productDetail_back_button
|
||||
color: OliveDrab
|
||||
border-color: OliveDrab
|
||||
background-color: transparent
|
||||
.cart_button_2
|
||||
.cart_button_2, .checkout_confirm_button, .productDetail_add_button
|
||||
// color: DarkGrey
|
||||
border-color: $button-border-color
|
||||
background-color: OliveDrab
|
||||
.cart_button_1:hover
|
||||
.cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover
|
||||
border-color: $button-border-color
|
||||
background-color: $button-border-color
|
||||
.cart_button_2:hover
|
||||
.cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover
|
||||
border-color: $button-border-color
|
||||
background-color: $button-border-color
|
||||
|
||||
|
||||
@ -15,6 +15,17 @@
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
#checkoutModal
|
||||
h1
|
||||
text-align: center
|
||||
.checkMarkIcon
|
||||
text-align: center
|
||||
color: green
|
||||
font-size: 1200%
|
||||
.checkMarkIcon:before
|
||||
font-family: 'FontAwesome'
|
||||
content: '\f058'
|
||||
|
||||
@media (max-width: 483px)
|
||||
#logInModal, #registerModal
|
||||
.mb-3
|
||||
@ -27,3 +38,4 @@
|
||||
width: 100%;
|
||||
margin-left: 10%
|
||||
margin-right: 10%
|
||||
|
||||
@ -28,4 +28,9 @@
|
||||
.cart_deleteP
|
||||
text-align: right
|
||||
|
||||
a
|
||||
color: black
|
||||
font-size: 1.3rem
|
||||
font-family: cursive
|
||||
text-decoration: none
|
||||
|
||||
43
style/modules/shopping/_checkout.sass
Normal file
43
style/modules/shopping/_checkout.sass
Normal file
@ -0,0 +1,43 @@
|
||||
.sectionShopping
|
||||
|
||||
div.checkoutProduct, table.checkoutTable
|
||||
width: 100%
|
||||
height: 100%
|
||||
text-align: justify
|
||||
|
||||
div.checkoutProduct:after, table.checkoutTable:after
|
||||
content: ""
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
|
||||
div.checkoutProduct
|
||||
table.checkoutTable .tr_title
|
||||
font-family: $font-slabo
|
||||
|
||||
|
||||
div.customerInformation
|
||||
|
||||
margin-top: 10px
|
||||
text-align: left
|
||||
|
||||
div.customer-col
|
||||
border: 1px solid grey
|
||||
margin: 20px 0px
|
||||
|
||||
div.checkoutComfirm
|
||||
|
||||
div.customer-col
|
||||
text-align: right
|
||||
margin-bottom: 20px
|
||||
|
||||
div.checkoutSubtotal
|
||||
|
||||
div.customer-col
|
||||
text-align: right
|
||||
margin-bottom: 20px
|
||||
|
||||
span.checkout_subtotalPrice
|
||||
font-size: 3.2rem
|
||||
font-weight: bold
|
||||
color: oliveDrab
|
||||
@ -35,10 +35,11 @@
|
||||
// #span-shopping-username:active
|
||||
// outline: none
|
||||
#btn-shopping-logout
|
||||
position: absolute
|
||||
position: fixed
|
||||
right: 1rem
|
||||
top: 1rem
|
||||
|
||||
|
||||
#span-shopping-username:before
|
||||
font-family: 'FontAwesome'
|
||||
content: '\f2be'
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
.sectionShopping
|
||||
div.customerInformation
|
||||
text-align: left
|
||||
|
||||
background-color: $index-background-color
|
||||
.row
|
||||
padding-left: 20%
|
||||
@ -31,6 +30,25 @@
|
||||
text-align: center
|
||||
color: OliveDrab
|
||||
|
||||
.shopping_productDetails
|
||||
div.row
|
||||
padding: 0
|
||||
.productDetail-col
|
||||
div.row:first-of-type
|
||||
h2
|
||||
color: OliveDrab
|
||||
margin-bottom: 15%
|
||||
div.row:nth-child(2)
|
||||
margin-bottom: 15%
|
||||
div.row:last-of-type
|
||||
margin-top: 2%
|
||||
div.quantity
|
||||
display: inline-block
|
||||
text-align: right
|
||||
input
|
||||
height: 100%
|
||||
a.productDetail_back_button,input.productDetail_add_button
|
||||
width: 100%
|
||||
.shopping_productPrice
|
||||
color: OliveDrab
|
||||
|
||||
@ -2,3 +2,5 @@
|
||||
@import "navbar_shopping"
|
||||
@import "footer"
|
||||
@import "cart"
|
||||
@import "checkout"
|
||||
@import "shopping"
|
||||
78
style/modules/shopping/_shopping.sass
Normal file
78
style/modules/shopping/_shopping.sass
Normal file
@ -0,0 +1,78 @@
|
||||
.wrapper_shopping
|
||||
|
||||
div.container-fluid
|
||||
display: flex
|
||||
align-items: stretch
|
||||
|
||||
a, a:hover, a:focus
|
||||
color: OliveDrab
|
||||
text-decoration: none
|
||||
transition: all 0.3s
|
||||
|
||||
|
||||
// #sidebarCollapse
|
||||
// z-index: 999
|
||||
|
||||
div.sectionShopping nav.shopping_pageNav a.page-link
|
||||
color: $navbar-text-color
|
||||
|
||||
nav#sidebar
|
||||
min-width: 250px
|
||||
max-width: 250px
|
||||
transition: all 0.3s
|
||||
background-color: white
|
||||
z-index: -1
|
||||
|
||||
ul.components
|
||||
padding: 20px 0
|
||||
border-bottom: 1px solid #47748b
|
||||
|
||||
|
||||
div.sidebar-header
|
||||
padding: 20px
|
||||
background-color: DimGrey
|
||||
div.sidebar-header h3
|
||||
color: white
|
||||
|
||||
ul li a
|
||||
padding: 10px
|
||||
font-size: 1.1em
|
||||
display: block
|
||||
|
||||
ul li a:hover
|
||||
color: mediumSeaGreen
|
||||
background-color: Gainsboro
|
||||
|
||||
ul li.active > a, a[aria-expanded="true"]
|
||||
color: #fff
|
||||
background: Gainsboro
|
||||
|
||||
a[data-toggle="collapse"]
|
||||
position: relative
|
||||
ul ul a
|
||||
font-size: 0.9em !important
|
||||
padding-left: 30px !important
|
||||
|
||||
ul.CTAs
|
||||
padding: 20px
|
||||
|
||||
|
||||
ul.CTAs a
|
||||
text-align: center
|
||||
font-size: 0.9em
|
||||
display: block
|
||||
border-radius: 5px
|
||||
margin-bottom: 5px
|
||||
|
||||
|
||||
a.download
|
||||
background: #fff
|
||||
color: #7386D5
|
||||
|
||||
|
||||
a.article, a.article:hover
|
||||
background: #6d7fcc
|
||||
color: #fff
|
||||
|
||||
nav#sidebar.active
|
||||
margin-right: -250px
|
||||
156
style/style.css
156
style/style.css
@ -126,6 +126,7 @@ video {
|
||||
.shopping-footer {
|
||||
background-color: grey;
|
||||
padding-left: 10%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.shopping-footer h1 {
|
||||
@ -181,9 +182,6 @@ video {
|
||||
|
||||
.my-floating-btn {
|
||||
display: none;
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.my-floating-btn a {
|
||||
@ -191,33 +189,51 @@ video {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.my-floating-btn button {
|
||||
.my-floating-btn.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#index-my-floating-btn {
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#index-my-floating-btn button {
|
||||
float: right;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.my-floating-btn.active {
|
||||
display: block;
|
||||
#shopping-my-floating-btn {
|
||||
top: 90%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cart_button_1 {
|
||||
#shopping-my-floating-btn button {
|
||||
float: right;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.cart_button_1, .checkout_back_button, .productDetail_back_button {
|
||||
color: OliveDrab;
|
||||
border-color: OliveDrab;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cart_button_2 {
|
||||
.cart_button_2, .checkout_confirm_button, .productDetail_add_button {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: OliveDrab;
|
||||
}
|
||||
|
||||
.cart_button_1:hover {
|
||||
.cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.cart_button_2:hover {
|
||||
.cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
@ -244,6 +260,21 @@ video {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#checkoutModal h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#checkoutModal .checkMarkIcon {
|
||||
text-align: center;
|
||||
color: green;
|
||||
font-size: 1200%;
|
||||
}
|
||||
|
||||
#checkoutModal .checkMarkIcon:before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f058';
|
||||
}
|
||||
|
||||
@media (max-width: 483px) {
|
||||
#logInModal .mb-3, #registerModal .mb-3 {
|
||||
width: 90%;
|
||||
@ -388,10 +419,6 @@ video {
|
||||
background-color: #edeae8;
|
||||
}
|
||||
|
||||
.sectionShopping div.customerInformation {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sectionShopping .row {
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
@ -429,6 +456,39 @@ video {
|
||||
color: OliveDrab;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails div.row {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type {
|
||||
margin-bottom: 15%;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type h2 {
|
||||
color: OliveDrab;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col div.row:nth-child(2) {
|
||||
margin-bottom: 15%;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col div.row:last-of-type {
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col div.quantity {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col div.quantity input {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productDetails .productDetail-col a.productDetail_back_button, .sectionShopping .shopping_productDetails .productDetail-col input.productDetail_add_button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_productPrice {
|
||||
color: OliveDrab;
|
||||
}
|
||||
@ -480,7 +540,7 @@ video {
|
||||
}
|
||||
|
||||
.shopping_headerNav #btn-shopping-logout {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
@ -529,4 +589,70 @@ video {
|
||||
.sectionShopping #shopping_cart .cart_deleteP {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sectionShopping #shopping_cart .cart_deleteP a {
|
||||
color: black;
|
||||
font-size: 1.3rem;
|
||||
font-family: cursive;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sectionShopping div.checkoutProduct, .sectionShopping table.checkoutTable {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.sectionShopping div.checkoutProduct:after, .sectionShopping table.checkoutTable:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sectionShopping div.checkoutProduct table.checkoutTable .tr_title {
|
||||
font-family: "Slabo";
|
||||
}
|
||||
|
||||
.sectionShopping div.customerInformation {
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sectionShopping div.customerInformation div.customer-col {
|
||||
border: 1px solid grey;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.sectionShopping div.checkoutComfirm div.customer-col {
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sectionShopping div.checkoutSubtotal div.customer-col {
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sectionShopping div.checkoutSubtotal div.customer-col span.checkout_subtotalPrice {
|
||||
font-size: 3.2rem;
|
||||
font-weight: bold;
|
||||
color: oliveDrab;
|
||||
}
|
||||
|
||||
.wrapper_shopping div.container-fluid {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.wrapper_shopping div.container-fluid a, .wrapper_shopping div.container-fluid a:hover, .wrapper_shopping div.container-fluid a:focus {
|
||||
color: OliveDrab;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user