添加到购物车页面刷新 Sumit WooCommerce

本文将介绍如何在 WooCommerce 中，使用 Sumit 在商品添加到购物车时自动刷新页面，让用户更直观地看到购物车的变化。

前置条件

• 已安装 WooCommerce 插件
• 已安装 Sumit 插件
• 了解基本的 PHP 和 JavaScript

实现步骤

1. 打开 WooCommerce 的主题文件 functions.php 并在文件末尾添加以下代码：

add_action( 'wp_ajax_nopriv_sumit_woocommerce_refresh_cart', 'sumit_woocommerce_refresh_cart' );
add_action( 'wp_ajax_sumit_woocommerce_refresh_cart', 'sumit_woocommerce_refresh_cart' );

function sumit_woocommerce_refresh_cart() {
    ob_start();

    do_action( 'woocommerce_before_cart' );

    include plugin_dir_path( __FILE__ ) . 'woocommerce/cart/cart.php';

    do_action( 'woocommerce_after_cart' );

    $html = ob_get_clean();

    wp_send_json_success( array(
        'cart_html' => $html,
    ) );
}

2. 打开主题的 JavaScript 文件，例如 js/custom.js 并添加以下代码：

function sumitAddToCartOnSuccess(responseText, statusText, xhr, $form)  {
    var $fragment_refresh = {
        url: wc_cart_fragments_params.ajax_url,
        type: 'POST',
        data: { action: 'sumit_woocommerce_refresh_cart' },
        success: function( data ) {
            if ( data && data.fragments ) {
                jQuery.each( data.fragments, function( key, value ) {
                    jQuery( key ).replaceWith( value );
                });
            }
        }
    };

    $.ajax( $fragment_refresh );
}

3. 在添加商品到购物车的表单上添加以下代码：

<form class="cart" method="post" enctype="multipart/form-data" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" data-sumit-success-action="sumitAddToCartOnSuccess">

这样，在商品添加到购物车时，会自动调用 sumitAddToCartOnSuccess 函数，并用 AJAX 请求获取新的购物车 HTML，并更新页面。

总结

使用 Sumit 和 WooCommerce，可以方便地实现商品添加到购物车后自动刷新页面，让用户更直观地看到购物车的变化。