WooCommerce에서 헤더 장바구니 항목 수를 Ajaxify하는 방법: 단계별 가이드

WooCommerce의 Ajaxify 헤더 장바구니 항목 수

소개

페이지를 다시 로드하지 않고 헤더 장바구니 항목 수를 업데이트하면 사용자 경험이 향상됩니다. 문제와 해결 방법을 자세히 살펴보겠습니다.

문제 설명

목표는 jQuery를 사용하여 서버에서 전체 장바구니 항목 수를 동적으로 가져오는 것입니다. 그러나 현재 구현은 여러 항목을 동시에 추가하는 경우 어려움을 겪습니다.

해결 방법

1. 전용 WooCommerce 후크 사용

수동으로 다시 로드하는 대신 Ajax에서 제공하는 woocommerce_add_to_cart_fragments 액션 후크를 활용하세요.

• 고유한 ID 또는 클래스를 사용하여 HTML에 장바구니 수를 삽입하세요. 예를 들어
  ...
  .
• functions.php에 다음 코드를 추가하세요.

<code class="php">add_filter('woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments) {
    ob_start();
    $items_count = WC()->cart->get_cart_contents_count();
    ?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : ' '; ?></div>
    <?php
    $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}</code>

2. jQuery를 사용하여 강제 새로 고침

필요한 경우 위임된 이벤트를 사용하여 개수를 강제로 새로 고칩니다.

<code class="javascript">$(document.body).trigger('wc_fragment_refresh');</code>

또는

<code class="javascript">$(document.body).trigger('wc_fragments_refreshed');</code>

이점

• 불필요한 새로고침을 피하세요.
• 상품을 추가하거나 삭제할 때마다 장바구니 수를 동적으로 업데이트하세요.
• 실시간 피드백을 제공하여 사용자 경험을 향상하세요.

위 내용은 WooCommerce에서 헤더 장바구니 항목 수를 Ajaxify하는 방법: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!