- header.mustahce 에 스크립트 추가
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 모달 스크립트 -->
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<title>Coffee SHOP</title>
</head>
<body>
<!-- navigation -->
.
.
.
.
- product.mustache 에 모달 설정
.
.
.
<!-- 로그인 확인 후 출력 부분 -->
{{#userId}}
{{#products}}
<div class="row row-cols-1 row-cols-md-3 g-4" style="margin: 0 auto">
<div class="col">
<div class="card">
<img src="images/coffee.png" class="card-img-top">
<div class="card-body">
<input type="hidden" id="id" value="{{id}}">
<h5 class="card-title" id="name">{{name}}</h5>
<p class="card-text">{{price}} 원</p>
<button class="btn btn-outline-secondary" id="order-btn" productId="{{id}}"
userId="{{userId}}" total="{{price}}">주문하기</button>
<!-- 모달 버튼 -->
<button type="button"
class="btn btn-sm btn-outline-primary"
data-bs-toggle="modal"
data-bs-target="#pay-modal"
data-bs-userName="{{userName}}"
data-bs-productName="{{name}}"
data-bs-price="{{price}}"
>결제</button>
</div>
</div>
</div>
</div>
<!-- 모달 -->
<div class="modal fade" id="pay-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">상품 결제</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- 결제 폼-->
<form>
<!-- 주문자 이름 -->
<div class="mb-3">
<label class="form-label">주문자명</label>
<input class="form-control form-control-sm" id="userName" readonly>
</div>
<!-- 상품 이름 -->
<div class="mb-3">
<label class="form-label">상품 이름</label>
<input class="form-control form-control-sm" id="productName" readonly>
</div>
<!-- 상품 가격 -->
<div class="mb-3">
<label class="form-label">상품 가격</label>
<input class="form-control form-control-sm" id="productPrice" readonly>
</div>
<!-- 히든 인풋 -->
<input type="hidden" id="productId">
<!-- 전송 버튼 -->
<button type="button" class="btn btn-outline-primary btn-sm" id="pay-btn"
>결제</button>
</form>
</div>
</div>
</div>
</div>
{{/products}}
{{/userId}}
<script>
{
//모달 버튼 변수화
const payModal = document.querySelectorAll("#pay-modal");
//모달 이벤트
payModal.forEach(btn => {
btn.addEventListener("show.bs.modal", (event) => {
//트리거 버튼 선택
const triggerBtn = event.relatedTarget;
//데이터 가져옴
const userName = triggerBtn.getAttribute("data-bs-userName");
const productName = triggerBtn.getAttribute("data-bs-productName");
const productPrice = triggerBtn.getAttribute("data-bs-price");
//데이터 반영
document.querySelector("#userName").value = userName;
document.querySelector("#productName").value = productName;
document.querySelector("#productPrice").value = productPrice;
});
});
}
.
.
.
</script>
GitHub - Pearlmoon997/CoffeeShop: CoffeeShop
CoffeeShop. Contribute to Pearlmoon997/CoffeeShop development by creating an account on GitHub.
github.com
'프로젝트_ 커피주문 서비스' 카테고리의 다른 글
| 결제 버튼 API 호출 (0) | 2022.09.17 |
|---|---|
| 마이페이지 (0) | 2022.08.31 |
| 주문하기 구현 (0) | 2022.08.28 |
| 네이버 로그인 API (+구글 로그인 API) (0) | 2022.08.11 |
| 레이아웃, Member 변경 (0) | 2022.08.11 |
