본문 바로가기
cafe24

cafe24 기본 제공 디자인 수정하기 - 상품리스트에서 상품 할인율 표시

by jung_ 2022. 2. 26.

 

카페24 에서 무료로 적용할 수 있는 스킨에서 디자인을 수정중이다.

 

기본적인 스킨이 있고 거기서 컴포넌트 형식으로 수정할 수 있었으면 좋겠다.

아니면 기본 스킨이 좀 그냥 아무것도 없이 심플했으면 좋겠는데 기본 스킨들이 다 세기말 등록된 스킨들이 그대로다.

 

사용한지 6년이상이 되었지만 디자인에 대한 부분은 2022년에도 옛날에 사용하던 부분에서 업데이트가 전혀 안되고있다. 

요즘엔 다른 쇼핑몰 솔루션들이 디자인과 수정이 간편한 것들이 많아 다른 곳을 이용하는 사람들이 늘고 있는 것 같다.

나는 오랫동안 회사때문에 카페24를 사용해와서 가장 익숙하긴 하지만 , 내가 직접 쇼핑몰을 연다면 나역시 디자인 때문에 다른 솔루션을 이용할 것 같다.

 

각각 변수,모듈 부분의 리스트가 정리된 부분들이 찾아보니 그마저도 가장 최근 업데이트 된 글이 2015년인 것 같았다.

결국엔 원하는 디자인을 하려면 스킨을 구매하거나 돈을 주고 작업을 맡길 수 밖에 없다. 

 

하여튼 이번 수정을 시작하면서 궁금했던 내용들이

검색해도 잘 안나와서 일하는김에 답답한 부분들을 정리해 보려 한다.

 

 

일단 할인율을 표시 하려면

상품관리 > 상품정보표시설정 에서 할인율부분을 '표시함'으로 체크한 후 저장해 주고,

맨 하단 [추가 설정] 부분 할인 판매가 할인금액표시문구를 '사용함'으로 체크,

나는 ~~% 형식으로 노출되게 하고 싶었기 때문에 표시문구 부분에  [:DISCOUNT_PERCENT:] 를 입력해준다.

 

 

그렇게 되면 상품 리스트 부분에서는 아래 이미지 처럼 가격 옆에 바로 붙어서 노출된다.

아직 해당 부분 마진값을 수정안해서 세일 가격하고 할인율이 여백없이 붙어있다.

 

<div class="description">
    <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
    <ul module="product_ListItem" class="spec">
        <li class="{$item_display|display}">
            {$item_content}
        </li>
        <li class="{$item_display|display}">
            {$item_content}
        </li>
    </ul>
    <div class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$today_arrival_icon} {$pickup_icon}</div>
</div>

 

 

코드 부분은 상품리스트 list.html 에서 윗 부분 중

product_ListItem 모듈 부분이 가격 및 상품 추가 설정 부분들이 노출 되는 부분이다.

 

기본적으로 모듈이 아래처럼 추가설정 타이틀까지 들어가있다. <Strong>부분.

 

 

 <li class="{$item_display|display}">
  <strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}
</li>

 

나는 할인율에 대한 제목이 표기되는게 싫어서 위에서 해당 <strong> tag 부분을 삭제했다.

 

가격 부분의 경우 기존에는 섬네일 아래로

 

1. 소비자가

2. 판매가

3. 추가 설정부분

 

이렇게 순서대로 노출되는데 ,

나는 3가지가 모두 한줄로 노출되게 하기 위해 css를 수정했다.

 

아래처럼 Display : inline; 추가

 

/* module="product_ListItem" */

.ec-base-product .spec>li {
    display: inline;
}

 

할인율이 나오는 위치를 변경하고 싶은 경우에는 방법이 다른데,

내가 이전에 했던 방법으로는 위 방법처럼 상품 할인혜택 설정에서 할인율을 설정하는게 아니라

상품 가격을 다른 방식으로 입력해야 한다.

 

상품 등록시 아래 부분처럼 소비자가와 판매가를 직접 입력해도 되고,

할인 하고 싶은 상품을 선택해서 설정도 가능하다.

 

현재 수정하고 있는 계정이 부계정이라

가격부분 수정이 안되서 이부분은 나중에 권한 수정 후 따로 포스팅해야겠다!

 

 

댓글

티스토리툴바