Saved!

Add to Cart Product - PLMBUZZE

Add to Cart, ecommerce template, webshop, product page. This is the new WEB shop Template for www.njcc.hr We used all technics we now like CSS3 JavaScript and jQuery

Shopping Cart javascript jquery css3

  
<header>
<div class="col-100 top">
	<div class="col-100-max">
		<div class="col-30 poruka t"><a><i class="fa fa-envelope"></i> some@emailaddress.com</a></div>
		<div class="col-40 navi t"> <a>Blagajna</a> <a>Moj račun</a> </div>
		
		<div class="col-30 shop-info t">

			<div class="curr">

			  <form name="currencies" action="http://www.njcc.hr/product_info.php" method="get"> 
				  <label class="select">      
					  <select name="currency" class="currencyselect" onchange="this.form.submit();">
						  <option value="HRK" selected="selected">HR Kuna</option>
						  <option value="EUR">Euro</option>
					  </select>
					  <input type="hidden" name="cPath" value="1_28" />
					  <input type="hidden" name="products_id" value="209" />
				  </label>
			  </form>
			</div>


			<div class="lang">
				<a href="products_id=209&amp;language=hr">
					<img src="http://www.njcc.hr/includes/languages/hrvatski/images/icon.gif" alt="Hrvatski" title="Hrvatski" />
				</a>  
				<a href="products_id=209&amp;language=sr">
					<img src="http://www.njcc.hr/includes/languages/english/images/icon.gif" alt="English" title="English" />
				</a> 
			</div>	

		</div>
		
		<div class="clear"></div>
	</div>
</div>



<div class="col-100-max">
	<div class="col-50 logo">
		<img src="http://www.njcc.hr/images/store_logo.png">
	</div>
	<div class="col-50">
	  <div class="cart">
		  <div id="cart">
			<div class="cart-icon"></div>
			<div class="cart-count">
				<p class="text">Vaša košarice je prazna</p>
				<p class="cart-price">Ukupno: 0,00 kn</p>
			</div>
			<div class="clear"></div>
		  </div>
	  </div>
	</div>
	<div class="clear"></div>
</div>







 

<div class="board col-100-max">

	<div class="col-60">
		
<script type="text/javascript">
  $( document ).ready(function(){
    $( ".catbtn" ).click(function(){
		if($(".cats").is(":visible")){
		  $(".cats").fadeOut();
		}else{
	      $(".cats").fadeIn();
		}
      $(".plusx").toggle();
      $(".fa-chevron-right").toggleClass("fa-rotate-90");
      $(".xx").toggle();
    });
  });
</script>
		
		
 <div class="catmenu">
	 <div class="catbtn">
		 <span class="plusx"><i class="fa fa-bars t"></i></span>
		 <span class="xx"><i class="fa fa-close t"></i></span>
		 Katalog proizvoda  <i class="fa fa-chevron-right t"></i> 
	 </div>  
	 <div class="cats">
		 <a href="http://www.njcc.hr/index.php?cPath=57"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Adapteri i ostala oprema &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=1"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Boje za tetoviranje &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=125"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Čelićne tube</a>
		 <a href="http://www.njcc.hr/index.php?cPath=120"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Čelićni vrhovi za tubu &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=23_40" class="sub"><i class="fa fa-minus-square-o" aria-hidden="true"></i> Liner</a>
		 <a href="http://www.njcc.hr/index.php?cPath=23_42" class="sub"><i class="fa fa-minus-square-o" aria-hidden="true"></i> Magnum</a>
		 <a href="http://www.njcc.hr/index.php?cPath=23_44" class="sub"><i class="fa fa-minus-square-o" aria-hidden="true"></i> Power</a>
		 <a href="http://www.njcc.hr/index.php?cPath=23_43" class="sub"><i class="fa fa-minus-square-o" aria-hidden="true"></i> Shader</a>
		 <a href="http://www.njcc.hr/index.php?cPath=180"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Ez Cartridges &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=165"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Ghost Cartridges &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=60"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Higijena & dezinfekcija &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=24"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Jednokratne tube &gt;</a>
		 <a href="http://www.njcc.hr/index.php?cPath=59" class="to"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Održavanje tetovaža & piercinga</a>
   </div>
</div>

		
	</div> 
	<div class="col-40 search-half">
		<div class="search-outer">
			<input type="text" id="search" placeholder="Tražilica proizvoda ..."/>
			<button class="search-btn"><i class="fa fa-search"></i></button>
			<div class="clear"></div>
			<div class="ajaxsearch">
				<a href="/">
					<div class="ajaxsearchresult">
						<div class="img"><img src="http://njcc.hr/images/Bisquit.jpg"></div>
						<div class="title">Product Title</div>
					</div>
				</a>
				<a href="/">
					<div class="ajaxsearchresult">
						<div class="img"><img src="http://www.njcc.hr/images/derma%20black.jpg"></div>
						<div class="title">Product Title</div>
					</div>
				</a>
				<a href="/">
					<div class="ajaxsearchresult">
						<div class="img"><img src="http://njcc.hr/images/Bisquit.jpg"></div>
						<div class="title">Product Title</div>
					</div>
				</a>
			</div>
		</div>
	</div> 
	<div class="clear"></div>
</div>
	
<script type="text/javascript">
  $( document ).ready(function(){
    $( "#search" ).on("keyup focus mouseup mousedown click",function(){
		if($("#search").val() === ''){
		  $(".ajaxsearch").fadeOut();
		}else{
	      $(".ajaxsearch").fadeIn();
		}
    });
    $( "#search" ).on("blur",function(){
		setTimeout(function(){
		//$("#search").val('');
		  $(".ajaxsearch").fadeOut();	
		},500);
    });
  });
</script>



<div class="col-100 breadcrump">
	<div class="col-100-max">
	  &nbsp;&nbsp;<a href="http://www.njcc.hr" class="headerNavigation">Početna</a> » <a href="http://www.njcc.hr/index.php" class="headerNavigation">Shop</a> » <a href="http://www.njcc.hr/index.php?cPath=1" class="headerNavigation">Boje za tetoviranje</a> » <a href="http://www.njcc.hr/index.php?cPath=1_28" class="headerNavigation">Bullets Ink</a> » <a href="http://www.njcc.hr/product_info.php?cPath=1_28&amp;products_id=209" class="headerNavigation"></a>
	</div>
</div>
</header>






<section>

<div class="col-100 product-bg">
	<div class="col-100-max">
		
		
		<div class="col-50">
			<div class="card">	
				<img src="http://njcc.hr/images/Bisquit.jpg">
			</div>
		</div>
		
		
		
		
		<div class="col-50">

			<div class="card2">
			
				<p class="product-header">Proizvod</p>
				<h1>#35 Bisciut, 35ml</h1>
				
				
				
				<div class="col-50">
				<div class="cijena">
				  <div class="cijena-n">  
					  <p class="pdv">96 kn | bez pdv-a</p>
					</div>
				  <div class="tag">
					  <span>120,00kn</span>    
					  <div class="pdv">s pdv-om</div>
				  </div>
				</div>
				</div>
				
				 
				<div class="col-50">

				  <div class="quantity-outer">
					<a id="quantity_down">&minus;</a>
					<input name="quantity" class="quantity" id="quantity" min="1" max="200" value="1">
					<a id="quantity_up">&plus;</a>
				  </div>
				</div>

				<div class="clear"></div>
				<div class="col-100">

				 <div class="cart-btn add" data-id="35"><i class="fa fa-shopping-basket"></i> Add to Cart</div>
				</div>

		
				
				<script type="text/javascript">
				  $('#quantity_up').on("click",function(){
					var quantity=$("#quantity").val();
					quantity++;
					$("#quantity").val(quantity);
				  });
				  $('#quantity_down').on("click",function(){
					var quantity=$("#quantity").val();
					if (quantity>1) {
						quantity--;
						$("#quantity").val(quantity);
				  	}
				  });	
				</script>


				
				<p class="description-header">Opis:</p>

				<p class="description">Top kvaliteta! Svaki uložak je steriliziran sa EO Gas u nezavisnom Blister pakiranju. CE standardni proces. 10kom/kutija.</p>

				<!-- AddThis Button BEGIN -->
				<div class="addthis_toolbox addthis_default_style">
				<a class="addthis_button_facebook_share" fb:share:layout="button_count"></a>
				<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal" pi:pinit:url="http://www.addthis.com/features/pinterest" pi:pinit:media="http://www.addthis.com/cms-content/images/features/pinterest-lg.png"></a>
				<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
				<a class="addthis_button_tweet"></a>
				<a class="addthis_counter addthis_pill_style"></a>
				</div>
				<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
				<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e73b54564f7b1d0"></script>
				<!-- AddThis Button END -->
				
				
			</div>		
			
			
		</div>
	<div class="clear"></div>
	</div>
</div>
</section>






<section>
<div class="col-100 newsletter">
<div class="col-100-max">
	<div class="col-20">
		<h2>Newsletter</h2>
	</div>
	<div class="col-30">
		<p> primaj besplatne i korisne savjete, novosti iz TATTOO svijeta, informacije o akcijama i novitetima u našem shop-u, saznajte prije ostalih direktno na svoj email...</p>
	</div>
	<div class="col-50">
		<div class="news-outer">
			<input type="text" placeholder="Vaša Email adresa">
			<button class="news-btn">Prijava</button>
		</div>
	</div>
	<div class="clear"></div>
</div>
</div>
</section>

	
	
	
	




<section>
<div class="product-wrap-outer">
<div class="product-wrap">
	
	<div class="header">Products</div>
	
	<div class="clear"></div>

<div class="product-box">
	<div class="product-box-image"><img src="http://www.njcc.hr/images/m1_2__2_1.jpg"></div>
	<div class="product-box-info">
		<div class="product-box-price-tag">Price</div>
		<div class="product-box-price">999,99 €</div>
		<div class="product-box-title">Product Title</div>
	</div>
	<div class="cart-btn-2 add">... view more</div>
</div>

		
<div class="product-box">
	<div class="product-box-image"><img id="pic006" src="http://www.njcc.hr/images/banana-cream.jpg"></div>
	<div class="product-box-info">
		<div class="product-box-price-tag">Price</div>
		<div class="product-box-price">999,99 €</div>
		<div class="product-box-title">Product Title</div>
	</div>
	<div class="cart-btn-2 add">... view more</div>
</div>

		
<div class="product-box">
	<div class="product-box-image"><img id="pic007" src="http://www.njcc.hr/images/derma%20black.jpg"></div>
	<div class="product-box-info">
		<div class="product-box-price-tag">Price</div>
		<div class="product-box-price">999,99 €</div>
		<div class="product-box-title">Product Title</div>
	</div>
	<div class="cart-btn-2 add">... view more</div>
</div>
	
		
<div class="product-box remove">
	<div class="product-box-image"><img src="http://www.njcc.hr/images/lapcloths-black-1.jpg"></div>
	<div class="product-box-info">
		<div class="product-box-price-tag">Price</div>
		<div class="product-box-price">999,99 €</div>
		<div class="product-box-title">Product Title</div>
	</div>
	<div class="cart-btn-2 add">... view more</div>
</div>

<div class="clear"></div>

</div>
</div>
</section>



<script>									
$( document ).ready(function(){
  $(".product-box-image img").mouseenter(function(){ 
	var getid  = $( this ).attr('id');
	var height = $( this ).height();
	var marg   = 250 - height;
	if(height >= '260'){
	  $( this ).animate({'marginTop': marg }, 400);			  
   	}
  });
  $(".product-box-image img").mouseleave(function(){ 
	var getid  = $( this ).attr('id');
	var height = $( this ).height();
	var marg   = 0;
	if(height >= '260'){
	  $( this ).animate({'marginTop': marg }, 400);			  
   	}
  });
});
</script>
	

	
<script>				
$(".add").on("click", function(){

var pid = $(this).data('id');
var quantity = $(".quantity").val();

$(".cart .cart-count .text")
	.html('<div class="number-count">'+quantity+'</div> <span class="number-count-text">Proizvod u košarici</span>');
$(".cart .cart-count .cart-price")
	.html('<span class="number-count-price">Ukupno: <b>120,00 kn</b> ID #'+pid+'</span>');						
$(".cart-icon")
.css('background-image', 'url(http://i.imgur.com/ph3ubmy.png)')
.css('background-position', '0px -50px');

var scroll = $(window).scrollTop();

if (scroll <= 100) {
  $(".cart").addClass("incart");
    setTimeout(function(){
      $(".cart").removeClass("incart");
   },1000);
}else{
	var c = $("#cart").clone().appendTo( ".cart" );
    $(c).addClass("incart-scroll");
      $(c).addClass("bcg").addClass("p10").addClass("bsb").addClass("br3");
	setTimeout(function(){
	  $(c).removeClass("incart-scroll");
      $(c).removeClass("bcg").removeClass("p10").removeClass("bsb").removeClass("br3");
	  $(c).hide();
	},4000);
  } 
});
</script>
          
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js