Blocksy WooCommerce Product Review Display Shortcodes

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

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

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

/* Product information header */
.ct-review-product-header {
    display: flex; padding: 20px; }
    display: flex; padding: 20px; gap: 15px;
    gap: 15px; border-bottom: 1px solid var(--border-color, #D)
    border-bottom: 1px solid var(---border-color, #f0f0f0f0);
}

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

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

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

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

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

}

/* Blocksy theme star rating */


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

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

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

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

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

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

/* Comment content area */
.ct-review-body {
    padding: 20px; }
}

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

.ct-reviewer-name {
    font-weight: 600; color: var(--heading-color, #444); }
    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); } .ct-review-text { line-height: 1.6; }
    margin-bottom: 15px;
}

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

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

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

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

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

/* Responsive design */
@media (max-width: 480px) {
    .ct-enhanced-reviews-grid {
        grid-template-columns: 1fr;
    }

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

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

/**
 * Blocksy WooCommerce product reviews display shortcode
 * Shortcode: [product_reviews_with_images]
 */
add_shortcode('product_reviews_with_images', function($atts) {
    $atts = shortcode_atts([
        
        'orderby' => 'ratings_desc',
        'show_image' => true,
        
        'show_button' => true
    ], $atts).

    // Query the parameters
    $args = [
        'post_type' => 'product',
        'status' => 'approve', 'number' => intval($atts['limit'])
        'number' => intval($atts['limit']),
        'meta_query' => [['key' => 'rating', 'compare' => 'EXISTS']]
    ];.

    // Sorting logic
    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 'oldest'.
            break;
        case 'rating_asc'.
            $args['meta_key'] = 'ratings';
            $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">'. __('No product reviews yet', '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="/en/</?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="/en/</?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();
});