pada tutorial sebelumnya kita sudah membuat dua baris, baris pertama untuk logo produk dan kedua untuk carousel dan keranjang kecil, sekarang lanjut ke tahap berikutnya. Baris 3 (penampil produk). <br> <!-- baris ketiga --> <div class="row"> <div class="col-xs-6 col-sm-3"> ...

Membuat Template E-Commerce Responsive dengan Bootstrap [Part 2]

pada tutorial sebelumnya kita sudah membuat dua baris, baris pertama untuk logo produk dan kedua untuk carousel dan keranjang kecil, sekarang lanjut ke tahap berikutnya. Baris 3 (penampil produk).

<br>
<!-- baris ketiga -->
<div class="row">	
	<div class="col-xs-6 col-sm-3">	
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Ghebuk</h4>
			<p>Ghebuk is the most popular food from madura, it is a parotan kelapa dicampur tepung dan sebagainya</p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn  btn-success btn-sm">Detail</button>
			</p>
		</div>
		<img src="img/1.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
	<div class="col-xs-6 col-sm-3">  
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Rap-Orap</h4>
			<p>Rap-Orap is the most popular food from madura, it is a parotan kelapa</p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn btn-success btn-sm">Detail</button>
			</p>
		</div>
		<img src="img/2.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
	<div class="col-xs-6 col-sm-3">  
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Krepek Tette</h4>
			<p>Ghebuk is the most popular food from madura, it is a parotan kelapa</p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn btn-success btn-sm">Detail</button>
			</p>
			</div>
		<img src="img/3.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
	<div class="col-xs-6 col-sm-3">  
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Tapay</h4>
			<p>Ghebuk is the most popular food from madura, it is a parotan kelapa</p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn btn-success btn-sm">Detail</button>
			</p>
		</div>
		<img src="img/4.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
</div>
<!-- baris ketiga -->

baris ke empat produk bagian 2.

<!-- baris keempat --> 
<div class="row">
	<div class="col-xs-6 col-sm-3">	
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Ghebuk</h4>
			<p>Ghebuk is the most popular food from madura, it is a parotan kelapa</p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn  btn-success btn-sm">Detail</button>
			</p>
		</div>
		<img src="img/5.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
	<div class="col-xs-6 col-sm-3">  
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Rap-Orap</h4>
			<p>Rap-Orap is the most popular food from madura, it is a parotan kelapa</p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn btn-success btn-sm">Detail</button>
			</p>
		</div>
		<img src="img/6.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
	<div class="col-xs-6 col-sm-3">  
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Krepek Tette</h4>
			<p>Ghebuk is the most popular food from madura, it is a parotan kelapa </p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn btn-success btn-sm">Detail</button>
			</p>
			</div>
		<img src="img/7.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
	<div class="col-xs-6 col-sm-3">  
	<div  id="hover-cap-4col">
	  <div class="thumbnail">
		<div class="caption">
			<h4>Tapay</h4>
			<p>Ghebuk is the most popular food from madura, it is a parotan kelapa </p>
			<p>Rp. 1.000 
			<button type="button" class="btn btn-warning btn-sm notif">Beli</button>
			<button type="button" class="btn btn-success btn-sm">Detail</button>
			</p>
		</div>
		<img src="img/8.jpg" class='img-responsive'>
	  </div>
	</div>
	</div>
</div>
<!-- akhir baris keempat -->

hasil.

Lanjut ke baris kelima …(subscribe email).

<!-- baris ke lima -->
<div class="row">
	<div class="col-sm-12">
	<div class="jumbotron tengah">
			<h1>Get Update !</h1>
			<p class="lead">
				Dapatkan  pemberitahuan update produk-produk terbaru kami, 
				dengan berlangganan via email dibawah ini, dan dapatkan diskon menarik lainnya !
			
			</p>
			<form>
			<div class="form-group">
				  <input type="email" class="form-control" id="email" placeholder="Enter email">
			</div>
			<div class="form-group">
				  <button type="button" class="btn btn-success btn-lg ">Subscribe </button>
			</div>
			</form>
	</div>
	</div>
</div>
<!-- akhir dari baris kelima -->

hasil.

selanjutnya. baris ke enam pembuatan panel footer.

<!-- baris keenam -->
<div class="row">
			<div class="col-sm-3 col-xs-6">
				<div class="panel panel-success">
				  <div class="panel-heading">
					<h3 class="panel-title">About Us</h3>
				  </div>
				  <div class="panel-body">
					<ul>
						<li><span class="glyphicon glyphicon-th-large"></span> PT. Gherus </li>
						<li><span class="glyphicon glyphicon-road"></span> Jl. jalan Gg.XXX </li>
						<li><span class="glyphicon glyphicon-phone-alt"></span> 0819393939393 </li>
						<li><span class="glyphicon glyphicon-share-alt"></span> fb/gherus </li>
						<li><span class="glyphicon glyphicon-share-alt"></span> @Gherus </li>
					</ul>
				  </div>
				</div>
			</div>
			<div class="col-sm-3 col-xs-6">
				<div class="panel panel-success">
				  <div class="panel-heading">
					<h3 class="panel-title">Our Partner !</h3>
				  </div>
				  <div class="panel-body">
					<ul>
						<li><span class="glyphicon glyphicon-asterisk"></span> PT. Rap-Orap </li>
						<li><span class="glyphicon glyphicon-qrcode"></span> PT. Ghebuk </li>
						<li><span class="glyphicon glyphicon-refresh"></span> PT. Kocor </li>
						<li><span class="glyphicon glyphicon-leaf"></span> PT. Krepek Tette </li>
						<li><span class="glyphicon glyphicon-fire"></span> PT. Tapay </li>
					</ul>
				  </div>
				</div>
			</div>
			<div class="col-sm-3 col-xs-6">
				<div class="panel panel-success">
				  <div class="panel-heading">
					<h3 class="panel-title">Help Desk</h3>
				  </div>
				  <div class="panel-body">
					<ul> 
						<li><span class="glyphicon glyphicon-comment"></span> Need help ? </li>
						<li><span class="glyphicon glyphicon-comment"></span> Need help ? </li>
						<li><span class="glyphicon glyphicon-comment"></span> Need help ? </li>
						<li><span class="glyphicon glyphicon-comment"></span> Need help ? </li>
						<li><span class="glyphicon glyphicon-comment"></span> Need help ? </li>
					</ul>
				  </div>
				</div>
			</div>
			<div class="col-sm-3 col-xs-6">
				<div class="panel panel-success">
				  <div class="panel-heading">
					<h3 class="panel-title">Report a bug</h3>
				  </div>
				  <div class="panel-body">
					<ul>
						<li> Found a bug ? </li>
						<li> Report to us </li>
						<li> and get money </li>
						<li> Send email </li>
						<li> support@gherus.com </li>
					</ul>
				  </div>
				</div>
			</div>
</div>
<!-- akhir dari baris keenam -->

hasilnya.

ok...
lanjut saja.

baris ke tujuh, payment method

Payment method
<!-- baris ke enam -->
<div class="row">
	<div class="col-sm-12">
		<img src="img/payment.jpg" class="img-responsive pull-right">
	</div>
</div>

 

hasilnya.

sips....
Template sudah siap.

selanjutnya kita akan membuat pop up modal keranjang besarnya.

tambahkan code berikut pada index.html

<!-- modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header bg-success">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Keranjang Belanja Anda !</h4>
        </div>
        <div class="modal-body">          
  <table class="table">
    <thead>
      <tr>
        <th>Ghebuk</th>
        <th>Harga </th>
        <th>Jumlah </th>
		<th>Optional</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Krepek Tette</td>
        <td>12.000</td>
        <td>12</td>
		<td>
			<a href="#">
			<span class="glyphicon glyphicon-plus-sign"></span>
			</a>
			<a href="#">
			<span class="glyphicon glyphicon-minus-sign"></span>
			</a>
			<a href="#">
			<span class="glyphicon glyphicon-remove-sign"></span>
			</a>
		</td>
      </tr>
      <tr>
        <td>Kocor</td>
        <td>12.000</td>
        <td>12</td>
		<td>
			<a href="#">
			<span class="glyphicon glyphicon-plus-sign"></span>
			</a>
			<a href="#">
			<span class="glyphicon glyphicon-minus-sign"></span>
			</a>
			<a href="#">
			<span class="glyphicon glyphicon-remove-sign"></span>
			</a>
		</td>
      </tr>
      <tr>
         <td>Nang-nginang</td>
        <td>12.000</td>
        <td>12</td>
		<td>
			<a href="#">
			<span class="glyphicon glyphicon-plus-sign"></span>
			</a>
			<a href="#">
			<span class="glyphicon glyphicon-minus-sign"></span>
			</a>
			<a href="#">
			<span class="glyphicon glyphicon-remove-sign"></span>
			</a>
		</td>
      </tr>
	  <tr>
         <th>Total</th>
        <th>36.000</th>
        <th>36</th>
		<td>
		</td>
      </tr>
    </tbody>
  </table>
        </div>
        <div class="modal-footer bg-success">
		  <button type="button" class="btn btn-warning" data-dismiss="modal">Check Out</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
        </div>
      </div>
      
    </div>
  </div>
<!-- akhir dari modal -->

hasil.

yups... selanjutnya mencustom tampilan dengan css.

buat file "custom.css", kemudian jangan lupa includekan ke halaman index.

* {
margin:0;
padding:0;
}
h3,h4{
color:white;
font-weight:bold;
}
body {
	padding-top:70px;
	}
#hover-cap-4col .thumbnail {
	position:relative;
	overflow:hidden;	
}
.caption {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	color:#fff !important;
}
.item img{
width:80%;
max-height:250px;
margin-right:auto;
margin-left:auto;
}
.tengah {
margin-top:20px;
}
.kiri {
float:left;
background-color:red;
}
.col-sm-3 img {
min-height:200px;
}
.carousel-inner img{
height:100%;
width:100%;
}
.sembunyi {
	position:fixed;
	left:10px;
	top:70px;
	z-index:1000;
	display:none;
}
.tengah {
text-align:center;
background-color:#dcedc8;
}
#email {
width:50%;
margin-left:auto;
margin-right:auto;
}
.bg {
background-color:#000;
color:white;
}
ul li {
list-style:none;
font-weight:bold;
}
@media screen and (max-width:460px){
	p {
	font-size:12px;
	}
}

sekarang memberikan efek pada bagian foto produk ketika di hover.

codenya sederhana, silahkan buat file "custom.js" terlebih dahulu.

$(document).ready(function(){
		$('.thumbnail').hover(
		function(){
		$(this).find('.caption').slideDown(250);
		},
		function(){
		$(this).find('.caption').slideUp(250);
		}
		);
});

menambahkan notifikasi saat  tombol beli diklik.

$(".notif").click(function(){
    $(".sembunyi").fadeIn();
	function hidelagi(){
		$(".sembunyi").fadeOut();
}
setTimeout(hidelagi,2000);
});

 

Alhamdulillah Template E-Commerce Responsive sudah berhasil kita buat. silahkan dicoba.

kalau ada kebingungan monggo ditanyakan.

 

sekian, semoga bermanfaat.

 

Wassalamualaikum. wr. wb.


About Author

d-newbie

Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding , ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi


Comment & Discussions

  • Untuk PHP nya gaada kah gan ?

    Kalo ada ditunggu tutor nya :)

  • d-newbie
    blm ada gan , ini cuma tutor template/interface doank....

  • lapor gan ,,,, logonya kok kelitan separo .... karena di belakang header ...

  • Salam knal abang2 di jago coding...

    Newbe untuk di bimbing...

    Ane mau nnya gan tentang seputar bootstrap, apakah stiap kita menggukan bootstrap harus custome css sndiri..?.?.?
    Tentang layout recomendasinya gmna, apa kita hrus nurut dri settingan bootstrap..?.?.?

    tlong di jawab ya bang...

    tenks.

  • Please LOGIN before if you want to give the comment.