modify copy

[ 27 INFINITE ] 상단 대표 카테고리 관리하기 ( 마우스 오버 변환 포함 )

스킨 상단의 대표 카테고리를 관리자 설정 외 수동으로 관리하는 방법에 대한 안내 입니다.

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

    [ 27 INFINITE ] 상단 대표 카테고리 관리하기 ( 마우스 오버 변환 포함 )품절
    스킨 상단의 대표 카테고리를 관리자 설정 외 수동으로 관리하는 방법에 대한 안내 입니다.

    기본 정보
    [ 27 INFINITE ] 상단 대표 카테고리 관리하기 ( 마우스 오버 변환 포함 )
    스킨 상단의 대표 카테고리를 관리자 설정 외 수동으로 관리하는 방법에 대한 안내 입니다.
    사용후기 0
    수량 수량증가수량감소
    타임세일

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

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

  • 수량을 선택해주세요.

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

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

    상품 목록
    상품명 상품수 가격
    [ 27 INFINITE ] 상단 대표 카테고리 관리하기 ( 마우스 오버 변환 포함 ) 수량증가 수량감소 0 (  )
  • TOTAL PRICE 0 (0개)

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

카페24의 모든 카테고리는 관리자와 연동이 되어 있습니다.
하지만, 수동으로 문의, 후기, 혹은 기타 페이지로 연결하고 싶은 경우에 이 메뉴얼을 참고하세요.





1. 카테고리 코드 열기

 

이 코드를 열었다면, 이제 수정하실 준비가 된 상태 입니다.

다른 코드들은 보지 마시고, 코드 하단만 보시면 됩니다. ( 수동 카테고리 영역 )






2. 코드 이해하기


코드 하단부를 보시면 아래와 같은 코드 묶음이 있습니다.



        <!-----------------------------------------------------------------------------------------------------------------

            수동 카테고리

            자유롭게 추가가 가능합니다.

            만약 이 코드가 고정 카테고리 위에 있다면,

            카테고리보다 앞 부분에 수동 카테고리가 보여지게 됩니다.

        ------------------------------------------------------------------------------------------------------------------>

        <li

            data-name="Q & A"

            data-cate_no="board-6"

            data-param=""

            data-link_product_list="/board/상품문의/6/"

            data-design_page_url="/board/상품문의/6/">

            <a href="/board/상품문의/6/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                Q &amp; A

            </a>

        </li>

        <li

            data-name="REVIEWS"

            data-cate_no="board-4"

            data-param=""

            data-link_product_list="/board/상품후기/4/"

            data-design_page_url="/board/상품후기/4/">

            <a href="/board/상품후기/4/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                REVIEWS

            </a>

        </li>

        <!-- // -->



두 색상의 코드는 서로 다르게 생겼지만, 실제로 한개의 카테고리를 의미 합니다.

만약 링크를 하나 지우신다면, 색상 한개의 블럭 전체를 삭제해야 하며, 추가를 해야 한다면 색상 한개의 블럭 전체를 복사해서 하나 더 넣으셔야 합니다.


수동 카테고리 한개를 추가한다면 아래와 같은 모습이 됩니다.



        <!-----------------------------------------------------------------------------------------------------------------

            수동 카테고리

            자유롭게 추가가 가능합니다.

            만약 이 코드가 고정 카테고리 위에 있다면,

            카테고리보다 앞 부분에 수동 카테고리가 보여지게 됩니다.

        ------------------------------------------------------------------------------------------------------------------>

        <li

            data-name="Q & A"

            data-cate_no="board-6"

            data-param=""

            data-link_product_list="/board/상품문의/6/"

            data-design_page_url="/board/상품문의/6/">

            <a href="/board/상품문의/6/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                Q &amp; A

            </a>

        </li>

        <li

            data-name="REVIEWS"

            data-cate_no="board-4"

            data-param=""

            data-link_product_list="/board/상품후기/4/"

            data-design_page_url="/board/상품후기/4/">

            <a href="/board/상품후기/4/" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                REVIEWS

            </a>

        </li>

        <li

            data-name="배송조회"

            data-cate_no="other-1"

            data-param=""

            data-link_product_list="연결할링크"

            data-design_page_url="seo가 적용된 링크">

            <a href="연결할링크" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                메뉴명

            </a>

        </li>

        <!-- // -->



이 영역을 뜯어서 설명한다면,



        <li

            data-name="배송조회"       // 식별할 수 있는 텍스트 ( 그냥 메뉴명과 같은걸 적으면 됩니다 )

            data-cate_no="other-1"      // 식별할 수 있는 코드 ( 마우스 오버시 연결할 코드이므로, 중복되지 않도록 적어주세요. 자신이 알아볼 수 있는 문자면 됩니다. )

            data-param=""

            data-link_product_list="연결할링크" // 실제로 연결할 링크 ( 일반적인 url )

            data-design_page_url="seo가 적용된 링크">   // seo가 적용된 링크 ex ) /여성/티셔츠/ 처럼 한글 주소 ( 그냥 연결할 링크와 같은걸 적으시면 됩니다 )

            <a href="연결할링크" class="sp--btn sp--currentlink" scale="xl" theme="theme" effect="underline-tick">

                메뉴명   // 화면에 보여질 

            </a>

        </li>



카테고리 코드의 양이 많은 이유는 여러 장소에 여러 방식으로 사용되기 때문입니다.

좌측 패널, 서브 카테고리 등 많은 페이지에서 동시에 활용되므로, 번거로우시더라도 올바르게 입력하시길 바랍니다.






3. 마우스 오버시 글자 변형하기


만약 마우스 오버전, 오버후를 이미지로 하고 싶다면


관리자 > 상품관리 > 상품분류 관리 >>> 분류꾸미기 > 메뉴 이미지


이부분을 수정하시면 됩니다.

이미지가 아닌 텍스트로 변경하고 싶을땐 코드를 변경해야 하는데요.


우선 마우스 오버를 관리할 파일을 엽니다.


 

코드속에도 많은 설명이 있지만,

메뉴얼에서는 가시적인 설명을 포함합니다.


<div class="displaynone" sp--js-category-hover>

    <span data-category="카테고리 번호">

        마우스 오버시 나올 텍스트

    </span>

    <span data-category="카테고리 번호">

        마우스 오버시 나올 텍스트

    </span>

</div>


색상 한개가 하나의 메뉴에 대한 코드이며, 반복적으로 입력해서 여러가지 카테고리를 관리할 수 있습니다.


예를 들어 women 카테고리가 카테고리 번호가 3 이라면



    <span data-category="3">

        여성의류

    </span>



이렇게 연결해줍니다.

그럼 "women" 카테고리에 마우스를 올리면 "여성의류" 라는 텍스트로 변경됩니다.


* 주의할점은 마우스를 올리기 전의 글자의 가로 길이가 마우스 올렸을때의 글자 길이보다 반드시 길어야 합니다.

* 만약 오버시 글자가 더 길면 .. 으로 표현됩니다.


* 수동으로 연결한 카테고리는 카테고리 번호가 data-cate_no="other-1"  이부분 입니다.

* 카테고리 번호대신 other-1 을 입력하시면 수동 카테고리도 연결이 가능합니다.