Ajaxify кол-во товаров в Woocommerce

Question

Я создаю собственную интегрированную тему woocommerce для WordPress.

У меня есть блоб в верхней части, который отображает общее количество товаров в корзине. Я хочу обновить этот блоб с помощью Jquery (без перезагрузки страницы). Мне удалось увеличить количество товаров, получив текущий Количество в BLOB и увеличивая его на +1 для каждого клика, проблема заключается в том, что добавление в корзину имеет возможность выбрать количество элементов, которые вы хотите добавить в корзину. Поэтому, если я выберу 3 элемента и нажму кнопку, капля увеличится только на один.

Я могу создать способ получения количества элементов, добавляемых из интерфейса, но я думаю, что это не нужно. Я хочу, чтобы с помощью 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);
    });
}); 

Комментируемые строки - это те, которые я использовал ранее, чтобы добавить общую сумму корзины, получив текущий номер корзины из внешнего интерфейса.

Любая помощь будет оценена. Заранее спасибо!

Answer 1

Вы не должны использовать перезагрузку для обновления счетчика содержимого корзины ... Вместо этого вы должны использовать выделенную woocommerce_add_to_cart_fragments ловушку действий, которая Ajax powered .

1) Обновляемый HTML-код: Итак, сначала в файле header.php вашей темы вам нужно вставить количество корзин в определенный HTML-тег с определенным уникальным идентификатором (или классом), например что-то вроде:

?>
    <div id="mini-cart-count"></div>
<?php

или

echo '<div id="mini-cart-count"></div>';

2) Код:

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

если вы используете класс в своем HTML-теге, вы замените ['#mini-cart-count'] на ['.mini-cart-count']. Этот хук также используется для обновления содержимого мини-корзины.

Код помещается в файл function.php вашей активной дочерней темы (или темы) или также в любой файл плагина.

Уже несколько лет global $woocommerce; + $woocommerce->cart устарел и заменен на WC()->cart для доступа к объекту корзины WooCommerce.

---

Если вам нужен jQuery для принудительного обновления этого количества, вы можете попробовать wc_fragment_refresh или wc_fragments_refreshed делегированные события, например:

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

или

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

Answer 2

Для тех, кто хочет правильную реализацию ajax, вот путь.

в functions.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 или в другое действие jquery.

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

Answer 3

Я раньше не пользовался woocommerce, но один довольно простой вариант, когда вы говорите в своем посте:

Когда я захожу на эту страницу, она отображает итоги текущего элемента, но я не могу получить эти данные из JQuery

... будет использовать пользовательскую переменную JavaScript для отображения, а затем просто вызывать методы обновления PHP для добавления товаров в корзину с помощью AJAX (что я не показываю ниже, поскольку вы не предоставили этот код ).

<?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, чтобы связываться с данными на стороне клиента приложения, а затем обновляю отображаемый текст по мере необходимости.