我想用“阅读更多”/“阅读更少”切换来截断冗长的产品说明。我的描述中有三段文字,我想在第一段的第一句或第二句中间使用“...阅读更多”链接来截断描述。
我在我的子主题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();
});
');
}
您能否建议进行编辑,以便也截断其他段落?
发布的代码仅截断第一段。
您可以使用以下内容代替:
add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description' );
function custom_woo_prod_description()
{
$chars_length = 400; // Number of desired characters length
$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 = '.woocommerce-Tabs-panel--description', 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);
}
});
}" );
}