单击按钮时使用 AJAX 加载 WooCommerce 产品详细说明？

Question

我正在使用 WooCommerce 和 Elementor 开发一个 WordPress 网站。我试图在单击按钮时使用 AJAX 动态加载 WooCommerce 产品的长描述。但是，我面临一个问题，即单击按钮后内容无法加载。

PHP（加载更多内容.php）：

/*
Plugin Name: Load More Content
Description: Dynamically loads the WooCommerce product long description on button click.
Version: 1.0
Author: [Your Name]
*/

function load_more_content_scripts() {
    if (is_product() && get_the_ID() == 9020577) {
        wp_enqueue_script('load-more-content-js', plugin_dir_url(__FILE__) . 'load-more-content.js', array('jquery'), '1.0', true);
        wp_enqueue_style('load-more-content-css', plugin_dir_url(__FILE__) . 'load-more-content.css');
        
        wp_localize_script('load-more-content-js', 'load_more_content', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'post_id' => get_the_ID()
        ));
    }
}
add_action('wp_enqueue_scripts', 'load_more_content_scripts');

function add_load_more_button() {
    if (is_product() && get_the_ID() == 9020577) {
        echo '<button id="loadMoreBtn">Load More</button>';
    }
}
add_action('woocommerce_before_single_product', 'add_load_more_button');

function load_product_description() {
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    if ($post_id) {
        $product = wc_get_product($post_id);
        if ($product) {
            echo $product->get_description();
        }
    }
    die();
}
add_action('wp_ajax_load_product_description', 'load_product_description');
add_action('wp_ajax_nopriv_load_product_description', 'load_product_description');

JavaScript（加载更多内容.js）：

jQuery(document).ready(function($) {
    $('#loadMoreBtn').on('click', function() {
        $.ajax({
            url: load_more_content.ajax_url,
            type: 'POST',
            data: {
                action: 'load_product_description',
                post_id: load_more_content.post_id
            },
            success: function(response) {
                $('.woocommerce.page-container').html(response);
                $('#loadMoreBtn').hide();
            }
        });
    });
});

CSS（加载更多内容.css）：

.woocommerce.page-container {
    display: none;
}

#loadMoreBtn {
    display: block;
}

当我单击“加载更多”按钮时，它只显示“描述”和“评论”选项卡，但不会加载产品的实际长描述内容。

有人遇到过类似的问题或者可以提供有关可能出现问题的指导吗？任何帮助将不胜感激！

Answer 1

首先将选项卡模板 single-product/tabs/description.php 复制到您的主题中并注释

the_content();

并添加 div 例如

<div class="ajax-product-content"></div>

那么你的函数应该如下所示。

function add_load_more_button() {
    echo '<button id="loadMoreBtn">Load More</button>';
}
add_action('woocommerce_before_single_product', 'add_load_more_button');

function load_product_description() {
    if (isset($_POST['post_id'])) {
        $post_id = intval($_POST['post_id']); // Sanitize the input.
        $product_description = get_post_field('post_content', $post_id); 

        if ($product_description) {
            echo $product_description; // Return the product description.
        } else {
            echo 'Product description not found.';
        }
    }
    die();
}
add_action('wp_ajax_load_product_description', 'load_product_description');
add_action('wp_ajax_nopriv_load_product_description', 'load_product_description');

jquery 应该是这样的

  jQuery(document).ready(function($) {
    $('#loadMoreBtn').on('click', function() {
        $.ajax({
            url: load_more_content.ajaxurl,
            type: 'POST',
            data: {
                action: 'load_product_description',
                post_id: load_more_content.post_id
            },
            success: function(response) {
                $('.ajax-product-content').html(response);
                $('#loadMoreBtn').hide();
            }
        });
    });
  });