설정 및 궁금증 정리
1. “ | “ 은 무엇인가
js코드상에서 “|”이 두개 붙어있는 “||” 는 x || y (x거나 y거나) 와 같이 ‘or’의 기능으로 사용된다.
하지만 카페24에서 "|" 기호는 보통 영문으로 "pipe" 라고 불리며, 주로 카페24의 쇼핑몰 관리자 페이지에서 카테고리, 태그, 키워드 등을 구분할 때 사용된다.
이 기호는 여러 항목을 구분하는 데 사용되며, 카테고리나 태그를 입력할 때 "|"을 사용하여 각 항목을 구분할 수 있습니다. 이는 쇼핑몰에서 상품을 카테고리화하거나 검색 엔진 최적화를 위해 특정 키워드를 구분할 때 편리하게 사용된다고 한다.
2. 카페24에서 swiper의 slide기능이 안될 때
카페24는 카페24내의 swiper 버전이 있는데 그게 좀 과거의 버전이라고 한다.
그렇기 때문에 작동시 오류가 있을 수 있는데,
보통 display:none → display:block의 변화를 통해 사용되는데 , slide기능이 먹통이 될 때 가 있다.
이때는 간단하게 옵저버 속성을 추가해주면 해결이 된다.
var swiperPopup = new Swiper('.swiper-popup', {
slidesPerView: 1,
spaceBetween: 16,
pagination: {
el: '.swiper-page',
},
observer: true, // 👈 옵저버 추가
observeParents: true, // 👈옵저버부모 추가
})observer 옵션을 true로 설정하게 되면 스타일을 변경하거나(예: 숨기기/표시)
하위 요소를 수정 (슬라이드 추가/제거) 할 때마다 스와이퍼가 업데이트(초기화)된다
3. 카트 css변경
스마트디자인 편집창에서 검색으로 ‘ec-base-product.css’ 을 해주고, 파일을 연다.
그 후에 ‘.ec-base-product .cart_ico’ 라는 클래스를 찾은 후에
해당 클래스를 ‘.cart_ico’로 바꾸어준다.
간단히 말해서 클래스 우선 순위로 인해 먼저 읽히게 하기 위함으로,
앞의 ‘.ec-base-product’를 지워줌으로써 우선 순위로 노출시키기 위함이라고 한다(?)
4. 임시로 숨기기
작업 중 import한 파일이 있는가 하면 그냥 html이 작성 된 구역들이 존재한다.
이럴때는 클래스명에 ‘displaynone’ 을 작성하면 none처리가 된다.
// 정상적인 import
<!--@css(/css/main_product.css)-->
// import 해제
<!--css(/css/main_product.css)-->css를 import할 때도 임시로 해제하고 싶을 땐 ‘@’를 제거시켜주면 주석처리로 바뀌어서 import가 해제된다.
5. pdNo 설정하기
<html>
<div module="product_detail">
<div id="pdNum" rel="{$product_no}"></div>
</div>
</html>
<script>
if($('#pdNum').length > 0){
var pdNo = $('#pdNum').attr('rel');
}else if($('meta[property="product:productId"]').length > 0){
var pdNo = $('meta[property="product:productId"]').attr('content');
}else{
var pdNo = getQueryString('product_no');
}
var now_addr = window.location.href;
var arraySplit = now_addr.split("/");
var domain = "//"+arraySplit [2];
var preview = now_addr.split('&preview=');
var preview_index = now_addr.split('?preview=');
</script>pdNum의 경우 상세페이지의 경우에 따로 설정해줘야 한다!
module="product_detail" 이라는 모듈 안에 넣어야
{$product_no} 변수가 작동한다!
{$product_no} 변수는 여러 모듈에서도 사용가능하다!
