Benas Lengvinas Benas Lengvinas - 3 years ago 125
CSS Question

Simpler way of transfering info from one div to another

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

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download