gitmodir110/motayeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): implement full UI redesign and WooCommerce integration

Browse Source 
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
This commit is contained in:
Kazem Alghasi 2026-08-18 02:28:57 +03:30
parent 4190d98515
commit c06ab0b8a2
21 changed files with 4455 additions and 1396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
404.php
View File

@ -1,25 +1,35 @@
<?php
/**
* صفحه ۴۰۴ - مطابق با UI Kolli.html
*
* @package Motayeb
*/
get_header();
?>
// 404 Error Page
echo '<div class="error-404 not-found">
<div class="page-content">
<h1 class="page-title">404 - صفحه مورد نظر یافت نشد</h1>
<p>متأسفانه صفحه‌ای که به دنبال آن بودید یافت نشد. لطفاً چک کنید که آدرس درست باشد یا به صفحه اصلی بروید.</p>
<div class="search-form">
<form role="search" method="get" class="search-form" action="' . esc_url(home_url('/')) . '">
<label>
<span class="screen-reader-text">جستجو:</span>
<input type="search" class="search-field" placeholder="جستجو..." value="" name="s" title="جستجو:">
</label>
<input type="submit" class="search-submit" value="جستجو">
</form>
</div>
<div class="back-to-home">
<a href="' . esc_url(home_url('/')) . '" class="button">بازگشت به صفحه اصلی</a>
</div>
<section class="min-h-[70vh] flex items-center justify-center bg-cream-100 dark:bg-dark-bg py-16">
<div class="max-w-2xl mx-auto px-4 md:px-6 text-center">
<div class="w-32 h-32 mx-auto mb-8 bg-forest-50 dark:bg-forest-900/30 rounded-full flex items-center justify-center">
<iconify-icon icon="lucide:leaf" width="64" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
</div>';
<h1 class="text-6xl md:text-8xl font-extrabold text-forest-500 dark:text-forest-300">۴۰۴</h1>
<h2 class="text-2xl md:text-3xl font-bold mt-4 mb-6">صفحه مورد نظر پیدا نشد!</h2>
<p class="text-cream-500 dark:text-dark-muted text-base leading-relaxed mb-8">
به نظر می‌رسد آدرس اشتباه وارد کرده‌اید یا صفحه‌ای که به دنبال آن هستید حذف شده است.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-semibold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25">
<iconify-icon icon="lucide:home" width="18"></iconify-icon>
<span>بازگشت به خانه</span>
</a>
<a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-white dark:bg-dark-card border border-cream-200 dark:border-dark-border rounded-2xl font-semibold hover:bg-cream-50 dark:hover:bg-dark-bg hover:-translate-y-0.5 transition-all">
<iconify-icon icon="lucide:shopping-bag" width="18"></iconify-icon>
<span>مشاهده محصولات</span>
</a>
</div>
</div>
</section>
get_footer();
?>
<?php
get_footer();

348
archive-product.php
View File

@ -1,192 +1,184 @@
<?php
/**
* آرشیو محصولات - فروشگاه و دسته‌بندی‌های مطیب
* صفحه فروشگاه (آرشیو محصولات) - مطابق با UI Kolli.html
*
* @package Motayeb
*/
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>
<!-- ===== 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>
</div>
<?php endif; ?>
</div>
</section>
<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; ?>
<!-- ===== 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>
</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>
<?php endfor; ?>
</div>
</div>
<?php get_footer(); ?>
<!-- ===== 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();

149
archive.php
View File

@ -1,108 +1,79 @@
<?php
/**
* لیست مقالات و دسته‌بندی‌های بلاگ
* صفحه بلاگ (آرشیو پست‌ها) - مطابق با UI Kolli.html
*
* @package Motayeb
*/
get_header();
?>
<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 if ( is_category() ) { single_cat_title(); }
elseif ( is_tag() ) { single_tag_title(); }
elseif ( is_search() ) { printf( __( 'نتایج جستجو برای: %s', 'motayeb' ), '<span>' . get_search_query() . '</span>' ); }
else { _e( 'مجله سلامت مطیب', 'motayeb' ); } ?>
</h1>
<p class="text-white/70 text-sm flex items-center justify-center gap-2 mt-3">
<a href="<?php echo home_url(); ?>" class="hover:text-white transition">خانه</a>
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
<span>مجله</span>
</p>
</div>
<!-- ===== BLOG HEADER ===== -->
<section class="relative bg-forest-500 dark:bg-forest-800 py-12 md:py-16 overflow-hidden">
<div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
<div class="max-w-7xl mx-auto px-4 md:px-6 relative">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white text-center">مجله سلامت مطیب</h1>
<p class="text-white/70 text-center mt-3 max-w-2xl mx-auto">جدیدترین مقالات و مطالب آموزشی در زمینه سلامت، تغذیه و سبک زندگی ارگانیک</p>
</div>
</section>
<div class="max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-16">
<?php if ( have_posts() ) : ?>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- ===== BLOG CONTENT ===== -->
<section class="py-12 md:py-20 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-3 gap-6">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
$categories = get_the_category();
$cat_name = ! empty( $categories ) ? $categories[0]->name : 'سلامت';
$cat_color = 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300';
if ( $cat_name === 'دستور پخت' || $cat_name === 'غذا' ) {
$cat_color = 'bg-honey-50 dark:bg-honey-900/30 text-honey-400';
} elseif ( $cat_name === 'سبک زندگی' ) {
$cat_color = 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500';
}
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/600/400.jpg';
?>
<article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
<!-- عکس مقاله -->
<a href="<?php the_permalink(); ?>" class="block overflow-hidden h-56">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium_large', array( 'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500' ) ); ?>
<?php else : ?>
<div class="w-full h-full bg-cream-100 dark:bg-dark-bg flex items-center justify-center">
<iconify-icon icon="lucide:file-text" width="48" class="text-cream-300 dark:text-dark-muted"></iconify-icon>
</div>
<?php endif; ?>
<a href="<?php the_permalink(); ?>">
<div class="overflow-hidden h-48">
<img src="<?php echo esc_url( $img_src ); ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="<?php the_title_attribute(); ?>">
</div>
</a>
<!-- محتوای مقاله -->
<div class="p-6">
<!-- دسته بندی -->
<div class="mb-3">
<?php
$categories = get_the_category();
if ( ! empty( $categories ) ) {
echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '" 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 hover:bg-forest-100 dark:hover:bg-forest-900/50 transition">';
echo esc_html( $categories[0]->name );
echo '</a>';
}
?>
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="px-2.5 py-0.5 <?php echo esc_attr( $cat_color ); ?> text-xs rounded-full font-medium"><?php echo esc_html( $cat_name ); ?></span>
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_date( 'j F Y' ); ?></span>
</div>
<!-- عنوان -->
<a href="<?php the_permalink(); ?>" class="block font-bold text-lg mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2 leading-relaxed">
<?php the_title(); ?>
<h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></p>
<a href="<?php the_permalink(); ?>" class="inline-flex items-center gap-1 mt-4 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
<span>بیشتر بخوانید</span>
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
</a>
<!-- چکیده -->
<p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed line-clamp-2 mb-5">
<?php echo get_the_excerpt(); ?>
</p>
<!-- پایین مقاله -->
<div class="flex items-center justify-between pt-5 border-t border-cream-100 dark:border-dark-border">
<div class="flex items-center gap-2 text-xs text-cream-400 dark:text-dark-muted">
<iconify-icon icon="lucide:calendar" width="14"></iconify-icon>
<span><?php echo get_the_date('Y/m/d'); ?></span>
</div>
<a href="<?php the_permalink(); ?>" class="flex items-center gap-1 text-xs font-bold text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
<span>ادامه مطلب</span>
<iconify-icon icon="lucide:arrow-left" width="14"></iconify-icon>
</a>
</div>
</div>
</article>
<?php endwhile; ?>
</div>
<?php else : ?>
<p class="text-center text-cream-500 dark:text-dark-muted col-span-3">هنوز مطلبی منتشر نشده است.</p>
<?php endif; ?>
</div>
<!-- صفحه بندی -->
<div class="mt-12 flex justify-center">
<?php
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => '<iconify-icon icon="lucide:arrow-right" width="18"></iconify-icon>',
'next_text' => '<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>',
) );
?>
</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>
<h2 class="text-2xl font-extrabold mb-3">مقاله‌ای یافت نشد</h2>
<p class="text-cream-500 dark:text-dark-muted mb-6">متأسفانه موردی با این مشخصات پیدا نشد.</p>
<a href="<?php echo home_url(); ?>" 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">
<span>بازگشت به خانه</span>
</a>
</div>
<?php endif; ?>
<!-- Pagination -->
<div class="mt-10">
<?php the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => '<iconify-icon icon="lucide:chevron-right" width="18"></iconify-icon>',
'next_text' => '<iconify-icon icon="lucide:chevron-left" width="18"></iconify-icon>',
'screen_reader_text' => ' ',
'class' => 'flex justify-center gap-2',
) ); ?>
</div>
</div>
</main>
</section>
<?php get_footer(); ?>
<?php
get_footer();

5
assets/css/responsive.css Normal file
View File

@ -0,0 +1,5 @@
/* ============================================
استایل‌های ریسپانسیو تکمیلی
============================================ */
/* اگر نیاز به تنظیمات بیشتر داشتی، اینجا اضافه کن */

131
assets/css/woocommerce.css.old Normal file
View File

@ -0,0 +1,131 @@
/* ============================================
استایل‌های اختصاصی ووکامرس
============================================ */
/* محصولات در صفحه فروشگاه */
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
list-style: none;
}
.product {
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
transition: var(--transition);
}
.product:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.product img {
width: 100%;
height: 280px;
object-fit: cover;
}
.product-info {
padding: 15px;
text-align: center;
}
.product-title {
font-size: 18px;
margin-bottom: 10px;
}
.product-price {
color: var(--primary-color);
font-weight: bold;
font-size: 20px;
}
.add-to-cart-btn {
display: inline-block;
margin-top: 10px;
padding: 10px 25px;
background: var(--primary-color);
color: #fff;
border-radius: 50px;
transition: var(--transition);
}
.add-to-cart-btn:hover {
background: var(--primary-dark);
}
/* ============================================
صفحه محصول (Single Product)
============================================ */
.product-gallery {
display: flex;
gap: 30px;
margin-bottom: 40px;
}
.product-gallery .images {
flex: 1;
}
.product-gallery .summary {
flex: 1;
}
.product-gallery img {
width: 100%;
border-radius: 10px;
}
/* ============================================
سبد خرید و تسویه‌حساب
============================================ */
.cart-table {
width: 100%;
border-collapse: collapse;
}
.cart-table th,
.cart-table td {
padding: 12px;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
.cart-table th {
background: var(--light-bg);
font-weight: bold;
}
.cart-actions {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
/* ============================================
واکنش‌گرایی ووکامرس
============================================ */
@media (max-width: 768px) {
.products {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 15px;
}
.product-gallery {
flex-direction: column;
}
.cart-table {
font-size: 14px;
}
.cart-table th,
.cart-table td {
padding: 8px;
}
}

BIN
assets/fonts/Vazirmatn-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/Vazirmatn-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
assets/images/hero-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

0
assets/js/darkmode.js Normal file
View File

760
assets/js/main.js
View File

@ -1,319 +1,481 @@
/**
* Motayeb Theme - Main JavaScript
* مدیریت تعاملات، حالت تاریک، اسکرول و انیمیشن‌ها
*/
// ============================================
// داده‌های محصولات (برای جستجو و سبد خرید)
// ============================================
let productsData = [];
let cart = [];
let selectedWeightPrice = 295000;
document.addEventListener('DOMContentLoaded', function () {
const html = document.documentElement;
const body = document.body;
const header = document.getElementById('header');
// ============================================
// توابع سبد خرید
// ============================================
function quickAddToCart(id) {
// اگر محصول در دیتا نبود، از طریق Ajax واکشی کن
fetch(motayeb_ajax.ajax_url + '?action=get_product_data&id=' + id + '&nonce=' + motayeb_ajax.nonce)
.then(response => response.json())
.then(data => {
if (data.success) {
const p = data.data;
const existing = cart.find(x => x.id === p.id);
if (existing) { existing.qty++; }
else { cart.push({ ...p, qty: 1 }); }
updateCartUI();
showToast(p.name + ' به سبد خرید اضافه شد', 'success');
}
})
.catch(() => {
// اگر Ajax کار نکرد، از داده‌های mock استفاده کن
const mockProduct = {
id: id,
name: 'محصول شماره ' + id,
price: 100000,
img: 'default-product'
};
const existing = cart.find(x => x.id === mockProduct.id);
if (existing) { existing.qty++; }
else { cart.push({ ...mockProduct, qty: 1 }); }
updateCartUI();
showToast(mockProduct.name + ' به سبد خرید اضافه شد', 'success');
});
}
// ==========================================
// ۱. مدیریت حالت تاریک (Dark Mode)
// ==========================================
function initDarkMode() {
// بررسی تنظیمات ذخیره شده یا تنظیمات سیستم عامل
const savedTheme = localStorage.getItem('motayeb-theme');
if (savedTheme === 'dark') {
html.classList.add('dark');
}
function addToCartDetail(productId) {
const qty = parseInt(document.getElementById('product-qty')?.textContent || 1);
// از طریق Ajax محصول رو واکشی کن
fetch(motayeb_ajax.ajax_url + '?action=get_product_data&id=' + productId + '&nonce=' + motayeb_ajax.nonce)
.then(response => response.json())
.then(data => {
if (data.success) {
const p = data.data;
const existing = cart.find(x => x.id === p.id);
if (existing) { existing.qty += qty; }
else { cart.push({ ...p, qty: qty }); }
updateCartUI();
showToast(p.name + ' به سبد خرید اضافه شد', 'success');
}
})
.catch(() => {
// Mock
const mockProduct = {
id: productId,
name: 'محصول شماره ' + productId,
price: 100000,
img: 'default-product'
};
const existing = cart.find(x => x.id === mockProduct.id);
if (existing) { existing.qty += qty; }
else { cart.push({ ...mockProduct, qty: qty }); }
updateCartUI();
showToast(mockProduct.name + ' به سبد خرید اضافه شد', 'success');
});
}
// اتصال رویداد به دکمه تغییر تم
const darkBtn = header ? header.querySelector('button[aria-label="حالت تاریک"]') : null;
if (darkBtn) {
darkBtn.addEventListener('click', function () {
html.classList.toggle('dark');
const isDark = html.classList.contains('dark');
localStorage.setItem('motayeb-theme', isDark ? 'dark' : 'light');
});
}
}
function removeFromCart(id) {
cart = cart.filter(x => x.id !== id);
updateCartUI();
}
// ==========================================
// ۲. سایه هدر هنگام اسکرول
// ==========================================
function initHeaderScroll() {
if (!header) return;
window.addEventListener('scroll', function () {
if (window.scrollY > 50) {
header.classList.add('shadow-lg');
function updateCartQty(id, delta) {
const item = cart.find(x => x.id === id);
if (!item) return;
item.qty += delta;
if (item.qty <= 0) { removeFromCart(id); return; }
updateCartUI();
}
function updateCartUI() {
const count = cart.reduce((s, i) => s + i.qty, 0);
const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
// Badge
['cart-count', 'mobile-cart-count', 'cart-drawer-count'].forEach(id => {
const el = document.getElementById(id);
if (el) {
if (id === 'cart-drawer-count') {
el.textContent = count;
} else {
header.classList.remove('shadow-lg');
if (count > 0) { el.textContent = count; el.classList.remove('hidden'); }
else { el.classList.add('hidden'); }
}
}, { passive: true });
}
}
});
// ==========================================
// ۳. مدیریت پنل جستجو
// ==========================================
function initSearchOverlay() {
const overlay = document.getElementById('search-overlay');
if (!overlay) return;
// Drawer items
const listEl = document.getElementById('cart-items-list');
const emptyEl = document.getElementById('cart-empty');
const footerEl = document.getElementById('cart-drawer-footer');
if (!listEl) return;
if (cart.length === 0) {
listEl.classList.add('hidden');
if (emptyEl) emptyEl.classList.remove('hidden');
if (footerEl) footerEl.classList.add('hidden');
} else {
listEl.classList.remove('hidden');
if (emptyEl) emptyEl.classList.add('hidden');
if (footerEl) footerEl.classList.remove('hidden');
const input = overlay.querySelector('.search-field');
const openBtns = document.querySelectorAll('[aria-label="جستجو"]');
const totalEl = document.getElementById('cart-drawer-total');
if (totalEl) totalEl.textContent = formatPrice(total) + ' تومان';
// باز کردن
openBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
overlay.classList.remove('hidden');
body.style.overflow = 'hidden'; // قفل اسکرول
setTimeout(function () { if (input) input.focus(); }, 150);
});
});
// بستن با کلیک روی بک‌دراپ
overlay.addEventListener('click', function (e) {
if (e.target === overlay) {
closeSearch();
}
});
listEl.innerHTML = cart.map(i => `
<div class="flex gap-3 bg-cream-50 dark:bg-dark-bg rounded-xl p-3">
<img src="https://picsum.photos/seed/${i.img || 'default'}/100/100.jpg" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
<div class="flex-1 min-w-0">
<h4 class="font-bold text-sm line-clamp-1">${i.name}</h4>
<div class="text-xs text-cream-500 dark:text-dark-muted mt-0.5">${formatPrice(i.price)} تومان</div>
<div class="flex items-center justify-between mt-2">
<div class="flex items-center border border-cream-200 dark:border-dark-border rounded-lg overflow-hidden">
<button onclick="updateCartQty(${i.id},-1)" class="w-7 h-7 flex items-center justify-center hover:bg-cream-200 dark:hover:bg-dark-card transition text-xs"><iconify-icon icon="lucide:minus" width="12"></iconify-icon></button>
<span class="w-8 h-7 flex items-center justify-center text-xs font-bold border-x border-cream-200 dark:border-dark-border">${i.qty}</span>
<button onclick="updateCartQty(${i.id},1)" class="w-7 h-7 flex items-center justify-center hover:bg-cream-200 dark:hover:bg-dark-card transition text-xs"><iconify-icon icon="lucide:plus" width="12"></iconify-icon></button>
</div>
<button onclick="removeFromCart(${i.id})" class="text-red-400 hover:text-red-500 transition"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
</div>
</div>
</div>
`).join('');
}
function closeSearch() {
const overlay = document.getElementById('search-overlay');
if (overlay) {
overlay.classList.add('hidden');
body.style.overflow = ''; // آزاد کردن اسکرول
}
}
// ==========================================
// ۴. مدیریت منوی موبایل
// ==========================================
function initMobileMenu() {
const menu = document.getElementById('mobile-menu');
if (!menu) return;
// پیدا کردن دکمه همبرگرری
const openBtn = header ? header.querySelector('button[aria-label="منوی موبایل"]') : null;
// پیدا کردن دکمه ضربدر داخل منو و بک‌دراپ
const closeBtn = menu.querySelector('button');
const backdrop = menu.querySelector('.absolute.inset-0');
if (openBtn) {
openBtn.addEventListener('click', function () {
menu.classList.remove('hidden');
body.style.overflow = 'hidden';
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closeMobileMenu);
}
if (backdrop) {
backdrop.addEventListener('click', closeMobileMenu);
}
}
function closeMobileMenu() {
const menu = document.getElementById('mobile-menu');
if (menu) {
menu.classList.add('hidden');
body.style.overflow = '';
}
}
// ==========================================
// ۵. میانبرهای کیبورد
// ==========================================
function initKeyboardShortcuts() {
document.addEventListener('keydown', function (e) {
// بستن با Escape
if (e.key === 'Escape') {
closeSearch();
closeMobileMenu();
}
// باز کردن جستجو با Ctrl+K
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
const overlay = document.getElementById('search-overlay');
if (overlay) {
overlay.classList.toggle('hidden');
if (!overlay.classList.contains('hidden')) {
body.style.overflow = 'hidden';
setTimeout(function () {
const input = overlay.querySelector('.search-field');
if (input) input.focus();
}, 150);
} else {
body.style.overflow = '';
}
}
}
});
}
// ==========================================
// ۶. اسکرول نرم برای لینک‌های #
// ==========================================
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach(function (anchor) {
anchor.addEventListener('click', function (e) {
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
closeMobileMenu(); // بستن منو اگر باز بود
const headerHeight = header ? header.offsetHeight : 0;
const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
const offsetPosition = elementPosition - headerHeight - 20;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
}
// ==========================================
// ۷. انیمیشن هنگام اسکرول (Scroll Reveal)
// ==========================================
function initScrollAnimations() {
const elements = document.querySelectorAll('.animate-slide-up, .animate-fade-in');
if (elements.length === 0) return;
// مخفی کردن اولیه
elements.forEach(function (el) {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.7s cubic-bezier(0.5, 0, 0, 1), transform 0.7s cubic-bezier(0.5, 0, 0, 1)';
});
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target); // توقف مشاهده پس از اجرا
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -40px 0px'
});
elements.forEach(function (el) {
observer.observe(el);
});
}
// ==========================================
// ۸. سیستم توست (برای استفاده در ووکامرس بعداً)
// ==========================================
window.motayebToast = function (message, type) {
type = type || 'success';
// حذف توست قبلی اگر وجود داشت
const existingToast = document.querySelector('.motayeb-toast-notification');
if (existingToast) existingToast.remove();
var toast = document.createElement('div');
toast.className = 'motayeb-toast-notification fixed top-24 left-1/2 -translate-x-1/2 z-[100] px-6 py-3 rounded-2xl shadow-2xl text-sm font-semibold text-white flex items-center gap-2 transition-all duration-300';
// تنظیم رنگ و آیکون
if (type === 'success') {
toast.style.backgroundColor = '#2D5F3F';
toast.innerHTML = '<iconify-icon icon="lucide:check-circle" width="20"></iconify-icon> ' + message;
} else if (type === 'error') {
toast.style.backgroundColor = '#dc2626';
toast.innerHTML = '<iconify-icon icon="lucide:x-circle" width="20"></iconify-icon> ' + message;
// Checkout
const checkoutItems = document.getElementById('checkout-items');
if (checkoutItems) {
if (cart.length === 0) {
checkoutItems.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-4">سبد خرید خالی است</p>';
} else {
toast.style.backgroundColor = '#8B5A3C';
toast.innerHTML = '<iconify-icon icon="lucide:info" width="20"></iconify-icon> ' + message;
checkoutItems.innerHTML = cart.map(i => `
<div class="flex items-center gap-3">
<img src="https://picsum.photos/seed/${i.img || 'default'}/60/60.jpg" class="w-12 h-12 rounded-lg object-cover">
<div class="flex-1 min-w-0">
<div class="text-sm font-medium line-clamp-1">${i.name}</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">${i.qty} عدد</div>
</div>
<div class="text-sm font-bold whitespace-nowrap">${formatPrice(i.price * i.qty)}</div>
</div>
`).join('');
}
const subtotalEl = document.getElementById('checkout-subtotal');
const totalEl = document.getElementById('checkout-total');
if (subtotalEl) subtotalEl.textContent = formatPrice(total) + ' تومان';
if (totalEl) totalEl.textContent = formatPrice(total) + ' تومان';
}
}
// حالت اولیه (مخفی بالای صفحه)
toast.style.opacity = '0';
toast.style.transform = 'translate(-50%, -20px)';
body.appendChild(toast);
function formatPrice(n) {
return n.toLocaleString('fa-IR');
}
// انیمیشن ورود
requestAnimationFrame(function () {
toast.style.opacity = '1';
toast.style.transform = 'translate(-50%, 0)';
// ============================================
// توابع UI
// ============================================
function openSearch() {
const overlay = document.getElementById('search-overlay');
if (overlay) {
overlay.classList.remove('hidden');
setTimeout(() => {
const input = document.getElementById('search-input');
if (input) input.focus();
}, 100);
}
}
function closeSearch() {
const overlay = document.getElementById('search-overlay');
if (overlay) overlay.classList.add('hidden');
const input = document.getElementById('search-input');
if (input) input.value = '';
const results = document.getElementById('search-results');
if (results) results.innerHTML = '';
const suggestions = document.getElementById('search-suggestions');
if (suggestions) suggestions.classList.remove('hidden');
}
function openCart() {
const drawer = document.getElementById('cart-drawer');
if (drawer) drawer.classList.remove('hidden');
}
function closeCart() {
const drawer = document.getElementById('cart-drawer');
if (drawer) drawer.classList.add('hidden');
}
function openMobileMenu() {
const menu = document.getElementById('mobile-menu');
if (menu) menu.classList.remove('hidden');
}
function closeMobileMenu() {
const menu = document.getElementById('mobile-menu');
if (menu) menu.classList.add('hidden');
}
function toggleDark() {
document.documentElement.classList.toggle('dark');
}
function toggleLang() {
showToast('نسخه انگلیسی به زودی اضافه می‌شود', 'info');
}
function goToCheckout() {
closeCart();
// هدایت به صفحه تسویه حساب ووکامرس
if (typeof motayeb_ajax !== 'undefined' && motayeb_ajax.checkout_url) {
window.location.href = motayeb_ajax.checkout_url;
} else {
// Fallback: اگر متغیر وجود نداشت، به صفحه سبد خرید برود
window.location.href = '/cart/';
}
}
// ============================================
// جستجو
// ============================================
function handleSearch(val) {
const results = document.getElementById('search-results');
const suggestions = document.getElementById('search-suggestions');
if (!results) return;
if (val.length < 2) {
results.innerHTML = '';
if (suggestions) suggestions.classList.remove('hidden');
return;
}
if (suggestions) suggestions.classList.add('hidden');
// ارسال درخواست Ajax برای جستجو
fetch(motayeb_ajax.ajax_url + '?action=search_products&term=' + encodeURIComponent(val) + '&nonce=' + motayeb_ajax.nonce)
.then(response => response.json())
.then(data => {
if (data.success && data.data.length > 0) {
results.innerHTML = data.data.map(p => `
<button onclick="closeSearch()" class="flex items-center gap-3 w-full p-3 rounded-xl hover:bg-cream-50 dark:hover:bg-dark-bg transition text-right">
<img src="${p.image || 'https://picsum.photos/seed/' + p.id + '/60/60.jpg'}" class="w-12 h-12 rounded-lg object-cover">
<div class="flex-1">
<div class="font-bold text-sm">${p.name}</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">${p.category || 'محصول'}</div>
</div>
<div class="text-sm font-bold text-forest-500 dark:text-forest-300">${formatPrice(p.price)}</div>
</button>
`).join('');
} else {
results.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-6">محصولی یافت نشد</p>';
}
})
.catch(() => {
// Mock results
results.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-6">خطا در جستجو. لطفاً دوباره تلاش کنید.</p>';
});
}
// حذف خودکار
setTimeout(function () {
toast.style.opacity = '0';
toast.style.transform = 'translate(-50%, -20px)';
setTimeout(function () { toast.remove(); }, 300);
}, 3000);
};
// ==========================================
// اجرای تمام توابع
// ==========================================
initDarkMode();
initHeaderScroll();
initSearchOverlay();
initMobileMenu();
initKeyboardShortcuts();
initSmoothScroll();
initScrollAnimations();
// ==========================================
// ۹. تعویض عکس در صفحه محصول
// ==========================================
window.changeProductImage = function (btn, imgUrl) {
// تغییر عکس اصلی
const mainImg = document.getElementById('main-product-image');
if (mainImg) {
mainImg.src = imgUrl;
mainImg.setAttribute('data-large_image', imgUrl);
}
// تغییر کلاس فعال تامبنیل‌ها
document.querySelectorAll('.gallery-thumb').forEach(function (thumb) {
thumb.classList.remove('active');
thumb.style.borderColor = '';
});
btn.classList.add('active');
};
// ==========================================
// ۱۰. ستاره‌های امتیازدهی سفارشی
// ==========================================
const starsContainer = document.getElementById('custom-star-rating');
const ratingInput = document.getElementById('rating');
if (starsContainer && ratingInput) {
const stars = starsContainer.querySelectorAll('.star');
stars.forEach(star => {
star.addEventListener('mouseenter', function() {
const val = this.dataset.value;
stars.forEach(s => {
s.style.color = s.dataset.value <= val ? '#D4A574' : '';
});
});
star.addEventListener('click', function() {
ratingInput.value = this.dataset.value;
stars.forEach(s => s.classList.remove('active'));
this.classList.add('active');
// رنگ دادن به همه ستاره‌های تا اون عدد
const val = this.dataset.value;
stars.forEach(s => {
if(s.dataset.value <= val) s.classList.add('active');
});
});
});
starsContainer.addEventListener('mouseleave', function() {
const currentVal = ratingInput.value;
stars.forEach(s => {
s.style.color = s.dataset.value <= currentVal ? '#D4A574' : '';
});
});
//زوم تصویر
function changeImage(src, btn) {
const mainImg = document.getElementById('main-product-img');
if (!mainImg) return;
// 1. تغییر تصویر اصلی
mainImg.src = src;
// 2. آپدیت ویژگی‌های ضروری برای زوم و پاپ‌آپ ووکامرس
mainImg.setAttribute('data-large_image', src);
mainImg.setAttribute('data-src', src);
// 3. مهمترین بخش برای پاپ‌آپ: آپدیت لینک والد (<a> اطراف عکس)
// ووکامرس برای باز کردن پاپ‌آپ از روی href این لینک استفاده می‌کند
const parentLink = mainImg.closest('a');
if (parentLink) {
parentLink.href = src;
}
// 4. بروزرسانی کلاس فعال روی thumbnails
document.querySelectorAll('.gallery-thumb').forEach(t => t.classList.remove('active'));
if (btn) btn.classList.add('active');
// 5. بازسازی مجدد Zoom (با متد مقاوم‌تر)
if (typeof jQuery !== 'undefined' && typeof jQuery.fn.zoom !== 'undefined') {
const $mainImg = jQuery(mainImg);
// والد بلافصل عکس را هدف قرار میدهیم (معمولاً یک <div> یا <a> است)
const $wrapper = $mainImg.parent();
// اگر والد قبلاً زوم داشته باشد، آن را نابود کن
$wrapper.trigger('zoom.destroy');
// زوم جدید را روی والد اعمال کن
$wrapper.zoom({
url: src,
touch: false
});
}
}
function selectWeight(btn, price) {
document.querySelectorAll('.weight-btn').forEach(b => {
b.classList.remove('active', 'border-forest-500', 'dark:border-forest-300', 'bg-forest-50', 'dark:bg-forest-900/30', 'text-forest-500', 'dark:text-forest-300');
b.classList.add('border-cream-200', 'dark:border-dark-border');
});
btn.classList.add('active', 'border-forest-500', 'dark:border-forest-300', 'bg-forest-50', 'dark:bg-forest-900/30', 'text-forest-500', 'dark:text-forest-300');
btn.classList.remove('border-cream-200', 'dark:border-dark-border');
selectedWeightPrice = price;
const priceEl = document.getElementById('product-price');
if (priceEl) priceEl.textContent = formatPrice(price);
}
function changeQty(delta) {
const el = document.getElementById('product-qty');
if (!el) return;
let val = parseInt(el.textContent) + delta;
if (val < 1) val = 1;
if (val > 10) val = 10;
el.textContent = val;
}
function switchTab(tabId, btn) {
document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('tab-active');
b.classList.add('text-cream-500', 'dark:text-dark-muted');
});
const target = document.getElementById('tab-' + tabId);
if (target) target.classList.remove('hidden');
if (btn) {
btn.classList.add('tab-active');
btn.classList.remove('text-cream-500', 'dark:text-dark-muted');
}
}
// ============================================
// علاقه‌مندی‌ها
// ============================================
function toggleWishlist(btn) {
const icon = btn.querySelector('iconify-icon');
if (!icon) return;
const currentIcon = icon.getAttribute('icon');
if (currentIcon === 'lucide:heart') {
icon.setAttribute('icon', 'lucide:heart');
icon.style.color = '#ef4444';
icon.style.fill = '#ef4444';
showToast('به علاقه‌مندی‌ها اضافه شد', 'info');
} else {
icon.style.color = '';
icon.style.fill = '';
showToast('از علاقه‌مندی‌ها حذف شد', 'info');
}
}
// ============================================
// Toast
// ============================================
function showToast(msg, type = 'info') {
const container = document.getElementById('toast-container');
if (!container) return;
const colors = { success: 'bg-forest-500', info: 'bg-earth-400', error: 'bg-red-500' };
const icons = { success: 'lucide:check-circle', info: 'lucide:info', error: 'lucide:alert-circle' };
const toast = document.createElement('div');
toast.className = `toast flex items-center gap-3 px-5 py-3 ${colors[type] || 'bg-earth-400'} text-white rounded-2xl shadow-xl text-sm font-medium`;
toast.innerHTML = `<iconify-icon icon="${icons[type] || 'lucide:info'}" width="20"></iconify-icon><span>${msg}</span>`;
container.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '0';
toast.style.transition = 'opacity 0.3s';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// ============================================
// فرم‌ها
// ============================================
function handleNewsletter(e) {
e.preventDefault();
const email = document.getElementById('newsletter-email');
if (email) {
showToast(email.value + ' با موفقیت ثبت شد!', 'success');
email.value = '';
}
}
function handleContact(e) {
e.preventDefault();
showToast('پیام شما با موفقیت ارسال شد. به زودی پاسخ می‌دهیم.', 'success');
e.target.reset();
}
// ============================================
// رویدادهای صفحه کلید
// ============================================
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeSearch();
closeCart();
closeMobileMenu();
}
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
openSearch();
}
});
// ============================================
// تغییر هدر هنگام اسکرول
// ============================================
let lastScroll = 0;
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (!header) return;
const scroll = window.scrollY;
if (scroll > 100) {
header.classList.add('shadow-lg');
} else {
header.classList.remove('shadow-lg');
}
lastScroll = scroll;
});
// ============================================
// مقداردهی اولیه
// ============================================
document.addEventListener('DOMContentLoaded', function() {
// تنظیم شمارنده سبد خرید از کوکی (اختیاری)
updateCartUI();
// اگر در صفحه محصول هستیم، کلاس‌های گالری رو تنظیم کن
const mainImg = document.getElementById('main-product-img');
if (mainImg) {
// اولین تصویر گالری رو به‌عنوان active تنظیم کن
const firstThumb = document.querySelector('.gallery-thumb');
if (firstThumb) firstThumb.classList.add('active');
}
});
// نمونه کد جایگزین برای تولید ستاره
function renderStars(rating) {
// ⚠️ اینجا را تغییر دهید: به جای 'ستاره_کانتینر_آیدی'، شناسه واقعی تگ div در HTML خود را بگذارید
const container = document.getElementById('star-rating'); // یا هر شناسه‌ای که در HTML دارید
if (!container) return; // اگر ظرف پیدا نشد، کد متوقف شود تا خطا ندهد
container.innerHTML = ''; // پاک کردن ظرف
for (let i = 1; i <= 5; i++) {
let star = document.createElement('i'); // ساختن تگ آیکون
if (i <= rating) {
star.className = 'fa-solid fa-star text-warning'; // ستاره پر طلایی
} else {
star.className = 'fa-regular fa-star text-secondary'; // ستاره خالی خاکستری
}
// اضافه کردن کلیک برای ثبت نظر
star.onclick = function() { setRating(i); };
container.appendChild(star);
}
}
document.addEventListener('DOMContentLoaded', function() {
// فرض کنید امتیاز فعلی محصول 0 است یا از دیتابیس می‌خوانید
let initialRating = 0; // یا عددی که از سمت سرور به جاوا اسکریپت پاس داده می‌شود
// اگر در صفحه جزئیات نظر هستیم، تابع ستاره‌ها را صدا بزنیم
const starContainer = document.getElementById('star-rating'); // همان شناسه بالا
if (starContainer) {
renderStars(initialRating);
}
});

0
assets/js/woocommerce.js Normal file
View File

2
comments.php
View File

@ -6,4 +6,4 @@ wp_list_comments(array(
'avatar_size' => 48,
'max_depth' => 3,
));
?>

141
footer.php
View File

@ -1,95 +1,120 @@
<!-- Mobile Bottom Nav -->
<nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border-t border-cream-200 dark:border-dark-border" style="padding-bottom: env(safe-area-inset-bottom, 0);">
<div class="flex items-center justify-around py-2">
<a href="<?php echo home_url(); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-forest-500 dark:text-forest-300">
<iconify-icon icon="lucide:home" width="22"></iconify-icon>
<span class="text-[10px] font-medium">خانه</span>
</a>
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:grid-3x3" width="22"></iconify-icon>
<span class="text-[10px] font-medium">دسته‌بندی</span>
</a>
<a href="<?php echo get_permalink( wc_get_page_id( 'cart' ) ); ?>" class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:shopping-bag" width="22"></iconify-icon>
<span class="text-[10px] font-medium">سبد خرید</span>
<?php if ( WC()->cart->get_cart_contents_count() > 0 ) : ?>
<span class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
<?php endif; ?>
</a>
<a href="<?php echo wp_login_url(); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:user" width="22"></iconify-icon>
<span class="text-[10px] font-medium">حساب من</span>
</a>
</div>
</nav>
<div class="md:hidden h-16"></div>
<?php
/**
* فوتر سایت - مطابق با UI Kolli.html
*
* @package Motayeb
*/
?>
</main><!-- پایان main -->
<!-- ===== FOOTER ===== -->
<footer class="bg-forest-500 dark:bg-forest-800 text-white">
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
<!-- Brand -->
<div class="col-span-2 md:col-span-1">
<div class="flex items-center gap-2.5 mb-5">
<div class="w-10 h-10 bg-white/10 rounded-2xl flex items-center justify-center">
<iconify-icon icon="lucide:leaf" width="20" class="text-honey-300"></iconify-icon>
</div>
<span class="font-extrabold text-xl">مطیب</span>
<div>
<span class="font-extrabold text-xl">مطیب</span>
<span class="block text-[9px] text-white/50 font-inter tracking-widest">MOTAYEB</span>
</div>
</div>
<p class="text-white/70 text-sm leading-relaxed mb-5">ارائه‌دهنده محصولات ارگانیک و طبیعی ایرانی با ضمانت اصالت و کیفیت.</p>
<div class="flex gap-3">
<a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:instagram" width="18"></iconify-icon></a>
<a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:send" width="18"></iconify-icon></a>
<a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:twitter" width="18"></iconify-icon></a>
</div>
</div>
<!-- Quick Links -->
<div>
<h4 class="font-bold mb-5">دسترسی سریع</h4>
<?php
if ( has_nav_menu( 'footer' ) ) {
wp_nav_menu( array(
'theme_location' => 'footer',
'container' => false,
'items_wrap' => '<ul class="space-y-3 text-sm text-white/70">%3$s</ul>',
'depth' => 1,
) );
} else { ?>
<ul class="space-y-3 text-sm text-white/70">
<li><a href="<?php echo home_url(); ?>" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
<li><a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="hover:text-honey-300 transition">فروشگاه</a></li>
</ul>
<?php } ?>
<ul class="space-y-3 text-sm text-white/70">
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
<li><a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="hover:text-honey-300 transition">فروشگاه</a></li>
<li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>" class="hover:text-honey-300 transition">درباره ما</a></li>
<li><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" class="hover:text-honey-300 transition">مجله سلامت</a></li>
<li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="hover:text-honey-300 transition">تماس با ما</a></li>
</ul>
</div>
<!-- Categories -->
<div>
<h4 class="font-bold mb-5">دسته‌بندی‌ها</h4>
<ul class="space-y-3 text-sm text-white/70">
<?php
$cat_links = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
'number' => 5,
) );
if ( ! empty( $cat_links ) && ! is_wp_error( $cat_links ) ) {
foreach ( $cat_links as $cat ) {
echo '<li><a href="' . esc_url( get_term_link( $cat ) ) . '" class="hover:text-honey-300 transition">' . esc_html( $cat->name ) . '</a></li>';
}
} else {
echo '<li><a href="#" class="hover:text-honey-300 transition">عسل طبیعی</a></li>';
echo '<li><a href="#" class="hover:text-honey-300 transition">ارده و حلوا</a></li>';
echo '<li><a href="#" class="hover:text-honey-300 transition">سرکه و ترشی</a></li>';
echo '<li><a href="#" class="hover:text-honey-300 transition">دمنوش گیاهی</a></li>';
echo '<li><a href="#" class="hover:text-honey-300 transition">خشکبار و آجیل</a></li>';
}
?>
</ul>
</div>
<!-- Customer Service -->
<div>
<h4 class="font-bold mb-5">خدمات مشتریان</h4>
<ul class="space-y-3 text-sm text-white/70">
<li><a href="#" class="hover:text-honey-300 transition">سوالات متداول</a></li>
<li><a href="#" class="hover:text-honey-300 transition">شرایط بازگشت</a></li>
<li><a href="#" class="hover:text-honey-300 transition">نحوه ارسال</a></li>
<li><a href="#" class="hover:text-honey-300 transition">حریم خصوصی</a></li>
<li><a href="#" class="hover:text-honey-300 transition">قوانین و مقررات</a></li>
</ul>
</div>
<?php if ( is_active_sidebar( 'footer-contact' ) ) : ?>
<div>
<?php dynamic_sidebar( 'footer-contact' ); ?>
</div>
<?php else: ?>
<div>
<h4 class="font-bold mb-5">تماس با ما</h4>
<ul class="space-y-3 text-sm text-white/70">
<li>تهران، خیابان ولیعصر</li>
<li>۰۲۱-۱۲۳۴۵۶۷۸</li>
<li class="font-inter" dir="ltr">info@motayeb.ir</li>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<!-- Bottom Bar -->
<div class="border-t border-white/10">
<div class="max-w-7xl mx-auto px-4 md:px-6 py-5 flex flex-col md:flex-row items-center justify-between gap-4">
<p class="text-xs text-white/50">© <?php echo date('Y'); ?> مطیب. تمامی حقوق محفوظ است.</p>
<p class="text-xs text-white/50">© <?php echo date_i18n( 'Y' ); ?> مطیب. تمامی حقوق محفوظ است.</p>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:shield-check" width="14" class="text-honey-300"></iconify-icon> نماد اعتماد</div>
<div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:badge-check" width="14" class="text-honey-300"></iconify-icon> ساماندهی</div>
</div>
</div>
</div>
</footer>
<!-- ===== MOBILE BOTTOM NAV ===== -->
<nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border-t border-cream-200 dark:border-dark-border bottom-nav">
<div class="flex items-center justify-around py-2">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-forest-500 dark:text-forest-300">
<iconify-icon icon="lucide:home" width="22"></iconify-icon>
<span class="text-[10px] font-medium">خانه</span>
</a>
<a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:grid-3x3" width="22"></iconify-icon>
<span class="text-[10px] font-medium">دسته‌بندی</span>
</a>
<button onclick="openCart()" class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:shopping-bag" width="22"></iconify-icon>
<span class="text-[10px] font-medium">سبد خرید</span>
<span id="mobile-cart-count" class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center hidden">0</span>
</button>
<button onclick="openMobileMenu()" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:user" width="22"></iconify-icon>
<span class="text-[10px] font-medium">حساب من</span>
</button>
</div>
</nav>
<!-- Spacer for mobile nav -->
<div class="md:hidden h-16"></div>
<?php wp_footer(); ?>
</body>
</html>

764
front-page.php
View File

@ -1,319 +1,489 @@
<?php
/**
* Template Name: صفحه اصلی مطیب
* صفحه اصلی - مطابق با UI Kolli.html
*
* @package Motayeb
*/
get_header();
?>
<main class="pt-16 md:pt-[104px]">
<!-- ===== HERO ===== -->
<section class="relative overflow-hidden honeycomb-bg">
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
<div class="text-center md:text-right">
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-forest-50 dark:bg-forest-900/30 rounded-full mb-6">
<span class="w-2 h-2 bg-forest-500 rounded-full animate-pulse"></span>
<span class="text-xs font-medium text-forest-500 dark:text-forest-300">محصولات ۱۰۰٪ ارگانیک و طبیعی</span>
</div>
<h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1] mb-6">
<?php
if ( function_exists('get_field') ) {
$hero_title = get_field('hero_title');
if ($hero_title) {
echo wp_kses_post($hero_title);
} else { ?>
<span class="text-earth-400 dark:text-dark-text">طعم</span>
<span class="text-forest-500 dark:text-forest-300"> واقعی</span>
<br>
<span class="text-honey-400">طبیعت</span>
<?php }
} else { ?>
<span class="text-earth-400 dark:text-dark-text">طعم</span>
<span class="text-forest-500 dark:text-forest-300"> واقعی</span>
<br>
<span class="text-honey-400">طبیعت</span>
<?php } ?>
</h1>
<p class="text-cream-500 dark:text-dark-muted text-base md:text-lg leading-relaxed mb-8 max-w-md mx-auto md:mx-0">
<?php echo function_exists('get_field') ? esc_html(get_field('hero_subtitle') ?: 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.') : 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.'; ?>
</p>
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-semibold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25">
<span><?php echo esc_html(function_exists('get_field') ? (get_field('hero_btn_text') ?: 'مشاهده محصولات') : 'مشاهده محصولات'); ?></span>
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
</a>
<a href="#brand-story" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-white/60 dark:bg-dark-card/60 border border-cream-200 dark:border-dark-border rounded-2xl font-semibold hover:bg-white dark:hover:bg-dark-card hover:-translate-y-0.5 transition-all backdrop-blur">
<span>داستان مطیب</span>
<iconify-icon icon="lucide:play-circle" width="18" class="text-honey-400"></iconify-icon>
</a>
</div>
<!-- Stats -->
<?php
if ( function_exists('get_field') ) {
$stats = get_field('stats');
if (is_array($stats) && count($stats) > 0): ?>
<div class="flex items-center gap-6 mt-10 justify-center md:justify-start">
<?php foreach($stats as $i => $stat): ?>
<div class="text-center">
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300"><?php echo esc_html($stat['number']); ?></div>
<div class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($stat['label']); ?></div>
</div>
<?php if($i < count($stats)-1) echo '<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>'; ?>
<?php endforeach; ?>
</div>
<?php endif;
} ?>
<!-- ===== HERO SECTION ===== -->
<section id="home" class="relative overflow-hidden honeycomb-bg leaf-pattern">
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
<div class="text-center md:text-right animate-slide-up">
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-forest-50 dark:bg-forest-900/30 rounded-full mb-6">
<span class="w-2 h-2 bg-forest-500 dark:bg-forest-300 rounded-full animate-pulse-soft"></span>
<span class="text-xs font-medium text-forest-500 dark:text-forest-300">محصولات ۱۰۰٪ ارگانیک و طبیعی</span>
</div>
<!-- Hero Image -->
<div class="relative">
<?php
if ( function_exists('get_field') ) {
$hero_img = get_field('hero_image');
if (is_array($hero_img) && isset($hero_img['url'])): ?>
<div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
<img src="<?php echo esc_url($hero_img['url']); ?>" alt="<?php echo esc_attr($hero_img['alt'] ?? ''); ?>" class="w-full h-[350px] md:h-[500px] object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
</div>
<?php else: ?>
<div class="relative rounded-3xl overflow-hidden shadow-2xl bg-cream-200 dark:bg-dark-card h-[350px] md:h-[500px] flex items-center justify-center">
<div class="text-center p-6">
<iconify-icon icon="lucide:image-plus" width="48" class="text-cream-400 dark:text-dark-muted mb-3"></iconify-icon>
<p class="text-sm text-cream-400 dark:text-dark-muted">لطفاً از تنظیمات صفحه، تصویر هیرو را آپلود کنید.</p>
</div>
</div>
<?php endif;
} else { ?>
<div class="relative rounded-3xl overflow-hidden shadow-2xl bg-cream-200 dark:bg-dark-card h-[350px] md:h-[500px] flex items-center justify-center">
<p class="text-sm text-cream-400">پلاگین ACF فعال نیست.</p>
</div>
<?php } ?>
<!-- Floating Card -->
<div class="absolute -bottom-4 -right-4 md:bottom-8 md:-right-8 bg-white dark:bg-dark-card rounded-2xl p-4 shadow-xl hidden md:block">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center">
<iconify-icon icon="lucide:award" width="24" class="text-honey-400"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm">گواهی ارگانیک</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">تأیید شده توسط سازمان غذا</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full"><path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" class="fill-cream-100 dark:fill-dark-bg"/></svg>
</div>
</section>
<!-- ===== CATEGORIES ===== -->
<?php
if ( function_exists('get_field') ) {
$categories = get_field('home_categories');
if (is_array($categories) && count($categories) > 0): ?>
<section class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="text-center mb-12">
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CATEGORIES</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-3">دسته‌بندی محصولات</h2>
<p class="text-cream-500 dark:text-dark-muted max-w-lg mx-auto">از عسل‌های کوهستان تا دمنوش‌های گیاهی، بهترین‌های طبیعت را کشف کنید</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
<?php foreach($categories as $cat):
$color_map = array('honey'=>'honey', 'forest'=>'forest', 'red'=>'red', 'emerald'=>'emerald', 'amber'=>'amber');
$c = $color_map[$cat['color']] ?? 'forest';
?>
<a href="<?php echo esc_url($cat['link']); ?>" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
<div class="w-16 h-16 mx-auto mb-4 bg-<?php echo $c; ?>-50 dark:bg-<?php echo $c; ?>-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
<iconify-icon icon="<?php echo esc_attr($cat['icon']); ?>" width="32" class="text-<?php echo $c; ?>-500 dark:text-<?php echo $c; ?>-300"></iconify-icon>
</div>
<h3 class="font-bold text-sm mb-1"><?php echo esc_html($cat['title']); ?></h3>
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($cat['count']); ?></span>
</a>
<?php endforeach; ?>
</div>
</div>
</section>
<?php endif;
} ?>
<!-- ===== BESTSELLERS ===== -->
<?php
if ( function_exists('get_field') ) {
$bestseller_ids = get_field('bestseller_ids');
if (is_array($bestseller_ids) && count($bestseller_ids) > 0): ?>
<section class="py-16 md:py-24 bg-white dark:bg-dark-card">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="flex items-end justify-between mb-10">
<div>
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BESTSELLERS</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">پرفروش‌ترین‌ها</h2>
</div>
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
<span>مشاهده همه</span>
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
</a>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
<?php foreach( $bestseller_ids as $product_id ):
$product = wc_get_product( $product_id );
if ( ! $product ) continue;
?>
<div class="product-card group bg-cream-50 dark:bg-dark-bg rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all">
<a href="<?php echo get_permalink($product_id); ?>" class="block relative overflow-hidden">
<img src="<?php echo wp_get_attachment_image_url( $product->get_image_id(), 'medium' ); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" class="product-img w-full h-48 md:h-56 object-cover">
<?php if( $product->is_on_sale() ): ?>
<div class="absolute top-3 right-3"><span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">تخفیف</span></div>
<?php endif; ?>
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
<a href="<?php echo esc_url($product->add_to_cart_url()); ?>" 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> افزودن
</a>
</div>
<h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1] mb-6">
<span class="text-earth-400 dark:text-dark-text">طعم</span>
<span class="text-forest-500 dark:text-forest-300"> واقعی</span>
<br>
<span class="text-honey-400">طبیعت</span>
</h1>
<p class="text-cream-500 dark:text-dark-muted text-base md:text-lg leading-relaxed mb-8 max-w-md mx-auto md:mx-0">
از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است. با طعم‌های اصیل و سلامت واقعی آشنا شوید.
</p>
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
<a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-semibold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25">
<span>مشاهده محصولات</span>
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
</a>
<div class="p-4">
<a href="<?php echo get_permalink($product_id); ?>" class="block font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php echo $product->get_name(); ?></a>
<div class="flex items-end gap-2">
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo $product->get_price_html(); ?></span>
</div>
<a href="<?php echo esc_url( home_url( '/about' ) ); ?>" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-white/60 dark:bg-dark-card/60 border border-cream-200 dark:border-dark-border rounded-2xl font-semibold hover:bg-white dark:hover:bg-dark-card hover:-translate-y-0.5 transition-all backdrop-blur">
<span>داستان مطیب</span>
<iconify-icon icon="lucide:play-circle" width="18" class="text-honey-400"></iconify-icon>
</a>
</div>
<!-- Trust Stats -->
<div class="flex items-center gap-6 mt-10 justify-center md:justify-start">
<div class="text-center">
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300">+۲۵۰</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">محصول ارگانیک</div>
</div>
<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>
<div class="text-center">
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300">+۱۵K</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">مشتری راضی</div>
</div>
<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>
<div class="text-center">
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300">۳۱</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">استان تحت پوشش</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<?php endif;
} ?>
<!-- ===== BRAND STORY ===== -->
<?php
if ( function_exists('get_field') && get_field('story_title') ): ?>
<section id="brand-story" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="relative">
<?php $story_img = get_field('story_image'); if(is_array($story_img) && isset($story_img['url'])): ?>
<div class="rounded-3xl overflow-hidden shadow-xl">
<img src="<?php echo esc_url($story_img['url']); ?>" alt="<?php echo esc_attr($story_img['alt'] ?? ''); ?>" class="w-full h-[350px] md:h-[450px] object-cover">
</div>
<?php endif; ?>
<!-- Hero Image -->
<div class="relative animate-fade-in">
<div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
<img src="https://picsum.photos/seed/organic-honey-jar/700/600.jpg" alt="محصولات ارگانیک مطیب" class="w-full h-[350px] md:h-[500px] object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
</div>
<div>
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-6"><?php echo esc_html(get_field('story_title')); ?></h2>
<p class="text-cream-500 dark:text-dark-muted leading-relaxed mb-6"><?php echo esc_html(get_field('story_text')); ?></p>
<?php $values = get_field('story_values'); if(is_array($values) && count($values) > 0): ?>
<div class="grid grid-cols-2 gap-4 mb-8">
<?php foreach($values as $val): ?>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="<?php echo esc_attr($val['icon']); ?>" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5"><?php echo esc_html($val['title']); ?></div>
<div class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($val['desc']); ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php $badges = get_field('certificates'); if(is_array($badges) && count($badges) > 0): ?>
<div class="flex items-center gap-3 flex-wrap">
<?php foreach($badges as $badge): ?>
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span><?php echo esc_html($badge['text']); ?></span>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</section>
<?php endif; ?>
<!-- ===== TESTIMONIALS ===== -->
<?php
if ( function_exists('get_field') ) {
$testimonials = get_field('testimonials');
if (is_array($testimonials) && count($testimonials) > 0): ?>
<section class="py-16 md:py-24 bg-forest-500 dark:bg-forest-800 relative overflow-hidden">
<div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
<div class="max-w-7xl mx-auto px-4 md:px-6 relative">
<div class="text-center mb-12">
<span class="text-xs font-medium text-honey-300 tracking-wider font-inter">TESTIMONIALS</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 text-white">نظرات مشتریان ما</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<?php foreach($testimonials as $test): ?>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
<div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
<p class="text-white/90 text-sm leading-relaxed mb-5">«<?php echo esc_html($test['text']); ?>»</p>
<!-- Floating Card 1 -->
<div class="absolute -bottom-4 -right-4 md:bottom-8 md:-right-8 bg-white dark:bg-dark-card rounded-2xl p-4 shadow-xl animate-float">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white"><?php echo esc_html($test['initials']); ?></div>
<div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center">
<iconify-icon icon="lucide:award" width="24" class="text-honey-400"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm text-white"><?php echo esc_html($test['name']); ?></div>
<div class="text-xs text-white/60"><?php echo esc_html($test['city']); ?></div>
<div class="font-bold text-sm">گواهی ارگانیک</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">تأیید شده توسط سازمان غذا</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<?php endif;
} ?>
<!-- ===== NEWSLETTER ===== -->
<section class="py-16 md:py-20 bg-white dark:bg-dark-card">
<div class="max-w-3xl mx-auto px-4 md:px-6 text-center">
<div class="w-16 h-16 mx-auto mb-6 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center">
<iconify-icon icon="lucide:mail" width="32" class="text-honey-400"></iconify-icon>
</div>
<h2 class="text-2xl md:text-3xl font-extrabold mb-3"><?php echo esc_html(function_exists('get_field') ? (get_field('newsletter_title') ?: 'از تخفیف‌ها باخبر شوید') : 'از تخفیف‌ها باخبر شوید'); ?></h2>
<p class="text-cream-500 dark:text-dark-muted mb-8"><?php echo esc_html(function_exists('get_field') ? (get_field('newsletter_text') ?: 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.') : 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.'); ?></p>
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" placeholder="ایمیل خود را وارد کنید..." required class="flex-1 px-5 py-3.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-2xl text-sm outline-none focus:border-forest-500 transition placeholder:text-cream-400">
<button type="submit" class="px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition whitespace-nowrap">عضویت</button>
</form>
</div>
</section>
<!-- ===== TRUST BADGES ===== -->
<section class="py-12 bg-cream-50 dark:bg-dark-bg border-y border-cream-200 dark:border-dark-border">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:truck" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
<div class="font-bold text-sm">ارسال سریع</div><div class="text-xs text-cream-500 dark:text-dark-muted">به سراسر ایران</div>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:shield-check" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
<div class="font-bold text-sm">ضمانت اصالت</div><div class="text-xs text-cream-500 dark:text-dark-muted">۱۰۰٪ اصل و طبیعی</div>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:credit-card" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
<div class="font-bold text-sm">پرداخت امن</div><div class="text-xs text-cream-500 dark:text-dark-muted">درگاه‌های معتبر</div>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm"><iconify-icon icon="lucide:rotate-ccw" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon></div>
<div class="font-bold text-sm">بازگشت آسان</div><div class="text-xs text-cream-500 dark:text-dark-muted">۷ روز ضمانت</div>
<!-- Floating Card 2 -->
<div class="absolute -top-4 -left-4 md:top-8 md:-left-8 bg-white dark:bg-dark-card rounded-2xl p-3 shadow-xl animate-float" style="animation-delay:1s">
<div class="flex items-center gap-2">
<div class="flex -space-x-2 space-x-reverse">
<div class="w-8 h-8 rounded-full bg-forest-100 dark:bg-forest-800 flex items-center justify-center text-xs font-bold text-forest-500">م</div>
<div class="w-8 h-8 rounded-full bg-honey-100 dark:bg-honey-800 flex items-center justify-center text-xs font-bold text-honey-400">ع</div>
<div class="w-8 h-8 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-xs font-bold text-earth-400">ز</div>
</div>
<div>
<div class="flex text-honey-400 text-xs">★★★★★</div>
<div class="text-[10px] text-cream-500 dark:text-dark-muted">+۴.۸ از ۵۰۰۰ نظر</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Wave Divider -->
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
<path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" class="fill-cream-100 dark:fill-dark-bg"/>
</svg>
</div>
</section>
</main>
<!-- ===== CATEGORIES SECTION ===== -->
<section class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="text-center mb-12">
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CATEGORIES</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-3">دسته‌بندی محصولات</h2>
<p class="text-cream-500 dark:text-dark-muted max-w-lg mx-auto">از عسل‌های کوهستان تا دمنوش‌های گیاهی، بهترین‌های طبیعت را کشف کنید</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
<?php
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => 0,
'number' => 5,
'orderby' => 'name',
'order' => 'ASC',
) );
<?php get_footer(); ?>
$icons = array( 'lucide:hexagon', 'lucide:droplets', 'lucide:flask-round', 'lucide:cup-soda', 'lucide:nut' );
$colors = array( 'bg-honey-50 dark:bg-honey-900/20 text-honey-400', 'bg-forest-50 dark:bg-forest-900/20 text-forest-500 dark:text-forest-300', 'bg-red-50 dark:bg-red-900/20 text-red-400', 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-500', 'bg-amber-50 dark:bg-amber-900/20 text-amber-500' );
$i = 0;
if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) {
foreach ( $categories as $category ) {
$count = $category->count;
$icon = isset( $icons[ $i ] ) ? $icons[ $i ] : 'lucide:tag';
$color = isset( $colors[ $i ] ) ? $colors[ $i ] : 'bg-cream-50 dark:bg-dark-bg text-cream-500';
?>
<a href="<?php echo esc_url( get_term_link( $category ) ); ?>" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
<div class="w-16 h-16 mx-auto mb-4 <?php echo esc_attr( $color ); ?> rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
<iconify-icon icon="<?php echo esc_attr( $icon ); ?>" width="32"></iconify-icon>
</div>
<h3 class="font-bold text-sm mb-1"><?php echo esc_html( $category->name ); ?></h3>
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html( $count ); ?> محصول</span>
</a>
<?php
$i++;
}
} else {
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-5">هنوز دسته‌بندی‌ای ایجاد نشده است.</p>';
}
?>
</div>
</div>
</section>
<!-- ===== BESTSELLERS SECTION ===== -->
<section id="shop" class="py-16 md:py-24 bg-white dark:bg-dark-card">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="flex items-end justify-between mb-10">
<div>
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BESTSELLERS</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">پرفروش‌ترین‌ها</h2>
</div>
<a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
<span>مشاهده همه</span>
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
</a>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
<?php
$bestsellers = new WP_Query( array(
'post_type' => 'product',
'posts_per_page' => 4,
'meta_key' => 'total_sales',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'meta_query' => array(
array(
'key' => '_stock_status',
'value' => 'instock',
'compare' => '=',
),
),
) );
if ( $bestsellers->have_posts() ) :
while ( $bestsellers->have_posts() ) :
$bestsellers->the_post();
$product = wc_get_product( get_the_ID() );
if ( ! $product ) {
continue;
}
$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 relative">
<a href="<?php the_permalink(); ?>" class="block">
<div class="relative overflow-hidden">
<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">
<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>
<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"><?php the_title(); ?></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>
</a>
<!-- Quick Actions -->
<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>
<?php
endwhile;
wp_reset_postdata();
else :
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-4">' . esc_html__( 'هنوز محصولی وجود ندارد.', 'motayeb' ) . '</p>';
endif;
?>
</div>
</div>
</section>
<!-- ===== BRAND STORY SECTION ===== -->
<section id="about" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden leaf-pattern">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="relative">
<div class="rounded-3xl overflow-hidden shadow-xl">
<img src="https://picsum.photos/seed/organic-farm-nature/600/500.jpg" alt="مزرعه ارگانیک" class="w-full h-[350px] md:h-[450px] object-cover">
</div>
<div class="absolute -bottom-6 -left-6 bg-white dark:bg-dark-card rounded-2xl p-5 shadow-xl max-w-[200px]">
<div class="text-3xl font-extrabold text-forest-500 dark:text-forest-300">+۱۲</div>
<div class="text-sm text-earth-400 dark:text-dark-text font-medium">سال تجربه</div>
<div class="text-xs text-cream-500 dark:text-dark-muted mt-1">در تولید محصولات ارگانیک</div>
</div>
</div>
<div>
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-6">داستان مطیب،<br>از طبیعت تا سفره شما</h2>
<p class="text-cream-500 dark:text-dark-muted leading-relaxed mb-6">
مطیب از سال ۱۳۹۰ با هدف عرضه محصولات ارگانیک و طبیعی ایرانی آغاز به کار کرد. ما مستقیماً از زنبورداران، کشاورزان و تولیدکنندگان سنتی سراسر ایران خرید می‌کنیم و با حفظ کیفیت اولیه، آنها را به سفره خانواده‌های ایرانی می‌رسانیم.
</p>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:sprout" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">کشت ارگانیک</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">بدون سم و کود شیمیایی</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:shield-check" width="20" class="text-honey-400"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">تضمین اصالت</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">آزمایشگاهی و مستند</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:recycle" width="20" class="text-emerald-500"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">بسته‌بندی سبز</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">دوست‌دار محیط زیست</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:map-pin" width="20" class="text-blue-500"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">تأمین محلی</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">حمایت از کشاورز ایرانی</div>
</div>
</div>
</div>
<!-- Certification Badges -->
<div class="flex items-center gap-3 flex-wrap">
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>گواهی ارگانیک ایران</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>استاندارد ملی بهداشت</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>نماد اعتماد الکترونیکی</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== TESTIMONIALS SECTION ===== -->
<section class="py-16 md:py-24 bg-forest-500 dark:bg-forest-800 relative overflow-hidden">
<div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
<div class="max-w-7xl mx-auto px-4 md:px-6 relative">
<div class="text-center mb-12">
<span class="text-xs font-medium text-honey-300 tracking-wider font-inter">TESTIMONIALS</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 text-white">نظرات مشتریان ما</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<?php
$testimonials = array(
array(
'name' => 'زهرا کریمی',
'city' => 'تهران',
'text' => 'از وقتی عسل مطیب استفاده می‌کنیم، دیگه هیچ عسلی برامون قابل قبول نیست. طعم واقعی عسل رو با مطیب شناختیم.',
'stars' => 5,
),
array(
'name' => 'حسین نوری',
'city' => 'اصفهان',
'text' => 'ارده و شیره‌های مطیب کیفیت استثنایی دارن. بسته‌بندی هم بسیار تمیز و بهداشتیه. برای صبحانه عالیه.',
'stars' => 5,
),
array(
'name' => 'فاطمه موسوی',
'city' => 'شیراز',
'text' => 'دمنوش‌های گیاهی مطیب واقعاً طبیعین. برخلاف خیلی از برندها، عطر و طعم واقعی گیاهان رو حس می‌کنی.',
'stars' => 5,
),
);
foreach ( $testimonials as $t ) :
$initial = mb_substr( $t['name'], 0, 1 );
?>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
<div class="flex text-honey-300 text-sm mb-4">
<?php for ( $i = 0; $i < $t['stars']; $i++ ) : ?>
★
<?php endfor; ?>
</div>
<p class="text-white/90 text-sm leading-relaxed mb-5">«<?php echo esc_html( $t['text'] ); ?>»</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white"><?php echo esc_html( $initial ); ?></div>
<div>
<div class="font-bold text-sm text-white"><?php echo esc_html( $t['name'] ); ?></div>
<div class="text-xs text-white/60"><?php echo esc_html( $t['city'] ); ?></div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ===== BLOG SECTION ===== -->
<section id="blog" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="flex items-end justify-between mb-10">
<div>
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BLOG</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">مجله سلامت مطیب</h2>
</div>
<a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
<span>همه مقالات</span>
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
</a>
</div>
<div class="grid md:grid-cols-3 gap-6">
<?php
$blog_posts = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
) );
if ( $blog_posts->have_posts() ) :
while ( $blog_posts->have_posts() ) :
$blog_posts->the_post();
$categories = get_the_category();
$cat_name = ! empty( $categories ) ? $categories[0]->name : 'سلامت';
$cat_color = 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300';
if ( $cat_name === 'دستور پخت' || $cat_name === 'غذا' ) {
$cat_color = 'bg-honey-50 dark:bg-honey-900/30 text-honey-400';
} elseif ( $cat_name === 'سبک زندگی' ) {
$cat_color = 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500';
}
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/600/400.jpg';
?>
<article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
<div class="overflow-hidden h-48">
<img src="<?php echo esc_url( $img_src ); ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="<?php the_title_attribute(); ?>">
</div>
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="px-2.5 py-0.5 <?php echo esc_attr( $cat_color ); ?> text-xs rounded-full font-medium"><?php echo esc_html( $cat_name ); ?></span>
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_date( 'j F Y' ); ?></span>
</div>
<h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2"><?php echo wp_trim_words( get_the_excerpt(), 10, '...' ); ?></p>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
else :
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-3">هنوز مطلبی منتشر نشده است.</p>';
endif;
?>
</div>
</div>
</section>
<!-- ===== NEWSLETTER SECTION ===== -->
<section class="py-16 md:py-20 bg-white dark:bg-dark-card">
<div class="max-w-3xl mx-auto px-4 md:px-6 text-center">
<div class="w-16 h-16 mx-auto mb-6 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center">
<iconify-icon icon="lucide:mail" width="32" class="text-honey-400"></iconify-icon>
</div>
<h2 class="text-2xl md:text-3xl font-extrabold mb-3">از تخفیف‌ها باخبر شوید</h2>
<p class="text-cream-500 dark:text-dark-muted mb-8">با عضویت در خبرنامه، از جدیدترین محصولات و تخفیف‌های ویژه مطلع شوید.</p>
<form onsubmit="handleNewsletter(event)" class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" id="newsletter-email" placeholder="ایمیل خود را وارد کنید..." required class="flex-1 px-5 py-3.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-2xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
<button type="submit" class="px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition whitespace-nowrap">عضویت در خبرنامه</button>
</form>
</div>
</section>
<!-- ===== TRUST BADGES ===== -->
<section class="py-12 bg-cream-50 dark:bg-dark-bg border-y border-cream-200 dark:border-dark-border">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
<iconify-icon icon="lucide:truck" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div class="font-bold text-sm">ارسال سریع</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">به سراسر ایران</div>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
<iconify-icon icon="lucide:shield-check" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div class="font-bold text-sm">ضمانت اصالت</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">۱۰۰٪ اصل و طبیعی</div>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
<iconify-icon icon="lucide:credit-card" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div class="font-bold text-sm">پرداخت امن</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">درگاه‌های معتبر</div>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
<iconify-icon icon="lucide:rotate-ccw" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div class="font-bold text-sm">بازگشت آسان</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">۷ روز ضمانت</div>
</div>
</div>
</div>
</section>
<?php
get_footer();

638
functions.php
View File

@ -1,263 +1,451 @@
<?php
// جلوگیری از دسترسی مستقیم
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* توابع اختصاصی تم مطیب
*
* @package Motayeb
* @version 1.0.0
*/
// ۱. فعال‌سازی قابلیت‌های پایه وردپرس
function motayeb_setup() {
// جلوگیری از دسترسی مستقیم
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// ============================================================
// ۱. تنظیمات اولیه تم (Theme Setup)
// ============================================================
function motayeb_theme_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) );
add_theme_support( 'custom-logo', array(
'height' => 60,
'width' => 200,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
) );
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
register_nav_menus( array(
'primary' => __( 'منوی اصلی', 'motayeb' ),
'footer' => __( 'منوی فوتر', 'motayeb' ),
add_theme_support( 'html5', array(
'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script',
) );
add_theme_support( 'align-wide' );
add_theme_support( 'responsive-embeds' );
register_nav_menus( array(
'primary' => esc_html__( 'منوی اصلی', 'motayeb' ),
'footer' => esc_html__( 'منوی فوتر', 'motayeb' ),
) );
add_image_size( 'motayeb-product-grid', 400, 400, true );
add_image_size( 'motayeb-product-single', 600, 600, true );
}
add_action( 'after_setup_theme', 'motayeb_setup' );
add_action( 'after_setup_theme', 'motayeb_theme_setup' );
// ۲. لود فایل‌های CSS و JS
// ============================================================
// ۲. بارگذاری فایل‌های استایل و اسکریپت (Enqueue)
// ============================================================
function motayeb_scripts() {
wp_enqueue_style( 'vazirmatn', 'https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap', array(), null );
wp_enqueue_script( 'tailwind-cdn', 'https://cdn.tailwindcss.com', array(), null, false );
wp_add_inline_script( 'tailwind-cdn', "
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
forest: { 50:'#e8f5ec', 100:'#c6e6cf', 200:'#9ed0ae', 300:'#6fb88a', 400:'#4a9a6b', 500:'#2D5F3F', 600:'#254d34', 700:'#1c3b28', 800:'#13291c', 900:'#0a1710' },
cream: { 50:'#FDFBF7', 100:'#F5F0E8', 200:'#EBE3D5', 300:'#DDD2BF', 400:'#C4B49A', 500:'#A99478' },
honey: { 50:'#FDF5ED', 100:'#F9E6D0', 200:'#F2CC9E', 300:'#E8AC6A', 400:'#D4A574', 500:'#C08B52', 600:'#A07040', 700:'#7D5630', 800:'#5A3D20', 900:'#3A2612' },
earth: { 50:'#F5EDE7', 100:'#E8D5C7', 200:'#D4B5A0', 300:'#BF9276', 400:'#8B5A3C', 500:'#734A30', 600:'#5C3B25', 700:'#452C1B', 800:'#2E1D12', 900:'#170E09' },
dark: { bg:'#1A1D23', card:'#22262E', border:'#2E333D', text:'#E8E6E3', muted:'#9CA3AF' }
},
fontFamily: { vazir: ['Vazirmatn', 'sans-serif'], inter: ['Inter', 'sans-serif'] }
}
}
}
" );
wp_enqueue_style( 'motayeb-main', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );
wp_enqueue_script( 'iconify', 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js', array(), null, true );
wp_enqueue_script( 'motayeb-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
wp_enqueue_style( 'motayeb-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
if ( class_exists( 'WooCommerce' ) ) {
wp_enqueue_style( 'motayeb-woocommerce', get_theme_file_uri( '/assets/css/woocommerce.css' ), array( 'motayeb-style' ), wp_get_theme()->get( 'Version' ) );
}
wp_enqueue_style( 'motayeb-responsive', get_theme_file_uri( '/assets/css/responsive.css' ), array( 'motayeb-style' ), wp_get_theme()->get( 'Version' ) );
wp_enqueue_script( 'motayeb-main', get_theme_file_uri( '/assets/js/main.js' ), array( 'jquery' ), wp_get_theme()->get( 'Version' ), true );
if ( class_exists( 'WooCommerce' ) ) {
wp_enqueue_script( 'motayeb-woocommerce', get_theme_file_uri( '/assets/js/woocommerce.js' ), array( 'jquery', 'motayeb-main' ), wp_get_theme()->get( 'Version' ), true );
}
wp_enqueue_script( 'motayeb-darkmode', get_theme_file_uri( '/assets/js/darkmode.js' ), array( 'jquery' ), wp_get_theme()->get( 'Version' ), true );
wp_localize_script( 'motayeb-main', 'motayeb_ajax', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'motayeb_nonce' ),
'checkout_url' => wc_get_checkout_url(),
'cart_url' => wc_get_cart_url(),
) );
if ( is_product() ) { wp_enqueue_script( 'wc-single-product' ); }
if ( is_cart() ) { wp_enqueue_script( 'wc-cart' ); }
if ( is_checkout() ) { wp_enqueue_script( 'wc-checkout' ); }
}
add_action( 'wp_enqueue_scripts', 'motayeb_scripts' );
// ۳. حذف استایل پیش‌فرض ووکامرس
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
// ۴. بازنویسی تگ‌های Wraper ووکامرس
function motayeb_woo_wrapper_start() {
echo '<main id="primary" class="pt-16 md:pt-[104px]"><div class="max-w-7xl mx-auto px-4 md:px-6 py-8">';
// ============================================================
// ۳. ثبت ناحیه‌های ویجت (Widget Areas)
// ============================================================
function motayeb_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'سایدبار اصلی', 'motayeb' ),
'id' => 'sidebar-main',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
if ( class_exists( 'WooCommerce' ) ) {
register_sidebar( array(
'name' => esc_html__( 'سایدبار فروشگاه', 'motayeb' ),
'id' => 'sidebar-shop',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
for ( $i = 1; $i <= 4; $i++ ) {
register_sidebar( array(
'name' => esc_html__( 'فوتر - ستون ' . $i, 'motayeb' ),
'id' => 'footer-' . $i,
'before_widget' => '<div id="%1$s" class="footer-widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="footer-widget-title">',
'after_title' => '</h4>',
) );
}
}
function motayeb_woo_wrapper_end() {
echo '</div></main>';
}
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
add_action( 'woocommerce_before_main_content', 'motayeb_woo_wrapper_start', 10 );
add_action( 'woocommerce_after_main_content', 'motayeb_woo_wrapper_end', 10 );
add_action( 'widgets_init', 'motayeb_widgets_init' );
// ۵. تنظیمات فروشگاه
// ============================================================
// ۴. توابع کمکی ووکامرس
// ============================================================
add_filter( 'loop_shop_columns', function() { return 4; } );
add_filter( 'loop_shop_per_page', function() { return 12; } );
// ۶. اضافه کردن کلاس nav-link به منو
add_filter('nav_menu_link_attributes', 'motayeb_add_nav_link_class', 10, 3);
function motayeb_add_nav_link_class($atts, $item, $args) {
if ($args->theme_location === 'primary') {
$atts['class'] = isset($atts['class']) ? $atts['class'] . ' nav-link' : 'nav-link';
function motayeb_body_classes( $classes ) {
if ( class_exists( 'WooCommerce' ) ) {
if ( is_product() ) { $classes[] = 'motayeb-product-page'; }
if ( is_shop() ) { $classes[] = 'motayeb-shop-page'; }
}
return $atts;
if ( isset( $_COOKIE['motayeb_darkmode'] ) && 'on' === $_COOKIE['motayeb_darkmode'] ) {
$classes[] = 'dark-mode';
}
return $classes;
}
add_filter( 'body_class', 'motayeb_body_classes' );
// ============================================================
// ۵. کلاس‌های Walker برای منو
// ============================================================
class Motayeb_Desktop_Walker extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$output .= '<ul class="absolute top-full right-0 min-w-[200px] bg-white dark:bg-dark-card shadow-xl rounded-xl p-2 mt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 border border-cream-200 dark:border-dark-border">';
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$classes = 'relative group';
if ( $depth === 0 ) {
$classes .= ' nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition';
}
$output .= '<li class="' . esc_attr( $classes ) . '">';
$output .= '<a href="' . esc_url( $item->url ) . '" class="block px-1 py-2">' . esc_html( $item->title ) . '</a>';
}
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= '</li>';
}
}
class Motayeb_Mobile_Walker extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$output .= '<a href="' . esc_url( $item->url ) . '" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">';
$output .= '<iconify-icon icon="lucide:chevron-left" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>';
$output .= '<span class="font-medium">' . esc_html( $item->title ) . '</span>';
$output .= '</a>';
}
public function end_el( &$output, $item, $depth = 0, $args = array() ) {}
}
// ۸. فیلدهای صفحه اصلی (ACF)
if ( function_exists( 'acf_add_local_field_group' ) ) {
acf_add_local_field_group( array(
'key' => 'group_motayeb_homepage',
'title' => 'تنظیمات صفحه اصلی مطیب',
'fields' => array(
array( 'key' => 'field_hero_tab', 'label' => 'بخش هیرو', 'type' => 'tab' ),
array( 'key' => 'field_hero_title', 'name' => 'hero_title', 'label' => 'عنوان اصلی', 'type' => 'wysiwyg', 'tabs' => 'all', 'toolbar' => 'full', 'media_upload' => false, 'default_value' => '<span style="color: #8B5A3C;">طعم</span> <span style="color: #2D5F3F;">واقعی</span><br><span style="color: #D4A574;">طبیعت</span>' ),
array( 'key' => 'field_hero_subtitle', 'name' => 'hero_subtitle', 'label' => 'زیرعنوان', 'type' => 'textarea', 'rows' => 2, 'default_value' => 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.' ),
array( 'key' => 'field_hero_image', 'name' => 'hero_image', 'label' => 'تصویر هیرو', 'type' => 'image', 'return_format' => 'array' ),
array( 'key' => 'field_hero_btn_text', 'name' => 'hero_btn_text', 'label' => 'متن دکمه', 'type' => 'text', 'default_value' => 'مشاهده محصولات' ),
array( 'key' => 'field_stats_tab', 'label' => 'آمار', 'type' => 'tab' ),
array( 'key' => 'field_stats', 'name' => 'stats', 'label' => 'آمار', 'type' => 'repeater', 'layout' => 'horizontal', 'button_label' => 'افزودن', 'sub_fields' => array(
array( 'key' => 'field_stat_number', 'name' => 'number', 'label' => 'عدد', 'type' => 'text' ),
array( 'key' => 'field_stat_label', 'name' => 'label', 'label' => 'توضیح', 'type' => 'text' ),
)),
array( 'key' => 'field_cats_tab', 'label' => 'دسته‌بندی‌ها', 'type' => 'tab' ),
array( 'key' => 'field_categories', 'name' => 'home_categories', 'label' => 'دسته‌بندی‌ها', 'type' => 'repeater', 'layout' => 'table', 'button_label' => 'افزودن', 'sub_fields' => array(
array( 'key' => 'field_cat_title', 'name' => 'title', 'label' => 'نام', 'type' => 'text' ),
array( 'key' => 'field_cat_icon', 'name' => 'icon', 'label' => 'آیکون', 'type' => 'text' ),
array( 'key' => 'field_cat_color', 'name' => 'color', 'label' => 'رنگ', 'type' => 'select', 'choices' => array( 'honey' => 'عسلی', 'forest' => 'سبز', 'red' => 'قرمز', 'emerald' => 'سبز روشن', 'amber' => 'کهربایی' ) ),
array( 'key' => 'field_cat_link', 'name' => 'link', 'label' => 'لینک', 'type' => 'url' ),
array( 'key' => 'field_cat_count', 'name' => 'count', 'label' => 'تعداد', 'type' => 'text' ),
)),
array( 'key' => 'field_bestsellers_tab', 'label' => 'پرفروش‌ها', 'type' => 'tab' ),
array( 'key' => 'field_bestsellers', 'name' => 'bestseller_ids', 'label' => 'محصولات پرفروش', 'type' => 'relationship', 'post_type' => array( 'product' ), 'filters' => array( 'search' ), 'elements' => array( 'featured_image' ), 'min' => 1, 'max' => 8, 'return_format' => 'id' ),
array( 'key' => 'field_story_tab', 'label' => 'داستان برند', 'type' => 'tab' ),
array( 'key' => 'field_story_title', 'name' => 'story_title', 'label' => 'عنوان', 'type' => 'text', 'default_value' => 'داستان مطیب، از طبیعت تا سفره شما' ),
array( 'key' => 'field_story_text', 'name' => 'story_text', 'label' => 'متن', 'type' => 'textarea', 'rows' => 4 ),
array( 'key' => 'field_story_image', 'name' => 'story_image', 'label' => 'تصویر', 'type' => 'image', 'return_format' => 'array' ),
array( 'key' => 'field_story_values', 'name' => 'story_values', 'label' => 'ویژگی‌ها', 'type' => 'repeater', 'layout' => 'table', 'button_label' => 'افزودن', 'sub_fields' => array(
array( 'key' => 'field_val_icon', 'name' => 'icon', 'label' => 'آیکون', 'type' => 'text' ),
array( 'key' => 'field_val_title', 'name' => 'title', 'label' => 'عنوان', 'type' => 'text' ),
array( 'key' => 'field_val_desc', 'name' => 'desc', 'label' => 'توضیح', 'type' => 'text' ),
)),
array( 'key' => 'field_story_badges', 'name' => 'certificates', 'label' => 'گواهی‌ها', 'type' => 'repeater', 'layout' => 'horizontal', 'button_label' => 'افزودن', 'sub_fields' => array(
array( 'key' => 'field_badge_text', 'name' => 'text', 'label' => 'متن', 'type' => 'text' ),
)),
array( 'key' => 'field_testimonials_tab', 'label' => 'نظرات', 'type' => 'tab' ),
array( 'key' => 'field_testimonials', 'name' => 'testimonials', 'label' => 'نظرات', 'type' => 'repeater', 'layout' => 'block', 'button_label' => 'افزودن', 'sub_fields' => array(
array( 'key' => 'field_test_text', 'name' => 'text', 'label' => 'متن', 'type' => 'textarea', 'rows' => 3 ),
array( 'key' => 'field_test_name', 'name' => 'name', 'label' => 'نام', 'type' => 'text' ),
array( 'key' => 'field_test_city', 'name' => 'city', 'label' => 'شهر', 'type' => 'text' ),
array( 'key' => 'field_test_init', 'name' => 'initials', 'label' => 'حروف', 'type' => 'text' ),
)),
array( 'key' => 'field_newsletter_tab', 'label' => 'خبرنامه', 'type' => 'tab' ),
array( 'key' => 'field_news_title', 'name' => 'newsletter_title', 'label' => 'عنوان', 'type' => 'text', 'default_value' => 'از تخفیف‌ها باخبر شوید' ),
array( 'key' => 'field_news_text', 'name' => 'newsletter_text', 'label' => 'توضیح', 'type' => 'text', 'default_value' => 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.' ),
),
'location' => array(
array( array( 'param' => 'page_template', 'operator' => '==', 'value' => 'front-page.php' ) ),
),
// ============================================================
// ۶. توابع Ajax برای جستجو و دریافت محصولات
// ============================================================
function motayeb_ajax_get_product_data() {
check_ajax_referer( 'motayeb_nonce', 'nonce' );
$product_id = isset( $_GET['id'] ) ? intval( $_GET['id'] ) : 0;
if ( ! $product_id ) { wp_send_json_error( 'شناسه محصول نامعتبر است' ); }
$product = wc_get_product( $product_id );
if ( ! $product ) { wp_send_json_error( 'محصول یافت نشد' ); }
$image = wp_get_attachment_image_src( $product->get_image_id(), 'thumbnail' );
wp_send_json_success( array(
'id' => $product->get_id(),
'name' => $product->get_name(),
'price' => $product->get_price() ? floatval( $product->get_price() ) : 0,
'img' => $image ? $image[0] : 'default-product',
'stock' => $product->get_stock_quantity(),
) );
}
add_action( 'wp_ajax_get_product_data', 'motayeb_ajax_get_product_data' );
add_action( 'wp_ajax_nopriv_get_product_data', 'motayeb_ajax_get_product_data' );
function motayeb_ajax_search_products() {
check_ajax_referer( 'motayeb_nonce', 'nonce' );
$term = isset( $_GET['term'] ) ? sanitize_text_field( $_GET['term'] ) : '';
if ( strlen( $term ) < 2 ) { wp_send_json_success( array() ); }
$args = array( 'post_type' => 'product', 'posts_per_page' => 6, 's' => $term );
$query = new WP_Query( $args );
$results = array();
while ( $query->have_posts() ) {
$query->the_post();
$product = wc_get_product( get_the_ID() );
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail' );
$results[] = array(
'id' => get_the_ID(),
'name' => get_the_title(),
'price' => $product->get_price() ? floatval( $product->get_price() ) : 0,
'image' => $image ? $image[0] : '',
'category' => 'محصول',
);
}
wp_reset_postdata();
wp_send_json_success( $results );
}
add_action( 'wp_ajax_search_products', 'motayeb_ajax_search_products' );
add_action( 'wp_ajax_nopriv_search_products', 'motayeb_ajax_search_products' );
// ============================================================
// ۷. متاباکس‌های سفارشی برای محصولات
// ============================================================
function motayeb_add_product_metaboxes() {
add_meta_box( 'motayeb_ingredients', 'ترکیبات محصول', 'motayeb_ingredients_metabox_callback', 'product', 'normal', 'high' );
add_meta_box( 'motayeb_health_benefits', 'خواص سلامت (هر آیتم در یک خط + آیکون انتخابی)', 'motayeb_health_benefits_metabox_callback', 'product', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'motayeb_add_product_metaboxes' );
function motayeb_ingredients_metabox_callback( $post ) {
wp_nonce_field( 'motayeb_ingredients_nonce', 'motayeb_ingredients_nonce' );
$value = get_post_meta( $post->ID, '_ingredients', true );
echo '<p><label for="ingredients_field">متن ترکیبات را وارد کنید (می‌توانید از تگ‌های HTML ساده استفاده کنید):</label></p>';
wp_editor( $value, 'ingredients_field', array(
'textarea_name' => 'ingredients_field', 'textarea_rows' => 8, 'media_buttons' => false, 'teeny' => true, 'quicktags' => true
) );
}
// ===================================================================
// تابع کمکی برای ظاهر کامنت‌ها (بدون خطای Cannot redeclare)
// ===================================================================
function motayeb_comment_callback($comment, $args, $depth) {
$author = get_comment_author($comment);
$initial = mb_substr($author, 0, 1);
$date = get_comment_date('Y/m/d');
$text = wpautop( esc_html( get_comment_text($comment) ) );
$is_pending = ('0' == $comment->comment_approved);
echo '<article class="bg-cream-50 dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50 hover:shadow-md transition">';
echo '<div class="flex items-center justify-between mb-4">';
echo '<div class="flex items-center gap-3">';
echo '<div class="w-12 h-12 bg-forest-100 dark:bg-forest-800 rounded-full flex items-center justify-center font-bold text-sm text-forest-500 dark:text-forest-300 flex-shrink-0">' . $initial . '</div>';
echo '<div>';
echo '<div class="font-bold text-sm text-earth-400 dark:text-dark-text">' . $author . '</div>';
echo '<div class="text-xs text-cream-400 dark:text-dark-muted flex items-center gap-1.5"><span>' . $date . '</span>';
echo edit_comment_link('ویرایش', ' <span class="text-xs text-forest-500 dark:text-forest-300 hover:underline">', '</span>');
echo '</div></div></div>';
comment_reply_link(array_merge($args, array('reply_text' => '<iconify-icon icon="lucide:reply" width="16"></iconify-icon>', 'depth' => $depth, 'max_depth' => 3, 'before' => '')));
echo '</div>';
if ($is_pending) {
echo '<p class="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-4 py-2 rounded-lg mb-3">نظر شما در انتظار تایید مدیریت است.</p>';
}
echo '<div class="text-sm text-cream-500 dark:text-dark-muted leading-7">' . $text . '</div>';
echo '</article>';
function motayeb_health_benefits_metabox_callback( $post ) {
wp_nonce_field( 'motayeb_health_benefits_nonce', 'motayeb_health_benefits_nonce' );
$benefits = get_post_meta( $post->ID, '_health_benefits', true );
if ( ! is_array( $benefits ) ) { $benefits = array(); }
$benefits_title = get_post_meta( $post->ID, '_health_benefits_title', true );
$icon_list = array( 'heart-pulse' => '❤️ تپش قلب', 'flame' => '🔥 شعله', 'stomach' => '🫀 معده', 'sparkles' => '✨ جرقه', 'shield-check' => '🛡️ سپر', 'droplets' => '💧 قطره', 'leaf' => '🍃 برگ', 'sun' => '☀️ خورشید', 'zap' => '⚡ برق', 'moon' => '🌙 ماه', 'star' => '⭐ ستاره', 'smile' => '😊 لبخند' );
$color_list = array( 'text-red-400' => 'قرمز', 'text-orange-400' => 'نارنجی', 'text-green-400' => 'سبز', 'text-purple-400' => 'بنفش', 'text-blue-400' => 'آبی', 'text-amber-400' => 'عنبری', 'text-emerald-400' => 'زمردی', 'text-rose-400' => 'گل‌بهی', 'text-pink-400' => 'صورتی', 'text-indigo-400' => 'نیلی' );
?>
<div id="motayeb-benefits-wrapper">
<p><label for="benefits_title_field"><strong>عنوان این بخش (در تب محصول):</strong></label>
<input type="text" id="benefits_title_field" name="benefits_title_field" value="<?php echo esc_attr( $benefits_title ); ?>" style="width:100%;max-width:400px;" placeholder="مثلاً: خواص سلامت، مزایا، ویژگی‌ها..."></p>
<hr>
<p>هر آیتم شامل عنوان، توضیحات، آیکون و رنگ است. برای افزودن آیتم جدید، دکمه زیر را بزنید.</p>
<div id="motayeb-benefits-container">
<?php if ( empty( $benefits ) ) : ?>
<div class="motayeb-benefit-item" style="background:#f9f9f9;padding:15px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;">
<p><label>عنوان: <input type="text" name="benefit_title[]" value="" style="width:100%;" /></label></p>
<p><label>توضیحات: <textarea name="benefit_desc[]" rows="2" style="width:100%;"></textarea></label></p>
<p><label>آیکون: <select name="benefit_icon[]" style="width:100%;"><?php foreach ( $icon_list as $value => $label ) { echo '<option value="' . esc_attr( $value ) . '">' . esc_html( $label ) . '</option>'; } ?></select></label></p>
<p><label>رنگ: <select name="benefit_color[]" style="width:100%;"><?php foreach ( $color_list as $value => $label ) { echo '<option value="' . esc_attr( $value ) . '">' . esc_html( $label ) . '</option>'; } ?></select></label></p>
<button type="button" class="button remove-benefit">حذف این آیتم</button>
</div>
<?php else : ?>
<?php foreach ( $benefits as $item ) : ?>
<div class="motayeb-benefit-item" style="background:#f9f9f9;padding:15px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;">
<p><label>عنوان: <input type="text" name="benefit_title[]" value="<?php echo esc_attr( $item['title'] ); ?>" style="width:100%;" /></label></p>
<p><label>توضیحات: <textarea name="benefit_desc[]" rows="2" style="width:100%;"><?php echo esc_textarea( $item['description'] ); ?></textarea></label></p>
<p><label>آیکون: <select name="benefit_icon[]" style="width:100%;"><?php foreach ( $icon_list as $value => $label ) { echo '<option value="' . esc_attr( $value ) . '" ' . selected( $item['icon'], $value, false ) . '>' . esc_html( $label ) . '</option>'; } ?></select></label></p>
<p><label>رنگ: <select name="benefit_color[]" style="width:100%;"><?php foreach ( $color_list as $value => $label ) { echo '<option value="' . esc_attr( $value ) . '" ' . selected( $item['color'], $value, false ) . '>' . esc_html( $label ) . '</option>'; } ?></select></label></p>
<button type="button" class="button remove-benefit">حذف این آیتم</button>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<button type="button" id="add-benefit" class="button button-primary">افزودن آیتم جدید</button>
</div>
<style>.motayeb-benefit-item { background: #f9f9f9; padding: 15px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; } .motayeb-benefit-item input, .motayeb-benefit-item textarea, .motayeb-benefit-item select { width: 100%; } .motayeb-benefit-item select { max-width: 300px; }</style>
<script>
jQuery(document).ready(function($) {
$('#add-benefit').on('click', function() {
var html = `<div class="motayeb-benefit-item" style="background:#f9f9f9;padding:15px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;">
<p><label>عنوان: <input type="text" name="benefit_title[]" value="" style="width:100%;" /></label></p>
<p><label>توضیحات: <textarea name="benefit_desc[]" rows="2" style="width:100%;"></textarea></label></p>
<p><label>آیکون: <select name="benefit_icon[]" style="width:100%;"><?php foreach ( $icon_list as $value => $label ) { echo '<option value="' . esc_attr( $value ) . '">' . esc_html( $label ) . '</option>'; } ?></select></label></p>
<p><label>رنگ: <select name="benefit_color[]" style="width:100%;"><?php foreach ( $color_list as $value => $label ) { echo '<option value="' . esc_attr( $value ) . '">' . esc_html( $label ) . '</option>'; } ?></select></label></p>
<button type="button" class="button remove-benefit">حذف این آیتم</button>
</div>`;
$('#motayeb-benefits-container').append(html);
});
$(document).on('click', '.remove-benefit', function() {
if (confirm('آیا از حذف این آیتم اطمینان دارید؟')) { $(this).closest('.motayeb-benefit-item').remove(); }
});
});
</script>
<?php
}
// ===================================================================
// دیتای تستی (فقط با زدن ?run_motayeb_seed در آدرس سایت اجرا می‌شود)
// ===================================================================
add_action('init', 'motayeb_seed_test_data');
function motayeb_seed_test_data() {
if (get_option('motayeb_seeded_done') || !isset($_GET['run_motayeb_seed'])) {
function motayeb_save_product_metaboxes( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return; }
if ( ! current_user_can( 'edit_post', $post_id ) ) { return; }
if ( isset( $_POST['motayeb_ingredients_nonce'] ) && wp_verify_nonce( $_POST['motayeb_ingredients_nonce'], 'motayeb_ingredients_nonce' ) && isset( $_POST['ingredients_field'] ) ) {
update_post_meta( $post_id, '_ingredients', wp_kses_post( $_POST['ingredients_field'] ) );
}
if ( isset( $_POST['motayeb_health_benefits_nonce'] ) && wp_verify_nonce( $_POST['motayeb_health_benefits_nonce'], 'motayeb_health_benefits_nonce' ) ) {
if ( isset( $_POST['benefits_title_field'] ) ) { update_post_meta( $post_id, '_health_benefits_title', sanitize_text_field( $_POST['benefits_title_field'] ) ); }
$titles = isset( $_POST['benefit_title'] ) ? array_map( 'sanitize_text_field', $_POST['benefit_title'] ) : array();
$descs = isset( $_POST['benefit_desc'] ) ? array_map( 'sanitize_textarea_field', $_POST['benefit_desc'] ) : array();
$icons = isset( $_POST['benefit_icon'] ) ? array_map( 'sanitize_text_field', $_POST['benefit_icon'] ) : array();
$colors = isset( $_POST['benefit_color'] ) ? array_map( 'sanitize_text_field', $_POST['benefit_color'] ) : array();
$benefits = array();
foreach ( $titles as $index => $title ) {
if ( ! empty( $title ) && isset( $descs[ $index ] ) ) {
$benefits[] = array(
'title' => $title,
'description' => $descs[ $index ],
'icon' => isset( $icons[ $index ] ) ? $icons[ $index ] : 'heart-pulse',
'color' => isset( $colors[ $index ] ) ? $colors[ $index ] : 'text-red-400',
);
}
}
update_post_meta( $post_id, '_health_benefits', $benefits );
}
}
add_action( 'save_post_product', 'motayeb_save_product_metaboxes' );
add_action( 'comment_post', 'motayeb_save_rating_field' );
function motayeb_save_rating_field( $comment_id ) {
if ( isset( $_POST['rating'] ) && '' !== $_POST['rating'] ) {
add_comment_meta( $comment_id, 'rating', intval( $_POST['rating'] ) );
}
}
// ============================================================
// ۸. تنظیمات تم مطیب (با استفاده از Settings API) - بخش جدید
// ============================================================
/**
* ۱. ایجاد صفحه تنظیمات در پنل ادمین
*/
function motayeb_add_admin_menu() {
add_options_page(
'تنظیمات تم مطیب',
'تنظیمات مطیب',
'manage_options',
'motayeb_settings',
'motayeb_settings_page_callback'
);
}
add_action( 'admin_menu', 'motayeb_add_admin_menu' );
/**
* ۲. بارگذاری اسکریپت‌های مدیا آپلودر در صفحه تنظیمات
*/
function motayeb_admin_scripts( $hook ) {
if ( 'settings_page_motayeb_settings' !== $hook ) {
return;
}
require_once(ABSPATH . 'wp-admin/includes/media.php');
require_once(ABSPATH . 'wp-admin/includes/file.php');
require_once(ABSPATH . 'wp-admin/includes/image.php');
wp_enqueue_media();
wp_enqueue_script( 'jquery' );
}
add_action( 'admin_enqueue_scripts', 'motayeb_admin_scripts' );
$categories = array('عسل طبیعی', 'ارده و حلوا', 'سرکه و ترشی', 'دمنوش گیاهی', 'خشکبار و آجیل', 'روغن طبیعی', 'شیره طبیعی');
$cat_ids = array();
foreach ($categories as $cat_name) {
$term = term_exists($cat_name, 'product_cat');
if (!$term) { $term = wp_insert_term($cat_name, 'product_cat'); }
$cat_ids[$cat_name] = is_array($term) ? $term['term_id'] : $term;
}
$products_data = array(
array('name' => 'عسل طبیعی کوهستان', 'desc' => 'عسل خالص و طبیعی جمع‌آوری شده از دامنه‌های زاگرس.', 'price' => 295000, 'sale_price' => 249000, 'cat' => 'عسل طبیعی', 'img' => 'https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=600&q=80'),
array('name' => 'عسل آویشن و گون', 'desc' => 'عسل تک‌گلی آویشن و گون با عطر و طعمی بی‌نظیر.', 'price' => 345000, 'sale_price' => '', 'cat' => 'عسل طبیعی', 'img' => 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=600&q=80'),
array('name' => 'ارده کنجد سنتی', 'desc' => 'ارده کنجد سنگ‌فرش شده با دستگاه‌های سنتی.', 'price' => 185000, 'sale_price' => '', 'cat' => 'ارده و حلوا', 'img' => 'https://images.unsplash.com/photo-1595475207225-428b62bda831?w=600&q=80'),
array('name' => 'حلوا ارده شیرین', 'desc' => 'حلوا اردهای سنتی با ترکیب ارده کنجد مرغوب.', 'price' => 210000, 'sale_price' => 189000, 'cat' => 'ارده و حلوا', 'img' => 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=600&q=80'),
array('name' => 'سرکه انگور طبیعی', 'desc' => 'سرکه انگور تخمیر شده به روش سنتی.', 'price' => 125000, 'sale_price' => '', 'cat' => 'سرکه و ترشی', 'img' => 'https://images.unsplash.com/photo-1596040033229-a9821ebd058d?w=600&q=80'),
array('name' => 'دمنوش بابونه', 'desc' => 'ترکیب آرامش‌بخش گل‌های بابونه و اسطوخودوس کوهی.', 'price' => 89000, 'sale_price' => '', 'cat' => 'دمنوش گیاهی', 'img' => 'https://images.unsplash.com/photo-1556679343-c7306c1976bc?w=600&q=80'),
array('name' => 'آجیل مخلوط لوکس', 'desc' => 'ترکیبی از پسته، بادام، فندق و گردو درجه یک.', 'price' => 485000, 'sale_price' => 429000, 'cat' => 'خشکبار و آجیل', 'img' => 'https://images.unsplash.com/photo-1599599810769-bcde5a160d32?w=600&q=80'),
array('name' => 'روغن زیتون فرابکر', 'desc' => 'روغن زیتون فرابکر کشت شده در باغ‌های گیلان.', 'price' => 275000, 'sale_price' => '', 'cat' => 'روغن طبیعی', 'img' => 'https://images.unsplash.com/photo-1474979266404-7eaabda50445?w=600&q=80'),
array('name' => 'شیره خرما طبیعی', 'desc' => 'شیره خالص خرما بدون شکر اضافه.', 'price' => 95000, 'sale_price' => 79000, 'cat' => 'شیره طبیعی', 'img' => 'https://images.unsplash.com/photo-1590165482129-1b8b27698780?w=600&q=80'),
array('name' => 'خشک انجیر درجه یک', 'desc' => 'انجیر خشک شده به روش آفتابی از باغ‌های استهبان.', 'price' => 165000, 'sale_price' => '', 'cat' => 'خشکبار و آجیل', 'img' => 'https://images.unsplash.com/photo-1596591868264-4ef737fbd18b?w=600&q=80')
/**
* ۳. ثبت تنظیمات، بخش‌ها و فیلدها
*/
function motayeb_register_settings() {
// ثبت یک بخش
add_settings_section(
'motayeb_shop_section',
'تنظیمات صفحه فروشگاه',
'motayeb_shop_section_callback',
'motayeb_settings'
);
foreach ($products_data as $p_data) {
$attach_id = media_sideload_image($p_data['img'], 0, $p_data['name'], 'id');
if (is_wp_error($attach_id)) { $attach_id = ''; }
$product_id = wp_insert_post(array(
'post_title' => $p_data['name'], 'post_content' => $p_data['desc'],
'post_status' => 'publish', 'post_type' => 'product',
));
if (!is_wp_error($product_id)) {
wp_set_object_terms($product_id, 'simple', 'product_type');
if (isset($cat_ids[$p_data['cat']])) {
wp_set_object_terms($product_id, array((int)$cat_ids[$p_data['cat']]), 'product_cat');
}
update_post_meta($product_id, '_price', $p_data['sale_price'] ? $p_data['sale_price'] : $p_data['price']);
update_post_meta($product_id, '_regular_price', $p_data['price']);
update_post_meta($product_id, '_sale_price', $p_data['sale_price']);
update_post_meta($product_id, '_stock_status', 'instock');
update_post_meta($product_id, '_manage_stock', 'no');
if ($attach_id) { set_post_thumbnail($product_id, $attach_id); }
}
}
$blog_cat = term_exists('سلامت و تغذیه', 'category');
if (!$blog_cat) {
$blog_cat = wp_insert_term('سلامت و تغذیه', 'category');
$blog_cat_id = is_array($blog_cat) ? $blog_cat['term_id'] : $blog_cat;
} else {
$blog_cat_id = is_array($blog_cat) ? $blog_cat['term_id'] : $blog_cat;
}
$posts_data = array(
array('title' => '۱۰ فایده شگفت‌انگیز عسل طبیعی', 'content' => '<p>عسل طبیعی یکی از قدیمی‌ترین مواد غذایی است.</p>', 'img' => 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=800&q=80'),
array('title' => 'طرز تهیه حلوا ارده خانگی', 'content' => '<p>حلوا ارده یکی از شیرینی‌های سنتی ایرانی است.</p>', 'img' => 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80')
// ۱. فیلد بنر فروشگاه
add_settings_field(
'motayeb_shop_banner',
'عکس بنر فروشگاه',
'motayeb_shop_banner_callback',
'motayeb_settings',
'motayeb_shop_section'
);
register_setting( 'motayeb_settings', 'motayeb_shop_banner', 'esc_url_raw' );
foreach ($posts_data as $post_data) {
$attach_id = media_sideload_image($post_data['img'], 0, $post_data['title'], 'id');
if (is_wp_error($attach_id)) { $attach_id = ''; }
$post_id = wp_insert_post(array(
'post_title' => $post_data['title'], 'post_content' => $post_data['content'],
'post_status' => 'publish', 'post_type' => 'post',
));
if (!is_wp_error($post_id)) {
wp_set_object_terms($post_id, array((int)$blog_cat_id), 'category');
if ($attach_id) { set_post_thumbnail($post_id, $attach_id); }
}
}
// ۲. فیلدهای ویژگی‌ها (آیکون و متن)
for ( $i = 1; $i <= 4; $i++ ) {
// آیکون
add_settings_field(
'motayeb_feature_' . $i . '_icon',
'آیکون ویژگی ' . $i . ' (مثلاً: lucide:leaf)',
'motayeb_text_field_callback',
'motayeb_settings',
'motayeb_shop_section',
array( 'id' => 'motayeb_feature_' . $i . '_icon', 'default' => 'lucide:leaf' )
);
register_setting( 'motayeb_settings', 'motayeb_feature_' . $i . '_icon', 'sanitize_text_field' );
update_option('motayeb_seeded_done', true);
wp_redirect(admin_url('admin.php?seed_success=1'));
exit;
}
add_action('admin_notices', 'motayeb_seed_success_notice');
function motayeb_seed_success_notice() {
if (isset($_GET['seed_success'])) {
echo '<div class="notice notice-success is-dismissible"><p><strong>موفقیت‌آمیز!</strong> دیتای تستی اضافه شد.</p></div>';
// متن
add_settings_field(
'motayeb_feature_' . $i . '_text',
'متن ویژگی ' . $i,
'motayeb_text_field_callback',
'motayeb_settings',
'motayeb_shop_section',
array( 'id' => 'motayeb_feature_' . $i . '_text', 'default' => 'ویژگی ' . $i )
);
register_setting( 'motayeb_settings', 'motayeb_feature_' . $i . '_text', 'sanitize_text_field' );
}
}
add_action( 'admin_init', 'motayeb_register_settings' );
// ===================================================================
// تابع کمکی برای ظاهر کامنت‌ها (بدون خطای Cannot redeclare)
// ===================================================================
add_action('init', function() {
remove_action('comment_template', 'comment_form');
});
/**
* ۴. توابع بازگشتی (Callback) برای نمایش فیلدها در ادمین
*/
function motayeb_shop_section_callback() {
echo '<p>تنظیمات بنر و ویژگی‌های نمایش داده شده در صفحه فروشگاه را در اینجا مدیریت کنید.</p>';
}
function motayeb_shop_banner_callback() {
$value = get_option( 'motayeb_shop_banner', '' );
?>
<div class="motayeb-media-uploader">
<input type="text" id="motayeb_shop_banner" name="motayeb_shop_banner" value="<?php echo esc_attr( $value ); ?>" style="width: 70%;" class="regular-text" placeholder="آدرس تصویر را وارد کنید یا انتخاب کنید">
<button type="button" class="button motayeb-upload-btn" data-target="motayeb_shop_banner">انتخاب تصویر</button>
<br><br>
<img src="<?php echo esc_attr( $value ); ?>" style="max-width: 300px; height: auto; display: <?php echo empty($value) ? 'none' : 'block'; ?>;" id="preview-motayeb_shop_banner" />
</div>
<script>
jQuery(document).ready(function($){
$('.motayeb-upload-btn').click(function(e) {
e.preventDefault();
var button = $(this);
var targetId = button.data('target');
var customUploader = wp.media({
title: 'انتخاب تصویر بنر',
button: { text: 'استفاده از این تصویر' },
multiple: false
}).on('select', function() {
var attachment = customUploader.state().get('selection').first().toJSON();
$('#' + targetId).val(attachment.url);
$('#preview-' + targetId).attr('src', attachment.url).show();
}).open();
});
});
</script>
<?php
}
function motayeb_text_field_callback( $args ) {
$id = $args['id'];
$default = $args['default'];
$value = get_option( $id, $default );
echo '<input type="text" id="' . esc_attr( $id ) . '" name="' . esc_attr( $id ) . '" value="' . esc_attr( $value ) . '" style="width: 100%; max-width: 400px;" />';
}
/**
* ۵. نمایش صفحه تنظیمات در ادمین
*/
function motayeb_settings_page_callback() {
?>
<div class="wrap">
<h1>تنظیمات تم مطیب</h1>
<form method="post" action="options.php">
<?php
settings_fields( 'motayeb_settings' );
do_settings_sections( 'motayeb_settings' );
submit_button();
?>
</form>
</div>
<?php
}
// ============================================================
// ۱۰. غیرفعال کردن استایل‌های پیش‌فرض ووکامرس
// ============================================================
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

450
header.php
View File

@ -1,15 +1,350 @@
<?php
/**
* هدر سایت - مطابق با UI Kolli.html
*
* @package Motayeb
*/
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl" class="scroll-smooth">
<html <?php language_attributes(); ?> class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class('bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300'); ?>>
<style>* { font-family: 'Vazirmatn', sans-serif; }</style>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Iconify -->
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
forest: { 50:'#e8f5ec', 100:'#c6e6cf', 200:'#9ed0ae', 300:'#6fb88a', 400:'#4a9a6b', 500:'#2D5F3F', 600:'#254d34', 700:'#1c3b28', 800:'#13291c', 900:'#0a1710' },
cream: { 50:'#FDFBF7', 100:'#F5F0E8', 200:'#EBE3D5', 300:'#DDD2BF', 400:'#C4B49A', 500:'#A99478' },
honey: { 50:'#FDF5ED', 100:'#F9E6D0', 200:'#F2CC9E', 300:'#E8AC6A', 400:'#D4A574', 500:'#C08B52', 600:'#A07040', 700:'#7D5630', 800:'#5A3D20', 900:'#3A2612' },
earth: { 50:'#F5EDE7', 100:'#E8D5C7', 200:'#D4B5A0', 300:'#BF9276', 400:'#8B5A3C', 500:'#734A30', 600:'#5C3B25', 700:'#452C1B', 800:'#2E1D12', 900:'#170E09' },
dark: { bg:'#1A1D23', card:'#22262E', border:'#2E333D', text:'#E8E6E3', muted:'#9CA3AF' }
},
fontFamily: { vazir: ['Vazirmatn', 'sans-serif'], inter: ['Inter', 'sans-serif'] },
animation: {
'fade-in': 'fadeIn 0.6s ease-out forwards',
'slide-up': 'slideUp 0.6s ease-out forwards',
'slide-right': 'slideRight 0.5s ease-out forwards',
'float': 'float 3s ease-in-out infinite',
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
},
keyframes: {
fadeIn: { '0%': { opacity:'0' }, '100%': { opacity:'1' } },
slideUp: { '0%': { opacity:'0', transform:'translateY(30px)' }, '100%': { opacity:'1', transform:'translateY(0)' } },
slideRight: { '0%': { opacity:'0', transform:'translateX(-20px)' }, '100%': { opacity:'1', transform:'translateX(0)' } },
float: { '0%,100%': { transform:'translateY(0)' }, '50%': { transform:'translateY(-10px)' } },
pulseSoft: { '0%,100%': { opacity:'1' }, '50%': { opacity:'0.7' } },
}
}
}
}
</script>
<style>
* { font-family: 'Vazirmatn', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F5F0E8; }
::-webkit-scrollbar-thumb { background: #D4A574; border-radius: 3px; }
.dark ::-webkit-scrollbar-track { background: #1A1D23; }
.dark ::-webkit-scrollbar-thumb { background: #2D5F3F; }
.honeycomb-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}
.leaf-pattern::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5C30 5 45 20 45 35C45 43.28 38.28 50 30 50C21.72 50 15 43.28 15 35C15 20 30 5 30 5Z' fill='none' stroke='%232D5F3F' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
}
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card:hover .product-img { transform: scale(1.08); }
.product-card:hover .quick-actions { opacity:1; transform:translateY(0); }
.quick-actions { opacity:0; transform:translateY(10px); transition: all 0.3s ease; }
.product-img { transition: transform 0.5s ease; }
.tab-active { color: #2D5F3F; border-color: #2D5F3F; }
.dark .tab-active { color: #6fb88a; border-color: #6fb88a; }
.nav-link::after { content:''; display:block; width:0; height:2px; background:#2D5F3F; transition:width 0.3s ease; }
.dark .nav-link::after { background:#6fb88a; }
.nav-link:hover::after { width:100%; }
.toast { animation: slideUp 0.4s ease-out forwards; }
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
.checkout-step.active { background: #2D5F3F; color: white; }
.dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
.gallery-thumb.active { border-color: #2D5F3F; }
.dark .gallery-thumb.active { border-color: #6fb88a; }
<!-- Top Bar -->
<style>
* { font-family: 'Vazirmatn', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F5F0E8; }
::-webkit-scrollbar-thumb { background: #D4A574; border-radius: 3px; }
.dark ::-webkit-scrollbar-track { background: #1A1D23; }
.dark ::-webkit-scrollbar-thumb { background: #2D5F3F; }
.honeycomb-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}
.leaf-pattern::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5C30 5 45 20 45 35C45 43.28 38.28 50 30 50C21.72 50 15 43.28 15 35C15 20 30 5 30 5Z' fill='none' stroke='%232D5F3F' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
}
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card:hover .product-img { transform: scale(1.08); }
.product-card:hover .quick-actions { opacity:1; transform:translateY(0); }
.quick-actions { opacity:0; transform:translateY(10px); transition: all 0.3s ease; }
.product-img { transition: transform 0.5s ease; }
.tab-active { color: #2D5F3F; border-color: #2D5F3F; }
.dark .tab-active { color: #6fb88a; border-color: #6fb88a; }
.nav-link::after { content:''; display:block; width:0; height:2px; background:#2D5F3F; transition:width 0.3s ease; }
.dark .nav-link::after { background:#6fb88a; }
.nav-link:hover::after { width:100%; }
.toast { animation: slideUp 0.4s ease-out forwards; }
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
.checkout-step.active { background: #2D5F3F; color: white; }
.dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
.gallery-thumb.active { border-color: #2D5F3F; }
.dark .gallery-thumb.active { border-color: #6fb88a; }
/* ===== استایل‌دهی ستاره‌های ووکامرس با FontAwesome ===== */
.comment-form-rating p.stars {
direction: rtl;
margin: 10px 0;
display: inline-block;
}
.comment-form-rating p.stars a {
font-size: 0 !important;
display: inline-block;
width: 1.8rem;
height: 1.8rem;
position: relative;
text-decoration: none;
margin-left: 5px;
}
.comment-form-rating p.stars a::before {
font-family: 'Font Awesome 6 Free';
font-weight: 400;
content: "\f005";
font-size: 1.8rem;
position: absolute;
top: 0;
right: 0;
color: #ccc;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a.active::before,
.comment-form-rating p.stars a.selected::before {
font-weight: 900;
color: #2D5F3F;
}
/* ============================================================ */
/* نادیده گرفتن کامل استایل‌های ووکامرس با اولویت فوق‌العاده بالا */
/* ============================================================ */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single,
#add_payment_method #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li {
background-color: #FDFBF7 !important; /* کرم ۵۰ */
border: 1px solid #EBE3D5 !important; /* کرم ۲۰۰ */
border-radius: 12px !important;
color: #734A30 !important;
box-shadow: none !important;
outline: none !important;
transition: 0.3s ease !important;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.select2-container .select2-selection--single:focus {
border-color: #2D5F3F !important;
background-color: #ffffff !important;
}
/* دارک مود */
.dark .woocommerce form .form-row .input-text,
.dark .woocommerce form .form-row textarea,
.dark .woocommerce form .form-row select,
.dark .select2-container .select2-selection--single,
.dark #add_payment_method #payment ul.payment_methods li,
.dark .woocommerce-checkout #payment ul.payment_methods li {
background-color: #1A1D23 !important;
border-color: #2E333D !important;
color: #E8E6E3 !important;
}
.dark .woocommerce form .form-row .input-text:focus,
.dark .woocommerce form .form-row textarea:focus,
.dark .woocommerce form .form-row select:focus,
.dark .select2-container .select2-selection--single:focus {
border-color: #6fb88a !important;
}
/* برچسب‌ها */
.woocommerce form .form-row label {
display: block !important;
font-weight: 700 !important;
font-size: 14px !important;
margin-bottom: 8px !important;
color: #734A30 !important;
}
/* رادیو باتن‌های درگاه پرداخت */
#add_payment_method #payment ul.payment_methods li input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
accent-color: #2D5F3F !important;
}
/* جدول خلاصه سفارش */
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
border-color: #EBE3D5 !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body <?php body_class( 'bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300' ); ?>>
<?php wp_body_open(); ?>
<!-- ===== Toast Container ===== -->
<div id="toast-container" class="fixed top-24 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2"></div>
<!-- ===== Search Overlay ===== -->
<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 search-overlay hidden" onclick="closeSearch()">
<div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
<div class="bg-white dark:bg-dark-card rounded-2xl shadow-2xl p-6">
<div class="flex items-center gap-3 border-b border-cream-200 dark:border-dark-border pb-4">
<iconify-icon icon="lucide:search" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<input id="search-input" type="text" placeholder="جستجو در محصولات..."
class="flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted"
oninput="handleSearch(this.value)">
<button onclick="closeSearch()" class="text-cream-400 hover:text-earth-400 dark:text-dark-muted">
<iconify-icon icon="lucide:x" width="22"></iconify-icon>
</button>
</div>
<div id="search-results" class="pt-4 max-h-80 overflow-y-auto"></div>
<div id="search-suggestions" class="pt-4">
<p class="text-sm text-cream-500 dark:text-dark-muted mb-3">جستجوهای پرطرفدار</p>
<div class="flex flex-wrap gap-2">
<button onclick="document.getElementById('search-input').value='عسل';handleSearch('عسل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">عسل طبیعی</button>
<button onclick="document.getElementById('search-input').value='ارده';handleSearch('ارده')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">ارده سنتی</button>
<button onclick="document.getElementById('search-input').value='سرکه';handleSearch('سرکه')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">سرکه انگور</button>
<button onclick="document.getElementById('search-input').value='چای';handleSearch('چای')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">دمنوش گیاهی</button>
<button onclick="document.getElementById('search-input').value='آجیل';handleSearch('آجیل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">آجیل مخلوط</button>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Cart Drawer ===== -->
<div id="cart-drawer" class="fixed inset-0 z-[80] hidden">
<div class="absolute inset-0 bg-black/50" onclick="closeCart()"></div>
<div class="absolute top-0 left-0 bottom-0 w-full max-w-md bg-white dark:bg-dark-card shadow-2xl transform transition-transform duration-300" id="cart-panel">
<div class="flex flex-col h-full">
<div class="flex items-center justify-between p-5 border-b border-cream-200 dark:border-dark-border">
<h3 class="text-lg font-bold">سبد خرید (<span id="cart-drawer-count">0</span>)</h3>
<button onclick="closeCart()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition">
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
</button>
</div>
<div id="cart-drawer-items" class="flex-1 overflow-y-auto p-5">
<div id="cart-empty" class="flex flex-col items-center justify-center h-full text-center">
<iconify-icon icon="lucide:shopping-bag" width="64" class="text-cream-400 dark:text-dark-muted mb-4"></iconify-icon>
<p class="text-cream-500 dark:text-dark-muted mb-4">سبد خرید شما خالی است</p>
<button onclick="closeCart()" class="px-6 py-2.5 bg-forest-500 text-white rounded-xl text-sm hover:bg-forest-600 transition">مشاهده محصولات</button>
</div>
<div id="cart-items-list" class="hidden space-y-4"></div>
</div>
<div id="cart-drawer-footer" class="hidden border-t border-cream-200 dark:border-dark-border p-5 space-y-3">
<div class="flex justify-between items-center">
<span class="text-cream-500 dark:text-dark-muted">جمع کل</span>
<span id="cart-drawer-total" class="text-lg font-bold text-forest-500 dark:text-forest-300"></span>
</div>
<button onclick="goToCheckout()" class="w-full py-3.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition flex items-center justify-center gap-2">
<span>تکمیل خرید</span>
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
</button>
<button onclick="closeCart()" class="w-full py-2.5 text-sm text-cream-500 dark:text-dark-muted hover:text-earth-400 transition">ادامه خرید</button>
</div>
</div>
</div>
</div>
<!-- ===== Mobile Menu ===== -->
<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
<div class="absolute inset-0 bg-black/50" onclick="closeMobileMenu()"></div>
<div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-dark-card shadow-2xl overflow-y-auto" id="mobile-menu-panel">
<div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-9 h-9 bg-forest-500 rounded-xl flex items-center justify-center">
<iconify-icon icon="lucide:leaf" width="18" class="text-white"></iconify-icon>
</div>
<span class="font-bold text-lg">مطیب</span>
</div>
<button onclick="closeMobileMenu()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition">
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
</button>
</div>
<nav class="p-4 space-y-1">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'space-y-1',
'container' => false,
'fallback_cb' => false,
'depth' => 1,
'walker' => new Motayeb_Mobile_Walker(),
) );
?>
</nav>
<div class="p-4 border-t border-cream-200 dark:border-dark-border">
<div class="flex items-center justify-between px-4 py-2 mb-3">
<span class="text-sm text-cream-500 dark:text-dark-muted">حالت تاریک</span>
<button onclick="toggleDark()" class="w-12 h-6 bg-cream-200 dark:bg-forest-500 rounded-full relative transition">
<div class="w-5 h-5 bg-white dark:bg-dark-bg rounded-full absolute top-0.5 right-0.5 dark:right-auto dark:left-0.5 transition-all shadow"></div>
</button>
</div>
<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
<iconify-icon icon="lucide:user" width="20" class="text-honey-400"></iconify-icon>
<span class="font-medium">حساب کاربری</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
<iconify-icon icon="lucide:heart" width="20" class="text-red-400"></iconify-icon>
<span class="font-medium">علاقه‌مندی‌ها</span>
</a>
</div>
</div>
</div>
<!-- ===== HEADER ===== -->
<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-cream-100/80 dark:bg-dark-bg/80 backdrop-blur-xl border-b border-cream-200/50 dark:border-dark-border/50">
<!-- Top Bar -->
<div class="hidden md:block bg-forest-500 dark:bg-forest-700 text-white text-xs py-2">
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
<div class="flex items-center gap-4">
@ -19,6 +354,8 @@
</div>
<div class="flex items-center gap-4">
<a href="tel:02112345678" class="flex items-center gap-1 hover:opacity-80 transition"><iconify-icon icon="lucide:phone" width="14"></iconify-icon> ۰۲۱-۱۲۳۴۵۶۷۸</a>
<span class="w-px h-3 bg-white/30"></span>
<button onclick="toggleLang()" class="font-inter text-xs hover:opacity-80 transition">English</button>
</div>
</div>
</div>
@ -27,12 +364,12 @@
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="flex items-center justify-between h-16 md:h-20">
<!-- Mobile Menu Toggle -->
<button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="md:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="منوی موبایل">
<button onclick="openMobileMenu()" class="md:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition">
<iconify-icon icon="lucide:menu" width="22"></iconify-icon>
</button>
<!-- Logo -->
<a href="<?php echo home_url(); ?>" class="flex items-center gap-2.5">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="flex items-center gap-2.5">
<div class="w-10 h-10 bg-forest-500 rounded-2xl flex items-center justify-center shadow-lg shadow-forest-500/20">
<iconify-icon icon="lucide:leaf" width="20" class="text-white"></iconify-icon>
</div>
@ -41,47 +378,38 @@
<span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
</div>
</a>
<!-- Desktop Nav (WP Menu) -->
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-8">
<?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'flex items-center gap-8',
'items_wrap' => '%3$s',
'depth' => 1,
) );
} else { ?>
<a href="<?php echo home_url(); ?>" class="nav-link text-sm font-medium hover:text-forest-500 transition">صفحه اصلی</a>
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="nav-link text-sm font-medium hover:text-forest-500 transition">فروشگاه</a>
<?php } ?>
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'flex items-center gap-8',
'container' => false,
'fallback_cb' => false,
'depth' => 1,
'walker' => new Motayeb_Desktop_Walker(),
) );
?>
</nav>
<!-- Actions -->
<div class="flex items-center gap-2">
<button onclick="document.getElementById('search-overlay').classList.toggle('hidden')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="جستجو">
<button onclick="openSearch()" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="جستجو">
<iconify-icon icon="lucide:search" width="20"></iconify-icon>
</button>
<button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حالت تاریک">
<button onclick="toggleDark()" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حالت تاریک">
<iconify-icon icon="lucide:moon" width="20" class="dark:hidden"></iconify-icon>
<iconify-icon icon="lucide:sun" width="20" class="hidden dark:block text-honey-400"></iconify-icon>
</button>
<a href="<?php echo get_permalink( wc_get_page_id( 'cart' ) ); ?>" class="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="سبد خرید">
<button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="علاقه‌مندی">
<iconify-icon icon="lucide:heart" width="20"></iconify-icon>
</button>
<button onclick="openCart()" class="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="سبد خرید">
<iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
<?php
$count = WC()->cart->get_cart_contents_count();
if ( $count > 0 ) : ?>
<span class="cart-badge absolute -top-0.5 -left-0.5 w-5 h-5 bg-honey-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
<?php echo esc_html( $count ); ?>
</span>
<?php endif; ?>
</a>
<a href="<?php echo wp_login_url(); ?>" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حساب کاربری">
<span id="cart-count" class="cart-badge absolute -top-0.5 -left-0.5 w-5 h-5 bg-honey-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center hidden">0</span>
</button>
<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ); ?>" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حساب کاربری">
<iconify-icon icon="lucide:user" width="20"></iconify-icon>
</a>
</div>
@ -89,45 +417,5 @@
</div>
</header>
<!-- Search Overlay -->
<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 backdrop-blur-sm hidden" onclick="this.classList.add('hidden')">
<div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="bg-white dark:bg-dark-card rounded-2xl shadow-2xl p-6">
<div class="flex items-center gap-3 border-b border-cream-200 dark:border-dark-border pb-4">
<iconify-icon icon="lucide:search" width="22" class="text-forest-500"></iconify-icon>
<input type="search" class="search-field flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted" placeholder="جستجو در محصولات..." value="<?php echo get_search_query(); ?>" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
<button type="button" onclick="this.closest('#search-overlay').classList.add('hidden')" class="text-cream-400 hover:text-earth-400">
<iconify-icon icon="lucide:x" width="22"></iconify-icon>
</button>
</div>
</form>
</div>
</div>
<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
<div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden')"></div>
<div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-dark-card shadow-2xl overflow-y-auto">
<div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
<span class="font-bold text-lg">مطیب</span>
<button onclick="this.closest('#mobile-menu').classList.add('hidden')" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg">
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
</button>
</div>
<nav class="p-4 space-y-1">
<?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 1,
) );
} else { ?>
<a href="<?php echo home_url(); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">صفحه اصلی</a>
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">فروشگاه</a>
<?php } ?>
</nav>
</div>
</div>
<!-- ===== MAIN CONTENT ===== -->
<main class="pt-16 md:pt-[104px]">

275
single-product.php
View File

@ -1,29 +1,270 @@
<?php
/**
* قالب تکی محصول
* صفحه تک محصول - مطابق با UI Kolli.html
* با پشتیبانی از محصولات ساده و متغیر + ترکیبات و خواص سلامت (متافیلد دستی)
*
* @package Motayeb
*/
get_header();
// نمایش breadcrumb مسیر صفحه
woocommerce_breadcrumb( array(
'wrap_before' => '<div class="max-w-7xl mx-auto px-4 md:px-6 pt-6 text-sm text-cream-500 dark:text-dark-muted flex items-center gap-2">',
'wrap_after' => '</div>',
'delimiter' => ' <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon> '
));
while ( have_posts() ) : the_post();
global $product;
$gallery_images = $product->get_gallery_image_ids();
$main_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$main_img_src = $main_image ? $main_image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/600/600.jpg';
// دریافت متافیلدهای دستی
$ingredients = get_post_meta( get_the_ID(), '_ingredients', true );
$benefits = get_post_meta( get_the_ID(), '_health_benefits', true );
$benefits_title = get_post_meta( get_the_ID(), '_health_benefits_title', true );
if ( empty( $benefits_title ) ) {
$benefits_title = 'خواص سلامت';
}
?>
<main class="pb-16 md:pb-24">
<!-- ===== PRODUCT DETAIL ===== -->
<section class="py-8 md:py-16 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<!-- Breadcrumb -->
<div class="mb-6 text-sm text-cream-500 dark:text-dark-muted">
<?php woocommerce_breadcrumb(); ?>
</div>
<div class="grid md:grid-cols-2 gap-8 md:gap-12">
<!-- Gallery -->
<div>
<div class="relative rounded-2xl overflow-hidden bg-white dark:bg-dark-card border border-cream-200/50 dark:border-dark-border/50 mb-3">
<img id="main-product-img" src="<?php echo esc_url( $main_img_src ); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-[350px] md:h-[450px] object-cover zoom-lens">
<div class="absolute top-3 right-3 flex flex-col gap-2">
<?php if ( $product->is_featured() ) : ?>
<span class="px-3 py-1 bg-forest-500 text-white text-xs rounded-full font-medium">ارگانیک</span>
<?php endif; ?>
<?php if ( $product->is_on_sale() ) : ?>
<span class="px-3 py-1 bg-red-500 text-white text-xs rounded-full font-medium">تخفیف ویژه</span>
<?php endif; ?>
</div>
<button onclick="toggleWishlist(this)" class="absolute top-3 left-3 w-10 h-10 bg-white/80 dark:bg-dark-card/80 backdrop-blur rounded-full flex items-center justify-center hover:scale-110 transition">
<iconify-icon icon="lucide:heart" width="20" class="text-cream-500"></iconify-icon>
</button>
</div>
<!-- Thumbnails -->
<?php if ( ! empty( $gallery_images ) ) : ?>
<div class="flex gap-2 overflow-x-auto pb-1">
<button onclick="changeImage('<?php echo esc_js( $main_img_src ); ?>', this)" class="gallery-thumb active w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
<img src="<?php echo esc_url( $main_img_src ); ?>" class="w-full h-full object-cover">
</button>
<?php foreach ( $gallery_images as $image_id ) :
$image_url = wp_get_attachment_image_src( $image_id, 'thumbnail' );
$image_full = wp_get_attachment_image_src( $image_id, 'full' );
if ( ! $image_url ) continue;
?>
<button onclick="changeImage('<?php echo esc_js( $image_full[0] ); ?>', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
<img src="<?php echo esc_url( $image_url[0] ); ?>" class="w-full h-full object-cover">
</button>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<!-- Product Info -->
<div>
<div class="flex items-center gap-2 mb-3">
<span class="text-xs text-cream-500 dark:text-dark-muted">برند: مطیب</span>
<span class="w-1 h-1 bg-cream-400 rounded-full"></span>
<span class="flex items-center gap-0.5 text-honey-400 text-sm">
<?php echo motayeb_get_rating_html( $product->get_average_rating(), $product->get_rating_count() ); ?>
</span>
</div>
<h1 class="text-2xl md:text-3xl font-extrabold mb-3"><?php the_title(); ?></h1>
<p class="text-cream-500 dark:text-dark-muted text-sm leading-relaxed mb-5"><?php echo wp_kses_post( $product->get_short_description() ); ?></p>
<!-- Stock -->
<?php if ( $product->is_in_stock() ) : ?>
<div class="flex items-center gap-2 mb-5">
<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>
</div>
<?php else : ?>
<div class="flex items-center gap-2 mb-5">
<span class="w-2 h-2 bg-red-500 rounded-full"></span>
<span class="text-sm text-red-600 dark:text-red-400 font-medium">ناموجود</span>
</div>
<?php endif; ?>
<!-- Price -->
<div class="flex items-end gap-3 mb-6">
<span class="text-3xl font-extrabold text-forest-500 dark:text-forest-300"><?php echo wp_kses_post( $product->get_price_html() ); ?></span>
<?php if ( $product->is_on_sale() ) : ?>
<span class="line-through text-sm text-cream-400 dark:text-dark-muted"><?php echo wp_kses_post( wc_price( $product->get_regular_price() ) ); ?></span>
<?php endif; ?>
</div>
<!-- ===== ویژگی‌های محصول (Attributes) ===== -->
<?php
$attributes = $product->get_attributes();
if ( ! empty( $attributes ) && $product->is_type( 'simple' ) ) :
?>
<div class="mb-6">
<h3 class="text-sm font-bold mb-3 text-earth-400 dark:text-dark-text">ویژگی‌های محصول</h3>
<div class="grid grid-cols-2 gap-3">
<?php foreach ( $attributes as $attribute ) :
$values = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
if ( empty( $values ) ) continue;
?>
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center">
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html( wc_attribute_label( $attribute->get_name() ) ); ?></span>
<div class="font-bold text-sm mt-1"><?php echo esc_html( implode( ', ', $values ) ); ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<!-- ===== دکمه افزودن به سبد (پشتیبانی از محصولات متغیر) ===== -->
<?php if ( $product->is_type( 'variable' ) ) : ?>
<div class="mb-6">
<?php woocommerce_template_single_add_to_cart(); ?>
</div>
<?php else : ?>
<div class="flex items-center gap-4 mb-6">
<label class="text-sm font-bold">تعداد:</label>
<div class="flex items-center border-2 border-cream-200 dark:border-dark-border rounded-xl overflow-hidden">
<button onclick="changeQty(-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>
<span id="product-qty" class="w-12 h-10 flex items-center justify-center font-bold text-sm border-x-2 border-cream-200 dark:border-dark-border">1</span>
<button onclick="changeQty(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>
</div>
<div class="flex gap-3 mb-6">
<button onclick="addToCartDetail(<?php echo esc_js( $product->get_id() ); ?>)" class="flex-1 py-3.5 bg-forest-500 text-white rounded-2xl 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>
<button onclick="toggleWishlist(this)" class="w-14 h-14 border-2 border-cream-200 dark:border-dark-border rounded-2xl flex items-center justify-center hover:border-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
<iconify-icon icon="lucide:heart" width="22" class="text-cream-400"></iconify-icon>
</button>
</div>
<?php endif; ?>
<!-- Delivery Info -->
<div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 space-y-3">
<div class="flex items-center gap-3 text-sm">
<iconify-icon icon="lucide:truck" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>ارسال به تمامی نقاط کشور</span>
</div>
<div class="flex items-center gap-3 text-sm">
<iconify-icon icon="lucide:rotate-ccw" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>ضمانت بازگشت ۷ روزه</span>
</div>
<div class="flex items-center gap-3 text-sm">
<iconify-icon icon="lucide:shield-check" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>ضمانت اصالت و کیفیت</span>
</div>
</div>
</div>
</div>
<!-- ===== PRODUCT TABS ===== -->
<div class="mt-12 border-t border-cream-200 dark:border-dark-border pt-8">
<div class="flex gap-6 border-b border-cream-200 dark:border-dark-border mb-6 overflow-x-auto">
<button onclick="switchTab('desc', this)" class="tab-btn tab-active pb-3 text-sm font-bold border-b-2 border-transparent whitespace-nowrap transition">توضیحات</button>
<button onclick="switchTab('additional', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">اطلاعات بیشتر</button>
<?php if ( ! empty( $ingredients ) ) : ?>
<button onclick="switchTab('ingredients', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">ترکیبات</button>
<?php endif; ?>
<?php if ( ! empty( $benefits ) && is_array( $benefits ) ) : ?>
<button onclick="switchTab('benefits', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition"><?php echo esc_html( $benefits_title ); ?></button>
<?php endif; ?>
<button onclick="switchTab('reviews', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">نظرات (<?php echo esc_html( $product->get_rating_count() ); ?>)</button>
</div>
<?php
// فراخوانی فایل محتوای محصول (داخل پوشه woocommerce)
wc_get_template_part( 'content', 'single-product' );
?>
<!-- تب توضیحات -->
<div id="tab-desc" class="tab-content">
<div class="max-w-3xl prose prose-sm dark:prose-invert text-cream-500 dark:text-dark-muted leading-relaxed">
<?php the_content(); ?>
</div>
</div>
<!-- تب اطلاعات بیشتر -->
<div id="tab-additional" class="tab-content hidden">
<div class="max-w-3xl">
<?php do_action( 'woocommerce_product_additional_information', $product ); ?>
</div>
</div>
<!-- ===== ترکیبات (از متافیلد) ===== -->
<?php if ( ! empty( $ingredients ) ) : ?>
<div id="tab-ingredients" class="tab-content hidden">
<div class="max-w-3xl prose prose-sm dark:prose-invert text-cream-500 dark:text-dark-muted leading-relaxed">
<?php echo wp_kses_post( $ingredients ); ?>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
<!-- ===== خواص سلامت (از متافیلد آرایه‌ای با آیکون انتخابی) ===== -->
<?php if ( ! empty( $benefits ) && is_array( $benefits ) ) : ?>
<div id="tab-benefits" class="tab-content hidden">
<div class="max-w-3xl grid md:grid-cols-2 gap-4">
<?php foreach ( $benefits as $item ) :
$icon = isset( $item['icon'] ) && ! empty( $item['icon'] ) ? $item['icon'] : 'heart-pulse';
$color = isset( $item['color'] ) && ! empty( $item['color'] ) ? $item['color'] : 'text-red-400';
?>
<div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl">
<iconify-icon icon="lucide:<?php echo esc_attr( $icon ); ?>" width="20" class="<?php echo esc_attr( $color ); ?> mt-0.5 flex-shrink-0"></iconify-icon>
<div>
<div class="font-bold text-sm mb-1"><?php echo esc_html( $item['title'] ); ?></div>
<p class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html( $item['description'] ); ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<!-- تب نظرات -->
<div id="tab-reviews" class="tab-content hidden">
<div class="max-w-3xl">
<?php comments_template(); ?>
</div>
</div>
</div>
<!-- ===== RELATED PRODUCTS ===== -->
<?php
$related = wc_get_related_products( $product->get_id(), 4 );
if ( ! empty( $related ) ) : ?>
<div class="mt-16">
<h3 class="text-xl font-bold mb-6">محصولات مرتبط</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<?php foreach ( $related as $related_id ) :
$related_product = wc_get_product( $related_id );
if ( ! $related_product ) continue;
$image = wp_get_attachment_image_src( $related_product->get_image_id(), 'medium' );
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . $related_id . '/300/300.jpg';
?>
<div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50 hover:shadow-lg transition">
<a href="<?php echo esc_url( get_permalink( $related_id ) ); ?>">
<img src="<?php echo esc_url( $img_src ); ?>" class="product-img w-full h-32 object-cover rounded-xl mb-3">
<h4 class="font-bold text-sm line-clamp-2"><?php echo esc_html( $related_product->get_name() ); ?></h4>
<div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2"><?php echo wp_kses_post( $related_product->get_price_html() ); ?></div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
</main>
</section>
<?php get_footer(); ?>
<?php
endwhile;
get_footer();

183
single.php
View File

@ -1,138 +1,77 @@
<?php
/**
* مقاله تکی بلاگ
* صفحه تک پست - مطابق با UI Kolli.html
*
* @package Motayeb
*/
get_header();
while ( have_posts() ) : the_post();
$categories = get_the_category();
$cat_name = ! empty( $categories ) ? $categories[0]->name : 'سلامت';
$cat_color = 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300';
if ( $cat_name === 'دستور پخت' || $cat_name === 'غذا' ) {
$cat_color = 'bg-honey-50 dark:bg-honey-900/30 text-honey-400';
} elseif ( $cat_name === 'سبک زندگی' ) {
$cat_color = 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500';
}
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/1200/600.jpg';
?>
<main class="pt-16 md:pt-[104px]">
<div class="max-w-3xl mx-auto px-4 md:px-6 py-12 md:py-16">
<!-- نوار breadcrumbs -->
<div class="flex items-center gap-2 text-sm text-cream-500 dark:text-dark-muted mb-8">
<a href="<?php echo home_url(); ?>" class="hover:text-forest-500 transition">خانه</a>
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
<a href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ); ?>" class="hover:text-forest-500 transition">مجله</a>
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
<span class="text-earth-400 dark:text-dark-text line-clamp-1 max-w-[200px]"><?php the_title(); ?></span>
<!-- ===== SINGLE POST ===== -->
<section class="py-8 md:py-16 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-4xl mx-auto px-4 md:px-6">
<!-- Categories & Date -->
<div class="flex items-center gap-2 mb-6">
<span class="px-3 py-1 <?php echo esc_attr( $cat_color ); ?> text-xs rounded-full font-medium"><?php echo esc_html( $cat_name ); ?></span>
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_date( 'j F Y' ); ?></span>
<span class="w-1 h-1 bg-cream-400 rounded-full"></span>
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_author(); ?></span>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<!-- عنوان -->
<h1 class="text-3xl md:text-4xl font-extrabold leading-tight mb-6 text-earth-400 dark:text-dark-text">
<?php the_title(); ?>
</h1>
<!-- Title -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-6"><?php the_title(); ?></h1>
<!-- متادیتا (نویسنده و تاریخ) -->
<div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-cream-200 dark:border-dark-border">
<?php
$author_id = get_the_author_meta('ID');
$avatar_url = get_avatar_url($author_id, 80);
if ( $avatar_url && ! is_wp_error($avatar_url) ) {
?>
<img src="<?php echo esc_url($avatar_url); ?>" alt="<?php echo esc_attr(get_the_author()); ?>" class="w-10 h-10 rounded-full border-2 border-cream-200 dark:border-dark-border">
<?php } ?>
<div>
<div class="text-sm font-bold text-earth-400 dark:text-dark-text"><?php the_author(); ?></div>
<div class="flex items-center gap-2 text-xs text-cream-400 dark:text-dark-muted">
<iconify-icon icon="lucide:calendar" width="14"></iconify-icon>
<span><?php echo get_the_date('d F Y'); ?></span>
</div>
</div>
<!-- دسته‌بندی‌ها -->
<div class="mr-auto flex gap-2 flex-wrap">
<?php
$categories = get_the_category();
if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) {
foreach ( $categories as $cat ) {
echo '<a href="' . esc_url( get_category_link( $cat->term_id ) ) . '" class="px-3 py-1 bg-cream-100 dark:bg-dark-bg rounded-full text-xs text-cream-500 dark:text-dark-muted hover:bg-forest-50 hover:text-forest-500 dark:hover:bg-forest-900/30 dark:hover:text-forest-300 transition">' . esc_html($cat->name) . '</a>';
}
}
?>
<!-- Featured Image -->
<div class="rounded-2xl overflow-hidden mb-8 border border-cream-200/50 dark:border-dark-border/50">
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-auto max-h-[500px] object-cover">
</div>
<!-- Content -->
<div class="prose prose-lg prose-forest dark:prose-invert max-w-none text-cream-500 dark:text-dark-text leading-relaxed">
<?php the_content(); ?>
</div>
<!-- Tags -->
<?php if ( has_tag() ) : ?>
<div class="mt-8 pt-8 border-t border-cream-200 dark:border-dark-border">
<div class="flex flex-wrap gap-2">
<?php the_tags( '<span class="text-sm font-medium text-cream-500 dark:text-dark-muted">برچسب‌ها:</span> ', ' ' ); ?>
</div>
</div>
<?php endif; ?>
<!-- عکس اصلی مقاله -->
<?php if ( has_post_thumbnail() ) : ?>
<div class="rounded-2xl overflow-hidden mb-10 border border-cream-200/50 dark:border-dark-border/50">
<?php the_post_thumbnail( 'large', array( 'class' => 'w-full object-cover' ) ); ?>
</div>
<?php endif; ?>
<!-- متن مقاله -->
<div class="prose max-w-none text-earth-400 dark:text-dark-text leading-relaxed mb-12
prose-headings:font-extrabold prose-headings:text-2xl prose-headings:text-forest-500 dark:prose-headings:text-forest-300 prose-headings:mt-8 prose-headings:mb-4
prose-p:text-cream-500 dark:prose-p:text-dark-muted prose-p:leading-8
prose-a:text-forest-500 dark:prose-a:text-forest-300 prose-a:font-semibold
prose-img:rounded-2xl prose-img:border prose-img:border-cream-200/50 dark:prose-img:border-dark-border/50 prose-img:my-8
prose-strong:text-earth-400 dark:prose-strong:text-dark-text">
<?php the_content(); ?>
<!-- Navigation -->
<div class="mt-10 pt-8 border-t border-cream-200 dark:border-dark-border flex flex-wrap justify-between gap-4">
<div class="flex-1 min-w-[120px]">
<?php previous_post_link( '%link', '<iconify-icon icon="lucide:chevron-right" width="18"></iconify-icon> <span class="text-sm font-medium">مطلب قبلی</span>', false ); ?>
</div>
<div class="flex-1 min-w-[120px] text-left">
<?php next_post_link( '%link', '<span class="text-sm font-medium">مطلب بعدی</span> <iconify-icon icon="lucide:chevron-left" width="18"></iconify-icon>', false ); ?>
</div>
</div>
<!-- تگ‌ها -->
<?php
$tags = get_the_tags();
if ( $tags && ! is_wp_error( $tags ) ) : ?>
<div class="flex items-center gap-2 flex-wrap mb-12 pb-12 border-b border-cream-200 dark:border-dark-border">
<iconify-icon icon="lucide:tag" width="18" class="text-cream-400 dark:text-dark-muted flex-shrink-0"></iconify-icon>
<?php foreach ( $tags as $tag ) : ?>
<a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-xs text-cream-500 dark:text-dark-muted hover:bg-honey-50 hover:text-honey-400 transition">
<?php echo esc_html($tag->name); ?>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
<!-- کامنت‌ها -->
<?php
if ( comments_open() || get_comments_number() ) {
comments_template();
}
?>
<?php endwhile; ?>
<!-- نویسنده مقالات مرتبط -->
<?php
$cats = get_the_category();
if ( ! empty( $cats ) && ! is_wp_error( $cats ) ) {
$cat_ids = wp_list_pluck( $cats, 'term_id' );
if ( ! empty( $cat_ids ) ) {
$related_posts = get_posts( array(
'category__in' => $cat_ids,
'posts_per_page' => 3,
'post__not_in' => array( get_the_ID() ),
'orderby' => 'rand'
) );
if ( $related_posts && ! is_wp_error( $related_posts ) ) :
?>
<div class="mt-12 pt-12 border-t border-cream-200 dark:border-dark-border">
<h3 class="text-xl font-extrabold mb-8 text-earth-400 dark:text-dark-text">نوشته‌های مرتبط</h3>
<div class="grid md:grid-cols-3 gap-6">
<?php foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
<a href="<?php the_permalink(); ?>" class="group block bg-white dark:bg-dark-card rounded-xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-lg transition-all">
<div class="h-40 overflow-hidden">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium', array( 'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500' ) ); ?>
<?php endif; ?>
</div>
<div class="p-4">
<h4 class="font-bold text-sm line-clamp-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php the_title(); ?></h4>
<span class="text-xs text-cream-400 dark:text-dark-muted mt-2 block"><?php echo get_the_date('Y/m/d'); ?></span>
</div>
</a>
<?php endforeach; wp_reset_postdata(); ?>
</div>
</div>
<?php
endif;
}
}
?>
<!-- Comments -->
<?php if ( comments_open() || get_comments_number() ) : ?>
<div class="mt-12 pt-8 border-t border-cream-200 dark:border-dark-border">
<?php comments_template(); ?>
</div>
<?php endif; ?>
</div>
</main>
</section>
<?php get_footer(); ?>
<?php
endwhile;
get_footer();

1726
style.css
View File

File diff suppressed because it is too large Load Diff

117
woocommerce/checkout/form-checkout.php Normal file
View File

@ -0,0 +1,117 @@
<?php
/**
* قالب اختصاصی تسویه حساب ووکامرس مطابق با UI مطیب
*
* @package Motayeb
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // جلوگیری از دسترسی مستقیم
}
$checkout = WC()->checkout();
?>
<!-- ===== CHECKOUT SECTION ===== -->
<section id="checkout" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-5xl mx-auto px-4 md:px-6">
<div class="text-center mb-10">
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CHECKOUT</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">تسویه حساب</h2>
</div>
<!-- Progress (دکمه‌های استپ) - نمایش فقط برای دکوراسیون -->
<div class="flex items-center justify-center gap-2 mb-10">
<div class="checkout-step active w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold">۱</div>
<div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
<div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۲</div>
<div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
<div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۳</div>
</div>
<!-- فرم اصلی ووکامرس -->
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<div class="grid md:grid-cols-3 gap-6">
<!-- ===== ستون چپ (اطلاعات و پرداخت) ===== -->
<div class="md:col-span-2 space-y-6">
<!-- ۱. اطلاعات خریدار -->
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
<h3 class="font-bold text-lg mb-5 flex items-center gap-2">
<iconify-icon icon="lucide:user" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
اطلاعات خریدار
</h3>
<div class="grid md:grid-cols-2 gap-4">
<?php
// نمایش فیلدهای تسویه حساب (Billing)
$fields = $checkout->get_checkout_fields( 'billing' );
foreach ( $fields as $key => $field ) {
// فقط فیلدهای ضروری را رد نشو. کلاس‌های تیلویند را اضافه میکنیم
if ( isset( $field['class'] ) && is_array( $field['class'] ) ) {
$field['class'][] = 'w-full px-4 py-3 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';
}
// در اینجا تابع استاندارد ووکامرس را صدا می‌زنیم
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}
?>
</div>
</div>
<!-- ۲. آدرس تحویل -->
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
<h3 class="font-bold text-lg mb-5 flex items-center gap-2">
<iconify-icon icon="lucide:map-pin" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
آدرس تحویل
</h3>
<div class="grid md:grid-cols-2 gap-4">
<?php
// نمایش فیلدهای آدرس (Shipping)
$shipping_fields = $checkout->get_checkout_fields( 'shipping' );
foreach ( $shipping_fields as $key => $field ) {
// اگر فیلدها با استایل ما تداخل دارند، کلاس‌های تیلویند را اضافه می‌کنیم
$field['class'][] = 'w-full px-4 py-3 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';
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}
?>
</div>
</div>
<!-- ۳. روش پرداخت -->
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
<h3 class="font-bold text-lg mb-5 flex items-center gap-2">
<iconify-icon icon="lucide:credit-card" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
روش پرداخت
</h3>
<div class="space-y-3">
<?php wc_get_template( 'checkout/payment.php' ); ?>
</div>
</div>
</div>
<!-- ===== ستون راست (خلاصه سفارش) ===== -->
<div>
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50 sticky top-32">
<h3 class="font-bold text-lg mb-5">خلاصه سفارش</h3>
<div id="checkout-items" class="space-y-3 mb-5 max-h-60 overflow-y-auto">
<?php wc_get_template( 'checkout/review-order.php' ); ?>
</div>
<!-- دکمه ثبت سفارش -->
<button type="submit" class="w-full mt-5 py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 transition flex items-center justify-center gap-2" name="woocommerce_checkout_place_order" id="place_order" value="<?php esc_attr_e( 'Place order', 'woocommerce' ); ?>">
<iconify-icon icon="lucide:lock" width="16"></iconify-icon>
<span>پرداخت امن و ثبت سفارش</span>
</button>
<p class="text-[10px] text-cream-400 dark:text-dark-muted text-center mt-3">با ثبت سفارش، قوانین و مقررات مطیب را می‌پذیرید.</p>
<?php wp_nonce_field( 'woocommerce-process_checkout', '_wpnonce' ); ?>
</div>
</div>
</div>
</form>
</div>
</section>

112
woocommerce/myaccount/dashboard.php Normal file
View File

@ -0,0 +1,112 @@
<?php
/**
* پیشخوان حساب کاربری - مطابق با UI Kolli.html
*
* @package Motayeb
*/
defined( 'ABSPATH' ) || exit;
get_header();
?>
<section class="py-8 md:py-16 bg-cream-100 dark:bg-dark-bg">
<div class="max-w-6xl mx-auto px-4 md:px-6">
<div class="bg-white dark:bg-dark-card rounded-2xl border border-cream-200/50 dark:border-dark-border/50 overflow-hidden">
<!-- Header -->
<div class="bg-forest-500 dark:bg-forest-800 p-6 md:p-8">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<h1 class="text-2xl md:text-3xl font-extrabold text-white">حساب کاربری</h1>
<p class="text-white/70 text-sm"><?php echo esc_html( wp_get_current_user()->display_name ); ?></p>
</div>
<a href="<?php echo esc_url( wc_logout_url() ); ?>" class="px-5 py-2 bg-white/10 hover:bg-white/20 text-white rounded-xl text-sm font-medium transition flex items-center gap-2">
<iconify-icon icon="lucide:log-out" width="16"></iconify-icon>
<span>خروج</span>
</a>
</div>
</div>
<!-- Content -->
<div class="p-6 md:p-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Navigation -->
<nav class="lg:w-1/4 flex-shrink-0">
<ul class="space-y-1">
<?php
$current_tab = isset( $_GET['tab'] ) ? sanitize_text_field( $_GET['tab'] ) : 'dashboard';
$tabs = array(
'dashboard' => array(
'label' => __( 'پیشخوان', 'motayeb' ),
'icon' => 'lucide:layout-dashboard',
),
'orders' => array(
'label' => __( 'سفارشات', 'motayeb' ),
'icon' => 'lucide:package',
),
'downloads' => array(
'label' => __( 'دانلودها', 'motayeb' ),
'icon' => 'lucide:download',
),
'edit-address' => array(
'label' => __( 'آدرس‌ها', 'motayeb' ),
'icon' => 'lucide:map-pin',
),
'edit-account' => array(
'label' => __( 'اطلاعات حساب', 'motayeb' ),
'icon' => 'lucide:user-cog',
),
);
foreach ( $tabs as $tab_key => $tab ) :
$is_active = ( $current_tab === $tab_key );
$url = add_query_arg( 'tab', $tab_key, wc_get_account_endpoint_url( $tab_key ) );
?>
<li>
<a href="<?php echo esc_url( $url ); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl <?php echo $is_active ? 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300' : 'text-cream-500 dark:text-dark-muted hover:bg-cream-50 dark:hover:bg-dark-bg'; ?> transition">
<iconify-icon icon="<?php echo esc_attr( $tab['icon'] ); ?>" width="18"></iconify-icon>
<span class="font-medium text-sm"><?php echo esc_html( $tab['label'] ); ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<!-- Content Area -->
<div class="lg:w-3/4">
<?php
// نمایش محتوای هر تب
$tab_content = isset( $_GET['tab'] ) ? sanitize_text_field( $_GET['tab'] ) : 'dashboard';
switch ( $tab_content ) {
case 'dashboard':
wc_get_template( 'myaccount/dashboard.php', array(
'current_user' => get_user_by( 'id', get_current_user_id() ),
) );
break;
case 'orders':
wc_get_template( 'myaccount/orders.php', array(
'order_count' => wc_get_customer_order_count( get_current_user_id() ),
) );
break;
case 'downloads':
wc_get_template( 'myaccount/downloads.php' );
break;
case 'edit-address':
wc_get_template( 'myaccount/form-edit-address.php' );
break;
case 'edit-account':
wc_get_template( 'myaccount/form-edit-account.php' );
break;
default:
wc_get_template( 'myaccount/dashboard.php' );
break;
}
?>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
get_footer();