so i'm doing this project on codepen. Javascript does what it's supposed to(after click, takes an item with a class of product-name from the button's parent element and puts it in the cart-dropdown), however I was wondering if maybe there's a more simpler way of doing the same thing. And i'm having a hard time placing product-price to the cart-dropdown, i mean i can put the price in, but in a seperate <li>. Here's the javascript.
var itemsCart = document.getElementById('cart-drop');
function myFunc(){
itemsCart.classList.toggle('show');
}
window.onclick = function(event) {
if(!event.target.matches('.dropdown span') &&
!event.target.matches('.dropdown-toggle')){
var hide = document.getElementsByClassName('cart-dropdown');
if(hide[0].classList.contains('show')){
hide[0].classList.remove('show');
}
}
}
function addToCardButtons(){
var addToCart = document.getElementsByClassName('add-to-cart');
for(var i = 0; i<addToCart.length; i++) {
addToCart[i].addEventListener('click', function(){
var parentNode = this.parentNode;
findName(parentNode);
var num = document.getElementById('number');
var parsed = parseInt(num.innerHTML);
if(parsed>=0){
parsed++;
num.classList.add('addedToCart');
num.innerHTML = parsed;
}
})
}
}
addToCardButtons();
function findName(parent){
var children = parent.childNodes;
for(var i = 0; i<children.length; i++){
var child = children[i].classList;
if(child && child.contains('product-name')){
var productName = children[i].innerHTML;
createItem(productName);
}
}
}
function createItem(name) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(name))
itemsCart.append(li)
}
Full version: https://codepen.io/benasl/pen/ZXJYgz
Here is the simplified code. Hope this helps. I have added product price to cart-dropdown by passing price parameter.
window.onload = function () {
window.onclick = function (event) {
if (!event.target.matches('.dropdown span') && !event.target.matches('.dropdown-toggle'))
document.querySelector('.cart-dropdown').classList.remove('show');
}
function addToCardButtons() {
var addToCart = document.querySelectorAll('.add-to-cart');
for (var i = 0; i < addToCart.length; i++) {
addToCart[i].addEventListener('click', function () {
createItem(this.parentNode.querySelector(".product-name").innerHTML,
this.parentNode.querySelector(".product-price").innerHTML);
var num = document.querySelector('#number');
var parsed = parseInt(num.innerHTML);
if (parsed >= 0) {
num.classList.add('addedToCart');
num.innerHTML = ++parsed;
}
})
}
}
addToCardButtons();
function createItem(name, price) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(name + " - " + price))
document.querySelector('#cart-drop').append(li);
//Remove "Your cart is empty" when any product is added
[].filter.call(document.querySelectorAll('#cart-drop > li'),function(x) {
if (x.textContent.indexOf('Your cart is empty') > -1) x.remove();
});
}
}#main {
margin-top: 20px;
margin-bottom: 20px;
}
#main .row {
margin-top: 20px;
margin-bottom: 20px;
}
.text {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
text-align: right;
text-transform: uppercase;
color: #fff;
width: 60%;
}
.text h1 {
font-size: 4em;
color: #d88c00;
}
.product-wrap {
margin-top: 30px;
}
.product-name {
margin-top: 0;
color: #ffa500;
}
.product-type {
margin: 0;
color: #bbbbbb;
}
.product-price {
font-weight: 600;
font-size: 1.5em;
color: #424242;
}
.price-old {
color: #bbbbbb;
text-decoration: line-through;
font-size: 1em;
line-height: 20px;
}
.product-description {
margin-bottom: 20px;
margin-top: 20px;
}
.test {
width: 100%;
min-height: 350px;
}
.test img {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<nav class="navbar navbar-default navbar-fixed-top custom-nav no-border">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand no-padding" href="#">
<img class="logo" src="imgs/logo.svg">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="dropdown" onclick="document.getElementById('cart-drop').classList.toggle('show');">
<a class="dropdown-toggle custom-toggle no-padding" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
<span>Your cart:</span>
<span id="number"> 0</span>
</a>
<ul id="cart-drop" class="dropdown-menu cart-dropdown">
<li>Your cart is empty</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="test">
<img src="https://images.unsplash.com/photo-1484795819573-86ae049cb815?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=">
</div>
</div>
<div class="col-md-7">
<div class="product-wrap">
<h4 class="product-type">Mountain Bikes</h4>
<h1 class="product-name">Lorem ipsum</h1>
<span class="product-price price-new">1200.00 eu </span><span class="price-old">1680.00 eu</span>
<p class="product-description">Curabitur maximus quam sit amet mattis vulputate. Donec id tristique nisl, ut vehicula urna. Vivamus
vel magna ipsum. Vestibulum et finibus nisl. </p>
<button class="btn btn-lg add-to-cart">Add to cart</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="product-wrap">
<h4 class="product-type">Road Bikes</h4>
<h1 class="product-name">Lorem ipsum #2</h1>
<span class="product-price price-new">2000.00 eu</span>
<p class="product-description">Curabitur maximus quam sit amet mattis vulputate. Donec id tristique nisl, ut vehicula urna. Vivamus
vel magna ipsum. Vestibulum et finibus nisl. </p>
<button class="btn btn-lg add-to-cart">Add to cart</button>
</div>
</div>
<div class="col-md-5">
<div class="test">
<img src="https://images.unsplash.com/photo-1484795819573-86ae049cb815?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=">
</div>
</div>
</div>
</div>
</div>