오래 전부터 인연을 만들고 있는
한 고객사로부터 업무요청이 들어왔습니다.
쇼핑몰을 운영하고 있는 곳인데요,
도예 관련한 재료를 판매하는 곳이라
흙덩이 같이 덩치 큰 재료가 많습니다.
그러다 보니 무게와 크기가 각각 달라서
일반 배송을 해야 할지,
트럭을 이용해 배송을 해야 할지 결정해야 하고
주문된 제품의 가짓수에 따라
배송료도 다양하게 산정되는 실무가 존재하는 곳입니다.
그러나 어디서나 무조건 고객분들은 성격 급하시죠^^;
배송비 차등정책을 쇼핑몰 곳곳에 안내해두었지만
해당 안내를 챙겨서 읽는 분은 많지 않을 겁니다.
그러다 보니,
"고객분들이 제발 배송비 정책을 사전에
잘 인지할 수 있도록 해주실 수 없나요?"
라는 요청을 받게 되었고
어라? 이거 요즘 공부하는 javascript로
처리가능할 것 같은데? 라는 생각이 들더라구요.
굳이 개발자(=프로그래머) 시키지 않더라도
어디 이번 이슈는 내가 한번 도전해보잣!!
찬찬히 생각을 정리해보다가,
쇼핑이 끝나고 결제를 진행하기 위해 모여드는
장바구니에다가 주목도를 높여 보면 어떨까?
하는 생각이 들었습니다.
제가 구축한 쇼핑몰은 아니구요...
너~~ 무 오래된 솔루션이라(거의 20년??)
쇼핑몰 변경을 제안해드렸고
이미 리뉴얼이 진행중입니다.
일단 UI는 이런 식으로 변경을 해보면
어떨까 싶었습니다.
[주문하기] 또는 [견적요청]을 진행하기 전에
위의 안내문을 읽게 상단에 배치하고,
물론 그래도 고객분들은 여전히
주의 깊게 안 읽으시겠죠?
그래서!! 체크 박스에 체크를 하지 않은 상태로
[주문하기] 또는 [견적요청] 버튼을 클릭하면
Alert 창이 뜨도록 했습니다.
그리고 체크를 하게 되면,
다음 프로세스로 넘어가게 되는 방식입니다.
체크를 풀면 다시 Alert 창이 뜨도록 했구요.
(어라? 뭔가 toggle 기능이 떠오릅니다.)
일단, 쇼핑몰도 현재 리뉴얼이 진행되고 있으니
코딩은 아주~ 기초적이고 기본적으로 짜봤습니다.
아래는 테스트용 코드입니다.
쇼핑몰은 테스트 서버가 구현되어 있지 않은 상태라
로직 구현 및 테스트를 위해서
쇼핑몰 페이지에서 코드를 일부 가져와서
간단하게 HTML 문서를 만들어봤습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Check Study</title>
</head>
<body>
<label> <input type="checkbox" id="checkit" onclick="checkIt()" /> 내용을 확인하였습니다. </label>
<span><a id="confirm_OK1" href="javascript:alert('주문 및 결제 안내를 확인/체크 해주세요');"><img src="버튼 이미지 경로" /></a
></span>
<span><a id="confirm_OK2" href="javascript:alert('주문 및 결제 안내를 확인/체크 해주세요');"><img src="버튼 이미지 경로" /></a
></span>
</body>
</html>
음.. 쇼핑몰 솔루션이 워낙 옛날 것이다보니
input 버튼을 사용한 게 아니라
img 태그를 이용해서 a(앵커) 태그로 링크하는 방식으로
되어 있더라구요.
input을 이용해서 기본 테스트를 진행해두었는데...
아뿔싸... 흑흑...
<script>
function checkIt() {
const check_elem = document.querySelector("#checkit");
if (check_elem.checked) {
document.querySelector("#confirm_OK1").setAttribute("href", "m_login.php?ps_mode3=cart&url=m_userinfo.php");
document.querySelector("#confirm_OK2").setAttribute("href", "m_login.php?ps_mode3=cart&url=m_userinfo2.php");
} else {
document.querySelector("#confirm_OK1").setAttribute("href", "javascript:alert('주문 및 결제 안내를 확인/체크 해주세요')");
document.querySelector("#confirm_OK2").setAttribute("href", "javascript:alert('주문 및 결제 안내를 확인/체크 해주세요')");
}
}
</script>
javascript는 요렇게 짜서 넣었습니다.
일단 checkIt 이라는 함수를 하나 정의하고
이 함수가 호출될 때,
DOM으로 접근해서 href 경로를 바꿔치기 해주는
아주 기초적이고 간단한 방식을 써봤습니다.
여러 가지 방법들이 존재하겠지만
저는 setAttribute를 사용했습니다.
제가 아는 빡... 수준에서는
이게 가장 효과적일 것이라는 생각이 들었습니다.
결과물을 Liver Server로 띄워보니
대충 테스트 환경은 만들어졌습니다.
아래는 테스트 중인 화면.
체크를 하지 않고
버튼을 누르면
이렇게 Alert 창을 띄워주게 되어
고객이 체크를 할 수 있도록 강제 유도해줍니다.
(체크를 안 하면 진행이 안되요^^;)
이렇게 내용 확인 체크를 하면,
페이지를 이동하여, 성공~!!
Error 가 나는 이유는
서버에서 돌리는 게 아니라서 그렇습니다.^^
이번 작업은 Front-End 영역이므로
저런 서버 사이드 에러는 고려하지 않아도 됩니다.
테스트/검증을 마친 후
서버에 접속하고 해당 페이지에 붙어서
테스트 확인한 내용을 살살 붙여 나갔습니다.
잘 동작합니다.^^
아싸!!!
오늘도 한 건 해결!
매일 매일 조금씩 공부해나가면서
뭐라도 하나씩 만들고 적용하는 재미가
여간 쏠쏠하지 않습니다.
네 코딩의 시작은 미약하나
네 코딩의 나중은 성대하리라!!!
믿슙니다!!
Coding on a Prayer !!
'Javascript' 카테고리의 다른 글
| if ~ else 구문 보다 고수처럼 느껴지게 만드는 <삼항 연산자 > (0) | 2022.12.13 |
|---|---|
| Number()와 parseInt() 차이점 - parseInt(string, radix) (0) | 2022.12.12 |
| 버튼을 클릭하면 클립보드에 복사하기, Button, Clipboard (0) | 2022.12.06 |
| 누구냐, 넌? Javascript 구조분해 할당(Destructuring) 기초개념 정리 (0) | 2022.12.03 |
| [Javascript] Number Index를 만들어 보자(ft. 숫자 카운트 애니메이션) (0) | 2022.11.24 |
댓글