상품 리스트 페이지에서 정렬 옵션 선택했을 때 활성화 효과 > 영카트강좌

본문 바로가기
전체검색

그누스킨닷컴

영카트강좌

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

상품 리스트 페이지에서 정렬 옵션 선택했을 때 활성화 효과

페이지 정보

작성자 관리자 작성일17-09-29 04:13 조회500회

본문

영카트강좌

상품 리스트 페이지에서 정렬 옵션을 각각 선택했을 때 선택한 탭만 활성화 효과를 주는 방법입니다.

원본이 링크 class에 버튼 형태로 되어 있어서 거기에 그냥 덧붙이는 방법입니다.

정렬 인식 부분만 참고해서 다른 방식으로 변경해도 됩니다.

배경색을 바꾸는 걸로 해보겠습니다. 영카트 basic 스킨 기준입니다.

테마용 스킨을 사용 중이라면 테마 폴더에 있는 스킨을 수정해야 합니다.



1. skin/shop/basic/list.sort.skin.php 파일 수정


상단에 이렇게 추가합니다.


if($sort == 'it_sum_qty') $sort_class1 = ' sort_bg1';
if($sort == 'it_price' && $sortodr == 'asc') $sort_class2 = ' sort_bg2';
if($sort == 'it_price' && $sortodr == 'desc') $sort_class3 = ' sort_bg3';
if($sort == 'it_use_avg') $sort_class4 = ' sort_bg4';
if($sort == 'it_use_cnt') $sort_class5 = ' sort_bg5';
if($sort == 'it_update_time') $sort_class6 = ' sort_bg6';
 

같은 파일에서 정렬 옵션 선택 부분을 수정합니다.

class 부분이 추가되었습니다.


    <ul id="ssch_sort">
        <li><a href="<?php echo $sct_sort_href; ?>it_sum_qty&amp;sortodr=desc" class="btn01<?php echo $sort_class1 ?>">판매많은순</a></li>
        <li><a href="<?php echo $sct_sort_href; ?>it_price&amp;sortodr=asc" class="btn01<?php echo $sort_class2 ?>">낮은가격순</a></li>
        <li><a href="<?php echo $sct_sort_href; ?>it_price&amp;sortodr=desc" class="btn01<?php echo $sort_class3 ?>">높은가격순</a></li>
        <li><a href="<?php echo $sct_sort_href; ?>it_use_avg&amp;sortodr=desc" class="btn01<?php echo $sort_class4 ?>">평점높은순</a></li>
        <li><a href="<?php echo $sct_sort_href; ?>it_use_cnt&amp;sortodr=desc" class="btn01<?php echo $sort_class5 ?>">후기많은순</a></li>
        <li><a href="<?php echo $sct_sort_href; ?>it_update_time&amp;sortodr=desc" class="btn01<?php echo $sort_class6 ?>">최근등록순</a></li>
    </ul>
 


2. skin/shop/basic/style.css 파일에 추가


.sort_bg1, .sort_bg2, .sort_bg3, .sort_bg4, .sort_bg5, .sort_bg6 {border:1px solid #626870 !important;background:#626870 !important;color:#ffffff !important}

커뮤니티는 당분간 중단하겠습니다.
영카트강좌 목록
번호 제목
44 상품 문의 게시판 작성자 이름 대신에 닉네임 출력하기
43 다음 주소 우편번호 검색 창 레이어나 새창 방식으로 변경하기
42 상품 여분 필드 10개 이상 추가하기
41 상품 목록 스킨에 사용후기 별점 평가 점수 출력하기
40 등록된 상품 전체를 출력하는 페이지 생성하기
39 모바일 상품 리스트에서 더보기 방식 대신에 페이징으로 변경
38 영카트 분류 메뉴에 특정 메뉴를 끼워 넣는 방법 - 5.3 버전 모바일
37 pp_cli_x64 파일을 바이너리 타입으로 다시 업로드하여 주십시오.
36 pp_cli_x64 실행권한을 부여해 주십시오. 댓글1
35 상품 목록에 구매시 지급되는 포인트 출력
34 상품 관리 권한을 특정 회원에게 부여하기 (관리 회원 아이디)
33 쇼핑몰 페이지 전체 임시 접근 금지
32 비회원으로 구매하기 클릭시 로그인 창 삭제하기 댓글1
31 상품 목록 정렬을 최근 등록 날짜순이나 후기가 많은 순서대로 정렬하기
30 배송 정보를 이미지로 만들어서 넣었을 때 페이지 밀림 방지
29 상품 목록 보기 방식을 갤러리 타입에서 리스트 타입으로 변경
28 상품 이미지를 썸네일이 아닌 원본으로 출력
27 주문서 전하실 말씀 textarea에 내용 미리 입력
26 1:1문의 페이지에 영카트 레이아웃 적용하기 모바일 지원
25 FAQ 페이지에 영카트 레이아웃을 적용하기
24 인덱스 페이지에 특정 상품 분류 페이지를 직접 출력하기 댓글1
23 상품 목록용 썸네일 이미지 별도로 사용하기
22 상품목록 스킨에 최소 최대 구매 수량 출력
21 메인페이지에 상품 문의 최신글 출력 댓글1
20 영카트 레이아웃을 특정 게시판에 적용하기 모바일 지원 댓글1
게시물 검색


그누스터디는 그누보드, 영카트 초보 사용자를 위한 정보를 공유합니다.

Copyright © GNUSTUDY. All rights reserved.
상단으로