이전 포스팅 – 카페24 모바일에서 소비자가를 표시하는 방법에서 카페24에서 소비자가와 판매가를 구분하는 작업을 하고난 뒤에 자동으로 두 값을 이용해서 할인율을 표시하는 자바스크립트입니다.
See the Pen
소비자가,판매가 퍼센티지 계산 by 배현기 (@illustudio)
on CodePen.
스크립트는 단순합니다. 두 값을 변수에 저장한다음 정규표현식을 이용해 한글을 제외한 숫자만 추출한 뒤 퍼센티지 계산을 합니다. 그리고 새로운 엘리먼트를 만들어서 해당 내용을 담아서 원하는 위치에 삽입하는 방식으로 구성된 스크립트입니다.
해당 내용을 운영중인 카페24 쇼핑몰에 적용하고 싶으시면 연락주세요. 해당 내용을 바로 적용할 수 있는 경우도 있지만 소스의 가공이 필요해지는 경우도 있습니다. 작업 난이도에 따라 소정의 작업료(5~10만)만 받고 진행해드리도록 하겠습니다.
워드프레스에서 자바스크립트를 사용하다보면, 보통 웹사이트들과 달리 wp_enqueue_script 라는 워드프레스 자체 함수를 이용하게 됩니다. 일반적으로 웹사이트를 만들때 방식처럼 script 태그를 여기저기 삽입하는 방식으로 만드는 것보다 이런 방식을 권장하고 있기 때문이죠.
그런데 문제는 스크립트마다 head에서 호출해야하는 경우가 있고, body 태그 이후에 호출해야하는 경우도 있습니다. 컨텐츠가 다 불러오기 전에 미리 삽입하느냐, 컨텐츠가 다 불려온 후에 삽입해야하느냐 하는 순서를 정해줘야할 때가 있죠.
예를 들면 저의 경우 워드프레스에 bxslider를 직접 넣어서 쓰고 있는데, 호출 시점에 문제가 생겼습니다. 처음에는 멀쩡히 작동하다가 테스트하면서 다른 플러그인을 한번 설치했다가 지우면서 뭔가 순서가 꼬였는지 오작동을 일으키기 시작했습니다.
개발자 툴을 통해 확인해보니 스크립트가 호출되는 시점이 변경되어있더군요. 컨텐츠가 다 불려온 이후에 호출되야하는데, 그 이전에 스크립트가 삽입되어버리더군요. 그러니 스크립트는 제어해야할 컨텐츠를 찾지 못하고, 손을 놔버리는 상황이었습니다.
보통 자바스크립트는 function.php 안에 wp_enqueue_script 함수로 삽입합니다.
|
1 |
wp_enqueue_script ( string $ handle , string $ src = '' , array $ deps = array () , string | bool | null $ ver = false , bool $ in_footer = false ) |
이런 구조를 갖고 있는 녀석인데, 위의 내용은 함수 안에 쓰이는 매개변수들입니다. 총 5개의 매개변수들인데, 저의 경우엔 아래와 같이 사용했습니다.
|
1 2 3 4 |
function theme_enqueue_scripts(){ wp_enqueue_script( 'bxslider-scripts',get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js',array(),'1.0',true); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' ); |
여기서 문제 해결을 위해 주목해야할 부분이 가장 마지막에 쓰인 $in_footer 변수에 들어간 내용입니다. false 값으로 넣어주면 head부분(컨텐츠 이전)에서 자바스크립트가 삽입되고, true로 넣어주면 body 태그 이후(컨텐츠 이후)로 자바스크립트가 삽입됩니다.
이렇게 매개변수 옵션 하나만 바꿔줘도 쉽게 해결 될 수 있는 문제인데 한참 끙끙댔네요.
Jquery 를 이용해서 위의 Auction에서 쓰인 효과를 구현해보았습니다. 메뉴에 마우스를 올리면, 서브로 숨겨져있던 내용이 메뉴와 이어져서 나타나는 방식입니다. 단순히 css만으로 구현하기에는 한계가 있기 때문에 jquery로 해결해주었습니다.
소스를 만들어놓고 따로 정리해놓지 않으면 재차 까먹고 다시 만드는 일이 잦아서 관리차원에서 기록으로 남겨놓습니다.
아래 내용이 해당 소스입니다. 반응형을 고려하지 않고 고정된 레이아웃의 pc상에서의 작동하는 것만 생각하고 만든 소스입니다. 깔끔하지 못한 소스입니다만, 필요하신 분은 수정해서 쓰셔도 좋습니다.
위의 예제는 아주 간략하게 보통 쇼핑몰이나 홈페이지 상단에서 알림 공간에 쓰일 수 있습니다. 보통 중요한 공지가 있을때는 팝업창을 띄우거나 레이어 팝업을 즐겨 씁니다. 하지만 사용자 입장에서는 무척 짜증나는 방법입니다. 사이트 방문자는 목적을 갖고 방문합니다만, 팝업은 그 목적을 훼방하는 요소입니다.
그래서 상단에 저렇게 고정된 형식으로 공지하는 편이 많이 선호되고 있습니다. 컨텐츠를 가리지 않아도 되고, 눈에 띄기 좋은 곳에 항상 자리잡고 있기 때문이죠. 기본적인 원리는 간단합니다. X자 표시를 눌렀을때 해당 광고창이 통채로 사라지게 하는겁니다.
기본적인 구조(html)과 스타일시트(CSS)를 통해 모양을 만들어놓고 버튼을 눌렀을때 사라지는 기능(Jquery)으로 구성되어 있습니다.