Blocksy WooCommerce 商品评论展示短代码

/* 基础布局 */
.ct-enhanced-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin: 2rem 0;
}

/* 评论卡片 */
.ct-review-card-enhanced {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ct-review-card-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 商品信息头部 */
.ct-review-product-header {
    display: flex;
    padding: 20px;
    gap: 15px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.ct-product-thumbnail {
    flex: 0 0 80px;
    border-radius: 8px;
    overflow: hidden;
    align-self: center;
}

.ct-product-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.ct-product-meta {
    flex: 1;
}

.ct-product-meta h4 {
    margin: 0 0 0px;
    font-size: 1rem;
    color: var(--heading-color, #333);
}

.ct-product-price {
    color: var(--accent-color, #3a7dfd);
    font-weight: 700;
    font-size: 1.1rem;

}

/* Blocksy主题星级评分 */


.ct-stars-rating .star-rating {
    --star-size: 14px;
    --star-color: var(--paletteColor2, #ffb900);
    display: inline-block;
    font-family: star;
    font-size: var(--star-size);
    line-height: 1;
    position: relative;
    width: 5.4em;
}

.ct-stars-rating .star-rating::before {
    content: "\53\53\53\53\53";
    color: var(--star-color);
    opacity: 0.25;
}

.ct-stars-rating .star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.ct-stars-rating .star-rating span::before {
    content: "\53\53\53\53\53";
    color: var(--star-color);
}

/* 购买按钮 */
.ct-add-to-cart.button {
    display: inline-block;
    padding: 8px 16px;
    background: var(--button-color, #3a7dfd);
    color: #fff !important;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.ct-add-to-cart.button:hover {
    background: var(--button-hover-color, #2c6ae0);
    transform: translateY(-1px);
}

/* 评论内容区 */
.ct-review-body {
    padding: 20px;
}

.ct-reviewer-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.ct-reviewer-name {
    font-weight: 600;
    color: var(--heading-color, #444);
}

.ct-review-date {
    color: var(--text-meta-color, #999);
}

.ct-review-text {
    line-height: 1.6;
    color: var(--text-color, #555);
    margin-bottom: 15px;
}

/* 图片画廊 */
.ct-review-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.ct-gallery-item {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1/1;
    transition: transform 0.3s ease;
}

.ct-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-gallery-item:hover {
    transform: scale(1.05);
}

/* 无评论提示 */
.ct-no-reviews {
    text-align: center;
    color: var(--text-meta-color, #999);
    padding: 2rem;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .ct-enhanced-reviews-grid {
        grid-template-columns: 1fr;
    }

   .ct-review-product-header {
        flex-direction: row;
        display: flex;
    }

    .ct-product-thumbnail {
        margin-bottom: 15px;
        width: 20%;
        flex: none;
    }
}

/**
 * Blocksy WooCommerce 商品评论展示短代码
 * 短代码: [product_reviews_with_images]
 */
add_shortcode('product_reviews_with_images', function($atts) {
    $atts = shortcode_atts([
        'limit' => 4,
        'orderby' => 'rating_desc',
        'show_image' => true,
        'show_price' => true,
        'show_button' => true
    ], $atts);

    // 查询参数
    $args = [
        'post_type' => 'product',
        'status' => 'approve',
        'number' => intval($atts['limit']),
        'meta_query' => [['key' => 'rating', 'compare' => 'EXISTS']]
    ];

    // 排序逻辑
    switch ($atts['orderby']) {
        case 'newest':
            $args['orderby'] = 'comment_date_gmt';
            $args['order'] = 'DESC';
            break;
        case 'oldest':
            $args['orderby'] = 'comment_date_gmt';
            $args['order'] = 'ASC';
            break;
        case 'rating_asc':
            $args['meta_key'] = 'rating';
            $args['orderby'] = 'meta_value_num';
            $args['order'] = 'ASC';
            break;
        default: // rating_desc
            $args['meta_key'] = 'rating';
            $args['orderby'] = 'meta_value_num';
            $args['order'] = 'DESC';
    }

    $comments = get_comments($args);
    if (empty($comments)) return '<p class="ct-no-reviews">'.__('暂无商品评论', 'blocksy-companion').'</p>';

    ob_start();
    ?&gt;
    <div class="ct-enhanced-reviews-grid">
        <?php foreach ($comments as $comment) : 
            $product = wc_get_product($comment->comment_post_ID);
            if (!$product) continue;
            
            $rating = intval(get_comment_meta($comment->comment_ID, 'rating', true));
            $images = get_comment_meta($comment->comment_ID, 'blocksy_comment_meta_images', true);
            ?>
            <div class="ct-review-card-enhanced">
                <!-- 商品信息区 -->
                <div class="ct-review-product-header">
                    <a href="/zh/</?php echo esc_url($product->get_permalink()); ?>" class="ct-product-thumbnail">
                        <?php echo $product->get_image('woocommerce_thumbnail'); ?>
                    </a>
                    <div class="ct-product-meta">
                        <h4><?php echo esc_html($product->get_name()); ?></h4>
                        
                        <?php if ($atts['show_price']) : ?>
                            <div class="ct-product-price"><?php echo $product->get_price_html(); ?></div>
                        <?php endif; ?>

                        <!-- Blocksy主题星级评分 -->
                        <div class="ct-stars-rating">
                            <?php 
                            echo blocksy_html_tag(
                                'div',
                                ['class' => 'star-rating'],
                                '<span style="width:'.($rating * 20).'%"></span>'
                            );
                            ?>
                        </div>
                        
                       
                    </div>
                </div>

                <!-- 评论内容区 -->
                <div class="ct-review-body">
                    <div class="ct-reviewer-info">
                        <span class="ct-reviewer-name"><?php echo esc_html($comment->comment_author); ?></span>
                        <span class="ct-review-date"><?php echo date_i18n('Y年m月d日', strtotime($comment->comment_date)); ?></span>
                    </div>
                    <div class="ct-review-text"><?php echo wpautop(esc_html($comment->comment_content)); ?></div>
                    
                    <?php if ($atts['show_image'] && !empty($images)) : ?>
                        <div class="ct-review-gallery">
                            <?php foreach ((array)$images as $image_id) : 
                                if (!wp_attachment_is_image($image_id)) continue;
                                $full_url = wp_get_attachment_image_url($image_id, 'full');
                                $thumb_url = wp_get_attachment_image_url($image_id, 'medium');
                                ?>
                                <a href="/zh/</?php echo esc_url($full_url); ?>" class="ct-gallery-item" data-fancybox="review-gallery-<?php echo $comment->comment_ID; ?>">
                                    <img src="<?php echo esc_url($thumb_url); ?>" alt="<?php esc_attr_e('用户评论图片', 'blocksy-companion'); ?>" loading="lazy">
                                </a>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    <?php
    return ob_get_clean();
});