f408faac54
Initialize the base WordPress theme files, including core template hierarchy (index, page, single, archive, 404), WooCommerce template overrides, and essential asset directories.
192 lines
13 KiB
PHP
192 lines
13 KiB
PHP
<?php
|
|
/**
|
|
* آرشیو محصولات - فروشگاه و دستهبندیهای مطیب
|
|
*/
|
|
|
|
get_header();
|
|
|
|
// دریافت نام دستهبندی فعلی (اگر روی یک دستهبندی هستیم)
|
|
$current_term = get_queried_object();
|
|
$page_title = $current_term && isset($current_term->name) ? $current_term->name : 'فروشگاه';
|
|
?>
|
|
|
|
<main class="pt-16 md:pt-[104px]">
|
|
<!-- هدر صفحه -->
|
|
<div class="bg-forest-500 dark:bg-forest-800 text-white py-10 md:py-16">
|
|
<div class="max-w-7xl mx-auto px-4 md:px-6 text-center">
|
|
<h1 class="text-3xl md:text-4xl font-extrabold mb-2"><?php echo esc_html($page_title); ?></h1>
|
|
<p class="text-white/70 text-sm flex items-center justify-center gap-2">
|
|
<a href="<?php echo home_url(); ?>" class="hover:text-white transition">خانه</a>
|
|
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
|
|
<span><?php echo esc_html($page_title); ?></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
|
|
<div class="flex gap-8">
|
|
|
|
<!-- ===== سایدبار فیلترها (دسکتاپ) ===== -->
|
|
<aside class="hidden lg:block w-64 flex-shrink-0">
|
|
<div class="sticky top-32 space-y-6">
|
|
|
|
<!-- فیلتر دستهبندی -->
|
|
<div class="bg-white dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
|
|
<h3 class="font-bold text-lg mb-4 flex items-center gap-2">
|
|
<iconify-icon icon="lucide:grid-3x3" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
|
دستهبندیها
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<?php
|
|
$terms = get_terms( array( 'taxonomy' => 'product_cat', 'hide_empty' => true, 'parent' => 0 ) );
|
|
if ( ! is_wp_error( $terms ) ) :
|
|
$current_term_id = isset($current_term->term_id) ? $current_term->term_id : 0;
|
|
foreach ( $terms as $term ) :?>
|
|
<li>
|
|
<a href="<?php echo get_term_link( $term ); ?>" class="flex items-center justify-between py-2 px-3 rounded-xl text-sm transition <?php echo ($current_term_id == $term->term_id) ? 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 font-bold' : 'hover:bg-cream-50 dark:hover:bg-dark-bg text-earth-400 dark:text-dark-text'; ?>">
|
|
<span><?php echo esc_html( $term->name ); ?></span>
|
|
<span class="text-xs text-cream-400 dark:text-dark-muted bg-cream-100 dark:bg-dark-bg px-2 py-0.5 rounded-full"><?php echo $term->count; ?></span>
|
|
</a>
|
|
</li>
|
|
<?php endforeach;
|
|
endif; ?>
|
|
<li><a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex items-center gap-2 py-2 px-3 rounded-xl text-sm text-honey-400 font-medium hover:bg-honey-50 dark:hover:bg-honey-900/20 transition">
|
|
<iconify-icon icon="lucide:x-circle" width="16"></iconify-icon> حذف فیلترها
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- فیلتر قیمت (فرم استاندارد ووکامرس) -->
|
|
<div class="bg-white dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
|
|
<h3 class="font-bold text-lg mb-4 flex items-center gap-2">
|
|
<iconify-icon icon="lucide:sliders-horizontal" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
|
فیلتر قیمت
|
|
</h3>
|
|
<form method="get" class="space-y-4">
|
|
<?php
|
|
// نگه داشتن پارامترهای فعلی (مثل دستهبندی)
|
|
foreach ( $_GET as $key => $value ) {
|
|
if ( $key !== 'min_price' && $key !== 'max_price' ) {
|
|
echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $value ) . '" />';
|
|
}
|
|
}
|
|
?>
|
|
<div class="flex items-center gap-2">
|
|
<input type="number" name="min_price" id="min_price" placeholder="از" value="<?php echo isset( $_GET['min_price'] ) ? esc_attr( $_GET['min_price'] ) : ''; ?>" min="0" class="w-full px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm text-center outline-none focus:border-forest-500 transition" dir="ltr">
|
|
<span class="text-cream-400">-</span>
|
|
<input type="number" name="max_price" id="max_price" placeholder="تا" value="<?php echo isset( $_GET['max_price'] ) ? esc_attr( $_GET['max_price'] ) : ''; ?>" min="0" class="w-full px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm text-center outline-none focus:border-forest-500 transition" dir="ltr">
|
|
</div>
|
|
<button type="submit" class="w-full py-2.5 bg-forest-500 text-white rounded-xl text-sm font-bold hover:bg-forest-600 transition">اعمال فیلتر</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- بنر کناری -->
|
|
<div class="rounded-2xl overflow-hidden relative h-48 bg-forest-600">
|
|
<img src="https://picsum.photos/seed/organic-nature-banner/400/300.jpg" class="w-full h-full object-cover opacity-40" alt="banner">
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center text-white p-4 text-center">
|
|
<iconify-icon icon="lucide:leaf" width="28" class="mb-2 text-honey-300"></iconify-icon>
|
|
<span class="font-bold text-sm">تضمین اصالت</span>
|
|
<span class="text-xs text-white/80 mt-1">۱۰۰٪ ارگانیک</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ===== محتوای اصلی (محصولات) ===== -->
|
|
<div class="flex-1 min-w-0">
|
|
|
|
<!-- نوار ابزار بالا (مرتبسازی و دکمه فیلتر موبایل) -->
|
|
<div class="flex items-center justify-between bg-white dark:bg-dark-card rounded-2xl p-4 mb-6 border border-cream-200/50 dark:border-dark-border/50">
|
|
<!-- دکمه فیلتر موبایل -->
|
|
<button onclick="document.getElementById('filter-drawer').classList.remove('hidden'); document.body.style.overflow='hidden';" class="lg:hidden flex items-center gap-2 px-4 py-2 bg-cream-50 dark:bg-dark-bg rounded-xl text-sm font-medium">
|
|
<iconify-icon icon="lucide:sliders-horizontal" width="18"></iconify-icon>
|
|
فیلترها
|
|
</button>
|
|
|
|
<!-- تعداد نتایج -->
|
|
<div class="text-sm text-cream-500 dark:text-dark-muted hidden md:block">
|
|
<?php woocommerce_result_count(); ?>
|
|
</div>
|
|
|
|
<!-- مرتبسازی -->
|
|
<form class="flex items-center gap-2" method="get">
|
|
<?php foreach ( $_GET as $key => $value ) {
|
|
if ( $key !== 'orderby' ) {
|
|
echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $value ) . '" />';
|
|
}
|
|
}?>
|
|
<select name="orderby" id="orderby" class="appearance-none bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl px-4 py-2 text-sm outline-none focus:border-forest-500 transition cursor-pointer pr-8" onchange="this.form.submit()">
|
|
<?php
|
|
$orderby = isset( $_GET['orderby'] ) ? esc_attr( $_GET['orderby'] ) : wc_get_default_products_orderby();
|
|
$catalog_orderby = apply_filters( 'woocommerce_catalog_orderby', array(
|
|
'popularity' => 'پرفروشترینها',
|
|
'rating' => 'محبوبترینها',
|
|
'date' => 'جدیدترینها',
|
|
'price' => 'ارزانترین',
|
|
'price-desc' => 'گرانترین',
|
|
) );
|
|
foreach ( $catalog_orderby as $id => $name ) :
|
|
echo '<option value="' . esc_attr( $id ) . '"' . selected( $orderby, $id, false ) . '>' . esc_html( $name ) . '</option>';
|
|
endforeach;
|
|
?>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- حلقه محصولات ووکامرس -->
|
|
<?php if ( woocommerce_product_loop() ) : ?>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
|
|
<?php
|
|
// ردیفبندی با کلاسهای خودمون (تعداد ستونها رو تسک میگیریم)
|
|
$columns = 4; // در دسکتاپ 4 تاست ولی چون سایدبار داریم 3 تا میشه
|
|
woocommerce_product_loop_start();
|
|
if ( wc_get_loop_prop( 'total' ) ) {
|
|
while ( have_posts() ) {
|
|
the_post();
|
|
do_action( 'woocommerce_shop_loop' );
|
|
wc_get_template_part( 'content', 'product' );
|
|
}
|
|
}
|
|
woocommerce_product_loop_end();
|
|
?>
|
|
</div>
|
|
|
|
<!-- صفحهبندی (Pagination) -->
|
|
<div class="mt-10 flex justify-center">
|
|
<?php woocommerce_pagination(); ?>
|
|
</div>
|
|
|
|
<?php else : ?>
|
|
<!-- اگر محصولی پیدا نشد -->
|
|
<div class="text-center py-20">
|
|
<iconify-icon icon="lucide:search-x" width="64" class="text-cream-300 dark:text-dark-muted mb-4"></iconify-icon>
|
|
<h3 class="text-xl font-bold mb-2">محصولی یافت نشد</h3>
|
|
<p class="text-cream-500 dark:text-dark-muted mb-6">متأسفانه محصولی با این مشخصات پیدا نشد.</p>
|
|
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="inline-flex items-center gap-2 px-6 py-2.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition">
|
|
<iconify-icon icon="lucide:grid-3x3" width="18"></iconify-icon>
|
|
مشاهده همه محصولات
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- ===== دراور فیلتر موبایل ===== -->
|
|
<div id="filter-drawer" class="fixed inset-0 z-[80] hidden">
|
|
<div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden'); document.body.style.overflow='';"></div>
|
|
<div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-cream-100 dark:bg-dark-bg shadow-2xl overflow-y-auto p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="font-bold text-lg">فیلترها</h3>
|
|
<button onclick="this.closest('#filter-drawer').classList.add('hidden'); document.body.style.overflow='';" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-200 dark:hover:bg-dark-card">
|
|
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
<!-- همون فیلترهای سایدبار اینجا هم تکرار میشن براحتی میتونی کپی کنی -->
|
|
<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-10">فیلترهای دلخواه خود را انتخاب کنید</p>
|
|
</div>
|
|
</div>
|
|
|
|
<?php get_footer(); ?>
|