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

 

상품이 품절되면 상품 목록에 보통 이런 품절 아이콘이 뜨는데, 이런 아이콘 말고 그냥 텍스트를 보여주고 싶은 경우 수정하는 방법이다. 텍스트로 보여주면 홈페이지 디자인에 맞추어 폰트를 동일한 스타일로 지정할 수 있고, 혹시나 홈페이지가 반응형인 경우 깨져보이지 않는다는 장점이 있다.

수정 전 / 후

 

참고로, 단순히 아이콘을 다른 아이콘으로 변경하고 싶은 경우에는 카페24 관리자페이지에서 쇼핑몰설정 > 사이트설정 > 아이콘설정에 접속해서 이미지를 교체하면 된다.

 

 

 

품절대신 Out of stock이나 Sold Out 등 텍스트로 표현하고 싶은 경우 아래와 같이 코드를 추가해주면 된다.

 

 

상품분류(product/list.html) 파일에서 상품목록 <li>와</li>사이에 원하는 위치에 <div class="soldout">{$soldout_icon}</div>를 추가한다. 품절 텍스트의 위치나 폰트 스타일은 CSS에서 원하는대로 따로 지정해주면 된다.

 

 

그 다음에 layout/js/basic.js나 기타 스크립트 파일에 아래 코드를 추가해준다.
soldout div영역에 img 태그가 있으면 soldout 영역에 Out of stock 텍스트를 표기해준다는 의미이다.

  /* 상품목록에 out of stock 표기 */
  $('.ec-base-product .prdList > li .soldout').each(function(){                 
     if($(this).children('img').length) {
          $(this).text("Out of stock");
      }    
  });

 

 

끝!