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个项目并单击按钮，则斑点仅增加1.

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文件中，您需要将购物车计数嵌入具有定义的唯一ID(或类)的特定html标签中. ，例如:

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:

?>
    <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'].该钩子还用于刷新迷你购物车中的内容.

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屋！