Woocommerce 中的 Ajaxify 标题购物车项目计数 [英] Ajaxify header cart items count in Woocommerce

问题描述

我正在为 wordpress 创建一个自定义的 woocommerce 集成主题.

I'm creating a custom woocommerce integrated theme for wordpress.

我在顶部有一个 blob，显示购物车中的商品总数，我想使用 Jquery 更新此 blob(无需重新加载页面)我能够通过获取当前商品的数量来增加商品数量blob 中的数字并为每次点击增加 +1，问题是添加到购物车有一个选项来选择要添加到购物车的项目数量.因此，如果我选择 3 个项目并单击按钮，blob 只会增加一个.

I have a blob on the top that displays the total number of items in the cart, I want to update this blob using Jquery (w/o reloading the page) I was able to increase the number of items by getting the current number in the blob and increasing it by +1 for each click, the problem is the add to cart has an option to select the number of items you want to add to the cart. So if I select 3 items and click the button the blob only increases by one.

我可以创建一种方法来获取从前端添加的项目数量，但我认为这是不必要的.我希望能够使用 jquery 从 PHP 会话中获取总数，以便在每次单击添加项目或删除项目时，我都会从服务器动态获取当前数字.

I can create a way to get the number of items being added from the front-end but I think it's unnecessary. I want to be able to get the total number from PHP sessions using jquery so that on every click of add item or remove item I'll get the current number dynamically from the server.

到目前为止我所做的是创建一个 reloadCart.php 文件，该文件与购物车总数相呼应，这是代码

What I have done so far is to create a reloadCart.php file that echos the cart total, here's the code

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

当我访问此页面时，它会显示当前的项目总数，但是我无法从 jquery 中获取此数据，自从我上次使用 AJAX 以来已经有一段时间了，而且我已经很长时间没有从事 Web 项目了，但是我用的是什么请记住，我正在执行的 AJAX 调用是正确的.

When I visit this page it echos the current item totals, but I cant get this data from jquery, it's been sometime since I last used AJAX also I have not worked on web projects for a very long time, but with what I remember, the AJAX call that I'm making is right.

我尝试使用 jquery 的 get() 和 post() 函数以及普通的 ajax() 函数，但似乎没有任何效果.有人可以帮忙吗?

I have tried using the get() and post() functions of jquery as well as the normal ajax() function, but nothing seems to work. Can someone please help?

$(".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);
    });
}); 

注释的行是我之前使用的行，通过从前端获取当前购物车编号来添加购物车总数.

The lines that are commented are the ones that I was using previously, to add the cart total by getting the current cart number from the front-end.

任何帮助将不胜感激.提前致谢！

Any help would be appreciated. Thanks in advance!

推荐答案

您不应该使用任何重新加载来更新购物车内容计数...相反，您应该使用专用的 woocommerce_add_to_cart_fragments Ajax 驱动的动作钩子.

You should not use any reload to update the cart content count… Instead you should use the dedicated woocommerce_add_to_cart_fragments action hook that is Ajax powered.

1) 要刷新的 HTML: 因此，首先在您主题的 header.php 文件中，您需要将购物车计数嵌入到具有定义的特定 html 标记中唯一 ID(或类)，例如:

1) The HTML to be refreshed: So first in your theme's header.php file you should need to embed the cart count in a specific html tag with a defined unique ID (or a class), for example something like:

$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']>.这个钩子也用来刷新迷你购物车的内容.

if you use a class in your html Tag, you will replace ['#mini-cart-count'] by ['.mini-cart-count']. This hook is also used to refresh the mini-cart content.

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

几年以来global $woocommerce; + $woocommerce->cart 已经过时并被WC()->cart 访问 WooCommerce 购物车对象.

Since few years global $woocommerce; + $woocommerce->cart is outdated and replaced by WC()->cart to access WooCommerce cart object.

---

如果您需要 jQuery 来强制刷新该计数，您可以尝试 wc_fragment_refresh 或 wc_fragments_refreshed 委托事件，例如:

---

If you need jQuery to force refresh that count, you can try wc_fragment_refresh or wc_fragments_refreshed delegated events, like:

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

或:

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

这篇关于Woocommerce 中的 Ajaxify 标题购物车项目计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！