motayeb/woocommerce/content-single-product.php

<?php
/**
 * محتوای محصول تکی - بازنویسی شده
 */
defined( 'ABSPATH' ) || exit;

global $product;
if ( ! is_a( $product, WC_Product::class ) ) return;
?>

<div class="py-8 md:py-12">
    <div class="grid md:grid-cols-2 gap-6 lg:gap-12 items-start">
        
        <!-- ===== گالری عکس ===== -->
        <div class="relative">
            <!-- عکس اصلی -->
            <div class="relative rounded-2xl overflow-hidden bg-cream-50 dark:bg-dark-bg mb-3 border border-cream-200/50 dark:border-dark-border/50">
                <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images">
                    <figure class="woocommerce-product-gallery__wrapper">
                        <?php
                        // گرفتن آی‌دی تصویر شاخص
                        $attachment_id = $product->get_image_id();
                        if ( $attachment_id ) {
                            $full_size = wp_get_attachment_image_src( $attachment_id, 'full' );
                            $main_img_url = $full_size[0];
                            $alt_text = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
                        } else {
                            $full_size = false;
                            $main_img_url = wc_placeholder_img_src();
                            $alt_text = 'تصویر محصول';
                        }
                        ?>
                        <div data-thumb="<?php echo esc_url( wp_get_attachment_image_url( $attachment_id, 'thumbnail' ) ); ?>" class="woocommerce-product-gallery__image">
                            <a href="<?php echo esc_url( $main_img_url ); ?>" class="woocommerce-main-image zoom">
                                <img id="main-product-image" 
                                     src="<?php echo esc_url( $main_img_url ); ?>" 
                                     alt="<?php echo esc_attr( $alt_text ); ?>" 
                                     class="w-full h-[300px] md:h-[450px] lg:h-[500px] object-cover"
                                     data-large_image="<?php echo esc_url( $main_img_url ); ?>"
                                     data-large_image_width="<?php echo $full_size ? $full_size[1] : 800; ?>"
                                     data-large_image_height="<?php echo $full_size ? $full_size[2] : 800; ?>">
                            </a>
                        </div>

                        <!-- گالری اضافه (اگر کاربر تو پنل ووکامرس عکس‌های بیشتری آپلود کرده باشه) -->
                        <?php
                        $attachment_ids = $product->get_gallery_image_ids();
                        if ( $attachment_ids ) {
                            foreach ( $attachment_ids as $gallery_img_id ) {
                                $gallery_full = wp_get_attachment_image_src( $gallery_img_id, 'full' );
                                $gallery_alt = get_post_meta( $gallery_img_id, '_wp_attachment_image_alt', true );
                                echo '<div data-thumb="' . esc_url( wp_get_attachment_image_url( $gallery_img_id, 'thumbnail' ) ) . '" class="woocommerce-product-gallery__image" style="display:none;">';
                                echo '<a href="' . esc_url( $gallery_full[0] ) . '">';
                                echo '<img src="' . esc_url( $gallery_full[0] ) . '" alt="' . esc_attr( $gallery_alt ) . '" class="w-full h-[300px] md:h-[450px] lg:h-[500px] object-cover">';
                                echo '</a></div>';
                            }
                        }
                        ?>
                    </figure>
                </div>
            </div>

            <!-- تامبنیل‌ها -->
            <div class="flex gap-2 overflow-x-auto pb-1">
                <!-- تامبنیل عکس اصلی -->
                <button onclick="changeProductImage(this, '<?php echo esc_url( $main_img_url ); ?>')" class="gallery-thumb active w-20 h-20 rounded-xl overflow-hidden border-2 border-forest-500 flex-shrink-0">
                    <img src="<?php echo esc_url( wp_get_attachment_image_url( $attachment_id, 'thumbnail' ) ); ?>" class="w-full h-full object-cover">
                </button>
                <!-- تامبنیل‌های گالری -->
                <?php if ( $attachment_ids ) : ?>
                    <?php foreach ( $attachment_ids as $gallery_img_id ) : 
                        $gallery_full = wp_get_attachment_image_src( $gallery_img_id, 'full' );
                    ?>
                        <button onclick="changeProductImage(this, '<?php echo esc_url( $gallery_full[0] ); ?>')" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0 hover:border-forest-300 transition">
                            <img src="<?php echo esc_url( wp_get_attachment_image_url( $gallery_img_id, 'thumbnail' ) ); ?>" class="w-full h-full object-cover">
                        </button>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>

        <!-- ===== اطلاعات محصول ===== -->
        <div class="lg:sticky lg:top-28">
            <!-- دسته بندی -->
            <div class="flex items-center gap-2 mb-3 text-xs text-cream-500 dark:text-dark-muted">
                <?php echo wc_get_product_category_list( $product->get_id(), ' <span class="w-1 h-1 bg-cream-400 rounded-full"></span> ' ); ?>
            </div>

            <!-- عنوان -->
            <h1 class="text-2xl md:text-3xl font-extrabold mb-3 leading-relaxed"><?php the_title(); ?></h1>

                        <!-- ستاره‌ها -->
            <?php if ( $product->get_review_count() > 0 ) : ?>
            <div class="flex items-center gap-2 mb-5">
                <div class="star-rating-wrapper flex text-honey-400" style="font-size: 1.1rem; letter-spacing: 2px;">
                    <?php 
                    $rating = $product->get_average_rating();
                    $full_stars = floor($rating);
                    $empty_stars = 5 - $full_stars;
                    echo str_repeat('★', $full_stars) . str_repeat('☆', $empty_stars); 
                    ?>
                </div>
                <span class="text-xs text-cream-500 dark:text-dark-muted">(<?php echo esc_html($product->get_review_count()); ?> نظر)</span>
            </div>
            <?php endif; ?>

            <!-- موجودی -->
            <div class="flex items-center gap-2 mb-5">
                <?php if ( $product->is_in_stock() ) : ?>
                    <span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
                    <span class="text-sm text-emerald-600 dark:text-emerald-400 font-medium">موجود در انبار</span>
                <?php else : ?>
                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                    <span class="text-sm text-red-500 font-medium">ناموجود</span>
                <?php endif; ?>
            </div>

            <!-- توضیح کوتاه -->
            <?php if ( $product->get_short_description() ) : ?>
                <div class="text-cream-500 dark:text-dark-muted text-sm leading-7 mb-6 pb-6 border-b border-cream-200 dark:border-dark-border">
                    <?php echo wp_kses_post( $product->get_short_description() ); ?>
                </div>
            <?php endif; ?>

            <!-- قیمت -->
            <div class="flex items-center gap-4 mb-6">
                <?php if ( $product->is_on_sale() ) : ?>
                    <span class="text-3xl font-extrabold text-forest-500 dark:text-forest-300"><?php echo wc_price( $product->get_sale_price() ); ?></span>
                    <span class="text-lg text-cream-400 dark:text-dark-muted line-through"><?php echo wc_price( $product->get_regular_price() ); ?></span>
                <?php else : ?>
                    <span class="text-3xl font-extrabold text-forest-500 dark:text-forest-300"><?php echo wc_price( $product->get_price() ); ?></span>
                <?php endif; ?>
                <span class="text-sm text-cream-500 dark:text-dark-muted">تومان</span>
            </div>
            
            <!-- شروع فرم خرید -->
            <?php if ( $product->is_in_stock() ) : ?>
            <form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
                <?php wp_nonce_field( 'woocommerce-add-to-cart_' . $product->get_id(), 'woocommerce-add-to-cart-nonce' ); ?>
            <?php endif; ?>

            <!-- فرم خرید -->
                        <!-- فرم خرید (دقیقاً مثل طرح اول) -->
            <div class="flex items-center gap-4 mb-6">
                <!-- اینپوت تعداد سفارشی -->
                <div class="flex items-center border-2 border-cream-200 dark:border-dark-border rounded-xl overflow-hidden">
                    <button type="button" onclick="document.getElementById('motayeb-qty').value = Math.max(1, parseInt(document.getElementById('motayeb-qty').value) - 1)" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
                        <iconify-icon icon="lucide:minus" width="16"></iconify-icon>
                    </button>
                    <input type="number" id="motayeb-qty" name="quantity" value="1" min="1" max="<?php echo esc_attr( $product->get_max_purchase_quantity() > 0 ? $product->get_max_purchase_quantity() : 9999 ); ?>" class="w-12 h-10 text-center border-x-2 border-cream-200 dark:border-dark-border font-bold text-sm outline-none bg-white dark:bg-dark-card" dir="ltr">
                    <button type="button" onclick="document.getElementById('motayeb-qty').value = parseInt(document.getElementById('motayeb-qty').value) + 1" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
                        <iconify-icon icon="lucide:plus" width="16"></iconify-icon>
                    </button>
                </div>

                <!-- دکمه سبز بزرگ -->
                <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="flex-1 h-10 bg-forest-500 text-white rounded-xl font-bold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25 flex items-center justify-center gap-2">
                    <iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
                    <span>افزودن به سبد خرید</span>
                </button>
            </div>
            
            <!-- تگ فرم مخفی ووکامرس (الزامی برای کار کردن سبد خرید) -->
            </form>
            <?php if ( ! $product->is_in_stock() ) : ?>
                <div class="flex items-center gap-3 p-4 bg-red-50 dark:bg-red-900/20 rounded-2xl border border-red-200 dark:border-red-800 text-red-500 text-sm font-medium">
                    <iconify-icon icon="lucide:x-circle" width="20"></iconify-icon>
                    این محصول در حال حاضر ناموجود است.
                </div>
            <?php endif; ?>

            <!-- اطلاعات کالا -->
            <div class="grid grid-cols-2 gap-3 mb-6">
                <?php if ( $product->get_sku() ) : ?>
                <div class="flex items-center gap-3 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
                    <iconify-icon icon="lucide:hash" width="18" class="text-cream-400 flex-shrink-0"></iconify-icon>
                    <div>
                        <div class="text-[10px] text-cream-400 dark:text-dark-muted">شناسه</div>
                        <div class="text-xs font-bold"><?php echo esc_html($product->get_sku()); ?></div>
                    </div>
                </div>
                <?php endif; ?>
                <div class="flex items-center gap-3 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
                    <iconify-icon icon="lucide:tag" width="18" class="text-cream-400 flex-shrink-0"></iconify-icon>
                    <div class="min-w-0">
                    <!-- دسته بندی -->
                    <div class="mb-4">
                        <?php 
                        $cats = get_the_terms( $product->get_id(), 'product_cat' );
                        if ( $cats && ! is_wp_error( $cats ) ) : ?>
                            <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 rounded-full text-xs font-semibold">
                                <iconify-icon icon="lucide:tag" width="14"></iconify-icon>
                                <?php echo esc_html( $cats[0]->name ); ?>
                            </span>
                        <?php endif; ?>
                    </div>                        <div class="text-xs font-bold line-clamp-1"><?php echo wc_get_product_category_list( $product->get_id(), ', ' ); ?></div>
                    </div>
                </div>
            </div>

            <!-- اعتماد -->
            <div class="grid grid-cols-2 gap-3 mt-6">
                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                        <iconify-icon icon="lucide:truck" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
                    </div>
                    <span class="text-xs font-medium leading-tight">ارسال به سراسر کشور</span>
                </div>
                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                        <iconify-icon icon="lucide:rotate-ccw" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
                    </div>
                    <span class="text-xs font-medium leading-tight">بازگشت ۷ روزه</span>
                </div>
                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                        <iconify-icon icon="lucide:shield-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
                    </div>
                    <span class="text-xs font-medium leading-tight">ضمانت اصالت کالا</span>
                </div>
                <div class="flex items-center gap-2.5 p-3 bg-cream-50 dark:bg-dark-bg rounded-xl border border-cream-200/50 dark:border-dark-border/50">
                    <div class="w-9 h-9 bg-forest-50 dark:bg-forest-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                        <iconify-icon icon="lucide:credit-card" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
                    </div>
                    <span class="text-xs font-medium leading-tight">پرداخت امن</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== تب‌ها ===== -->
    <div class="mt-16 border-t border-cream-200 dark:border-dark-border pt-8">
        <?php woocommerce_output_product_data_tabs(); ?>
    </div>

    <!-- ===== مرتبط ===== -->
    <div class="mt-16">
        <h2 class="text-2xl font-extrabold mb-8">محصولات مرتبط</h2>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
            <?php woocommerce_output_related_products(); ?>
        </div>
    </div>
</div>