수정) 추천해요 버튼 -> 좋아요 (하트) 버튼으로 이미지 전환 효과

콘텐츠 허브

게시판

파일 다운로드

무료로 다운로드 할 수 있습니다.

good.zip

고유번호
323

최근 업데이트
2024.11.02 01:37

누적 다운로드
13회

잼잼미니홈 1:1 대화하기 @habaksa　구독 1명

미니홈

쪽지

구독하고 알림받기

상세정보

11/2 수정

수정합니다ㅠㅠ 좋아요 기록저장 시키는 부분을 놓쳤네요
놓친김에 제가 조금 더 업데이트? 해서

좋아요 버튼누를때 문구도 위에 나오게 했네요
gif 파일에 올렸는데 문구가 거추장스러우면 없애시면 됩니당

아래 추가한 good.php 파일을
\bbs 폴더에 넣어 덮으시면됩니다. (원본 백업은필수)
아래 넣는 소스도 수정했습니다.

-------------------------------------------------------------------

당근처럼
게시판에 있는 추천해요 버튼을

하트로 만드는 소스입니다.

원하시는 게시판에서
theme\rb.basic\skin\board
안에 있는 게시판중

view.skin.php

<?php if ( $good_href || $nogood_href) { ?> <div id="bo_v_act"> <?php if ($good_href) { ?> <span class="bo_v_act_gng"> <a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?><?php echo $good_href.'&'.$qstr ?><?php } ?>" id="good_button" class="bo_v_good">추천해요 <?php echo number_format($view['wr_good']) ?></a> <b id="bo_v_act_good" class="font-R"></b> </span> <?php } ?> <?php if ($nogood_href) { ?> <span class="bo_v_act_gng"> <a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?><?php echo $nogood_href.'&'.$qstr ?><?php } ?>" id="nogood_button" class="bo_v_nogood">별로에요 <?php echo number_format($view['wr_nogood']) ?></a> <b id="bo_v_act_nogood" class="font-R"></b> </span> <?php } ?> </div> <?php } else { if($board['bo_use_good'] || $board['bo_use_nogood']) { ?> <div id="bo_v_act"> <?php if($board['bo_use_good']) { ?> <span class="bo_v_act_gng"> <a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?>javascript:void(0);<?php } ?>" class="bo_v_good">추천해요 <?php echo number_format($view['wr_good']) ?></a> <b id="bo_v_act_good" class="font-R"></b> </span> <?php } ?> <?php if($board['bo_use_nogood']) { ?> <span class="bo_v_act_gng"> <a href="<?php if(!$is_member) { ?>javascript:alert('로그인 후 이용하실 수 있습니다.');<?php } else { ?>javascript:void(0);<?php } ?>" class="bo_v_nogood">별로에요 <?php echo number_format($view['wr_nogood']) ?></a> <b id="bo_v_act_nogood" class="font-R"></b> </span> <?php } ?> </div> <?php } } ?>

해당 위소스를 이걸로 바꿔주시면되세요
css도 그냥 한곳에 다 넣었습니다

    
<!-- 좋아요 및 비추천 버튼 -->
<div id="bo_v_act">
    <?php 
    // 이미 좋아요를 눌렀는지 확인
    $is_liked = sql_fetch("SELECT COUNT(*) AS cnt FROM {$g5['board_good_table']} 
                           WHERE bo_table = '{$bo_table}' 
                           AND wr_id = '{$wr_id}' 
                           AND mb_id = '{$member['mb_id']}' 
                           AND bg_flag = 'good'")['cnt'] > 0;
    ?>
    
    <span class="bo_v_act_gng">
        <a href="javascript:void(0);" id="good_button" class="bo_v_good" style="position: relative;">
            <!-- 좋아요 알림 메시지 -->
            <div id="like_alert" class="like-alert">좋아요 감사합니다 ♡ </div>
            <span id="good_icon" class="heart-icon <?php echo $is_liked ? 'filled' : ''; ?>">
                <?php echo $is_liked ? "&#9829;" : "&#9825;"; ?>
            </span>
            <span id="good_count"><?php echo number_format($view['wr_good']); ?></span>
        </a>
        <b id="bo_v_act_good" class="font-R"></b>
    </span>
</div>
<!-- Like Button -->
<script>
// Like Button
$(document).ready(function() {
    $("#good_button").click(function() {
        // 로그인 여부 확인
        if (!<?php echo json_encode($is_member); ?>) {
            alert("로그인 후 이용하실 수 있습니다.");
            return;
        }

        $.post("good.php", {
            bo_table: "<?php echo $bo_table; ?>",
            wr_id: "<?php echo $wr_id; ?>",
            good: "good",
            js: "on"
        }, function(data) {
            var result = JSON.parse(data);
            if (result.error) {
                alert(result.error);
            } else {
                var goodIcon = $("#good_icon");
                var goodCount = $("#good_count");

                if (goodIcon.hasClass("filled")) {
                    goodIcon.removeClass("filled").html("&#9825;"); // 빈 하트
                    goodCount.text(parseInt(goodCount.text()) - 1);
                } else {
                    goodIcon.addClass("filled").html("&#9829;"); // 채워진 하트
                    goodCount.text(parseInt(goodCount.text()) + 1);

                    // 좋아요 알림 메시지 표시
                    $("#like_alert").fadeIn(300).delay(1500).fadeOut(300);
                }
            }
        });
    });
});

</script>

<style>
.heart-icon {
    color: gray;
    font-size: 20px;
    transition: color 0.3s ease;
}
.heart-icon.filled {
    color: pink;
}

/* 좋아요 알림 메시지 스타일 */
.like-alert {
    position: absolute;
    bottom: 100%; /* 하트 버튼 위에 표시 */
    left: 50%;
    transform: translate(-50%, -10px); /* 중앙 정렬과 약간 위쪽 여백 */
    background-color: pink;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: none;
    white-space: nowrap; /* 텍스트가 한 줄로 유지되도록 설정 */
}

</style>