Woocommerce에서 Ajaxify 헤더 카트 항목 수

Woocommerce에서 Ajaxify 헤더 카트 항목 수

워드프레스를 위한 맞춤형 woocommerce 통합 테마를 만들고 있습니다.

상단에는 카트의 총 항목 수를 표시하는 BLOB가 있습니다.Jquery를 사용하여 이 BLOB를 업데이트하고 싶습니다(페이지 새로고침 없음). BLOB에 현재 수를 가져오고 클릭할 때마다 +1을 늘리면 항목 수를 늘릴 수 있습니다.문제는 카트 추가에 wan 항목 수를 선택하는 옵션이 있다는 것입니다.카트에 추가할 수 있습니다.그래서 3개의 아이템을 선택하고 버튼을 클릭하면 blob은 1개만 증가합니다.

프런트 엔드에서 추가할 아이템의 수를 얻을 수 있는 방법을 만들 수 있지만, 불필요하다고 생각합니다.jquery를 사용하여 PHP 세션에서 총 수를 얻을 수 있으면 아이템을 추가하거나 삭제할 때마다 서버에서 현재 수를 동적으로 가져올 수 있습니다.

지금까지 제가 한 일은 카트 전체를 에코하는 reloadCart.php 파일을 만드는 것입니다.이 코드는 다음과 같습니다.

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

이 페이지를 방문하면 현재 아이템의 합계가 반영되지만, jquery에서 데이터를 얻을 수 없습니다.AJAX를 마지막으로 사용한지 꽤 되었기 때문에 웹 프로젝트도 오랫동안 하지 않았습니다만, 제가 기억하는 바로는 AJAX의 콜이 맞았습니다.

jquery의 get() 및 post() 함수와 일반 ajax() 함수를 사용해보았지만 아무 것도 작동하지 않는 것 같습니다.누가 좀 도와줄래요?

$(".ajax_add_to_cart").click(function () {
   /*$("#bag-total").html(function () {
        var bagTotal = parseInt($(this).html());
        return ++bagTotal;
    });*/
    alert('clicked');
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        alert("Data: " + data);
    });
}); 

코멘트가 되어 있는 행은, 프런트 엔드에서 현재의 카트 번호를 취득하는 것으로, 카트 합계를 더하는 것입니다.

어떤 도움이라도 주시면 감사하겠습니다.잘 부탁드립니다!

새로고침 기능을 사용하여 카트 내용 수를 업데이트하지 마십시오.대신 전용을 사용해 주세요.woocommerce_add_to_cart_fragmentsAjax 전원으로 동작 후크입니다.

1) 갱신할 HTML: 먼저 테마에서header.php다음과 같이 정의된 고유 ID(또는 클래스)를 가진 특정 html 태그에 카트 수를 포함해야 합니다.

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

또는 다음과 같이 입력합니다.

$items_count = WC()->cart->get_cart_contents_count();

echo '<div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>';

2) 코드:

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 : '&nbsp;'; ?></div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}

태그에서 html이 됩니다.['#mini-cart-count']타타에 ['.mini-cart-count']이 훅은 미니 카트 콘텐츠를 새로 고치는 데도 사용됩니다.

코드가 기능합니다.php 파일 또는 임의의 플러그인 파일에 있는 활성 자식 테마(또는 테마)입니다.

몇 년 전부터global $woocommerce;+$woocommerce->cart는 오래된 것으로 WooCommerce 카트 오브젝트에 액세스하기 위해 로 대체되었습니다.

---

jQuery를 사용하여 해당 카운트를 강제로 새로 고쳐야 할 수 있습니다.wc_fragment_refresh또는wc_fragments_refreshed위임된 이벤트:

$(document.body).trigger('wc_fragment_refresh');

또는 다음과 같이 입력합니다.

$(document.body).trigger('wc_fragments_refreshed');

적절한 Ajax 구현을 원하는 사용자를 위한 방법은 다음과 같습니다.

기능하고 있습니다.php

add_action('wp_ajax_cart_count_retriever', 'cart_count_retriever');
add_action('wp_ajax_nopriv_cart_count_retriever', 'cart_count_retriever');
function cart_count_retriever() {
    global $wpdb;
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

스크립트 파일(스크립트 파일에 문의하여 스크립트에 Ajax 객체를 전달한 경우)이 블록은 또 다른 블록에 넣을 필요가 있습니다.setInterval아니면 다른 액션에 대해서도요.

var data = {
  'action': 'cart_count_retriever'
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
  alert('Got this from the server: ' + response);
});

인header.php또는 카운트를 표시할 위치

---

<?php $items_count = WC()->cart->get_cart_contents_count();
  echo $items_count; //use this function for print the value of cart items count
?>

저는 woocommerce를 사용해 본 적이 없지만, 당신이 투고에서 다음과 같이 말할 때 매우 간단한 옵션 하나를 사용합니다.

이 페이지를 방문하면 현재 아이템의 합계가 반영되지만 JQuery에서 이 데이터를 얻을 수 없습니다.

디스플레이에 사용자측 JavaScript 변수를 사용하고 AJAX를 사용하여 아이템을 추가하기 위한 PHP 업데이트 메서드를 호출하는 것입니다(아래는 코드를 제공하지 않았기 때문에 표시하지 않습니다).

<?php
    //hardcoded value for $woocommerce->cart->get_cart_contents_count()
    $woocommerce = 59;
?>
<button class="ajax_add_to_cart">Add to cart</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //user sided variable for PHP value
    var total = parseInt($(".totalCost").text()); 
    $(".ajax_add_to_cart").click(function(){
        total++;                     //add to cart
        $(".totalCost").text(total); //update
    });
});
</script>

<p class="totalCost">
    <?php echo json_encode($woocommerce); ?>
</p>

이 스니펫은 http://phpfiddle.org/ 에서 복사하여 테스트할 수 있습니다.

기본적으로 위의 코드에서는 PHP 값을 페이지 로드 시 단락 텍스트로 설정하고 그 값을 JS 변수로 읽어 응용 프로그램의 클라이언트 측 데이터를 조작하고 필요에 따라 표시 텍스트를 업데이트합니다.

function woocommerce_header_add_to_cart_fragment( $fragments ) {
    
    $fragments['li.cart-open'] = '<li class="cart-open"><a href="javascript:void(0)" class="cart" title="Cart"> 
                         <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" class="svg-large"><switch><g><path d="M68 24v-4C68 8.954 59.046 0 48 0S28 8.954 28 20v4H12v60c0 6.63 5.37 12 12 12h48c6.63 0 12-5.37 12-12V24H68zm-32-4c0-6.627 5.373-12 12-12s12 5.373 12 12v4H36v-4zm40 64c0 2.21-1.79 4-4 4H24c-2.21 0-4-1.79-4-4V32h56v52z"/></g></switch></svg>
                         <i>'.WC()->cart->get_cart_contents_count().'</i>
                         </a></li>';
    
    return $fragments;
}

언급URL : https://stackoverflow.com/questions/51123903/ajaxify-header-cart-items-count-in-woocommerce