워드프레스 우커머스에서 실시간으로 업데이트되는 장바구니 수량 숏코드 만들기

워드프레스로 쇼핑몰을 운영하다 보면 사용자에게 현재 장바구니에 담긴 상품 수량을 보여주고 싶은 경우가 많습니다. 하지만 기본 우커머스 기능만으로는 장바구니에 상품을 추가해도 페이지를 새로고침해야만 수량이 업데이트되는 문제가 있죠.

오늘은 AJAX를 활용해 실시간으로 자동 업데이트되는 장바구니 수량 숏코드를 만드는 방법을 알려드리겠습니다.

🤔 왜 기본 숏코드로는 안 될까?

일반적인 우커머스 장바구니 수량 숏코드는 이렇게 만들 수 있습니다:

function basic_cart_count_shortcode() {
    if (function_exists('WC')) {
        return WC()->cart->get_cart_contents_count();
    }
    return 0;
}
add_shortcode('cart_count', 'basic_cart_count_shortcode');

하지만 이 방법의 문제점은:

  • ❌ 페이지 로딩 시점의 수량만 표시
  • ❌ 상품 추가/삭제 후 수동으로 새로고침 필요
  • ❌ 사용자 경험이 좋지 않음

✨ AJAX 자동 업데이트 숏코드 만들기

1단계: 개선된 숏코드 함수 작성

functions.php 파일에 다음 코드를 추가합니다:

/**
 * AJAX로 실시간 업데이트되는 장바구니 수량 숏코드
 */
function ajax_cart_count_shortcode($atts) {
    $atts = shortcode_atts(array(
        'class' => 'ajax-cart-count',
        'show_zero' => 'yes'
    ), $atts);
    
    if (function_exists('WC')) {
        $count = WC()->cart->get_cart_contents_count();
        
        // show_zero가 'no'이고 수량이 0이면 숨김
        $style = ($atts['show_zero'] === 'no' && $count == 0) ? 'style="display:none;"' : '';
        
        return '<span class="' . esc_attr($atts['class']) . '" data-cart-count ' . $style . '>' . $count . '</span>';
    }
    return '<span class="' . esc_attr($atts['class']) . '" data-cart-count>0</span>';
}
add_shortcode('ajax_cart_count', 'ajax_cart_count_shortcode');

2단계: AJAX 핸들러 추가

같은 functions.php 파일에 계속 추가합니다:

/**
 * 장바구니 수량을 반환하는 AJAX 핸들러
 */
function get_cart_count_ajax() {
    if (function_exists('WC')) {
        $count = WC()->cart->get_cart_contents_count();
        echo $count;
    } else {
        echo '0';
    }
    wp_die();
}
add_action('wp_ajax_get_cart_count', 'get_cart_count_ajax');
add_action('wp_ajax_nopriv_get_cart_count', 'get_cart_count_ajax');

3단계: JavaScript 자동 업데이트 스크립트

마지막으로 자동 업데이트 기능을 추가합니다:

/**
 * 장바구니 수량 자동 업데이트 스크립트
 */
function enqueue_cart_count_script() {
    if (function_exists('WC')) {
        wp_enqueue_script('jquery');
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function($) {
                function updateCartCount() {
                    $.ajax({
                        url: "' . admin_url('admin-ajax.php') . '",
                        type: "POST",
                        data: {
                            action: "get_cart_count"
                        },
                        success: function(response) {
                            var count = parseInt(response);
                            var $cartCount = $("[data-cart-count]");
                            
                            $cartCount.text(count);
                            
                            // 수량이 0이면 숨김 (show_zero="no"인 경우)
                            $cartCount.each(function() {
                                if ($(this).hasClass("hide-zero") && count === 0) {
                                    $(this).hide();
                                } else {
                                    $(this).show();
                                }
                            });
                        }
                    });
                }
                
                // WooCommerce 이벤트에 연결하여 자동 업데이트
                $(document.body).on("added_to_cart removed_from_cart updated_cart_totals", function() {
                    updateCartCount();
                });
                
                // 장바구니 페이지에서 수량 변경 시 업데이트
                $(document).on("change", "input.qty", function() {
                    setTimeout(updateCartCount, 1000);
                });
                
                // 페이지 로드 시 한 번 업데이트
                updateCartCount();
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_cart_count_script');

🎨 스타일링 추가하기

장바구니 수량을 예쁘게 꾸미려면 CSS를 추가하세요:

.ajax-cart-count {
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    display: inline-block;
    line-height: 1;
}

.ajax-cart-count.badge-style {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px;
    padding: 2px 6px;
}

🚀 사용 방법

기본 사용법

[ajax_cart_count]

옵션과 함께 사용

<!-- 커스텀 클래스 적용 -->

[ajax_cart_count class=”my-custom-cart-counter”]

<!– 수량이 0일 때 숨기기 –>

[ajax_cart_count show_zero=”no” class=”hide-zero”]

<!– 배지 스타일로 사용 –>

[ajax_cart_count class=”ajax-cart-count badge-style”]

메뉴나 헤더에서 사용 예시

<a href="/cart/">
    <i class="fa fa-shopping-cart"></i>
    장바구니 ([ajax_cart_count])
</a>

💡 활용 팁

1. 조건부 표시

// 수량이 있을 때만 표시하고 싶다면

[ajax_cart_count show_zero=”no”]

2. 아이콘과 함께 사용

<div class="cart-widget">
    <i class="fas fa-shopping-cart"></i>
    <span class="cart-text">장바구니</span>
    <span class="cart-badge">[ajax_cart_count]</span>
</div>

3. 엘리멘터에서 사용

엘리멘터 Text 위젯이나 HTML 위젯에서도 숏코드를 그대로 사용할 수 있습니다.

⚡ 성능 최적화 팁

1. 캐싱 고려사항

// 캐싱 플러그인 사용 시 AJAX 요청은 캐시에서 제외
function exclude_cart_ajax_from_cache($headers) {
    if (isset($_POST['action']) && $_POST['action'] === 'get_cart_count') {
        $headers['Cache-Control'] = 'no-cache, no-store, must-revalidate';
    }
    return $headers;
}
add_filter('wp_headers', 'exclude_cart_ajax_from_cache');

2. 디바운싱으로 요청 최적화

// 연속된 요청을 방지하는 디바운스 함수
var updateTimeout;
function debouncedUpdateCartCount() {
    clearTimeout(updateTimeout);
    updateTimeout = setTimeout(updateCartCount, 300);
}

🔧 문제 해결

숏코드가 작동하지 않을 때

  1. 함수 충돌 확인: 다른 플러그인과 함수명이 겹치지 않는지 확인
  2. WooCommerce 활성화: 우커머스가 제대로 설치되어 있는지 확인
  3. jQuery 로딩: 테마에서 jQuery가 제대로 로딩되는지 확인

AJAX가 작동하지 않을 때

  1. 콘솔 에러 확인: 브라우저 개발자 도구에서 JavaScript 에러 확인
  2. AJAX URL 확인: admin-ajax.php 경로가 올바른지 확인
  3. 권한 설정: wp_ajax_nopriv_ 액션이 제대로 등록되었는지 확인

🎯 마무리

이제 여러분의 워드프레스 쇼핑몰에서 실시간으로 업데이트되는 장바구니 수량을 보여줄 수 있습니다!

이 방법의 장점:

  • ✅ 실시간 자동 업데이트
  • ✅ 사용자 경험 향상
  • ✅ 어디서든 숏코드로 간편 사용
  • ✅ 커스터마이징 가능

고객들이 장바구니에 상품을 추가할 때마다 즉시 수량이 업데이트되는 것을 보고 더욱 만족스러운 쇼핑 경험을 할 수 있을 것입니다.

코드 구현 중 궁금한 점이 있으시면 댓글로 남겨주세요! 😊

참고 자료:

공유하기

관련 게시물

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다