개발/카페24

[카페24] 상품 분류, 게시판 스킨별 스크립트, CSS 다르게 적용하기

상품 분류마다 다르게 보여주기상품 분류 스킨은 동일한데 특정 일부분만 다르게 보여지게 하고 싶은 경우아래 스크립트를 상품 목록파일(/product/list.html)에 로드되는 /js/module/product/menucategory.js 파일에 추가해주면 된다.var urll = window.location.href;var urlParams = new URL(urll).searchParams;var cate_no = urlParams.get('cate_no');if(cate_no =="54") { //54번 카테고리 분류에 보여질 스크립트}  [사용예시] 나의 경우에는 카테고리별 설명문구를 추가해주기 위해 아래와 같이 코드를 넣었다.상품분류페이지에서 간단한 분류 설명은 넣을 수는 있지만 3~4줄 ..

카페24 게시판 스킨 변경 시 링크 변수 변경

카페24 게시판 스킨을 새로 만드는 경우,게시판 각 항목 링크 클릭 시 기본으로 설정 되어있는 스킨(free, prouduct 등)으로 적용되어새로 만든 스킨으로 적용이 되지 않는다. 이 경우 아래와 같이 링크 부분을 변경해 주어야한다. [예시] 게시판 목록 (list.html파일)게시판 상세 페이지로 넘어가는 링크 경로를 변경해주어야한다. {$checkbox}{$no} {$icon_re}{$icon_lock}{$subject}{$icon_file}{$comment_count}{$icon_mobile}{$icon_new}{$icon_hit} {$category_name} ..

[카페24] 회원가입 페이지에 SNS 로그인 버튼 넣기

카페24 관리자페이지에서 [설정 > 고객설정 > SNS로그인 연동 관리] 페이지에서 각종 로그인 관련 설정을 하고 나면 로그인화면에서 자동으로 SNS 로그인 버튼들이 뜬다. 그런데 회원가입페이지에서는 SNS로그인 버튼이 안보이는 상황이! 회원가입 링크주소를 타고 바로 접속하는 경우도 있어 회원가입 페이지에도 SNS 버튼을 다는 방법을 정리해보려고 한다. 카페24 회원가입 페이지에 SNS 로그인 버튼 넣기 (PC) 1) 카페24 관리자페이지에서 [디자인 > 디자인편집]을 클릭해 스마트 디자인 편집창을 연다. 2) 왼쪽 영역에서 [전체화면보기] 클릭 후, 회원(member) 폴더를 찾은 뒤, 그 안의 로그인(login.html)파일을 연다. 3) ~ 영역을 전체 복사한다. 4) 회원가입(join.html) ..

[카페24] jQuery 여러개 사용하기

카페24에서 jQuery 스크립트를 사용하려면 카페24 자체 내에 포함되어있는 제이쿼리와 충돌이 일어나 제대로 작동이 안되는 경우가 많다. 이 경우에는 jQuery가 충돌이 나지 않게 아래 코드를 추가해주면 된다. 여기서 jQuery_new는 원하는대로 변경이 가능하다. jQuery_new를 선택자 앞의 jQuery 또는 $를 대신해서 사용하면 된다. window.jQuery_new = jQuery.noConflict(true); [사용 예시]

[카페24] 메인 상품 후기 최신글 코드 / 메인에 최근 리뷰 보여주기

카페24 쇼핑몰 메인페이지에 상품 후기 게시판 최신글을 보여주기 위한 코드 $count = 3 에서 보여줄 개수 조정 ~ 부분이 후기에 해당하는 상품을 보여주는 영역 여기서 {몰아이디} 부분에 몰 아이디(카페24 계정아이디)를 입력하면 된다. 썸네일이 아닌 원본 이미지를 불러와서 화질이 선명하게 보이기 위한 것. 등록 날짜를 보여주고 싶으면 {$write_date|date:Y-m-d} 추가 기본 코드 {$category_name} {$subject} {$icon_new} {$content} {$product_img} {$product_name} {$product_price} {$category_name} {$subject} {$icon_new} {$content} {$product_img} {$produ..

[카페24] 네이버페이 버튼이 노출되지 않는 경우

네이버페이 승인 받아, 공통인증키 연동도 하였는데 네이버 페이 버튼이 상품페이지와 장바구니에 노출되지 않는 경우 다음의 과정을 체크해보는 것이 좋다. 1) 네이버페이 사용 관련 설정 [카페24 관리자페이지 > 판매채널 > 네이버 > 네이버페이 설정]에 접속하여 노출함/사용함에 체크가 되어있는지 다시 한번 확인한다. 네이버페이 구매 버튼 노출 : 노출함 주문연동 : 사용함 2) 분류별 설정 [상품 > 분류관리 > 상품 분류 관리]에 접속하여 분류별로 가장 하단의 네이버페이 서비스 '사용함'으로 되어있는지 확인한다. 사용안함으로 되어있다면 것은 모두 사용함으로 변경해주고, 하위 분류 동시 적용에 체크하면 하위 카테고리까지 모두 적용된다. 3) 상품별 설정 위의 과정까지는 보통 디폴트 값으로 '사용함'으로 되..

[카페24 오류] 비밀번호 변경/재설정 페이지가 계속 뜨는 경우

쇼핑몰에서 비밀번호 찾기 후, 비밀번호 재설정을 했는데 반영이 되지 않고 계속해서 로그인할 때마다 비밀번호 재설정 페이지가 뜨는 오류가 발생하였는데, 원래 코드로 다시 넣어도 동일한 현상이 반복되었다. 알고보니 layout.html 파일을 수정하면서 핵심 코드가 빠져있었던 것이였다. layout/basic/layout.html 파일에서 태그 다음에 아래 두줄이 들어가 있는지 확인하고, 없으면 추가해주어야한다. 스킨 편집할 때 핵심 코드 빠지지 않게 주의★

[카페24] 상품 목록 품절 아이콘 대신 텍스트로 표기하기

상품이 품절되면 상품 목록에 보통 이런 품절 아이콘이 뜨는데, 이런 아이콘 말고 그냥 텍스트를 보여주고 싶은 경우 수정하는 방법이다. 텍스트로 보여주면 홈페이지 디자인에 맞추어 폰트를 동일한 스타일로 지정할 수 있고, 혹시나 홈페이지가 반응형인 경우 깨져보이지 않는다는 장점이 있다. 참고로, 단순히 아이콘을 다른 아이콘으로 변경하고 싶은 경우에는 카페24 관리자페이지에서 쇼핑몰설정 > 사이트설정 > 아이콘설정에 접속해서 이미지를 교체하면 된다. 품절대신 Out of stock이나 Sold Out 등 텍스트로 표현하고 싶은 경우 아래와 같이 코드를 추가해주면 된다. 상품분류(product/list.html) 파일에서 상품목록 와사이에 원하는 위치에 {$soldout_icon}를 추가한다. 품절 텍스트의 위..

카페24 갤러리 게시판 썸네일 크기 변경하기

카페24 갤러리 목록페이지(list.html) 썸네일을 아무리 고화질로 업로드해도 자체적으로 리사이즈가 되어 보여 깨져보인다. 관리자페이지에서 리사이즈 크기를 따로 설정할 수 있는 곳이 없는 것 같다. 코드로 직접 수정해주는 방법 밖에 없다. 썸네일을 리사이즈하지 않고, 원본크기를 불러오는 방식이다. 스킨편집에서 /board/gallery/list.html 파일을 수정하면 된다. 기존에 {$img_src}로 이미지를 불러오는데 이 경로를 /file_data/카페24아이디/{$real_filename} 로 변경해주면 된다. 썸네일로 이미지 원본을 불러오는 것이니 리스트 페이지 로드가 느려지지 않게 적절한 크기로 썸네일을 업로드 해주어야한다. 변경전 변경후

카페24 서브도메인 설정하기 / 2차도메인 추가

abc.com의 도메인을 쓰고 있는데, en.abc.com 처럼 기본 도메인 앞에 특정한 문자를 추가해 서브도메인을 사용하고 싶은 경우 카페24에서 쉽게 설정할 수 있다. 동일한 사이트에 한글/영문버전으로 나눠서 사용하는 경우 서브도메인을 많이 사용한다. 아래의 설명은 카페24 기준으로 설정 방법을 설명하지만, 가비아나 다른 서비스도 설정 방법은 비슷하다. 서브도메인이란? 도메인 네임 시스템(DNS) 계층에서 서브도메인(subdomain) 또는 하위 도메인은 다른 주도메인의 일부인 도메인이다. 예를 들어 example.com이라는 웹사이트의 일부로서 온라인 스토어를 제공하게 된다면 서브도메인 shop.example.com을 사용할 수 있다. (출저 : 위키백과) 카페24 서브도메인 설정 방법 1. 카페2..

[카페24 오류] 장바구니에 상품이 담기지 않거나 "필수 옵션을 선택해주세요." 오류 수정

증상 카페24 쇼핑몰 상품 상세페이지에서 (필수, 선택 옵션이 없는 경우) 상품을 장바구니에 담기 버튼을 클릭했는데 장바구니에 담기지 않거나 (필수, 선택 옵션이 있는 경우) 옵션을 선택했는데도 "필수 옵션을 선택해주세요" 경고창이 뜨는 증상 해결방법 스킨 코드의 문제가 아니라 도메인 연결의 문제이다. 도메인을 포워딩 기능을 사용하여 홈페이지를 연결하는 경우 발생하는 문제이다. 포워딩 기능을 모두 해제하고, 네임서버를 카페24로 변경하면 된다. (예시) 가비아에서 도메인을 구입한 경우 1) 가비아 로그인 후 > 마이가비아 > 서비스관리 > 해당도메인 리스트에서 [관리툴] 클릭 2) 네임서버 옆에 [설정]을 눌러 카페24 네임서버로 변경해준다. 카페24 네임서버 1차: dns1.cafe24.com (175..

[카페24] 상품 목록 페이지 가격 세자리마다 콤마, 화폐단위 나타내기

간혹 스킨을 편집하다 보면 가격이 제대로 표기가 안되는 경우가 있다. 이 경우 스마트디자인 편집 창에 들어가서 product > detail.html 파일을 수정해주어야한다. {$product_price}을 찾아서 {$disp_product_price} 로 변경해주기만 하면 끝! detail.html 파일안에 여러군데에 {$product_price}가 있는데 모두 찾아서 바꿔주면 된다. 주의할 점은 앞 부분의 {$product_price_display|display}는 $disp_를 추가하지 않고 그대로 두어야 한다는 점! {$disp_product_price} [적용 결과] 세자리마다 콤마가 찍히고 화폐단위(원)이 같이 나오게 된다.

[카페24] 컬러칩 탭 기능 / 컬러별로 상품 보여주기

최근 의뢰를 받아 했던 카페24 작업. 왼쪽에서 어느 컬러를 하나 클릭하면 그 컬러 제품만 볼 수 있도록 하는 기능을 작업하였다. 자동으로 분류되는건 아니고 약간의 소스 노가다가 필요한 작업이다. [예시화면] [작동 방식] 상품 등록시, 자체 코드에 컬러명을 영문으로 입력하면 별도의 페이지에서 컬러칩 클릭시 자체코드가 해당 컬러명을 가진 상품만 탭방식으로 show, hide 해주는 방식이다. [작업소스] - 일반페이지를 하나 생성한 후 아래의 소스 추가 - ul.colorchip부분에 쓴 영문명을 자체코드에 동일하게 입력해주면 됨. /pl/item_list.html - 여기서 중요한 점은 상품리스트(li) class에 {$ma_product_code}를 넣어주는것. 해당 컬러를 클래스로 가진 li만 보여..