쇼핑몰 이탈률 잡기 첫 번째!
우커머스에 preloader를 달자!
시작하기 전 전제조건을 좀 설정해야겠다.
본 내용은 워드프레스의 우커머스 이야기다.
본 내용은 워드프레스의 Jupiter 테마를 사용했을때의 이야기다.
결제 PG는 이니시스와, 연동 시스템은 아임포트를 사용하였다.
본 내용은 개발자가 보기에 매우 웃긴 이야기일 수 있다.
앞서 꾸준히 이야기하고 있지만, 본 매거진은 개발자가 아닌 디자이너가 쇼핑몰을 만들어 가는 이야기이다.
매출과 마케팅, UX와 UI 등 전반에 걸쳐 어떤 부분을 보완하고 있는지 차근차근 이야기하고 있다.
즉, 개발자가 아니므로 본 이슈 조차도 나에겐 꽤 큰 의미가 있기에 글을 작성하고 있다.
사건의 발단은 이렇다.
어제까지의 결제페이지결제 페이지에서 정상적으로 주문자 정보를 입력하고 결제 방법을 선택 후 주문 확정을 누르게 되면 연동되어 있는 이니시스의 결제창이 올라오게 되어 있다.
이니시스의 결제창이 올라오게 되면 화면 전반에 반투명한 흰색의 레이어가 오버레이 되고 그 위로 결제창이 뜨게 된다.
반투명한 레이어가 결제 정보 위를 덮은 모습
반투명한 레이어 위에 pg 결제창이 나타난 모습자 여기서 문제가 발생한다.
일반적인 경우에선 보통 여기에서 결제를 쭈욱 진행하게 되는데, 인터넷이나 뭐 어떤 기타 등등의 사정에 의해 딜레이가 발생하는 경우가 문제다.
결제창이 늦게 뜨면 사용자는 그저 반투명 레이어를 쭈욱 보고 있어야만 하는 참사가 발생한다.
고객은 시스템이 정지한 것으로 판단하고 이탈.
혹은 새로고침 후 재결제 시도.
대강.. 내 쇼핑몰을 예로 들면 10~15%의 이탈이 발생했다.
아 놀랍도다... 15%의 이탈이라니!
그래서 오늘 loader를 삽입한 내용을 공유할까 한다.
우커머스는 위 반투명한 레이어를 blockUI라는 녀석을 사용하여 작동시킨다.
wp-content/plugins/woocommerce/assets/js/jquery-blockui에 존재하는 jquery.blockUI.js와 jquery.blockUI.min.js를 참조한다.
압축된 녀석을 사용하므로 우커머스는 min을 사용하게 되니, 작업 편의상 blockUI.js 의 내용을 모두 min으로 복사하여 사용하도록 하자.
나는 대략 저런 녀석으로 작업을 하였음기본적인 구조는
js에서 div 컨테이너 안에 blockUI blockOverlay라는 클래스를 가진 녀석을 만드는데 그 녀석이 저 반투명 레이어에 해당한다.
본래 그 내부에 메시지가 작성되어 들어가야 하는데 개발자가 아니므로 그런 건 잘 모르고 그냥 하드코딩으로 넣었다.
jquery.blockUI.min.js 의 301번째 줄에
lyr2 = $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) +';display:none;border:none; opacity: 1 !important;margin:0;padding:0;width:100%;height:100%;top:0;left:0;">'+'<div class="checkout_indicator"><div class="mk-li-rocket"></div><div class="checkout_indicator_label">진행중입니다.<br>결제창을 닫지 말고 기다려주세요!</div><div class="checkout_indicator_loader"><img src="https://heebeandry.com/wp-content/uploads/2014/08/294.gif"></div></div>'+'</div>');
로 작성해 넣었다.
스타일은
.checkout_indicator {
width: 80%;
position: fixed;
left: 40%;
margin-left: -30%;
background: #ef4723;
padding: 25px 0px;
border-radius: 6px;
text-align: center;
color: #fff;
margin-top: 20px;
}
.checkout_indicator .mk-li-rocket {
font-size: 50px;
margin-bottom: 10px;
}
.checkout_indicator_label {
line-height: 18px;
}
.checkout_indicator_loader {
padding-top: 15px;
}
.blockOverlay {
opacity: 1 !important;
background: rgba(255, 255, 255,.4) !important;
}
이렇게 넣어 주었다.
position을 fixed로 작성한 것은 모바일을 대응하기 위함이다.
아.. 이런 건 강의를 통해 알려주는 것이 좋을 텐데.. 블로그로 설명하려니 참 어렵다.
내부 메시지를 강제로 하드코딩해서 넣어주는 방식이다.
저렇게 하드 코딩해서 넣어주면 결제 방식과 현재 금액 위에도 저 레이어가 발생하게 되는데,
그것을 방지하기 위해 아래의 css를 삽입해 주었다.
.woocommerce-checkout-review-order-table .blockOverlay {
opacity: 0 !important;
}
.woocommerce-checkout-payment .blockOverlay {
opacity: 0 !important;
}
그리고 현재 작동 중임을 알리기 위해 gif 로더 이미지도 작업하여 넣어주었다.
apng 형식으로 만들면 좋았을 텐데, 구버전 브라우저(아 쉣)에선 지원을 하지 않으므로 가급적 gif로 만드는 것이 좋다.
나 같은 경우 windows 스러운 가로로 점이 이동하는 애니메이션을 배경을 투명으로 하여 흰색으로 선택해 만들어두었다.
자, 참 쉽죠?(?!)
원리만 알면 사오 년 차 혹은 오륙 년 차 디자이너는 어렵지 않게 할 수 있다.
물론 개발자에겐 껌일 수 있겠다.
다만, 이 글을 읽는 학생이나 사회 초년생 혹은 이삼 년 차 디자이너에겐 어려울 수 있는데..
감히 말하자면 음.. "쏘리"
새롭게 적용된 로더를 체험해보시려면 아래의 링크를 클릭클릭.
회원가입 후 주문 고고!
