Я работаю в магазине Woomcommerce, где продукты имеют различную длину описания.Я добавил кнопку «читать дальше» / «читать меньше», которая работает с более длинными описаниями продуктов.Однако в более коротких описаниях кнопка видна, но, очевидно, ничего не делает, так как переключать нечего.Как я могу спрятать кнопку в кратких описаниях?
Это PHP для новых шаблонов / single-product / short-description.php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
global $post;
$short_description = apply_filters( 'woocommerce_short_description', $post->post_excerpt );
if ( ! $short_description ){
return;
}
?>
<div class="woocommerce-product-details__short-description" itemprop="description-container">
<div class="product-description rte" itemprop="description">
<?php echo $short_description; // WPCS: XSS ok. ?>
</div>
<a class="readmore" href="#"><?php echo 'Read more...'?></a>
</div>
Это JavaScript:
$(document).ready(function () {
$('.readmore').click(function (event) {
event.preventDefault();
var description = document.querySelector('.product-description');
console.log(description.style.height)
if (description.style.height === ''){
description.style.height = 'auto';
} else if (description.style.height === 'auto'){
description.style.height = '';
}
else{
description.style.height = '92px';
}
$(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
});
});
Так что сейчас переключатель «читать / читать меньше» работает отлично, но мне бы очень хотелось узнать, как скрыть его в коротких описаниях, где это не нужно!Спасибо!