Добавление кнопки «читать больше» / «читать меньше» к длинным описаниям продуктов в Woocommerce: как скрыть кнопку, когда она не нужна? - PullRequest
0 голосов
/ 11 июля 2019

Я работаю в магазине 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...');
    });
});

Так что сейчас переключатель «читать / читать меньше» работает отлично, но мне бы очень хотелось узнать, как скрыть его в коротких описаниях, где это не нужно!Спасибо!

1 Ответ

1 голос
/ 11 июля 2019

Я забыл включить код для проверки длины.Правильный код 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>
<?php 
    if (strlen($short_description) > 250){
    ?>
    <a class="readmore" href="#">
        <?php echo 'Read more...';

    }?></a>

</div>

. Теперь он работает, показывает readmore только тогда, когда описание превышает 250 символов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...