본문 바로가기
SPRING/SPRING 프로젝트

SPRING 팀 플젝 : 쇼핑몰 고객센터 FAQ

by 스노위13 2023. 1. 27.

1. 내용
쇼핑몰 고객들이 많이 물을만한 질문들을 모아 만든 FAQ로
회원정보, 구매 안내, 교환/반품이라는 3개의 대주제 밑으로
"아이디/비밀번호를 변경하고 싶어요" 등의 질문들을 아코디언에 넣고
고객이 클릭하면 채팅처럼 질문과 답변이 뜨도록 만들었다.

2. 과정 중 특이점
고객이 질문을 쓰면 텍스트 분석 후 그에 맞는 답변을 하는 챗봇을 구상했는데
챗봇에 할만한 질문들은 뻔하고 그 외의 질문들은 채팅을 이용하는 편이
나은 것 같아 수정하고 윗 부분에 채팅상담 버튼을 넣었다.
채팅 상담은 채팅 API인 https://tawk.to를 활용하였다.

3. 코드 및 화면
1) top.jsp

<div class="cs" id="menu-cust">
	<a href="#" onclick="fn_help()">고객센터</a>
</div>

<script type="text/javascript">
let path = '<%=request.getContextPath()%>';
	
	function fn_help(){
		var url = path+"/member/faq.wow";
		var name = "초코룩 고객센터";
		var option = "width = 480, height = 900, top = 100, left = 200, location = no"
		window.open(url, name, option);
	}
</script>

버튼을 누르면 새 창에 초코룩 고객센터 화면이 뜨게 했다. option으로 크기를 고정하였다.

2) 고객센터 화면 및 메뉴 코드


acodion을 사용하여 대주제를 누르면 각 주제에 맞는 질문이 아래로 뜨게 했다.
https://bootswatch.com/ 의 테마를 적용했기 때문에 거기서 아코디언도 가져왔다.

<!-- 메뉴 -->
<div class="accordion" id="accordionExample">
	<div class="accordion-item">
    	<h2 class="accordion-header" id="headingOne">
        	<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            	회원 정보
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
            <div class="accordion-body">
                <a class="question" href="#bottom" onclick="fn_faq(12)">아이디/비밀번호를 변경하고 싶어요</a> <br>
                <a class="question" href="#bottom" onclick="fn_faq(5)">비밀번호를 잊어버렸어요</a> <br>
                <a class="question" href="#bottom" onclick="fn_faq(6)">회원 탈퇴를 하고 싶어요 </a><br>
                <a class="question" href="#bottom" onclick="fn_faq(13)">생일쿠폰은 언제 발급되나요?</a>
            </div>
        </div>
	</div>
</div>

각 질문은 onclick 이벤트에 fn_faq( ) 함수가 실행되게 했는데
그 안에 숫자를 넣어서 그 숫자에 따라 함수가 실행되도록 만들었다

사실 좋은 방법은 아니다. 갯수가 적었으니 가능했던거지 많았으면 노가다....
테이블에 대주제 컬럼을 넣어 분류하고 for문을 사용해서 아코디언을 만든 후에
let tar = event.target.innerHTML를 활용해 DB를 검색하는 방법도 있겠지만
FAQ 갯수가 적었기 때문에 그냥 숫자를 바로 때려 넣었다.

3) ajax

<script type="text/javascript">

	function fn_faq(faq_no){
		let tar = event.target.innerHTML;
		let str="";
		
		$.ajax({ 
			url:"<c:url value='/member/faqAnswer.wow?faqNo="+faq_no+"'/>"
			, success: function(data) {						
				str+='<div class="clientMsg">';
				str+='<span class="msg">';
				str+= tar;
				str+= '</span>';	
				str+= '</div>';	
				str+='<div class="shopMsg">';
				str+='<span class="msg">';
				str+= data;
				var substring = "1:1";
				if(data.includes(substring)){
					str+= '<br><button type="button" class="btn btn-primary btn-sm" id="con_chat" onclick="go_chat()">채팅 상담</button>';
				};
				str+= '</span>';	
				str+= '</div>';	
				
				$("#answer_area").append(str);
			},error:function(){
				alert("error");
			},complete : function() {       
	    	 	fn_page();
	    	  }
		}); //ajax	
	}
	function fn_page(){
		window.scrollTo(0, document.body.scrollHeight);
	}
	
	function go_chat(){
		window.location.href = 'https://tawk.to/chat/633e2b6d37898912e96d1a5e/1geldj9i4';
	}
	
	
</script>

질문을 클릭할 때마다 ajax를 사용해서 대답을 DB에서 가져온 후
질문과 대답을 append해서 화면에 넣어 주었다.
대답에 1:1이란 키워드가 포함되어 있다면 채팅 상담 버튼이 나타나게 하였다.

그리고 채팅의 느낌을 살리기 위해서 fn_page() 함수를 넣었다.
fn_faq가 실행될 때마다 마지막에 스크롤을 아래로 내려준다. 이에 대한 건 아래 영상 참고!

fn_page()덕분에 위와 같이 누르면 아래쪽으로 이동하게 된다.
jsp 전체 코드는 아래 더보기를 눌러 확인해주세요!

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/inc/header.jsp" %>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/member/faq.css" />
<style type="text/css">
.info{
   background-image: url("<%=request.getContextPath() %>/resources/img/faqmiddle.png");
   background-repeat : no-repeat;
	background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>초코룩 고객센터</title>
</head>
<body>
<div id="chatContent">
	<div class="nav">
	<img class="logo_img" src="<%=request.getContextPath() %>/resources/img/logo.png">
	<div class="name">초코룩 고객센터</div>
	</div>
	<div class="info">
		<button type="button" class="connetChat" onclick="go_chat()">채팅 상담</button>
	</div>
	<div class="container">
		<div id="faqLog">
			<div class="shopMsg">
				<span class="msg">궁금한 내용을 클릭해주세요.</span>
			</div>
			<div class="answer" id="answer_area">
			</div>
		</div>
<!-- 메뉴 -->
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        회원 정보
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
      <div class="accordion-body">
			<a class="question" href="#bottom" onclick="fn_faq(12)">아이디/비밀번호를 변경하고 싶어요</a> <br>
			<a class="question" href="#bottom" onclick="fn_faq(5)">비밀번호를 잊어버렸어요</a> <br>
			<a class="question" href="#bottom" onclick="fn_faq(6)">회원 탈퇴를 하고 싶어요 </a><br>
			<a class="question" href="#bottom" onclick="fn_faq(13)">생일쿠폰은 언제 발급되나요?</a>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        구매 안내
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
			<a class="question" href="#bottom" onclick="fn_faq(4)">배송 기간은 어떻게 되나요?</a> <br>
			<a class="question" href="#bottom" onclick="fn_faq(10)">주문정보를 확인하고 싶어요</a> <br>
			<a class="question" href="#bottom" onclick="fn_faq(8)">배송 완료라고 뜨는데 상품을 받지 못했어요 </a>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        교환 / 반품
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
		<a class="question" href="#bottom" onclick="fn_faq(9)">교환/반품 불가사유는 무엇이 있나요?</a> <br>
		<a class="question" href="#bottom" onclick="fn_faq(3)">상품을 교환/반품하고 싶어요</a> <br>
		<a class="question" href="#bottom" onclick="fn_faq(7)">환불은 언제 되나요?</a>  <br>
		 <a class="question" href="#bottom" onclick="fn_faq(11)">환불 금액을 알려주세요</a> 
      </div>
    </div>
  </div>
  <div id = "bottom"></div>
</div>
<!-- 메뉴 -->
</div>
</div>
<script type="text/javascript">



	function fn_faq(faq_no){
		let tar = event.target.innerHTML;
		let str="";
		
		$.ajax({ 
			url:"<c:url value='/member/faqAnswer.wow?faqNo="+faq_no+"'/>"
			, success: function(data) {						
				str+='<div class="clientMsg">';
				str+='<span class="msg">';
				str+= tar;
				str+= '</span>';	
				str+= '</div>';	
				str+='<div class="shopMsg">';
				str+='<span class="msg">';
				str+= data;
				var substring = "1:1";
				if(data.includes(substring)){
					str+= '<br><button type="button" class="btn btn-primary btn-sm" id="con_chat" onclick="go_chat()">채팅 상담</button>';
				};
				str+= '</span>';	
				str+= '</div>';	
				
				$("#answer_area").append(str);
			},error:function(){
				alert("error");
			},complete : function() {       
	    	 	fn_page();
	    	  }
		}); //ajax	
	}
	function fn_page(){
		window.scrollTo(0, document.body.scrollHeight);
	}
	
	function go_chat(){
		window.location.href = 'https://tawk.to/chat/633e2b6d37898912e96d1a5e/1geldj9i4';
	}
	
	
</script>
</body>
</html>

'SPRING > SPRING 프로젝트' 카테고리의 다른 글

SPRING 팀 플젝 : 게시판에 summernote 에디터 적용하기  (0) 2023.01.30
SPRING 팀 플젝 : 에러 페이지 만들기  (0) 2023.01.29
SPRING 팀 플젝 : @valid를 이용한 회원 가입 유효성  (1) 2023.01.11
SPRING 팀 플젝 : 오라클로 쇼핑몰 DB 설계하기(ERD)  (0) 2023.01.11
SPRING 팀 플젝 : 네이버 아이디로 로그인 하기(네아로)  (1) 2023.01.07

관련글

댓글

티스토리툴바