c06ab0b8a2
Implement a complete overhaul of the theme templates to match the Kolli UI design, including enhanced WooCommerce support, dark mode functionality, and improved responsive layouts. - Redesign core templates: front-page, archive, single, and product pages - Implement dynamic WooCommerce templates for shop, single product, and checkout - Add comprehensive asset structure including fonts, images, and custom CSS/JS - Integrate Tailwind CSS via CDN with custom configuration for brand colors - Add dark mode support with local storage persistence - Refactor functions.php for better theme setup and script enqueuing - Implement custom product meta fields for ingredients and health benefits - Add responsive design improvements and custom animations
184 lines
12 KiB
PHP
184 lines
12 KiB
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
|
||
global $product;
|
||
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
|
||
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/400/400.jpg';
|
||
$rating = $product->get_average_rating();
|
||
$review_count = $product->get_rating_count();
|
||
$price = $product->get_price();
|
||
$regular_price = $product->get_regular_price();
|
||
$is_on_sale = $product->is_on_sale();
|
||
$badge = '';
|
||
if ( $is_on_sale && $regular_price ) {
|
||
$discount = round( ( 1 - ( $price / $regular_price ) ) * 100 );
|
||
$badge = '<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">' . $discount . '%</span>';
|
||
}
|
||
?>
|
||
<div class="product-card group bg-white dark:bg-dark-card rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all">
|
||
<div class="relative overflow-hidden">
|
||
<a href="<?php the_permalink(); ?>">
|
||
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php the_title_attribute(); ?>" class="product-img w-full h-48 md:h-56 object-cover">
|
||
</a>
|
||
<div class="absolute top-3 right-3 flex flex-col gap-1.5">
|
||
<?php if ( $product->is_featured() ) : ?>
|
||
<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">ارگانیک</span>
|
||
<?php endif; ?>
|
||
<?php echo wp_kses_post( $badge ); ?>
|
||
</div>
|
||
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
|
||
<button onclick="quickAddToCart(<?php echo esc_js( $product->get_id() ); ?>)" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
|
||
<iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon> افزودن
|
||
</button>
|
||
<button onclick="toggleWishlist(this)" class="w-10 h-10 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition">
|
||
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="flex items-center gap-1 mb-2">
|
||
<span class="text-honey-400 text-xs">★</span>
|
||
<span class="text-xs font-medium"><?php echo esc_html( $rating ? number_format( $rating, 1 ) : '۰' ); ?></span>
|
||
<span class="text-xs text-cream-400 dark:text-dark-muted">(<?php echo esc_html( $review_count ); ?>)</span>
|
||
</div>
|
||
<h3 class="font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition">
|
||
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
||
</h3>
|
||
<div class="flex items-end gap-2">
|
||
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo wp_kses_post( wc_price( $price ) ); ?></span>
|
||
<?php if ( $is_on_sale ) : ?>
|
||
<span class="line-through text-xs text-cream-400 dark:text-dark-muted mb-0.5"><?php echo wp_kses_post( wc_price( $regular_price ) ); ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endwhile; ?>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<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();
|