카페24 디자인스킨 수정 시 자체 에디터로 수정하면 편한 점(0개)도 있지만, 개발을 하다보면 당연히 VSCode로 작업하는 것이 수월하다. 이번에는 sftp를 이용해서 카페24 디자인스킨을 다운받아 업로드 하는 방법을 알아보자 먼저 확인해야 할 것은 - 카페24 ftp 주소 - ftp 아이디와 비밀번호 이다. 이 내용은 여기에서 확인할 수 있다. 그리고 이용할 디렉터리를 만들고, 여기에서 VSCode를 연다. 열린 VSCode 플러그인에서 sftp를 찾아 설치한다. 다양한 플러그인이 나와 있으며 개 중 많은 다운로드 수를 차지한 버전으로 다운받으면 된다. f1키를 눌러 상단에 뜬 입력창에 sftp:config를 클릭한다. 열린 sftp.json 확인하자. { "name": "My Server", "ho..

멜론 머스크놈의 트위터가 갑자기 프로모션에 후해졌다. 돈 때문이겠지? 트위터 전환 추적을 위한 픽셀 설정하기 트위터에서 광고를 집행하였을때 메타에서 제공하는 것처럼 유저의 행동을 추적하여 전환율을 확인할 수 있다. 트위터에서 제공하는 픽셀을 설정하면 되는데 그 과정을 기록해본다. (이전에는 Twitter UWT나 Single Event Tag를 사용했다고 함. 이전에는 아마 공식 대행 업체를 사용해야만 트위터 프로모션을 집행할 수 있었던 것으로 기억) 트위터 픽셀을 생성하기 위해 참고할 문서는 아래와 같다. Conversion tracking for websites Learn about how to add and use conversion tracking for websites with Twitter A..

공급사 미니샵 파일은 2개 supply 폴더 내 index.html 과 main.html 파일 있음 공급사 아이디가 발급되어야 공급사 페이지를 사용할 수 있다. 루트(URL) 도메인/supply/index.html?supplier_code=공급사코드 도메인/minishop/공급사아이디 두 개 다 사용 설정 (공급사미니샵 사용함/사용안함 은 쇼핑몰관리자 - 공급사 관리 또는 개별 공급사 로그인)은 쇼핑몰 관리자에서 진행함 (관리 페이지 링크) index.html은 모바일에서 연결될 때 열림 main.html은 PC에서 연결될 때 열림 둘 중 하나라도 없으면 PC 또는 모바일에서 안 열림 supply/index.html?supplier_code=공급사코드 루트는 상세페이지 내에 공급사 바로가기버튼 삽입하는 ..

카페24 상품 모듈 중 할인 기간을 보여줄 수 있는 모듈이 있다. 보통의 타임 세일처럼 날짜와 시간을 yyyy-mm-dd hh:mm:ss로 표시해주고 있다. 기간 판매 혹은 공동구매 등에 활용하기 위해 해당 모듈을 상품에 넣어보았는데 카운트다운처럼 초나 분이 줄어드는 것이 보이지 않고 해당 페이지에 접속한 시간을 기준으로 멈춰있다. 그럼 초를 왜 넣어놓은거지... 할인 기간을 좀 더 선명하게 보여주기 위해서 할인 기간을 카운트다운 형식으로 변경해보았다. 우선 상품 detail 페이지나 메인 진열에 아래 변수를 사용해서 표시해주면 상품 등록 - 프로모션에서 설정한 기간을 볼 수 있다. 할인 시작 : {$product_promotion_start_date} 할인 종료 : {$product_promotion_..

카페24 기능 중 가장 어려웠던 부분이 바로 이 '카테고리' 부분이다. 다른 모듈들은 div나 li를 두 번 반복해서 넣으면 자동으로 반복문이 되거나 변수명이 넣으면 자동으로 통신해서 받아오는 등 스크립트 기능들이 숨겨져 있는데(호스팅을 이용하는 사용자에게 노출되지 않는다는 뜻) 이 카테고리 노출하는 모듈이 거의 유일무이하게 category.js로 바깥 노출이 되어 있다. 내부를 살펴보면 카페24에서 front API라고 부르는 exec/front 주소로 ajax 통신을 진행하고 해당 주소로 들어가보면 쇼핑몰관리자 - 상품 - 상품 분류에서 작업한 카테고리가 depth 없는 JSON으로 노출된다. (카페24를 사용하는 모든 쇼핑몰은 도메인 + /exec/front/Product/SubCategory 를 ..

인쇄해서 붙여놓을 용도로 간략 정리 문자열 {$변수명|cover:(앞에 감쌀문자, 뒤문자)} 문자열 양 옆을 설정한 특수문자로 감쌈 {$변수명|cut:갯수,...} ellipsis 같은 텍스트 줄임 기능 {$변수명|numberformat} 상품 판매가에 천 단위 쉼표* 치환 {$변수명|replace:a,b,c} a를 b라는 문자로 치환(c는 매치되지 않으면 치환할 문자) {$변수명|imgconv:'url'} 변수를 이미지로 치환 {$변수명|strconv:문자열} 변수를 문자열로 치환 {$변수명|nl2br} 쇼핑몰관리자에서 엔터 친 부분 잡아내서 삽입 {$변수명|lower} 소문자로 변경 {$변수명|upper} 소문자로 변경 기타 {$변수명|date:날짜 포맷} 설정한 날짜로 표시 {$변수명|timetod..