将产品添加到购物车后如何更新微型购物车

我正在WooCommerce主题实现上, 我已经使用jquery设计了迷你购物车侧面板, 问题是当用户单击商店页面上的添加到购物车时其显示产品已添加, 页面未加载以及在minicart中添加的商品未显示我需要刷新在页面上查看添加的项目。请帮忙。

我是设计师, 我从事WordPress主题实现工作WooCommerce主题实现对我来说是新的。因此, 请向我提供解决方案。

#1

首先, 你可以在function.php上创建简码

function custom_mini_cart() { 
    echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
    echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
    echo '<div class="basket-item-count" style="display: inline;">';
        echo '<span class="cart-items-count count">';
            echo WC()->cart->get_cart_contents_count();
        echo '</span>';
    echo '</div>';
    echo '</a>';
    echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
        echo '<li> <div class="widget_shopping_cart_content">';
                  woocommerce_mini_cart();
            echo '</div></li></ul>';

      }
       add_shortcode( '[custom-techno-mini-cart]', 'custom_mini_cart' );

之后, 请在页面或自定义模板页面中的任何位置调用简码。

像这样,

<?php echo do_shortcode(['custom-techno-mini-cart']); ?>

现在, 你可以按照此处提到的要求获取布局。

另外, 你可以在页面的任何位置添加此功能,

<?php echo woocommerce_mini_cart(); ?>

祝好运 ！

#2

你可以使用：

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

在你点击添加到购物车功能。

如果使用ajax添加到购物车, 请按以下方式使用它：

success: function( response ) {
  jQuery(document.body).trigger('wc_fragment_refresh');                              
}

或在添加到购物车后的PHP脚本中：

WC()->cart->add_to_cart( $_POST['product_id'], $_POST['quantity'], $_POST['variation_id'], array(), array());

<script> 
  jQuery(document.body).trigger('wc_fragment_refresh');
</script>