modify copy

[ 23 ENGINE ] 카테고리 마우스 오버시 한글로 나오게 하기

카테고리에 마우스를 올리면 한글로 나오게 합니다.
물론 영어, 일본어, 중국어 원하는 모습으로 수정할 수 있어요.

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
    • 이 상품은 해외배송이 가능한 상품입니다

    [ 23 ENGINE ] 카테고리 마우스 오버시 한글로 나오게 하기
    카테고리에 마우스를 올리면 한글로 나오게 합니다.
    물론 영어, 일본어, 중국어 원하는 모습으로 수정할 수 있어요.
    기본 정보
    [ 23 ENGINE ] 카테고리 마우스 오버시 한글로 나오게 하기
    카테고리에 마우스를 올리면 한글로 나오게 합니다.
    물론 영어, 일본어, 중국어 원하는 모습으로 수정할 수 있어요.
    사용후기 0
    수량 수량증가수량감소
    타임세일

    카드혜택안내 미확인 입금자

    개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다.
  • 상품 수량
    수량
    증가 감소
    상품 옵션
    옵션 선택

  • 수량을 선택해주세요.

    옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.

    최소주문수량 1개 이상 / 최대주문수량 0개 이하입니다.

    상품 목록
    상품명 상품수 가격
    [ 23 ENGINE ] 카테고리 마우스 오버시 한글로 나오게 하기 수량증가 수량감소 0 (  )
  • TOTAL PRICE 0 (0개)

    할인가가 적용된 최종 결제예정금액은 주문 시 확인할 수 있습니다.

카테고리에 마우스를 올리면 변환되는 기능은 카페24의 기본기능으로 존재합니다.

다만, 이미지로 관리되며, 이미지 사이즈가 같아야 하며 서브카테고리에서의 마우스 hover 이벤트는 이해하지 않도록 되어 있기 때문에

판다씨에서 만든 라이브러리를 이용하시길 바랍니다.


우선 c스토어에 배너관리 v2를 열고 아래의 모듈을 찾아주세요.


[시즌5] 카테고리 오버시 글자변환 : 텍스트만 사용




이 모듈을 열고 배너를 등록하실때 아래의 규칙으로 등록하시길 바랍니다.



이미지는 사실 사용할게 없구요,

텍스트만 두개 입력하는데요, 등록 규칙은 배너명에 작성해주시면 됩니다.


등록규칙은 아래와 같습니다.


backup="카테고리번호" change="변경될글자"

 

간단합니다. 카테고리번호를 만약 43을 적었다면,

43번 카테고리에 마우스를 올리면 해당 텍스트가 변경될글자로 변경됩니다.


예를 들어 DRESS 카테고리가 있다고 가정하고, 이 카테고리가 50번이라고 합니다.

그리고 마우스를 올리면 드레스가 나왔으면 좋겠습니다.

그럼 아래와 같은 배너명으로 설정이 가능합니다.


backup="50" change="드레스"


만약 DRESS에 마우스를 올리면 "너무나 예쁜 드레스" 라고 나오고 싶다면 그것은 불가능합니다.

글자 자체가 더 길어지므로, 화면을 밀어내기 때문에 레이아웃에 영향을 주게 됩니다. 


backup="50" change="너무나 예쁜 드레스"


이렇게 설정을 하셨다면,


" 너무나 예.. "


이렇게 나오게 되오니 글자수를 잘 생각하셔서 등록하시길 바랍니다.


아래는 이 로직이 구성하는 마크업 입니다.


<!--카테고리 텍스트변형-->

<div changecategory class="displaynone">

<i backup="카테고리번호" change="변경될글자"></i>

<i backup="카테고리번호" change="변경될글자"></i>

</div>


이 구조를 읽어서 변경하는 부분이오니 참고바랍니다.

개발자분들께서는 이 구조를 활용하셔서 더욱 멋진 기능을 만들어보시길 바랍니다.