Ajax를 사용하여 WooCommerce 헤더 장바구니 항목 수를 동적으로 업데이트하는 방법은 무엇입니까?

WooCommerce의 Ajaxify 헤더 카트 항목 수

개요:

WooCommerce에서 추가 시 헤더 카트의 항목 수 업데이트 /제거 항목은 Ajax를 사용하여 페이지를 다시 로드하지 않고도 수행할 수 있습니다.

해결책:

1. 장바구니 수에 대한 HTML 마크업:

테마의 header.php에서 다음 코드를 추가하여 고유 ID 또는 클래스가 있는 HTML 태그에 장바구니 수를 포함합니다.

<code class="html"><?php 
$items_count = WC()->cart->get_cart_contents_count(); 
?>
<div id="mini-cart-count"><?php echo $items_count ? $items_count : ' '; ?></div></code>

2. 코드 구현:

다음으로 이 코드를 function.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>

이 후크는 "mini-cart-count" 요소를 다음과 같이 업데이트합니다. 장바구니에 상품을 추가한 후 업데이트된 개수.

3. 선택적 jQuery 트리거:

jQuery를 통해 카운트 업데이트를 강제로 수행하려면 다음 위임 이벤트 중 하나를 사용하세요.

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

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

위 내용은 Ajax를 사용하여 WooCommerce 헤더 장바구니 항목 수를 동적으로 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!