首页 文章

Woocommerce中的Ajaxify Headers 购物车项目数量

提问于
浏览 次
1

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

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

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

到目前为止我所做的是创建一个reloadCart.php文件，回显购物车总数，这里是代码

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

当我访问这个页面时，它回显了当前的项目总数，但是我无法从jquery获取这些数据，自从我上次使用AJAX以来已经有一段时间我也没有在Web项目上工作很长时间，但是我记得，我正在制作的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);
    });
});

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

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

php jquery ajax wordpress woocommerce

3 回答

  • 0

    You should not use any reload 更新购物车内容计数...而应使用 Ajax powered 专用 woocommerce_add_to_cart_fragments 动作挂钩 .

    1) The HTML to be refreshed: 首先，在主题的 header.php 文件中，您应该将购物车计数嵌入到具有已定义的唯一ID（或类）的特定html标记中，例如：

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

    要么：

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

    2) The code:

    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文件中，或者放在任何插件文件中 .

    几年全球$ woocommerce; $ woocommerce->购物车已过时，并由WC（） - >购物车取代，以访问WooCommerce购物车对象 .

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

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

    要么：

    $(document.body).trigger('wc_fragments_refreshed');
    回复于
  • 5

    我之前没有使用过woocommerce，但是当你在帖子中说时，有一个非常简单的选择：

    When I visit this page it echos the current item totals, but I cant get this data from 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变量，以便混淆应用程序客户端上的数据，然后根据需要更新显示文本 .

    回复于
  • 0

    对于任何想要正确执行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);
});
    回复于

相关问题