상품목록에서 정렬방법 선택 시 선택한 탭의 색상을 변경하기
본문
이건 질문이 아니고, 혹시 필요하실 분들을 위해 남기는 팁입니다.
상품목록에서
<판매많은순/낮은가격순/높은가격순/평점높은순/후기많은순/최근등록순>
정렬을 선택할 시, 상품의 정렬은 바뀌지만
위의 사진처럼 탭의 색상은 그대로입니다.
그래서 자신이 어떤 기준으로 상품 정렬을 했는지 알 수 있게
아래와 같이 선택한 탭의 색상이 바뀌도록 하였습니다.
gnucommerce/skin/shop/<선택한 스킨: 저의 경우 16-summer-ipha>/list.sort.skin.php에서
<?php
if( !defined('GC_NAME') ) exit;
$sct_sort_href = gc_get_shop_url();
do_action( GC_NAME.'_skin_action', __FILE__, plugin_dir_path( __FILE__) );
$query4ssch_sort="#E78B90 !important";
?>
<!-- 상품 정렬 선택 시작 { -->
<section id="sct_sort">
<h2>상품 정렬</h2>
<ul id="ssch_sort">
<li id="sort_style"><a style="color: <?php if($_GET['orderby']=="it_sum_qty"){echo htmlspecialchars($query4ssch_sort);} ?>" href="<?php echo add_query_arg( array('orderby'=>'it_sum_qty'), $sct_sort_href); ?>">판매많은순</a></li>
<li id="sort_style"><a style="color: <?php if($_GET['orderby']=="price-asc"){echo htmlspecialchars($query4ssch_sort);} ?>" href="<?php echo add_query_arg( array('orderby'=>'price-asc'), $sct_sort_href); ?>">낮은가격순</a></li>
<li id="sort_style"><a style="color: <?php if($_GET['orderby']=="price"){echo htmlspecialchars($query4ssch_sort);} ?>" href="<?php echo add_query_arg( array('orderby'=>'price'), $sct_sort_href); ?>">높은가격순</a></li>
<li id="sort_style"><a style="color: <?php if($_GET['orderby']=="rating"){echo htmlspecialchars($query4ssch_sort);} ?>" href="<?php echo add_query_arg( array('orderby'=>'rating'), $sct_sort_href); ?>">평점높은순</a></li>
<li id="sort_style"><a style="color: <?php if($_GET['orderby']=="comment_count"){echo htmlspecialchars($query4ssch_sort);} ?>" href="<?php echo add_query_arg( array('orderby'=>'comment_count'), $sct_sort_href); ?>">후기많은순</a></li>
<li id="sort_style"><a style="color: <?php if($_GET['orderby']=="post_date"){echo htmlspecialchars($query4ssch_sort);} ?>" href="<?php echo add_query_arg( array('orderby'=>'post_date'), $sct_sort_href); ?>">최근등록순</a></li>
</ul>
</section>
<!-- } 상품 정렬 선택 끝 -->
1. 변수 $query4ssch_sort를 선언하여, 이 안에 정렬선택시 변경색상을 입력할 수 있게 하였습니다.
2. li 태그 안에 id를 삽입하여 css 커스터마이징이 가능하게 하였습니다.
3. 또한 a 태그 안에 style을 집어넣어 정렬 선택 시 색상이 변경되도록 하였습니다.
아는 게 너무 없어서 htmlspecialchars도 몰라서
jquery를 찾아보다가
swtich구문으로 case 'price-asc': echo "#sort_style{color: #E78B90 !important;}"; break; 같은 식으로 넣어보다가
하면서 하루를 보냈거든요ㅜ
혹시나 저같이 헤매실 분들을 위해 남깁니다.
답변 1
헉 팁에 올려도 되나요? 처음에 팁에 올릴까 하다가 워낙 팁이 별로 안 올라와있길래 '아.. 이런 사소한 건 올리면 안 되나보다'하고 Q&A에 올렸는데ㅠㅎㅎ 초보로서 도움이 된다니 두근두근한 마음에 금방 팁에도 옮겼습니다!!
잘하셨습니다.
답변을 작성하시기 전에 로그인 해주세요.