웹,그래픽디자인을 비롯해 운영일지 형식으로 웹에 전반적인 관련 내용들을 다루고 있습니다.

카페24에서는 게시판 최근 글을 메인화면에 노출할 경우, 게시판 페이지에서 노출할 경우 등 다양한 상황에 맞도록 모듈을 제공하고 있습니다. 제가 겪은 경우는 좀 예외적인 상황이었던 것이 아닐까라고 생각되는데, 혹시라도 같은 문제를 겪고 있을지 몰라 포스팅으로 남깁니다.

일반적으로 게시판 메인 모듈은 아래 링크를 통해 매뉴얼을 참고하면 어떻게 적용할지 확인할 수 있습니다.

제가 작업하고자 했던 목표는 메인화면에 게시판 공지글리스트가 노출되도록 하는 것이었는데, 위의 매뉴얼에서 제공하는 바에 의하면 “board_list_1″이라는 모듈을 호출해야합니다. 하지만 실제로 작동되지 않아서 고객센터에 문의를 남겼더니 “board_notice_1″ 으로 적용하라는 답변이 돌아왔습니다.

매뉴얼에 문제가 있던지, 제가 손보는 스킨 구조상 호출할 수 없다보니 별도 모듈을 구성해서 보내준건지는 모르겠습니다. 일단 저랑 비슷한 경우를 겪으신 분이라면 위의 방법대로 소스를 수정해서 적용해보시길 바라겠습니다.

아래에는 해당 내용을 반영하여 수정된 소스입니다. 필요하신 분은 바로 복사해서 쓰셔도 좋습니다.

 

카페24 롤오버 기능

최근에 관리하기시작한 쇼핑몰 디자인을 새로 바꾸면서 현재 디자인과 어울리지 않는 부분들을 제거하고자 소스를 뒤져보고 있던 중이었습니다. 상품이미지를 선택했을때 롤오버 되는 부분을 수정하려고하는데, 좀처럼 CSS나 JS에서 해당 기능이 적용된 부분을 찾을 수가 없었습니다.

혹시나 싶어서 디자인 수정, 상품관리에서도 관련 메뉴가 있나 살펴보았는데 없더군요. 엉뚱하게도 전혀 연관성없는 메뉴에서 설정해줄 수 있다는걸 발견했습니다.

위와 같이 상점관리 – 화면효과 설정 – 상품이미지 효과 설정을 통해 해당 설정을 켜고 끌 수 있습니다. CSS나 JS를 사용할줄 모르는 사용자를 위해서 제공하는 기능같습니다만, 최소한 해당 메뉴는 디자인관리에서 적용될 수 있도록 되어야 맞지 않나 싶네요. 정말 한참을 헤매고 뒤진 끝에 발견할 수 있었던터라 연관성이 몹시 떨어지는 곳에 메뉴가 위치하고 있어서 아쉬움이 많이 느껴집니다.

더불어서 간단하게 CSS를 이용해서 비슷한 효과를 낼 수 있는 방법이 있습니다. 아래 소스를 첨부했습니다.

CSS 부분을 보시면 위와같이 바로 :hover라는 가상클래스를 이용하는 것인데요. css에서 보통 상태와, 마우스를 올렸을때(hover) 어떻게 변화할 것인지만 새로 기술해주는 것만으로 충분히 사용이 가능합니다.

sftp-config.json에서ftp 설정을 해줄때 중요한 점은 바로 위에서 보여지는 내용 중에 빨간 밑줄을 그어준 부분들이다. 보통 인터넷에서 검색했을때 ftp인지,sftp인지 타입을 선택하고 호스트와 유저,패스워드,포트, 컨트롤할 리모트 패스까지는 설명이 되어있는데 좀처럼 폴더에 해당 파일들이 저장되지 않는다는 점이 내가 겪은 문제였다.

심지어 보통 yes / no를 묻는 창이 뜬다는데 그 창조차 뜨질 않아서 내용을 보니 confirm_downloads 항목이 false로 되어있었다. 나처럼 default 값이 false일 경우도 있으니 이 부분을 true로 바꿔 주어야 정상적으로 파일이 다운로드 된다.

그리고 파일을 수정한 다음에는 반드시 upload files 명령을 실행해줘야하는 번거로움이 뒤따르는데, 이 또한 upload_on_save 값에 true로 고쳐주면 저장과 동시에 업로드가 되서 바로바로 결과를 확인할 수 있다.

jquery 이용해서 만드는 hover 효과

Jquery 를 이용해서 위의 Auction에서 쓰인 효과를 구현해보았습니다. 메뉴에 마우스를 올리면, 서브로 숨겨져있던 내용이 메뉴와 이어져서 나타나는 방식입니다. 단순히 css만으로 구현하기에는 한계가 있기 때문에 jquery로 해결해주었습니다.

소스를 만들어놓고 따로 정리해놓지 않으면 재차 까먹고 다시 만드는 일이 잦아서 관리차원에서 기록으로 남겨놓습니다.

아래 내용이 해당 소스입니다. 반응형을 고려하지 않고 고정된 레이아웃의 pc상에서의 작동하는 것만 생각하고 만든 소스입니다. 깔끔하지 못한 소스입니다만, 필요하신 분은 수정해서 쓰셔도 좋습니다.

카페24 쇼핑몰에서도 소셜로그인해보자

카페24 뿐만이 아니라 다른 쇼핑몰이나 웹사이트 들을 보면, 간편하게 소셜 계정 – 네이버, 카카오톡 등으로 로그인이 가능한 곳들이 있습니다. 회원가입 절차가 무척 번거러울 수 있어서 사용자에게는 무척 편리한 기능입니다. 카페24에서도 이런 기능을 간편하게 제공하고 있는데요.

먼저 제공되는 서비스목록을 보면 페이스북,카카오,네이버,구글플러스 계정으로 가입하는게 가능합니다. 그래서 각각 계정을 연동하기 위해서는 각SNS의 개발자센터를 통해 API키나 아이디를 받아야 하기때문에 각 서비스의 계정에 가입해서 아이디가 준비되어있어야합니다.

카페24 관리자 메뉴 찾기

설정하는 곳은 카페24관리자 화면에서 프로모션 > SNS관리 > SNS 로그인 연동관리에서 찾아볼 수 있습니다.

각각 서비스에 맞는 설정값 발급방법이 입력칸 옆에 [발급방법 보기]에 잘 설명되어있기때문에 별도 설명은 생략하도록 하겠습니다.