장바구니 담기 버튼 한 번 더 클릭 시 해제
본문
list.10.skin.php
<?php
$cate_skin = $skin_dir.'/listcategory3.skin.php';
if(!is_file($cate_skin))
$cate_skin = G5_THEME_PATH.'/skin/shop/basic/listcategory3.skin.php';
include $cate_skin;
?>
<!-- 상품진열 10 시작 { -->
<?php
$i = 0;
$this->view_star = (method_exists($this, 'view_star')) ? $this->view_star : true;
foreach((array) $list as $row){
if( empty($row) ) continue;
$item_link_href = shop_item_url($row['it_id']); // 상품링크
$star_score = $row['it_use_avg'] ? (int) get_star($row['it_use_avg']) : ''; //사용자후기 평균별점
$list_mod = $this->list_mod; // 분류관리에서 1줄당 이미지 수 값 또는 파일에서 지정한 가로 수
$is_soldout = is_soldout($row['it_id'], true); // 품절인지 체크
$in_cart = '';
$classes = array();
$classes[] = 'col-row-'.$list_mod;
$my_cart = get_boxcart_datas($member['mb_id']);
if(array_key_exists($row['it_id'], $my_cart)){
$in_cart = 'style_class';
}else{
$in_cart = '';
}
if( $i && ($i % $list_mod == 0) ){
$classes[] = 'row-clear';
}
$i++; // 변수 i 를 증가
if ($i === 1) {
if ($this->css) {
echo "<ul class=\"{$this->css}\">\n";
} else {
echo "<ul class=\"sct sct_10 lists-row\" id=\"sct_test\">\n";
}
}
echo "<li class=\"sct_li ".implode(' ', $classes)."\" data-css=\"nocss\">\n";
echo "<div class=\"sct_img\">\n";
if ($this->href) {
echo "<a href=\"{$item_link_href}\">\n";
}
if ($this->view_it_img) {
echo get_it_image($row['it_id'], $this->img_width, $this->img_height, '', '', stripslashes($row['it_name']))."\n";
}
if ($this->href) {
echo "</a>\n";
}
if ( !$is_soldout ){ // 품절 상태가 아니면 출력합니다.
echo "<div class=\"sct_btn list-10-btn\">
<button type=\"button\" class=\"btn_cart sct_cart\" data-it_id=\"{$row['it_id']}\" ><i class=\"fa fa-shopping-cart\" aria-hidden=\"true\"></i> 장바구니</button>\n";
echo "</div>\n";
}
echo "<div class=\"cart-layer\"></div>\n";
if ($this->view_it_icon) {
// 품절
if ($is_soldout) {
echo '<span class="shop_icon_soldout"><span class="soldout_txt">SOLD OUT</span></span>';
}
}
echo "</div>\n";
echo "<div class=\"sct_ct_wrap\">\n";
// 사용후기 평점표시
if ($this->view_star && $star_score) {
echo "<div class=\"sct_star\"><span class=\"sound_only\">고객평점</span><img src=\"".G5_SHOP_URL."/img/s_star".$star_score.".png\" alt=\"별점 ".$star_score."점\" class=\"sit_star\"></div>\n";
}
if ($this->view_it_id) {
echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";
}
//체크박스 원본 코드
//<input type=\"checkbox\" class=\"btn_cart sct_cart hide list_check\" data-it_id=\"{$row['it_id']}\" id=\"{$row['it_id']}_checkbox\">\n
if ($this->href) {
echo "<div class=\"sct_txt\">\n";
echo "<div class=\"sct_btn list-10-btn\">
<button type=\"button\" class=\"btn_cart sct_cart {$in_cart}\" data-it_id=\"{$row['it_id']}\">
<img src=\"/img/check.png\" alt=\"체크\">
</button>\n";
echo "</div>\n";
}
if ($this->view_it_name) {
echo stripslashes($row['it_name'])."\n";
}
if ($this->href) {
echo "</div>\n";
}
if ($this->view_it_basic && $row['it_basic']) {
echo "<div class=\"sct_basic\">".stripslashes($row['it_basic'])."</div>\n";
}
echo "<div class=\"sct_bottom\">\n";
if ($this->view_it_cust_price || $this->view_it_price) {
echo "<div class=\"sct_cost\">\n";
if ($this->view_it_price) {
echo display_price(get_price($row), $row['it_tel_inq'])."\n";
}
if ($this->view_it_cust_price && $row['it_cust_price']) {
echo "<span class=\"sct_dict\">".display_price($row['it_cust_price'])."</span>\n";
}
echo "</div>\n";
}
// 위시리스트 + 공유 버튼 시작
echo "<div class=\"sct_op_btn\">\n";
echo "<button type=\"button\" class=\"btn_wish\" data-it_id=\"{$row['it_id']}\"><span class=\"sound_only\">위시리스트</span><i class=\"fa fa-heart-o\" aria-hidden=\"true\"></i></button>\n";
if ($this->view_sns) {
echo "<button type=\"button\" class=\"btn_share\"><span class=\"sound_only\">공유하기</span><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i></button>\n";
}
echo "<div class=\"sct_sns_wrap\">";
if ($this->view_sns) {
$sns_top = $this->img_height + 10;
$sns_url = $item_link_href;
$sns_title = get_text($row['it_name']).' | '.get_text($config['cf_title']);
echo "<div class=\"sct_sns\">";
echo "<h3>SNS 공유</h3>";
echo get_sns_share_link('facebook', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/facebook.png');
echo get_sns_share_link('twitter', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/twitter.png');
echo "<button type=\"button\" class=\"sct_sns_cls\"><span class=\"sound_only\">닫기</span><i class=\"fa fa-times\" aria-hidden=\"true\"></i></button>";
echo "</div>\n";
}
echo "<div class=\"sct_sns_bg\"></div>";
echo "</div></div>\n";
// 위시리스트 + 공유 버튼 끝
echo "</div>";
if ($this->view_it_icon) {
echo "<div class=\"sit_icon_li\">".item_icon($row)."</div>\n";
}
echo "</div>\n";
echo "</li>\n";
} //end foreach
if ($i >= 1) echo "</ul>\n";
if($i === 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
<!-- } 상품진열 10 끝 -->
<script>
//SNS 공유
$(function (){
$(".btn_share").on("click", function() {
$(this).parent("div").children(".sct_sns_wrap").show();
});
$('.sct_sns_bg, .sct_sns_cls').click(function(){
$('.sct_sns_wrap').hide();
});
});
</script>
<script>
$('.btn_cart').on('click', function(){
$(this).addClass('button_on');
});
</script>
<script>
jQuery(function ($) {
$("#sct").on("click", ".btn_cart", function(e) {
e.preventDefault();
var it_id = $(this).data("it_id");
var $wrap = $(this).closest(".style_class");
$.ajax({
url: g5_shop_url+"/ajax.action.php",
type: "POST",
data: {
"it_id" : it_id,
"action" : "cart_delete02"
},
dataType: "json",
async: true,
cache: false,
success: function(data, textStatus) {
if(data.error != "") {
alert(data.error);
return false;
}
$wrap.remove();
}
});
});
});
</script>
</div>
글 가져와서 장바구니 버튼 클릭 시 장바구니로 담겨지면서 style_class를 주는 작업을 했는데,
버튼을 한 번 더 클릭 시 style_class 클래스를 없애고 새로운 클래스를 줄 방법은 없을까요?!
감사합니다.
답변 2
클릭시 변수를 true false 기준으로 체크와 해제 되도록 처리가 가능한 부분입니다.
<script>
var style_class = false;
$('.btn_cart').on('click', function(){
if(style_class){
$(this).removeClass('button_on');
style_class = false;
}else{
$(this).addClass('button_on');
style_class = true;
}
});
답변감사합니다.
장바구니를 담으면 style_class와 button_on은 붙지만 새로고침이 되면서 button_on은 사라지기때문에 button_on은 자연스럽게 버튼이 활성화되기위한 transition역할로 사용하고있습니다!
장바구니에 들어갔을때 고정으로 활성화된 style_class를 없앨 방법은 없을까요?
장바구니에 담겨 있는 상품이 있을경우라면 장바구니의 상품여부를 체크해서 할수 있는 방법이 있긴 하지만 db에 기준값으로 체크하는 방법이 있긴 합니다.
if($(this).hasClass('button_on')) {
$(this).removeClass('button_on');
$(this).addClass('button_new');
return false;
}
$(this).addClass('button_on');
답변 정말 감사합니다.
button_on 클래스를 주는 스크립트는 새로고침하면서 사라져서
$in_cart인 style_class 부분을 버튼 클릭 시 사라지게 할 수는 없을까요?
답변을 작성하시기 전에 로그인 해주세요.
