사용자가 장바구니의 있는 상품들의 최종구매가 결정되면 이름과 연락처를 적을 수 있는 모달창을 띄워주고 이름과 연락처를 입력받으면 영수증을 띄워주어야 하는데 사용자의 개인정보가 담겨 있기 때문에 img처럼 보이는 영수증을 띄워 copy & paste가 안되도록 하고, 영수증에는 구매자의 정보와 상품 총가격 정보 등을 띄워주는 기능을 구현하기로 하였다.
상품의 구매가 결정되고 최종구매 버튼을 누르게 되면
성함과 연락처를 적을 수 있는 모달창을 띄우게 된다.
그러면 위 사진처럼 img 형태의 영수증에 날짜와 현재시간, 구매자의 이름과 핸드폰번호 그리고 장바구니에 담은 상품의 가격과 수량, 최종적으로 상단에 모든 상품 총 합계를 표시해주기로 하였다.
<div class="container canvas-container hide">
<h3>영수증</h3>
<button class="btn btn-dark close">닫기</button>
<canvas class="canvas" id="canvas" width="350" height="1000"></canvas>
</div>먼저 영수증을 띄우기 위한 modal창 내부에 창을 닫을 수 있는 버튼과 canvas 태그를 이용하여 img형태의 영수증을 만들어주었다.
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
c.font = "14px dotum";
c.fillText(`${dateString} ${timeString}`, 20, 30);
c.font = "14px dotum";
c.fillText(`이름 : ${name}`, 20, 60);
c.fillText(`핸드폰 : ${phoneNumber}`, 20, 80);
c.font = "18px bold dotum";
c.fillText("모든 상품 총 " + $("#sum").html(), 20, 110);
canvas태그를 먼저 생성해주고 상단에 먼저 생성해놓은 dataString(현재 날짜 데이터)와 timesting(현재 시간 데이터)를 14px dotum으로 표시해주었다.
이후 그 하단에 입력받아 저장해놓은 name, phoneNumber를 이용해서 이름, 핸드폰번호 순서로 14px dotum으로 표시해주었다.
그 하단에는 이전에 계산해놓은 모든 상품 총 합계 데이터 sum을 이용하여 총 상품 합계를 18px bold체 dotum 체로 표시해주었다.
이후 cart에 있는 아이템을 하나씩 가져와서 최종적으로 그 하단에 표시해주는 방법에서 많은 시행착오가 있었는데,
여러 방법을 고안하다가 반복문의 i를 이용해서 일정한 간격으로 표시해주는 방법을 사용하기로 하였다.
cart.forEach((a, i) => {
c.fillText(`${a.title}`, 20, 120 * (i + 1) + 20);
c.fillText(`${a.brand}`, 20, 120 * (i + 1) + 40);
c.fillText(`가격 : ${a.price}`, 20, 120 * (i + 1) + 60);
c.fillText(`수량 : ${a.count}`, 20, 120 * (i + 1) + 80);
c.fillText(
`상품 합계 : ${a.price * cart[0].count}`,
20,
120 * (i + 1) + 100
);
});장바구니에 담긴 상품에 대한 수량, 가격을 표시해줄때(i+1)에 120을 곱해주어 각각의 상품들이 120px만큼 일정한 간격을 두어 표시될 수 있도록 하였다.
상품마다 상품명, 브랜드명, 가격, 수량, 해당 상품 총 가격을 표시한 각 줄이 20px씩 차지하고, 각각의 상품을 표시하기 위한 공간은 120px로 할당하였기 때문에 일정한 간격을 두고 상품들이 표시 된 것을 확인 할 수 있었다.
