motayeb/archive-product.php

<?php
/**
 * صفحه فروشگاه (آرشیو محصولات) - مطابق با UI Kolli.html
 *
 * @package Motayeb
 */

get_header();
?>

<!-- ===== SHOP HEADER (داینامیک با Settings API) ===== -->
<section class="relative py-20 md:py-28 overflow-hidden">
    <!-- دریافت عکس از تنظیمات، و اگر خالی بود یک عکس پیش‌فرض -->
    <?php 
    $banner_img = get_option( 'motayeb_shop_banner', 'https://picsum.photos/seed/forest-shop/1600/600' ); 
    ?>
    <div class="absolute inset-0">
        <img src="<?php echo esc_url( $banner_img ); ?>" alt="فروشگاه مطیب" class="w-full h-full object-cover">
    </div>
    <div class="absolute inset-0 bg-gradient-to-t from-forest-900/90 via-forest-700/70 to-forest-500/40"></div>
    <div class="relative max-w-7xl mx-auto px-4 md:px-6 text-center">
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white drop-shadow-md">
            <?php woocommerce_page_title(); ?>
        </h1>
        <?php if ( is_product_category() ) : ?>
            <p class="text-white/90 text-center mt-3 max-w-2xl mx-auto drop-shadow-md text-sm md:text-base">
                <?php echo esc_html( term_description() ); ?>
            </p>
        <?php endif; ?>
    </div>
</section>

<!-- ===== FEATURES (داینامیک با Settings API) ===== -->
<div class="relative z-10 -mt-8 lg:-mt-12 max-w-7xl mx-auto px-4 md:px-6 mb-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 bg-white/90 dark:bg-dark-card/90 backdrop-blur-lg p-4 md:p-5 rounded-2xl shadow-lg border border-cream-200/50 dark:border-dark-border/50">
        <?php for ( $i = 1; $i <= 4; $i++ ) : ?>
            <?php 
            // خواندن مقدار از دیتابیس، و اگر خالی بود، مقدار پیش‌فرض جایگزین شود
            $icon = get_option( 'motayeb_feature_' . $i . '_icon', ( $i === 1 ) ? 'lucide:leaf' : ( ( $i === 2 ) ? 'lucide:truck' : ( ( $i === 3 ) ? 'lucide:shield-check' : 'lucide:package' ) ) ); 
            $text = get_option( 'motayeb_feature_' . $i . '_text', 'ویژگی ' . $i ); 
            ?>
            <div class="flex items-center gap-3 justify-center">
                <iconify-icon icon="<?php echo esc_attr( $icon ); ?>" width="22" class="text-forest-500 dark:text-forest-300 flex-shrink-0"></iconify-icon>
                <span class="text-xs md:text-sm font-medium text-earth-400 dark:text-dark-text"><?php echo esc_html( $text ); ?></span>
            </div>
        <?php endfor; ?>
    </div>
</div>

<!-- ===== SHOP CONTENT ===== -->
<section class="pb-8 md:pb-12 bg-cream-100 dark:bg-dark-bg">
    <div class="max-w-7xl mx-auto px-4 md:px-6">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Sidebar -->
            <aside class="lg:w-1/4 xl:w-1/5 flex-shrink-0">
                <div class="bg-white dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50 sticky top-32">
                    <?php if ( is_active_sidebar( 'sidebar-shop' ) ) : ?>
                        <?php dynamic_sidebar( 'sidebar-shop' ); ?>
                    <?php else : ?>
                        <!-- ===== پیش‌فرض: دسته‌بندی‌ها ===== -->
                        <div class="mb-6">
                            <h3 class="font-bold text-sm mb-3 text-earth-400 dark:text-dark-text">دسته‌بندی محصولات</h3>
                            <ul class="space-y-2 text-sm">
                                <?php
                                $product_categories = get_terms( array(
                                    'taxonomy'   => 'product_cat',
                                    'hide_empty' => true,
                                    'parent'     => 0,
                                ) );
                                if ( ! empty( $product_categories ) && ! is_wp_error( $product_categories ) ) {
                                    foreach ( $product_categories as $cat ) {
                                        echo '<li><a href="' . esc_url( get_term_link( $cat ) ) . '" class="text-cream-500 dark:text-dark-muted hover:text-forest-500 dark:hover:text-forest-300 transition flex items-center justify-between">';
                                        echo '<span>' . esc_html( $cat->name ) . '</span>';
                                        echo '<span class="text-xs bg-cream-100 dark:bg-dark-bg px-2 py-0.5 rounded-full">' . esc_html( $cat->count ) . '</span>';
                                        echo '</a></li>';
                                    }
                                } else {
                                    echo '<li class="text-cream-400 dark:text-dark-muted text-xs">هیچ دسته‌بندی وجود ندارد.</li>';
                                }
                                ?>
                            </ul>
                        </div>
                        
                        <!-- ===== فیلتر قیمت ===== -->
                        <div>
                            <h3 class="font-bold text-sm mb-3 text-earth-400 dark:text-dark-text">فیلتر قیمت</h3>
                            <form method="get" action="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>">
                                <div class="flex items-center gap-2 mb-3">
                                    <input type="number" name="min_price" placeholder="حداقل" class="w-1/2 px-3 py-2 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
                                    <span class="text-cream-400 dark:text-dark-muted">تا</span>
                                    <input type="number" name="max_price" placeholder="حداکثر" class="w-1/2 px-3 py-2 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
                                </div>
                                <button type="submit" class="w-full py-2 bg-forest-500 text-white rounded-xl text-sm font-medium hover:bg-forest-600 transition">اعمال فیلتر</button>
                            </form>
                        </div>
                    <?php endif; ?>
                </div>
            </aside>

            <!-- Product Grid -->
            <div class="lg:w-3/4 xl:w-4/5">
                <!-- Toolbar -->
                <div class="flex flex-wrap items-center justify-between gap-4 mb-6 bg-white dark:bg-dark-card rounded-2xl p-4 border border-cream-200/50 dark:border-dark-border/50">
                    <div class="flex items-center gap-3 text-sm text-cream-500 dark:text-dark-muted">
                        <span><?php woocommerce_result_count(); ?></span>
                    </div>
                    <div class="flex items-center gap-3">
                        <?php woocommerce_catalog_ordering(); ?>
                    </div>
                </div>

                <!-- Products -->
                <?php if ( woocommerce_product_loop() ) : ?>
                    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
                        <?php while ( have_posts() ) : the_post(); ?>
                            <?php wc_get_template_part( 'content', 'product' ); ?>
                        <?php endwhile; ?>
                    </div>
                    <div class="mt-10">
                        <?php woocommerce_pagination(); ?>
                    </div>
                <?php else : ?>
                    <p class="text-center text-cream-500 dark:text-dark-muted py-12"><?php esc_html_e( 'محصولی یافت نشد.', 'motayeb' ); ?></p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<?php
get_footer();