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

Jump to bottom

Update index.html #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
215 changes: 63 additions & 152 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,69 @@
{% extends 'shop/base.html' %}
{% block css %}
.col-md-3
{
display: inline-block;
margin-left:-4px;
}
.carousel-indicators .active {
background-color: blue;
}
.col-md-3 img{
width: 170px;
height: 200px;
}
body .carousel-indicator li{
background-color: blue;
}
body .carousel-indicators{
bottom: 0;
}
body .carousel-control-prev-icon,
body .carousel-control-next-icon{
background-color: blue;
}
.carousel-control-prev,
.carousel-control-next{
top: auto;
bottom: auto;
padding-top: 222px;
}
body .no-padding{
padding-left: 0,
padding-right: 0;
}
{% endblock %}
{% block body %}

<!doctype html>
<html lang="en">
{% load static %}
<div class="container">
<!--Slideshow starts here -->
{% for product, range, nSlides in allProds %}
<h5 class="my-4">Flash Sale On {{product.0.category}} - Recommended Items</h5>
<div class="row">
<div id="demo{{forloop.counter}}" class="col carousel slide my-3" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo{{forloop.counter}}" data-slide-to="0" class="active"></li>
{% for i in range %}
<li data-target="#demo{{forloop.parentloop.counter}}" data-slide-to="{{i}}"></li>
{% endfor %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Personal Portfolio</title>
{% include 'includes/stylesheets.html' %}
<title>{% block title%}{% endblock title%}</title>
</head>
<body>


<div class="loader_bg">
<div class="loader"></div>
</div>
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="/"> RESUME<span>.</span> </a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">

<li class="nav-item {% block homeactive %}{% endblock homeactive%} ">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item {% block aboutactive %}{% endblock aboutactive%}">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item {% block contactactive %}{% endblock contactactive%}">
<a class="nav-link" href="/contact">Contact Me</a>
</li>
<li class="nav-item {% block projectactive %}{% endblock projectactive %}">
<a class="nav-link" href="/project">Project</a>
</li>

</ul>
<div class="container carousel-inner no-padding">
<div class="carousel-item active">
{% for i in product %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card align-items-center" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" id="namepr{{i.id}}">{{i.product_name}}</h5>
<p class="card-text">{{i.desc|slice:"0:53"}}...</p>
<span id="divpr{{i.id}}" class="divpr">
<button id="pr{{i.id}}" class="btn btn-primary cart">Add To Cart</button>
</span>
<a href="/shop/products/{{i.id}}"><button id="qv{{i.id}}" class="btn btn-primary cart">QuickView</button></a>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>


{% block body%}
{% endblock body%}

<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<p>&copy;Copyright 2019</p>
</div>
</div>
<!-- left and right controls for the slide -->
<a class="carousel-control-prev" href="#demo{{forloop.counter}}" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo{{forloop.counter}}" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
{% endfor %}
</div>
{% endblock %}
{% block js %}
<script>
// Find out the cart items from localStorage
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
updateCart(cart);
}
// If the add to cart button is clicked, add/increment the item
//$('.cart').click(function() {
$('.divpr').on('click', 'button.cart', function(){
var idstr = this.id.toString();
if (cart[idstr] != undefined) {
cart[idstr] = cart[idstr] + 1;
} else {
cart[idstr] = 1;
}
updateCart(cart);
});
//Add Popover to cart
$('#popcart').popover();
updatePopover(cart);
function updatePopover(cart) {
console.log('We are inside updatePopover');
var popStr = "";
popStr = popStr + "<h5> Cart for your items in my shopping cart </h5><div class='mx-2 my-2'>";
var i = 1;
for (var item in cart) {
popStr = popStr + "<b>" + i + "</b>. ";
popStr = popStr + document.getElementById('name' + item).innerHTML.slice(0, 19) + "... Qty: " + cart[item] + '<br>';
i = i + 1;
}
popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' onclick='clearCart()' id ='clearCart'>Clear Cart</button> "
console.log(popStr);
document.getElementById('popcart').setAttribute('data-content', popStr);
$('#popcart').popover('show');
}
function clearCart() {
cart = JSON.parse(localStorage.getItem('cart'));
for (var item in cart) {
document.getElementById('div' + item).innerHTML = '<button id="' + item + '" class="btn btn-primary cart">Add To Cart</button>'
}
localStorage.clear();
cart = {};
updateCart(cart);
}
function updateCart(cart) {
var sum = 0;
for (var item in cart) {
sum = sum + cart[item];
document.getElementById('div' + item).innerHTML = "<button id='minus" + item + "' class='btn btn-primary minus'>-</button> <span id='val" + item + "''>" + cart[item] + "</span> <button id='plus" + item + "' class='btn btn-primary plus'> + </button>";
}
localStorage.setItem('cart', JSON.stringify(cart));
document.getElementById('cart').innerHTML = sum;
console.log(cart);
updatePopover(cart);
}
// If plus or minus button is clicked, change the cart as well as the display value
$('.divpr').on("click", "button.minus", function() {
a = this.id.slice(7, );
cart['pr' + a] = cart['pr' + a] - 1;
cart['pr' + a] = Math.max(0, cart['pr' + a]);
document.getElementById('valpr' + a).innerHTML = cart['pr' + a];
updateCart(cart);
});
$('.divpr').on("click", "button.plus", function() {
a = this.id.slice(6, );
cart['pr' + a] = cart['pr' + a] + 1;
document.getElementById('valpr' + a).innerHTML = cart['pr' + a];
updateCart(cart);
});
</script>
{% endblock %}
{% include 'includes/scripts.html' %}
</body>
</html>