[ 23 ENGINE ] 카테고리 마우스 올리면 이미지 나오게 하기

카테고리에 마우스를 올리면 나타나는 이벤트 배너를 설정할 수 있습니다.

동영상도 넣을 수 있고, 여러장의 이미지도 올릴 수 있으니 아래의 설명을 읽어주세요.

1. 어떤 카테고리에 마우스를 올리면 나올것인지 생각해두세요~

만약 티셔츠 카테고리에 마우스를 올리면 이미지가 나올려면

티셔츠 카테고리의 번호가 몇번인지를 아셔야 합니다.

2. 배너관리 v2 에서 아래의 모듈을 찾아주세요.

3. 배너를 등록하실 때, 아래의 규칙으로 등록해주세요.

배너의 이름을 카테고리 번호로 인식해서 화면에 출력하기 때문에

정확한 카테고리 번호를 배너명에 넣고 이미지를 넣으시길 바랍니다.

링크로 함께 걸 수 있으니, 링크정보도 함께 입력하시길 바랍니다.

4. 이미지가 나오는 위치를 우측이 아닌 좌측으로 보내기

만약 카테고리가 너무 우측에 있어서 안쪽으로 보이고 싶다면,

몇가지 편법이 필요합니다. 흔하진 않지만 html 코드를 수정해서 좌측으로 보낼 수 있습니다.

/_sp/apps/layout/category/category-1/category.html 이 파일을 열어주세요.

우측의 코드를 살펴보면

<!--카테고리-->

<!--@css(/_sp/apps/module/category/category.css)-->

<!--@js(/_sp/apps/module/category/category.js)-->

<div id="sp-category-1-normal" getcategory module="Layout_category">

<ul>

<li class="nohave" mom category data-no="BRAND" direction="left"><a href="/product/brand.html">BRAND</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="right"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="TIMESALE" direction="left"><a href="/product/timesale.html">TIMESALE</a></li>

</ul>

</div>

이런 코드가 있습니다. 여기서 붉은색 코드는 우측에서 배너가 나오라는 의미이며,

파란색 네줄, 즉 5번째 카테고리는 우측에서 배너가 나오라는 의미입니다.

만약 3번째 카테고리만 우측에서 나오고 싶다면

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="right"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

이렇게 수정할 수 있겠습니다.

5. 카테고리에 동영상 출력하기

이부분은 html 코드로만 수정이 가능합니다.

동영상을 출력하는 방법은 [ [ 23 ENGINE ] 카테고리 등록, 수정, 관리하기 ] 이 메뉴얼을 참고하시길 바랍니다.

위에서 열어둔 카테고리 페이지에서 50번째줄 ( 줄수는 개인마다 다를 수 있습니다 ) 을 보시면 아래와 같은 코드가 있습니다.

<div module="bannermanage2_display_5" backupcategory class="displaynone">

<div backup="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>

<div backup="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>

<div backup="50">

<!--유투브 플레이어-->

<!--@css(/_sp/apps/addon/youtube/youtube.css)-->

<!--@js(/_sp/apps/addon/youtube/youtube.js)-->

</div>

</div>

영상을 바로 출력할지, 혹은 클릭시 영상으로 나오게 할지에 대해서는 선택을 하셔야 하며,

이 코드 수정은 가급적 html에 약간의 지식이 있으신분이 수정하시길 바랍니다 -