MegaMart.com

장바구니에 담겨 있는 제품의 금액 합계를 볼 수 있는 기능

var shopping_cart = []
var shopping_cart_total = 0

function add_item_to_cart(name, price) {
  shopping_cart.push([name, price]) // 장바구니에 제품을 담기 위해 cart 배열에 추가
  calc_cart_total() // 장바구니 제품이 바뀌었으므로 금액 합계를 업데이트
}

function calc_cart_total() {
  shopping_cart_total = 0
  for(var i = 0; i < shopping_cart.length; i++) {
    var item = shopping_cart[i]
    shopping_cart_total += item.price  // 모든 제품값 더하기
  }
  set_cart_total_dom()  // 금액 합계를 반영하기 위한 DOM 업데이트
}

새로운 요구사항으로 무료 배송비를 계산해야 함

구매 합계가 20달러 이상이면 무료 배송. 장바구니에 넣으면 합계 20달러 이상인 제품의 구매 버튼 옆에 무료 배송 아이콘을 표시

절차적인 방법으로 구현

이게 더 이해하기는 쉬움

function update_shopping_icons() {
  var buy_buttons = get_buy_buttons_dom() // 페이지의 모든 구매 버튼 가져옴
  for (var i = 0; i < buy_buttons.length; i++) {
    var button = buy_buttons[i]
    var item = button.item
    if (item.price + shopping_cart_total >= 20) { // 무료 배송 가능한지 확인
      button.show_free_shopping_icon() // 무료 배송 아이콘 보여줌
    } else {
      button.hide_free_shopping_icon() // 무료 배송 아이콘 안 보여줌
    }
  }
}

합계 금액이 변경될 때마다 모든 아이콘을 업데이트하기 위해 calc_cart_total() 함수 마지막에 해당 함수를 불러준다.

function calc_cart_total() {
  shopping_cart_total = 0
  for(var i = 0; i < shopping_cart.length; i++) {
    var item = shopping_cart[i]
    shopping_cart_total += item.price
  }
  set_cart_total_dom()
  update_shopping_icons() // 아이콘 업데이트하는 코드 추가!
}

세금 계산

장바구니 금액 합계 변경될 때마다 세금을 다시 계산해달라 함. 함수를 새로 만들어 calc_cart_total()에서 불러 줌

function update_tax_dom() {
  set_tax_dom(shopping_cart_total * 0.01)
}

function calc_cart_total() {
  shopping_cart_total = 0
  for(var i = 0; i < shopping_cart.length; i++) {
    var item = shopping_cart[i]
    shopping_cart_total += item.price 
  }
  set_cart_total_dom()
  update_shipping_icons()
  update_tax_dom() // 추가!
}

테스트하게 쉽게 만들기