이전에 HTML, CSS, JavaScript에 요소들로만 제작하였던
웹 쇼핑몰(?) 비스무리한 것을 다시 한번 더 활용해보고자 한다.
HTML, CSS, JavaScript와 함께 이전 글에서 쭉 다뤄왔던 Ajax와 jQuery를 사용해서
쇼핑몰에 기능을 추가하고자 한다.
이전에 간단하게 제작하였던 웹 쇼핑몰 주문 부분에 대한 코드 전부를
맨 아래에 첨부해놓겠다.
아직 미숙한 부분이 많아 불필요한 코드 부분이 있을 가능성이 있으니
복사해서 사용하시는 분은 효율적으로 고쳐서 써보면 좋을 것 같다.
혹시나 못 본 분들을 위해 이전 글에 어떤 방식으로
제작을 해보았는지 참고하면 좋을 것 같다.
웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명
웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명
위의 페이지는 현재까지 공부한 내용만을 바탕으로 제작해본 나만의 쇼핑몰 사이트 주문 페이지이다. 아직까지 공부한 부분이 미약하여 홈페이지도 부실해보이지만.. 그래도 열심히 하고 있다.
parkjh7764.tistory.com
그렇다면 해당 쇼핑몰에 어떤 부분을 추가할 지 알아보자.
바로 '환율'이다.
통상 쇼핑몰은 대한민국 돈인 KRW로 계산을 하겠지만
요새는 글로벌 시대이다 보니 많은 외국인들도 한국 쇼핑몰을 이용한다.
우리도 아마존과 같이 해외 쇼핑몰을 이용하는 것과 마찬가지이다.
그럴 때 필요한 기능이 바로 '환율'을 보여주는 것이다.
우리나라의 돈이 해외에선 얼마로 교환이 되는 지에 대한 비율이 '환율'이다.
그러면 바로 쇼핑몰에 환율을 보여주는 부분을 추가해보자.
환율은 일정한 수치가 아니라, 매일마다 변경되는 값이므로
환율에 대한 API에서 데이터를 가져와야 한다.
환율 Open API를 아래 주소로 남겨놓겠다.
https://api.manana.kr/exchange/rate.json
해당 API 주소를 웹에 복사해서 들어가게 되면
아래 사진과 같은 화면이 나올 것이다.
복잡하게 나온다면 'JSON View'를 깔자. 이또한 이전 글에 있다.
한 눈에도 뭐가 무엇을 뜻하는지 알 수 있다.
date는 어떤 일자에 환율인지에 대한 기준을 나타내고
name은 어떤 나라 돈인지
rate는 USDKR\ 1달러 기준으로 원화(KR)로 얼마인지.
JPY는 일본 돈을 뜻한다. 일본 돈 1엔에 한국 돈으로 10원이란 뜻이다.
환율에 대한 API를 활용할 때 새로운 메소드를 적용해보자.
※새로운 제이쿼리 메소드※
<script>
$(document).ready(function(){
alert("웹 페이지가 로딩 완료 되었을 때 발생하는 메소드")
});
</script>해당 메소드를 활용하는 이유는 이전 예제에서는
버튼을 눌렀을 때 해당 함수가 API를 가져오게 했다.
그러나 쇼핑몰에서 환율을 볼 때는
어떠한 버튼을 누르는 것이 아니라, 쇼핑몰에 들어갔을 때
그 당시에 환율을 나타내주어야 하기 때문에 해당 메소드를 사용한다.
.ready( ) 메소드
HTML 요소가 브라우저에 로딩이 완료가 되는 시점에
발생하는 메소드이다.
$(document)는 '웹 페이지 전체'를 뜻한다.
따라서 위 코드의 뜻은
'웹 페이지를 모두 읽어 들이고, 로딩이 되면 ready()에 매개 변수로
전달된 함수를 실행하라는 것'이다.
이를 활용하여 웹 페이지를 열었을 때
환율 API 데이터가 업로드 되도록 기능을 추가해보자 !
환율 API를 활용해
1$ -> 그때 당시 환율
적용해보았다.
이전과 바뀐 부분은 빨간색 부분과 연한 파란색 부분이다.
환율 API에서 환율 값을 가져온 다음,
그 값을 활용해 맥북 프로 1개의 값이 몇 달러 하는 지 보여주었다.
바로 코드를 통해 살펴보도록 하자.
우선 환율을 적을 부분이 HTML 코드 상에 어디 부분인지를
알려주어야 한다.
나는 맥북 프로 상표명 바로 아래에 환율을 나타내고 싶어
아래와 같이 바로 아래에 span주고, id="exchange_rate"를 주었다.
추가적으로 class="price_rate"를 주어 <style></style> 부분에서
font_size, color, opacity(투명도) 값을 조절해주었다.
<div class="main_menu">
<h1> 맥북 프로(MacBook PRO) <span class="item_price">가격: 1,900,000원 / 1개</span> </h1>
<span class="price_rate" id="exchange_rate">환율 1$↔</span>
<div class="main_menu_margin">이 상품으로 말할 것 같으면 애플(Apple)사에서 출시한 매우 세련된 디자인으로 감성까지 지녔으며 심지어 성능도 좋은
노트북입니다. 가격만 보면 비싸다고 느껴지실텐데, 직접 사용해보신다면 가격이 절대 비싸지 않다고 장담할 수 있습니다.
</div>
그리고 여기가 이번 글에 핵심이라고 할 수 있는
<script></script>부분이다.
바로 위에서 다룬 $(document).ready(function(){}); 을 활용해
function(){} 안에 환율 API를 활용하는 코드를 작성했다.
url 주소로부터 환율 값을 가져와 change_rt 변수에 넣었다.
추가적으로 Math.ceil()이라는 자바스크립트 함수를 활용했다.
맥북 프로 190만원을 환율 계산한 1달러로 나누었을 때
발생하는 소수점 아래 숫자를 반올림 해주는 함수이다.
그리고 가져온 환율 값을 제이쿼리 .append(); 메소드로
<span id="exchange_rate"> 아까 id를 선언한
<span> 부분에 추가를 해주었다.
여기서 유의해야할 점은 ' ' 작은 따옴표가 아니라 ` ` 백틱을 사용했다는 것이다.
그리고 환율 계산한 맥북 가격에는 다른 색을 주기 위해
class="blue_color" 를 적용하여 로얄 블루 색을 주었다.
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function(response){
let change_rt = response[1]["rate"]
let item_dollar = Math.ceil(1900000 / change_rt)
$("#exchange_rate").append(`${change_rt}원`)
$("#exchange_rate").append(`<span class="blue_color"> ▶환율 계산한 맥북 가격 : ${item_dollar}달러</span>`)
}
});
});
</script>이로서 간단?하게
쇼핑몰에 환율을 계산하는 기능을 Ajax와 jQuery를 활용하여 넣어보았다!
※이전에 제작했던 쇼핑몰 기본 틀※
<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
*{
font-family: 'Do Hyeon', sans-serif;
}
.item_img{
width: 800px;
height: 500px;
margin: auto;
margin-top: 20px;
margin-bottom: 50px;
}
.item_size{
width: 800px;
height: 500px;
}
.item_price{
font-size: 20px;
}
.order_button{
width: 20px;
display: block;
margin: auto;
}
.order_menu{
width: 700px;
margin: 40px auto;
}
.main_menu{
width: 800px;
margin: auto;
}
.main_menu_margin{
text-align: center;
}
</style>
<script>
function order(){
alert("주문이 완료되었습니다.");
}
</script>
<title>쇼핑몰</title>
</head>
<body>
<!-- 상품 상단 이미지 -->
<div class="item_img">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="item_size" class="d-block w-100" src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F990C1D3A5B65974F07" alt="First slide">
</div>
<div class="carousel-item">
<img class="item_size" class="d-block w-100" src="https://t1.daumcdn.net/cfile/tistory/992792445EB0253129" alt="Second slide">
</div>
<div class="carousel-item">
<img class="item_size" class="d-block w-100" src="https://images.kbench.com/kbench/article/2020_11/k216197p1n1.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="main_menu">
<h1> 맥북 프로(MacBook PRO) <span class="item_price">가격: 1,900,000원 /개</span> </h1>
<div class="main_menu_margin">이 상품으로 말할 것 같으면 애플(Apple)사에서 출시한 매우 세련된 디자인으로 감성까지 지녔으며 심지어 성능도 좋은
노트북입니다. 가격만 보면 비싸다고 느껴지실텐데, 직접 사용해보신다면 가격이 절대 비싸지 않다고 장담할 수 있습니다.
</div>
<form class="order_menu">
<h1> Order</h1>
<!-- 주문/주문자 이름 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="User name" aria-describedby="basic-addon1">
</div>
<!-- 주문/수량 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose a quantity </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<!-- 주문/주소 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주소</span>
</div>
<input type="text" class="form-control" placeholder="Address" aria-label="Username" aria-describedby="basic-addon1">
</div>
<!-- 주문/전화번호 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">전화번호</span>
</div>
<input type="text" class="form-control" placeholder="Telephone" aria-label="Username" aria-describedby="basic-addon1">
</div>
<!-- 주문/제출버튼 -->
<div class="order_button">
<button type="submit" onclick="order()" class="btn btn-primary">주문하기</button>
</div>
</form>
</div>
</body>
</html>
댓글