이전 포스팅 – 카페24 모바일에서 소비자가를 표시하는 방법에서 카페24에서 소비자가와 판매가를 구분하는 작업을 하고난 뒤에 자동으로 두 값을 이용해서 할인율을 표시하는 자바스크립트입니다.

See the Pen
소비자가,판매가 퍼센티지 계산
by 배현기 (@illustudio)
on CodePen.

스크립트는 단순합니다. 두 값을 변수에 저장한다음 정규표현식을 이용해 한글을 제외한 숫자만 추출한 뒤 퍼센티지 계산을 합니다. 그리고 새로운 엘리먼트를 만들어서 해당 내용을 담아서 원하는 위치에 삽입하는 방식으로 구성된 스크립트입니다.

해당 내용을 운영중인 카페24 쇼핑몰에 적용하고 싶으시면 연락주세요. 해당 내용을 바로 적용할 수 있는 경우도 있지만 소스의 가공이 필요해지는 경우도 있습니다. 작업 난이도에 따라 소정의 작업료(5~10만)만  받고 진행해드리도록 하겠습니다.

카페24 모바일 스킨에서 상품상세 기본적으로 소비자가가 표시되지 않고 판매가만 표시됩니다. 아래 이미지처럼 소비자가에 취소선이 들어가고, 판매가를 표시함으로써 정가에 비해서 할인되고 있다는 것을 보여주고 싶은데, 불가능한 상태입니다.

취소선이 들어간 소비자가, 강조된 판매가

이 부분을 따로 소스를 작성해줘야하는데요. 목록 화면에서는 적용되어있기때문에 목록화면에서 쓰이는 소스를 활용해서 적용해야합니다.

위의 소스를 원하는 부분에 삽입함으로써 간단하게 해결이 가능한데, 카페24에서 제공하는 $product_custom변수는 기본적으로 소수점 아래 2자리까지 표현하기때문에 천단위로 구분지어주는 모디파이어(modifier)기능을 활용해서 숫자 표현을 변경해줘야합니다.

“소비자가”를 추가하기 전

“소비자가”를 추가한 모습

위와같이 간단하게 소비자가와 판매가를 표현해줄 수 있습니다. 그리고 아래 사진과 같이 변경하기 위해서 CSS 코드를 이용하면 더욱 눈에 두드러지게 차이를 줄 수 있습니다.

CSS 적용

위와 같이 간단한 방법으로 소비자가를 삽입해줄 수 있습니다. 카페24에서도 할인율을 표시하는 방법이 있지만, 개인적으로 모든 제품 가격이 자동으로 할인율이 적용되도록 하고 싶습니다. 그래서 다음 포스팅에서는 소비자가와 판매가를 계산하여 할인율을 표시하는 자바스크립트를 작성해보도록하겠습니다.