WooCommerce 单一产品描述自动阅读更多功能

Question

我想用“阅读更多”/“阅读更少”切换来截断冗长的产品说明。我的描述中有三段文字，我想在第一段的第一句或第二句中间使用“...阅读更多”链接来截断描述。

我在我的子主题functions.php文件中尝试了下面的代码，但它只截断了第一段，并且仍然显示其下面剩余的两段文本：

add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description' );

function custom_woo_prod_description() {
wc_enqueue_js('
var show_char = 400;
var ellipses = "… ";
var description_content = $(".woocommerce-Tabs-panel--description").html();
if (description_content.length > show_char) {
var a = description_content.substring(0, show_char);
var html = "" + a + ellipses + "Read more" + content + "Read less";
$(".woocommerce-Tabs-panel--description").html(html);
}
$(".read-more").click(function(e) {
e.preventDefault();
$(".woocommerce-Tabs-panel--description .truncated").toggle();
});
$(".read-less").click(function(e) {
e.preventDefault();
$(".woocommerce-Tabs-panel--description .truncated").toggle();
});
');
}

您能否建议进行编辑，以便也截断其他段落？

发布的代码仅截断第一段。

Answer 1

您可以使用以下内容代替：

add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description' );
function custom_woo_prod_description()
{
    $chars_length = 400; // Number of desired characters length
    $css_selector = '.woocommerce-Tabs-panel--description'; // Targeted CSS selector
    // Read more or less buttons:
    $more_link    = sprintf( '… <a class="read" data-id="more">%s</a>', __('Read more', 'woocommerce') );
    $less_link    = sprintf( '<a class="read" data-id="less">%s</a>', __('Read less', 'woocommerce') );

    wc_enqueue_js( "const n = {$chars_length}, s = '{$css_selector}', d = $(s).html();

    if (d.length > n) {
        const t = d.substr(0, n), m = t+'{$more_link}', l = d+'{$less_link}';

        $(s).html(m);

        $(document.body).on('click', s+' .read', function(e) {
            e.preventDefault();

            if ( $(this).data('id') === 'more' ) {
                $(s).html(l);
            } else {
                $(s).html(m);
            }
        });
    }" );
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并工作。