Ajax를 사용하여 WooCommerce 헤더 장바구니 항목 수를 새로 고치는 방법은 무엇입니까?

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

WooCommerce에서는 헤더에 장바구니에 있는 항목 수를 표시하는 것이 사용자 탐색에 필수적입니다. 이러한 항목이 변경(추가 또는 제거)되면 JavaScript(특히 Ajax)를 사용하여 페이지를 다시 로드하지 않고 장바구니 수를 업데이트하는 것이 바람직합니다.

Ajax를 사용하여 PHP에서 장바구니 수 얻기

장바구니 수를 얻으려면 Ajax를 사용하여 PHP에서 현재 카트 수를 가져오려면 이 수를 반영하는 reloadCart.php와 같은 전용 파일을 생성해야 합니다.

<code class="php"><?php
require('../../../wp-blog-header.php');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?></code>

다음으로 JavaScript 코드에서 다음을 사용하여 이 수를 검색할 수 있습니다. $.get() 함수:

<code class="js">$(".ajax_add_to_cart").click(function () {
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        console.log("Cart Count: " + data);
    });
});</code>

그러나 이 목적으로 $.get()을 사용하는 것은 WooCommerce에서 권장되는 접근 방식이 아닙니다.

woocommerce_add_to_cart_fragments 액션 후크 활용

WooCommerce는 Ajax에서 장바구니 콘텐츠 수를 업데이트하기 위해 특별히 설계된 전용 woocommerce_add_to_cart_fragments 액션 후크를 제공합니다.

1. 액션 후크 등록:

   • 테마의 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>

2. 새로고침으로 HTML 업데이트:

   • header.php 파일에서 위 코드에 할당된 미니 카트 개수 ID를 사용하도록 카트 개수를 표시하는 HTML을 업데이트하세요.

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

이제 ajax_add_to_cart 버튼을 클릭하면 woocommerce_add_to_cart_fragments 액션 후크가 새로 고친 개수로 #mini-cart-count HTML 요소를 자동으로 업데이트합니다.

추가 정보

• WC()->cart->get_cart_contents_count() 메소드는 더 이상 사용되지 않는 $woocommerce->cart->get_cart_contents_count()를 대체합니다.

• jQuery를 사용하여 카운트를 강제로 새로 고치려면 다음을 사용하세요. wc_fragment_refresh 또는 wc_fragments_refreshed 위임 이벤트:

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

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