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

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

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

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

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

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

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

CSS 적용

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

 

워드프레스 언더스트랩 – wordpress understrap 테마에서 Jquery로 새로 스크립트를 추가할 때 정상적으로 작동되지 않을 때 대처 방법. 콘솔 메세지에서 type error : $ is not a function 에러를 발견 할때가 있다. 이 경우 $기호 대신 jQuery로 대치해서 사용해주면 작동한다.

워드프레스 언더스트랩 – understrap 테마를 이용해서 새로운 테마를 만들고 있습니다. 먼저 언더스트랩 테마에 대해서 간략하게 소개하자면, 워드프레스의 아버지 매트 뮬렌웨그에 의해 설립된 오토매틱에서 제공하는 언더스코어에 부트스트랩을 입힌 테마입니다. 언더스트랩은 자식테마도 미리 준비해두어 더욱 편리하게 사용할 수 있도록 준비해두고 있는데요.

마침 css 전처리기인 sass와 node.js 환경에서 gulp를 통해 scss 컴파일과 브라우저 싱크 – 소스 파일을 변경해서 저장할때마다 브라우저를 자동으로 새로고침해주는 기능을 사용할 수 있도록 제공하고 있어서 해당 기술들을 공부할 겸 실험적으로 만들어보고 있습니다.

저는 지금까지 워드프레스 자식테마를 이용할때는 style.css와 function.php 파일을 복사해두고 주로 css 파일만 수정하는 식으로 사용해왔습니다. 부득이하게 기능적으로 추가/삭제를 할 경우엔 header, sidebar, footer, single.php 파일들을 가져다가 override-덮어 씌우는 식으로 사용했는데 최근 테마들은 partial-부분화를 통해서 구성되다 보니 위에 나열한 php 파일들을 수정해서는 해결이 안되는 상황들이 발생합니다.

single.php안에 구성되는 내용들을 보면 메타 정보나 댓글, 포스트 내용등을 호출할때 해당 파일안에서 모두 함수를 구현해두는게 아니라 1차 하위 템플릿 폴더 (loop-template)안의 content-single.php 파일을 함수를 호출하고 그 안에서 또 별개의 1차 하위폴더(inc)에서  template-tag.php의 함수를 호출해서 불러다 쓰는 경우엔 단순히 하위폴더를 통채로 복사해 가져와서 자식테마에 override – 덮어씌우는 방식으로 진행하려 해도 적용이 되지 않더군요.

그래서 검색을 해보니 국내 사이트에서는 이러한 내용 에 대해서 심도있게 다루고 있는 사이트를 발견하지 못했습니다. 어쩔 수 없이 부족한 영어 실력으로 끙끙대며 찾아보니, 해외사이트에서는 이미 몇 년 전에 공개된 내용들을 보고 해결 할 수 있었습니다.

해법은 생각보다 간단합니다. 이런식으로 함수 부분들을 수정해야할 경우에는 자식테마의 function.php 에 동일한 함수를 재작성/수정을 통해 override 시켜야 내용이 반영됩니다.

이런 방식으로 자식테마의 function.php 파일을 통해 부모테마에서 적용되는 함수를 덮어 씌워버리면 우선권을 갖기때문에 부모테마가 업데이트되더라도 문제가 발생하지 않습니다.

공부해둔 것들을 기록하지 않으면 까먹는 사태가 빈번해서 정리하고 공유할 겸 포스팅하게 됐습니다. 비슷한 문제로 고민하시는 분들에게 도움에 되면 좋겠습니다.