Javascript Turorial App - Shopping Cart App

Javascript Turorial App - Viết ứng dụng mua sắm bằng JS

Javascript Turorial App - Viết ứng dụng mua sắm bằng JS

File index.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
		<title>Shopping cart App</title>
	</head>
	<body>
		<div id="container">
			<style>

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
.bodyContainer{
  color: #0D1F4B;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 50px;
}

.siteName{
  
    font-family: 'Dancing Script', cursive;font-size: 30px;
}

[data-role="navBar"] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0D1F4B;
}

[data-role="navItem"] {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

[data-role="navItem"]:hover{
    background-color: #ED2B68;
    color: white;
    text-decoration: none;
}

h4{
  color: #0095DD;
}

.contShop{
  text-align: right;
  padding-right: 40px;
}

table {
    font-family: arial, sans-serif;
    font-size: medium;
    border-collapse: collapse;
    width: 100%;
}

tr:nth-child(even) {
    background-color: white;
    border: 1px solid #dddddd;
}

tr:nth-child(1) {
  background-color: #0D1F4B;
  color: white;
}

td, th {
    text-align: left;
    padding: 8px;
}

[data-role="qtyValue"]{
  color: #ED2B68;
}

[data-role="price"]{
  padding-top: 15px;
}

button{
  border: none;
  border-radius: 4px;
  background-color: #ED2B68;
  color: white;
  padding: 4px 12px 4px 12px;
}

.button:hover{
  background-color: #0095DD;
}

[data-role="checkout"]{
  background-color: #0095DD;
  font-family: arial, sans-serif;
  font-size: medium;
}

[data-role="cancel"]{
  margin-right: 10px;
  font-size: medium;
}

a{
  color: #ED2B68;
}

ul{
  font-size: 18px;
  list-style: none;
}

[data-role="total"]{
  float: right;
  padding-right: 88px;
}

[data-role="randomButtons"]{
  margin-top: 20px;
  margin-right: 72px;
  float: right;
}
</style>

<ul data-role="navBar">
  <li class="siteName" data-role="navItem">Whitney's Closet</li>
</ul>

<div class="bodyContainer">
<h1>Shopping Cart</h1>

<hr />
<div class="row">
  <div class="col-sm-8"><br>
    <h4>You have <span data-role="qtyValue">0</span> items in your cart.</h4></br>
  </div>
  <div class="col-sm-4 contShop">
    <p><a>Continue shopping</a></div>
</div>

<div class="row">
  <table>
    <tr>
      <th>Product</th>
      <th>Description</th>
      <th>Price</th>
      <th></th>
      <th>Quantity</th>
      <th></th>
      <th>Subtotal</th>
      <th></th>
      <th></th>
    </tr>
    <tr data-role="lineItem">
      <td><img src=""></td>
      <td><select data-role="productsDdl"></select></td>
      <td data-role="price"></td>
      <td>x</td>
      <td><select data-role="qtyDdl"></select></td>
      <td>=</td>
      <td data-role="subtotal"></td>
      <td data-role="addBtn"><button class="button" type="button">Add</button></td>
      <td data-role="removeBtn"><button class="button" type="button">Remove</button></td>
    </tr>
  </table>
  <div><br />

    <h3>Here's What You're Getting!</h3><br />
    <ul class="cartList">
    </ul>

    <br />

    <h4 data-role="total">Total: $<span data-role="totalCost">0</span></h4>
    <br />
    <br />

    <hr />
  <div data-role="randomButtons">
    <button class="button" data-role="cancel" type="button">Cancel</button>
    <button class="button" data-role="checkout" type="button">Check Out</button>
</div>
  </div>
		</div>
		<script src="script.js"></script>
	</body>
</html>

File script.js

$('[data-role="price"]').html("$0");
$('[data-role="subtotal"]').html("$0");

var products = [
{
  title: 'Choose One',
  price: 0.00
}, 
{
  title: 'Blouse',
  price: 60,
  image: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=3024702"
}, 
{
  title: 'Evening Dress',
  price: 110,
  image: "https://s-media-cache-ak0.pinimg.com/236x/21/8c/da/218cdadce9a19122a6fd325fee443efc.jpg"
}, 
{
  title: 'Pants',
  price: 95,
  image: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=126767993"
}, 
{
  title: 'Paris Sweatshirt',
  price: 70,
  image: "https://ae01.alicdn.com/kf/HTB1DplZNpXXXXamaXXXq6xXFXXXB/Modern-Spring-Autumn-and-Winter-Womens-Long-Sleeve-Printed-Pullover-casual-Sweatshirts-Blouse-Tops-Cotton-Eiffel.jpg_220x220.jpg"
}];

function populateProductsDdl(selector, items) {
  var $options = [];

  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    $options.push($('<option />', {
      text: item.title,
      value: /*"$" + */ item.price
    }));
  }
  $(selector).html($options);
}

populateProductsDdl('[data-role="productsDdl"]', products);

//A bad way to load the item's image.
function populateImage(selector){
  if( (selector).text() === products[1].title ){
    $('img').attr('src', "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=3024702");
  }
  if( (selector).text() === products[2].title ){
    $('img').attr('src', "https://s-media-cache-ak0.pinimg.com/236x/21/8c/da/218cdadce9a19122a6fd325fee443efc.jpg");
  }
  if( (selector).text() === products[3].title ){
    $('img').attr('src', "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=126767993");
  }
  if( (selector).text() === products[4].title ){
    $('img').attr('src', "https://ae01.alicdn.com/kf/HTB1DplZNpXXXXamaXXXq6xXFXXXB/Modern-Spring-Autumn-and-Winter-Womens-Long-Sleeve-Printed-Pullover-casual-Sweatshirts-Blouse-Tops-Cotton-Eiffel.jpg_220x220.jpg");
  }
}

//When a product is selected, populate the price
function populatePrice(selector, priceSelector) {
  var x = $('<p />', {
    text: $(selector).val()
  });
  $(priceSelector).html(x);
}

var qtyOptions = [];

//Set the quantity values in the qty dropdown.
function qtyDdlOptions(someArray, number) {

  for (i = 0; i < number; i++) {
    someArray.push([i]);
  }
}

qtyDdlOptions(qtyOptions, 100);

function populateQtyDdl(selector, items) {
  var $options = [];

  for (var i = 1; i < items.length; i++) {
    var item = [i];
    $options.push($('<option />', {
      text: item
    }));
  }
  $(selector).html($options);
}

populateQtyDdl('[data-role="qtyDdl"]', qtyOptions);

//I need to calc the subtotal based on price and qty. It works when hard coded, but not when I try to grab the price value.
function calcSubtotal() {
  value1 = $('[data-role="qtyDdl"] :selected').text();
  value2 = $('[data-role="price"]').text().slice(0);
  var x = value1 * value2;
  $('[data-role="subtotal"]').html("$" + x);
}

function calcTotal() {
  var x = $('[data-role="total"]').text();
  var value1 = $('[data-role="qtyDdl"] :selected').text();
  var value2 = $('[data-role="price"]').text().slice(0);
  var x = value1 * value2;
  $('[data-role="total"]').html("Total: $" + x);
}

$('[data-role="productsDdl"]').on("change", function() {

populatePrice('[data-role="productsDdl"]', '[data-role="price"]');
  
  
populateImage($('[data-role="productsDdl"] :selected'));
 
 
  //$('img').attr('src', "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=3024702");
  calcSubtotal();
})

$('[data-role="qtyDdl"]').on("change", function() {
  calcSubtotal();
})

//Changes the quantity in the cart and displays to customer
$('[data-role="addBtn"]').on("click", function() {
  var u = $('[data-role="productsDdl"] :selected').text();
  var x = $('[data-role="qtyDdl"] :selected').text();
  $('[data-role="qtyValue"]').html(x);

  var y = $('[data-role="productsDdl"] :selected').text();
  var z = $('[data-role="qtyDdl"] :selected').text();

  $('<li />', { 
    text: y + " was added to your cart. (Qty: " + z + ")"
  }).prependTo($('.cartList'));

  calcTotal();
})

//"Removes the product from the cart. 
$('[data-role="removeBtn"]').on("click", function() {
  $('[data-role="productsDdl"] :selected').text("Choose One");
  //$('[data-role="qtyDdl"] :selected').text("1");
  //$('[data-role="qtyValue"]').html(0);
  $('[data-role="subtotal"]').html("$0");
})

$('[data-role="cancel"]').on("click", function() {
  $('[data-role="qtyValue"]').html(0);
  $('.cartList').empty();
  $('[data-role="total"]').text("Total: $0");
})

 

Các bài học liên quan

Đóng góp ý kiến của bạn về bài học để admin liên hệ hoặc giúp nhé

CÔNG TY THIẾT KẾ WEBSITE CHUYÊN NGHIỆP

WEBEXTRASITE là Công ty đào tạo tin học online - thiết kế web chuyên nghiệp uy tín có trụ sở chính tại TPHCM. Chúng tôi thiết kế web theo chuẩn SEO, chuẩn di động. Áp dụng những công nghệ tiên tiến nhất hiện nay để thiết kế website như HTML5, CSS3, PHP, Asp.net, Photoshop, AI. Nhằm mang cho khách hàng một công cụ kinh doanh online hiệu quả và mạng lại lợi nhuận cao cho khách hàng, đồng thời công ty còn cung cấp các khóa học online hoàn toàn miễn phí hoặc các khóa học tính phí khác nhằm nâng cao chất lượng đào tạo tin học công nghệ tại Việt Nam.

Kết nối với chúng tôi

CÔNG TY THIẾT KẾ WEBEXTRASITE.COM

Địa chỉ VPĐD: 412 HT17 Phường Hiệp Thành, Quận 12,TPHCM

Hotline 24/7 + Zalo: 0932.023.992 - Mr.Hieu Tan

Email: truongngoctanhieu2018@gmail.com

Copyright © 2021 WEBEXTRASITE.COM All right reserved