feat(theme): implement full UI redesign and WooCommerce integration
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
parent
4190d98515
commit
c06ab0b8a2
50
404.php
50
404.php
@ -1,25 +1,35 @@
|
|||||||
<?php
|
<?php
|
||||||
|
/**
|
||||||
|
* صفحه ۴۰۴ - مطابق با UI Kolli.html
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
|
*/
|
||||||
|
|
||||||
get_header();
|
get_header();
|
||||||
|
?>
|
||||||
|
|
||||||
// 404 Error Page
|
<section class="min-h-[70vh] flex items-center justify-center bg-cream-100 dark:bg-dark-bg py-16">
|
||||||
echo '<div class="error-404 not-found">
|
<div class="max-w-2xl mx-auto px-4 md:px-6 text-center">
|
||||||
<div class="page-content">
|
<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">
|
||||||
<h1 class="page-title">404 - صفحه مورد نظر یافت نشد</h1>
|
<iconify-icon icon="lucide:leaf" width="64" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||||||
<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>
|
|
||||||
</div>
|
</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();
|
||||||
@ -1,192 +1,184 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* آرشیو محصولات - فروشگاه و دستهبندیهای مطیب
|
* صفحه فروشگاه (آرشیو محصولات) - مطابق با UI Kolli.html
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header();
|
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]">
|
<!-- ===== SHOP HEADER (داینامیک با Settings API) ===== -->
|
||||||
<!-- هدر صفحه -->
|
<section class="relative py-20 md:py-28 overflow-hidden">
|
||||||
<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">
|
<?php
|
||||||
<h1 class="text-3xl md:text-4xl font-extrabold mb-2"><?php echo esc_html($page_title); ?></h1>
|
$banner_img = get_option( 'motayeb_shop_banner', 'https://picsum.photos/seed/forest-shop/1600/600' );
|
||||||
<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>
|
<div class="absolute inset-0">
|
||||||
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
|
<img src="<?php echo esc_url( $banner_img ); ?>" alt="فروشگاه مطیب" class="w-full h-full object-cover">
|
||||||
<span><?php echo esc_html($page_title); ?></span>
|
</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>
|
</p>
|
||||||
</div>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
|
<!-- ===== FEATURES (داینامیک با Settings API) ===== -->
|
||||||
<div class="flex gap-8">
|
<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++ ) : ?>
|
||||||
<aside class="hidden lg:block w-64 flex-shrink-0">
|
<?php
|
||||||
<div class="sticky top-32 space-y-6">
|
// خواندن مقدار از دیتابیس، و اگر خالی بود، مقدار پیشفرض جایگزین شود
|
||||||
|
$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="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">
|
<div class="flex items-center gap-3 justify-center">
|
||||||
<iconify-icon icon="lucide:grid-3x3" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
<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>
|
||||||
</h3>
|
|
||||||
<ul class="space-y-2">
|
|
||||||
<?php
|
|
||||||
$terms = get_terms( array( 'taxonomy' => 'product_cat', 'hide_empty' => true, 'parent' => 0 ) );
|
|
||||||
if ( ! is_wp_error( $terms ) ) :
|
|
||||||
$current_term_id = isset($current_term->term_id) ? $current_term->term_id : 0;
|
|
||||||
foreach ( $terms as $term ) :?>
|
|
||||||
<li>
|
|
||||||
<a href="<?php echo get_term_link( $term ); ?>" class="flex items-center justify-between py-2 px-3 rounded-xl text-sm transition <?php echo ($current_term_id == $term->term_id) ? 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 font-bold' : 'hover:bg-cream-50 dark:hover:bg-dark-bg text-earth-400 dark:text-dark-text'; ?>">
|
|
||||||
<span><?php echo esc_html( $term->name ); ?></span>
|
|
||||||
<span class="text-xs text-cream-400 dark:text-dark-muted bg-cream-100 dark:bg-dark-bg px-2 py-0.5 rounded-full"><?php echo $term->count; ?></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<?php endforeach;
|
|
||||||
endif; ?>
|
|
||||||
<li><a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex items-center gap-2 py-2 px-3 rounded-xl text-sm text-honey-400 font-medium hover:bg-honey-50 dark:hover:bg-honey-900/20 transition">
|
|
||||||
<iconify-icon icon="lucide:x-circle" width="16"></iconify-icon> حذف فیلترها
|
|
||||||
</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- فیلتر قیمت (فرم استاندارد ووکامرس) -->
|
|
||||||
<div class="bg-white dark:bg-dark-card rounded-2xl p-5 border border-cream-200/50 dark:border-dark-border/50">
|
|
||||||
<h3 class="font-bold text-lg mb-4 flex items-center gap-2">
|
|
||||||
<iconify-icon icon="lucide:sliders-horizontal" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
|
||||||
فیلتر قیمت
|
|
||||||
</h3>
|
|
||||||
<form method="get" class="space-y-4">
|
|
||||||
<?php
|
|
||||||
// نگه داشتن پارامترهای فعلی (مثل دستهبندی)
|
|
||||||
foreach ( $_GET as $key => $value ) {
|
|
||||||
if ( $key !== 'min_price' && $key !== 'max_price' ) {
|
|
||||||
echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $value ) . '" />';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<input type="number" name="min_price" id="min_price" placeholder="از" value="<?php echo isset( $_GET['min_price'] ) ? esc_attr( $_GET['min_price'] ) : ''; ?>" min="0" class="w-full px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm text-center outline-none focus:border-forest-500 transition" dir="ltr">
|
|
||||||
<span class="text-cream-400">-</span>
|
|
||||||
<input type="number" name="max_price" id="max_price" placeholder="تا" value="<?php echo isset( $_GET['max_price'] ) ? esc_attr( $_GET['max_price'] ) : ''; ?>" min="0" class="w-full px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm text-center outline-none focus:border-forest-500 transition" dir="ltr">
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="w-full py-2.5 bg-forest-500 text-white rounded-xl text-sm font-bold hover:bg-forest-600 transition">اعمال فیلتر</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- بنر کناری -->
|
|
||||||
<div class="rounded-2xl overflow-hidden relative h-48 bg-forest-600">
|
|
||||||
<img src="https://picsum.photos/seed/organic-nature-banner/400/300.jpg" class="w-full h-full object-cover opacity-40" alt="banner">
|
|
||||||
<div class="absolute inset-0 flex flex-col items-center justify-center text-white p-4 text-center">
|
|
||||||
<iconify-icon icon="lucide:leaf" width="28" class="mb-2 text-honey-300"></iconify-icon>
|
|
||||||
<span class="font-bold text-sm">تضمین اصالت</span>
|
|
||||||
<span class="text-xs text-white/80 mt-1">۱۰۰٪ ارگانیک</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- ===== محتوای اصلی (محصولات) ===== -->
|
|
||||||
<div class="flex-1 min-w-0">
|
|
||||||
|
|
||||||
<!-- نوار ابزار بالا (مرتبسازی و دکمه فیلتر موبایل) -->
|
|
||||||
<div class="flex items-center justify-between bg-white dark:bg-dark-card rounded-2xl p-4 mb-6 border border-cream-200/50 dark:border-dark-border/50">
|
|
||||||
<!-- دکمه فیلتر موبایل -->
|
|
||||||
<button onclick="document.getElementById('filter-drawer').classList.remove('hidden'); document.body.style.overflow='hidden';" class="lg:hidden flex items-center gap-2 px-4 py-2 bg-cream-50 dark:bg-dark-bg rounded-xl text-sm font-medium">
|
|
||||||
<iconify-icon icon="lucide:sliders-horizontal" width="18"></iconify-icon>
|
|
||||||
فیلترها
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- تعداد نتایج -->
|
|
||||||
<div class="text-sm text-cream-500 dark:text-dark-muted hidden md:block">
|
|
||||||
<?php woocommerce_result_count(); ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- مرتبسازی -->
|
|
||||||
<form class="flex items-center gap-2" method="get">
|
|
||||||
<?php foreach ( $_GET as $key => $value ) {
|
|
||||||
if ( $key !== 'orderby' ) {
|
|
||||||
echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $value ) . '" />';
|
|
||||||
}
|
|
||||||
}?>
|
|
||||||
<select name="orderby" id="orderby" class="appearance-none bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl px-4 py-2 text-sm outline-none focus:border-forest-500 transition cursor-pointer pr-8" onchange="this.form.submit()">
|
|
||||||
<?php
|
|
||||||
$orderby = isset( $_GET['orderby'] ) ? esc_attr( $_GET['orderby'] ) : wc_get_default_products_orderby();
|
|
||||||
$catalog_orderby = apply_filters( 'woocommerce_catalog_orderby', array(
|
|
||||||
'popularity' => 'پرفروشترینها',
|
|
||||||
'rating' => 'محبوبترینها',
|
|
||||||
'date' => 'جدیدترینها',
|
|
||||||
'price' => 'ارزانترین',
|
|
||||||
'price-desc' => 'گرانترین',
|
|
||||||
) );
|
|
||||||
foreach ( $catalog_orderby as $id => $name ) :
|
|
||||||
echo '<option value="' . esc_attr( $id ) . '"' . selected( $orderby, $id, false ) . '>' . esc_html( $name ) . '</option>';
|
|
||||||
endforeach;
|
|
||||||
?>
|
|
||||||
</select>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- حلقه محصولات ووکامرس -->
|
|
||||||
<?php if ( woocommerce_product_loop() ) : ?>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
|
|
||||||
<?php
|
|
||||||
// ردیفبندی با کلاسهای خودمون (تعداد ستونها رو تسک میگیریم)
|
|
||||||
$columns = 4; // در دسکتاپ 4 تاست ولی چون سایدبار داریم 3 تا میشه
|
|
||||||
woocommerce_product_loop_start();
|
|
||||||
if ( wc_get_loop_prop( 'total' ) ) {
|
|
||||||
while ( have_posts() ) {
|
|
||||||
the_post();
|
|
||||||
do_action( 'woocommerce_shop_loop' );
|
|
||||||
wc_get_template_part( 'content', 'product' );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
woocommerce_product_loop_end();
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- صفحهبندی (Pagination) -->
|
|
||||||
<div class="mt-10 flex justify-center">
|
|
||||||
<?php woocommerce_pagination(); ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php else : ?>
|
|
||||||
<!-- اگر محصولی پیدا نشد -->
|
|
||||||
<div class="text-center py-20">
|
|
||||||
<iconify-icon icon="lucide:search-x" width="64" class="text-cream-300 dark:text-dark-muted mb-4"></iconify-icon>
|
|
||||||
<h3 class="text-xl font-bold mb-2">محصولی یافت نشد</h3>
|
|
||||||
<p class="text-cream-500 dark:text-dark-muted mb-6">متأسفانه محصولی با این مشخصات پیدا نشد.</p>
|
|
||||||
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="inline-flex items-center gap-2 px-6 py-2.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition">
|
|
||||||
<iconify-icon icon="lucide:grid-3x3" width="18"></iconify-icon>
|
|
||||||
مشاهده همه محصولات
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<?php endfor; ?>
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- ===== دراور فیلتر موبایل ===== -->
|
|
||||||
<div id="filter-drawer" class="fixed inset-0 z-[80] hidden">
|
|
||||||
<div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden'); document.body.style.overflow='';"></div>
|
|
||||||
<div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-cream-100 dark:bg-dark-bg shadow-2xl overflow-y-auto p-6">
|
|
||||||
<div class="flex items-center justify-between mb-6">
|
|
||||||
<h3 class="font-bold text-lg">فیلترها</h3>
|
|
||||||
<button onclick="this.closest('#filter-drawer').classList.add('hidden'); document.body.style.overflow='';" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-200 dark:hover:bg-dark-card">
|
|
||||||
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- همون فیلترهای سایدبار اینجا هم تکرار میشن براحتی میتونی کپی کنی -->
|
|
||||||
<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-10">فیلترهای دلخواه خود را انتخاب کنید</p>
|
|
||||||
</div>
|
</div>
|
||||||
</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
149
archive.php
@ -1,108 +1,79 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* لیست مقالات و دستهبندیهای بلاگ
|
* صفحه بلاگ (آرشیو پستها) - مطابق با UI Kolli.html
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header();
|
get_header();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<main class="pt-16 md:pt-[104px]">
|
<!-- ===== BLOG HEADER ===== -->
|
||||||
<!-- هدر بخش -->
|
<section class="relative bg-forest-500 dark:bg-forest-800 py-12 md:py-16 overflow-hidden">
|
||||||
<div class="bg-forest-500 dark:bg-forest-800 text-white py-10 md:py-16">
|
<div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
|
||||||
<div class="max-w-7xl mx-auto px-4 md:px-6 text-center">
|
<div class="max-w-7xl mx-auto px-4 md:px-6 relative">
|
||||||
<h1 class="text-3xl md:text-4xl font-extrabold mb-2">
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white text-center">مجله سلامت مطیب</h1>
|
||||||
<?php if ( is_category() ) { single_cat_title(); }
|
<p class="text-white/70 text-center mt-3 max-w-2xl mx-auto">جدیدترین مقالات و مطالب آموزشی در زمینه سلامت، تغذیه و سبک زندگی ارگانیک</p>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-16">
|
<!-- ===== BLOG CONTENT ===== -->
|
||||||
<?php if ( have_posts() ) : ?>
|
<section class="py-12 md:py-20 bg-cream-100 dark:bg-dark-bg">
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<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 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">
|
<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(); ?>">
|
||||||
<!-- عکس مقاله -->
|
<div class="overflow-hidden h-48">
|
||||||
<a href="<?php the_permalink(); ?>" class="block overflow-hidden h-56">
|
<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(); ?>">
|
||||||
<?php if ( has_post_thumbnail() ) : ?>
|
</div>
|
||||||
<?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>
|
</a>
|
||||||
|
<div class="p-5">
|
||||||
<!-- محتوای مقاله -->
|
<div class="flex items-center gap-2 mb-3">
|
||||||
<div class="p-6">
|
<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 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>
|
</div>
|
||||||
|
<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>
|
||||||
<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">
|
</h3>
|
||||||
<?php the_title(); ?>
|
<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>
|
</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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<?php endwhile; ?>
|
<?php endwhile; ?>
|
||||||
</div>
|
<?php else : ?>
|
||||||
|
<p class="text-center text-cream-500 dark:text-dark-muted col-span-3">هنوز مطلبی منتشر نشده است.</p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- صفحه بندی -->
|
<!-- Pagination -->
|
||||||
<div class="mt-12 flex justify-center">
|
<div class="mt-10">
|
||||||
<?php
|
<?php the_posts_pagination( array(
|
||||||
the_posts_pagination( array(
|
'mid_size' => 2,
|
||||||
'mid_size' => 2,
|
'prev_text' => '<iconify-icon icon="lucide:chevron-right" width="18"></iconify-icon>',
|
||||||
'prev_text' => '<iconify-icon icon="lucide:arrow-right" width="18"></iconify-icon>',
|
'next_text' => '<iconify-icon icon="lucide:chevron-left" width="18"></iconify-icon>',
|
||||||
'next_text' => '<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>',
|
'screen_reader_text' => ' ',
|
||||||
) );
|
'class' => 'flex justify-center gap-2',
|
||||||
?>
|
) ); ?>
|
||||||
</div>
|
</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; ?>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
<?php get_footer(); ?>
|
<?php
|
||||||
|
get_footer();
|
||||||
5
assets/css/responsive.css
Normal file
5
assets/css/responsive.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/* ============================================
|
||||||
|
استایلهای ریسپانسیو تکمیلی
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* اگر نیاز به تنظیمات بیشتر داشتی، اینجا اضافه کن */
|
||||||
131
assets/css/woocommerce.css.old
Normal file
131
assets/css/woocommerce.css.old
Normal 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
BIN
assets/fonts/Vazirmatn-Bold.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/Vazirmatn-Regular.woff2
Normal file
BIN
assets/fonts/Vazirmatn-Regular.woff2
Normal file
Binary file not shown.
BIN
assets/images/hero-bg.jpg
Normal file
BIN
assets/images/hero-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
0
assets/js/darkmode.js
Normal file
0
assets/js/darkmode.js
Normal 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;
|
function quickAddToCart(id) {
|
||||||
const header = document.getElementById('header');
|
// اگر محصول در دیتا نبود، از طریق 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');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// ==========================================
|
function addToCartDetail(productId) {
|
||||||
// ۱. مدیریت حالت تاریک (Dark Mode)
|
const qty = parseInt(document.getElementById('product-qty')?.textContent || 1);
|
||||||
// ==========================================
|
// از طریق Ajax محصول رو واکشی کن
|
||||||
function initDarkMode() {
|
fetch(motayeb_ajax.ajax_url + '?action=get_product_data&id=' + productId + '&nonce=' + motayeb_ajax.nonce)
|
||||||
// بررسی تنظیمات ذخیره شده یا تنظیمات سیستم عامل
|
.then(response => response.json())
|
||||||
const savedTheme = localStorage.getItem('motayeb-theme');
|
.then(data => {
|
||||||
if (savedTheme === 'dark') {
|
if (data.success) {
|
||||||
html.classList.add('dark');
|
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');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// اتصال رویداد به دکمه تغییر تم
|
function removeFromCart(id) {
|
||||||
const darkBtn = header ? header.querySelector('button[aria-label="حالت تاریک"]') : null;
|
cart = cart.filter(x => x.id !== id);
|
||||||
if (darkBtn) {
|
updateCartUI();
|
||||||
darkBtn.addEventListener('click', function () {
|
}
|
||||||
html.classList.toggle('dark');
|
|
||||||
const isDark = html.classList.contains('dark');
|
|
||||||
localStorage.setItem('motayeb-theme', isDark ? 'dark' : 'light');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
function updateCartQty(id, delta) {
|
||||||
// ۲. سایه هدر هنگام اسکرول
|
const item = cart.find(x => x.id === id);
|
||||||
// ==========================================
|
if (!item) return;
|
||||||
function initHeaderScroll() {
|
item.qty += delta;
|
||||||
if (!header) return;
|
if (item.qty <= 0) { removeFromCart(id); return; }
|
||||||
window.addEventListener('scroll', function () {
|
updateCartUI();
|
||||||
if (window.scrollY > 50) {
|
}
|
||||||
header.classList.add('shadow-lg');
|
|
||||||
|
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 {
|
} else {
|
||||||
header.classList.remove('shadow-lg');
|
if (count > 0) { el.textContent = count; el.classList.remove('hidden'); }
|
||||||
|
else { el.classList.add('hidden'); }
|
||||||
}
|
}
|
||||||
}, { passive: true });
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
// ==========================================
|
// Drawer items
|
||||||
// ۳. مدیریت پنل جستجو
|
const listEl = document.getElementById('cart-items-list');
|
||||||
// ==========================================
|
const emptyEl = document.getElementById('cart-empty');
|
||||||
function initSearchOverlay() {
|
const footerEl = document.getElementById('cart-drawer-footer');
|
||||||
const overlay = document.getElementById('search-overlay');
|
|
||||||
if (!overlay) return;
|
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 totalEl = document.getElementById('cart-drawer-total');
|
||||||
const openBtns = document.querySelectorAll('[aria-label="جستجو"]');
|
if (totalEl) totalEl.textContent = formatPrice(total) + ' تومان';
|
||||||
|
|
||||||
// باز کردن
|
listEl.innerHTML = cart.map(i => `
|
||||||
openBtns.forEach(function (btn) {
|
<div class="flex gap-3 bg-cream-50 dark:bg-dark-bg rounded-xl p-3">
|
||||||
btn.addEventListener('click', function () {
|
<img src="https://picsum.photos/seed/${i.img || 'default'}/100/100.jpg" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
|
||||||
overlay.classList.remove('hidden');
|
<div class="flex-1 min-w-0">
|
||||||
body.style.overflow = 'hidden'; // قفل اسکرول
|
<h4 class="font-bold text-sm line-clamp-1">${i.name}</h4>
|
||||||
setTimeout(function () { if (input) input.focus(); }, 150);
|
<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>
|
||||||
overlay.addEventListener('click', function (e) {
|
<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>
|
||||||
if (e.target === overlay) {
|
</div>
|
||||||
closeSearch();
|
<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() {
|
// Checkout
|
||||||
const overlay = document.getElementById('search-overlay');
|
const checkoutItems = document.getElementById('checkout-items');
|
||||||
if (overlay) {
|
if (checkoutItems) {
|
||||||
overlay.classList.add('hidden');
|
if (cart.length === 0) {
|
||||||
body.style.overflow = ''; // آزاد کردن اسکرول
|
checkoutItems.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-4">سبد خرید خالی است</p>';
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================
|
|
||||||
// ۴. مدیریت منوی موبایل
|
|
||||||
// ==========================================
|
|
||||||
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;
|
|
||||||
} else {
|
} else {
|
||||||
toast.style.backgroundColor = '#8B5A3C';
|
checkoutItems.innerHTML = cart.map(i => `
|
||||||
toast.innerHTML = '<iconify-icon icon="lucide:info" width="20"></iconify-icon> ' + message;
|
<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) + ' تومان';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// حالت اولیه (مخفی بالای صفحه)
|
function formatPrice(n) {
|
||||||
toast.style.opacity = '0';
|
return n.toLocaleString('fa-IR');
|
||||||
toast.style.transform = 'translate(-50%, -20px)';
|
}
|
||||||
|
|
||||||
body.appendChild(toast);
|
|
||||||
|
|
||||||
// انیمیشن ورود
|
// ============================================
|
||||||
requestAnimationFrame(function () {
|
// توابع UI
|
||||||
toast.style.opacity = '1';
|
// ============================================
|
||||||
toast.style.transform = 'translate(-50%, 0)';
|
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 () {
|
function changeImage(src, btn) {
|
||||||
toast.style.opacity = '0';
|
const mainImg = document.getElementById('main-product-img');
|
||||||
toast.style.transform = 'translate(-50%, -20px)';
|
if (!mainImg) return;
|
||||||
setTimeout(function () { toast.remove(); }, 300);
|
|
||||||
}, 3000);
|
// 1. تغییر تصویر اصلی
|
||||||
};
|
mainImg.src = src;
|
||||||
|
|
||||||
|
// 2. آپدیت ویژگیهای ضروری برای زوم و پاپآپ ووکامرس
|
||||||
// ==========================================
|
mainImg.setAttribute('data-large_image', src);
|
||||||
// اجرای تمام توابع
|
mainImg.setAttribute('data-src', src);
|
||||||
// ==========================================
|
|
||||||
initDarkMode();
|
// 3. مهمترین بخش برای پاپآپ: آپدیت لینک والد (<a> اطراف عکس)
|
||||||
initHeaderScroll();
|
// ووکامرس برای باز کردن پاپآپ از روی href این لینک استفاده میکند
|
||||||
initSearchOverlay();
|
const parentLink = mainImg.closest('a');
|
||||||
initMobileMenu();
|
if (parentLink) {
|
||||||
initKeyboardShortcuts();
|
parentLink.href = src;
|
||||||
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' : '';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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
0
assets/js/woocommerce.js
Normal file
@ -6,4 +6,4 @@ wp_list_comments(array(
|
|||||||
'avatar_size' => 48,
|
'avatar_size' => 48,
|
||||||
'max_depth' => 3,
|
'max_depth' => 3,
|
||||||
));
|
));
|
||||||
?>
|
|
||||||
|
|||||||
141
footer.php
141
footer.php
@ -1,95 +1,120 @@
|
|||||||
<!-- Mobile Bottom Nav -->
|
<?php
|
||||||
<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">
|
* فوتر سایت - مطابق با UI Kolli.html
|
||||||
<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>
|
* @package Motayeb
|
||||||
<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">
|
</main><!-- پایان main -->
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<!-- ===== FOOTER ===== -->
|
||||||
<footer class="bg-forest-500 dark:bg-forest-800 text-white">
|
<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="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">
|
<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="col-span-2 md:col-span-1">
|
||||||
<div class="flex items-center gap-2.5 mb-5">
|
<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">
|
<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>
|
<iconify-icon icon="lucide:leaf" width="20" class="text-honey-300"></iconify-icon>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<p class="text-white/70 text-sm leading-relaxed mb-5">ارائهدهنده محصولات ارگانیک و طبیعی ایرانی با ضمانت اصالت و کیفیت.</p>
|
<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>
|
</div>
|
||||||
|
<!-- Quick Links -->
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-bold mb-5">دسترسی سریع</h4>
|
<h4 class="font-bold mb-5">دسترسی سریع</h4>
|
||||||
<?php
|
<ul class="space-y-3 text-sm text-white/70">
|
||||||
if ( has_nav_menu( 'footer' ) ) {
|
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
|
||||||
wp_nav_menu( array(
|
<li><a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="hover:text-honey-300 transition">فروشگاه</a></li>
|
||||||
'theme_location' => 'footer',
|
<li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>" class="hover:text-honey-300 transition">درباره ما</a></li>
|
||||||
'container' => false,
|
<li><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>" class="hover:text-honey-300 transition">مجله سلامت</a></li>
|
||||||
'items_wrap' => '<ul class="space-y-3 text-sm text-white/70">%3$s</ul>',
|
<li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="hover:text-honey-300 transition">تماس با ما</a></li>
|
||||||
'depth' => 1,
|
</ul>
|
||||||
) );
|
|
||||||
} 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 } ?>
|
|
||||||
</div>
|
</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>
|
<div>
|
||||||
<h4 class="font-bold mb-5">خدمات مشتریان</h4>
|
<h4 class="font-bold mb-5">خدمات مشتریان</h4>
|
||||||
<ul class="space-y-3 text-sm text-white/70">
|
<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>
|
<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>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Bottom Bar -->
|
||||||
<div class="border-t border-white/10">
|
<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">
|
<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-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: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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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(); ?>
|
<?php wp_footer(); ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
764
front-page.php
764
front-page.php
@ -1,319 +1,489 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* Template Name: صفحه اصلی مطیب
|
* صفحه اصلی - مطابق با UI Kolli.html
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header();
|
get_header();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<main class="pt-16 md:pt-[104px]">
|
<!-- ===== HERO SECTION ===== -->
|
||||||
|
<section id="home" class="relative overflow-hidden honeycomb-bg leaf-pattern">
|
||||||
<!-- ===== HERO ===== -->
|
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
|
||||||
<section class="relative overflow-hidden honeycomb-bg">
|
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
|
||||||
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
|
<div class="text-center md:text-right animate-slide-up">
|
||||||
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
|
<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">
|
||||||
<div class="text-center md:text-right">
|
<span class="w-2 h-2 bg-forest-500 dark:bg-forest-300 rounded-full animate-pulse-soft"></span>
|
||||||
<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="text-xs font-medium text-forest-500 dark:text-forest-300">محصولات ۱۰۰٪ ارگانیک و طبیعی</span>
|
||||||
<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;
|
|
||||||
} ?>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1] mb-6">
|
||||||
<!-- Hero Image -->
|
<span class="text-earth-400 dark:text-dark-text">طعم</span>
|
||||||
<div class="relative">
|
<span class="text-forest-500 dark:text-forest-300"> واقعی</span>
|
||||||
<?php
|
<br>
|
||||||
if ( function_exists('get_field') ) {
|
<span class="text-honey-400">طبیعت</span>
|
||||||
$hero_img = get_field('hero_image');
|
</h1>
|
||||||
if (is_array($hero_img) && isset($hero_img['url'])): ?>
|
<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">
|
||||||
<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">
|
</p>
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
|
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
|
||||||
</div>
|
<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">
|
||||||
<?php else: ?>
|
<span>مشاهده محصولات</span>
|
||||||
<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">
|
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
|
||||||
<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>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="p-4">
|
<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">
|
||||||
<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>
|
<span>داستان مطیب</span>
|
||||||
<div class="flex items-end gap-2">
|
<iconify-icon icon="lucide:play-circle" width="18" class="text-honey-400"></iconify-icon>
|
||||||
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo $product->get_price_html(); ?></span>
|
</a>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Hero Image -->
|
||||||
</section>
|
<div class="relative animate-fade-in">
|
||||||
<?php endif;
|
<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>
|
||||||
<!-- ===== 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; ?>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<!-- Floating Card 1 -->
|
||||||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
|
<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">
|
||||||
<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>
|
|
||||||
<div class="flex items-center gap-3">
|
<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>
|
||||||
<div class="font-bold text-sm text-white"><?php echo esc_html($test['name']); ?></div>
|
<div class="font-bold text-sm">گواهی ارگانیک</div>
|
||||||
<div class="text-xs text-white/60"><?php echo esc_html($test['city']); ?></div>
|
<div class="text-xs text-cream-500 dark:text-dark-muted">تأیید شده توسط سازمان غذا</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<!-- Floating Card 2 -->
|
||||||
</div>
|
<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>
|
<div class="flex items-center gap-2">
|
||||||
</section>
|
<div class="flex -space-x-2 space-x-reverse">
|
||||||
<?php endif;
|
<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>
|
||||||
<!-- ===== NEWSLETTER ===== -->
|
</div>
|
||||||
<section class="py-16 md:py-20 bg-white dark:bg-dark-card">
|
<div>
|
||||||
<div class="max-w-3xl mx-auto px-4 md:px-6 text-center">
|
<div class="flex text-honey-400 text-xs">★★★★★</div>
|
||||||
<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">
|
<div class="text-[10px] text-cream-500 dark:text-dark-muted">+۴.۸ از ۵۰۰۰ نظر</div>
|
||||||
<iconify-icon icon="lucide:mail" width="32" class="text-honey-400"></iconify-icon>
|
</div>
|
||||||
</div>
|
</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>
|
|
||||||
</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
638
functions.php
@ -1,263 +1,451 @@
|
|||||||
<?php
|
<?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( 'title-tag' );
|
||||||
add_theme_support( 'post-thumbnails' );
|
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( 'woocommerce' );
|
||||||
add_theme_support( 'wc-product-gallery-zoom' );
|
add_theme_support( 'wc-product-gallery-zoom' );
|
||||||
add_theme_support( 'wc-product-gallery-lightbox' );
|
add_theme_support( 'wc-product-gallery-lightbox' );
|
||||||
add_theme_support( 'wc-product-gallery-slider' );
|
add_theme_support( 'wc-product-gallery-slider' );
|
||||||
|
add_theme_support( 'html5', array(
|
||||||
register_nav_menus( array(
|
'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script',
|
||||||
'primary' => __( 'منوی اصلی', 'motayeb' ),
|
|
||||||
'footer' => __( 'منوی فوتر', 'motayeb' ),
|
|
||||||
) );
|
) );
|
||||||
|
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() {
|
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_style( 'motayeb-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
|
||||||
wp_enqueue_script( 'tailwind-cdn', 'https://cdn.tailwindcss.com', array(), null, false );
|
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_add_inline_script( 'tailwind-cdn', "
|
}
|
||||||
tailwind.config = {
|
wp_enqueue_style( 'motayeb-responsive', get_theme_file_uri( '/assets/css/responsive.css' ), array( 'motayeb-style' ), wp_get_theme()->get( 'Version' ) );
|
||||||
darkMode: 'class',
|
wp_enqueue_script( 'motayeb-main', get_theme_file_uri( '/assets/js/main.js' ), array( 'jquery' ), wp_get_theme()->get( 'Version' ), true );
|
||||||
theme: {
|
if ( class_exists( 'WooCommerce' ) ) {
|
||||||
extend: {
|
wp_enqueue_script( 'motayeb-woocommerce', get_theme_file_uri( '/assets/js/woocommerce.js' ), array( 'jquery', 'motayeb-main' ), wp_get_theme()->get( 'Version' ), true );
|
||||||
colors: {
|
}
|
||||||
forest: { 50:'#e8f5ec', 100:'#c6e6cf', 200:'#9ed0ae', 300:'#6fb88a', 400:'#4a9a6b', 500:'#2D5F3F', 600:'#254d34', 700:'#1c3b28', 800:'#13291c', 900:'#0a1710' },
|
wp_enqueue_script( 'motayeb-darkmode', get_theme_file_uri( '/assets/js/darkmode.js' ), array( 'jquery' ), wp_get_theme()->get( 'Version' ), true );
|
||||||
cream: { 50:'#FDFBF7', 100:'#F5F0E8', 200:'#EBE3D5', 300:'#DDD2BF', 400:'#C4B49A', 500:'#A99478' },
|
wp_localize_script( 'motayeb-main', 'motayeb_ajax', array(
|
||||||
honey: { 50:'#FDF5ED', 100:'#F9E6D0', 200:'#F2CC9E', 300:'#E8AC6A', 400:'#D4A574', 500:'#C08B52', 600:'#A07040', 700:'#7D5630', 800:'#5A3D20', 900:'#3A2612' },
|
'ajax_url' => admin_url( 'admin-ajax.php' ),
|
||||||
earth: { 50:'#F5EDE7', 100:'#E8D5C7', 200:'#D4B5A0', 300:'#BF9276', 400:'#8B5A3C', 500:'#734A30', 600:'#5C3B25', 700:'#452C1B', 800:'#2E1D12', 900:'#170E09' },
|
'nonce' => wp_create_nonce( 'motayeb_nonce' ),
|
||||||
dark: { bg:'#1A1D23', card:'#22262E', border:'#2E333D', text:'#E8E6E3', muted:'#9CA3AF' }
|
'checkout_url' => wc_get_checkout_url(),
|
||||||
},
|
'cart_url' => wc_get_cart_url(),
|
||||||
fontFamily: { vazir: ['Vazirmatn', 'sans-serif'], inter: ['Inter', 'sans-serif'] }
|
) );
|
||||||
}
|
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' ); }
|
||||||
" );
|
|
||||||
|
|
||||||
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 );
|
|
||||||
}
|
}
|
||||||
add_action( 'wp_enqueue_scripts', 'motayeb_scripts' );
|
add_action( 'wp_enqueue_scripts', 'motayeb_scripts' );
|
||||||
|
|
||||||
// ۳. حذف استایل پیشفرض ووکامرس
|
// ============================================================
|
||||||
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
|
// ۳. ثبت ناحیههای ویجت (Widget Areas)
|
||||||
|
// ============================================================
|
||||||
// ۴. بازنویسی تگهای Wraper ووکامرس
|
function motayeb_widgets_init() {
|
||||||
function motayeb_woo_wrapper_start() {
|
register_sidebar( array(
|
||||||
echo '<main id="primary" class="pt-16 md:pt-[104px]"><div class="max-w-7xl mx-auto px-4 md:px-6 py-8">';
|
'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() {
|
add_action( 'widgets_init', 'motayeb_widgets_init' );
|
||||||
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_filter( 'loop_shop_columns', function() { return 4; } );
|
add_filter( 'loop_shop_columns', function() { return 4; } );
|
||||||
add_filter( 'loop_shop_per_page', function() { return 12; } );
|
add_filter( 'loop_shop_per_page', function() { return 12; } );
|
||||||
|
function motayeb_body_classes( $classes ) {
|
||||||
// ۶. اضافه کردن کلاس nav-link به منو
|
if ( class_exists( 'WooCommerce' ) ) {
|
||||||
add_filter('nav_menu_link_attributes', 'motayeb_add_nav_link_class', 10, 3);
|
if ( is_product() ) { $classes[] = 'motayeb-product-page'; }
|
||||||
function motayeb_add_nav_link_class($atts, $item, $args) {
|
if ( is_shop() ) { $classes[] = 'motayeb-shop-page'; }
|
||||||
if ($args->theme_location === 'primary') {
|
|
||||||
$atts['class'] = isset($atts['class']) ? $atts['class'] . ' nav-link' : 'nav-link';
|
|
||||||
}
|
}
|
||||||
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' ) ) {
|
// ۶. توابع Ajax برای جستجو و دریافت محصولات
|
||||||
acf_add_local_field_group( array(
|
// ============================================================
|
||||||
'key' => 'group_motayeb_homepage',
|
function motayeb_ajax_get_product_data() {
|
||||||
'title' => 'تنظیمات صفحه اصلی مطیب',
|
check_ajax_referer( 'motayeb_nonce', 'nonce' );
|
||||||
'fields' => array(
|
$product_id = isset( $_GET['id'] ) ? intval( $_GET['id'] ) : 0;
|
||||||
array( 'key' => 'field_hero_tab', 'label' => 'بخش هیرو', 'type' => 'tab' ),
|
if ( ! $product_id ) { wp_send_json_error( 'شناسه محصول نامعتبر است' ); }
|
||||||
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>' ),
|
$product = wc_get_product( $product_id );
|
||||||
array( 'key' => 'field_hero_subtitle', 'name' => 'hero_subtitle', 'label' => 'زیرعنوان', 'type' => 'textarea', 'rows' => 2, 'default_value' => 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.' ),
|
if ( ! $product ) { wp_send_json_error( 'محصول یافت نشد' ); }
|
||||||
array( 'key' => 'field_hero_image', 'name' => 'hero_image', 'label' => 'تصویر هیرو', 'type' => 'image', 'return_format' => 'array' ),
|
$image = wp_get_attachment_image_src( $product->get_image_id(), 'thumbnail' );
|
||||||
array( 'key' => 'field_hero_btn_text', 'name' => 'hero_btn_text', 'label' => 'متن دکمه', 'type' => 'text', 'default_value' => 'مشاهده محصولات' ),
|
wp_send_json_success( array(
|
||||||
array( 'key' => 'field_stats_tab', 'label' => 'آمار', 'type' => 'tab' ),
|
'id' => $product->get_id(),
|
||||||
array( 'key' => 'field_stats', 'name' => 'stats', 'label' => 'آمار', 'type' => 'repeater', 'layout' => 'horizontal', 'button_label' => 'افزودن', 'sub_fields' => array(
|
'name' => $product->get_name(),
|
||||||
array( 'key' => 'field_stat_number', 'name' => 'number', 'label' => 'عدد', 'type' => 'text' ),
|
'price' => $product->get_price() ? floatval( $product->get_price() ) : 0,
|
||||||
array( 'key' => 'field_stat_label', 'name' => 'label', 'label' => 'توضیح', 'type' => 'text' ),
|
'img' => $image ? $image[0] : 'default-product',
|
||||||
)),
|
'stock' => $product->get_stock_quantity(),
|
||||||
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' ),
|
add_action( 'wp_ajax_get_product_data', 'motayeb_ajax_get_product_data' );
|
||||||
array( 'key' => 'field_cat_icon', 'name' => 'icon', 'label' => 'آیکون', 'type' => 'text' ),
|
add_action( 'wp_ajax_nopriv_get_product_data', 'motayeb_ajax_get_product_data' );
|
||||||
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' ),
|
function motayeb_ajax_search_products() {
|
||||||
array( 'key' => 'field_cat_count', 'name' => 'count', 'label' => 'تعداد', 'type' => 'text' ),
|
check_ajax_referer( 'motayeb_nonce', 'nonce' );
|
||||||
)),
|
$term = isset( $_GET['term'] ) ? sanitize_text_field( $_GET['term'] ) : '';
|
||||||
array( 'key' => 'field_bestsellers_tab', 'label' => 'پرفروشها', 'type' => 'tab' ),
|
if ( strlen( $term ) < 2 ) { wp_send_json_success( array() ); }
|
||||||
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' ),
|
$args = array( 'post_type' => 'product', 'posts_per_page' => 6, 's' => $term );
|
||||||
array( 'key' => 'field_story_tab', 'label' => 'داستان برند', 'type' => 'tab' ),
|
$query = new WP_Query( $args );
|
||||||
array( 'key' => 'field_story_title', 'name' => 'story_title', 'label' => 'عنوان', 'type' => 'text', 'default_value' => 'داستان مطیب، از طبیعت تا سفره شما' ),
|
$results = array();
|
||||||
array( 'key' => 'field_story_text', 'name' => 'story_text', 'label' => 'متن', 'type' => 'textarea', 'rows' => 4 ),
|
while ( $query->have_posts() ) {
|
||||||
array( 'key' => 'field_story_image', 'name' => 'story_image', 'label' => 'تصویر', 'type' => 'image', 'return_format' => 'array' ),
|
$query->the_post();
|
||||||
array( 'key' => 'field_story_values', 'name' => 'story_values', 'label' => 'ویژگیها', 'type' => 'repeater', 'layout' => 'table', 'button_label' => 'افزودن', 'sub_fields' => array(
|
$product = wc_get_product( get_the_ID() );
|
||||||
array( 'key' => 'field_val_icon', 'name' => 'icon', 'label' => 'آیکون', 'type' => 'text' ),
|
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail' );
|
||||||
array( 'key' => 'field_val_title', 'name' => 'title', 'label' => 'عنوان', 'type' => 'text' ),
|
$results[] = array(
|
||||||
array( 'key' => 'field_val_desc', 'name' => 'desc', 'label' => 'توضیح', 'type' => 'text' ),
|
'id' => get_the_ID(),
|
||||||
)),
|
'name' => get_the_title(),
|
||||||
array( 'key' => 'field_story_badges', 'name' => 'certificates', 'label' => 'گواهیها', 'type' => 'repeater', 'layout' => 'horizontal', 'button_label' => 'افزودن', 'sub_fields' => array(
|
'price' => $product->get_price() ? floatval( $product->get_price() ) : 0,
|
||||||
array( 'key' => 'field_badge_text', 'name' => 'text', 'label' => 'متن', 'type' => 'text' ),
|
'image' => $image ? $image[0] : '',
|
||||||
)),
|
'category' => 'محصول',
|
||||||
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 ),
|
wp_reset_postdata();
|
||||||
array( 'key' => 'field_test_name', 'name' => 'name', 'label' => 'نام', 'type' => 'text' ),
|
wp_send_json_success( $results );
|
||||||
array( 'key' => 'field_test_city', 'name' => 'city', 'label' => 'شهر', 'type' => 'text' ),
|
}
|
||||||
array( 'key' => 'field_test_init', 'name' => 'initials', 'label' => 'حروف', 'type' => 'text' ),
|
add_action( 'wp_ajax_search_products', 'motayeb_ajax_search_products' );
|
||||||
)),
|
add_action( 'wp_ajax_nopriv_search_products', 'motayeb_ajax_search_products' );
|
||||||
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(
|
function motayeb_add_product_metaboxes() {
|
||||||
array( array( 'param' => 'page_template', 'operator' => '==', 'value' => 'front-page.php' ) ),
|
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
|
||||||
) );
|
) );
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===================================================================
|
function motayeb_health_benefits_metabox_callback( $post ) {
|
||||||
// تابع کمکی برای ظاهر کامنتها (بدون خطای Cannot redeclare)
|
wp_nonce_field( 'motayeb_health_benefits_nonce', 'motayeb_health_benefits_nonce' );
|
||||||
// ===================================================================
|
$benefits = get_post_meta( $post->ID, '_health_benefits', true );
|
||||||
function motayeb_comment_callback($comment, $args, $depth) {
|
if ( ! is_array( $benefits ) ) { $benefits = array(); }
|
||||||
$author = get_comment_author($comment);
|
$benefits_title = get_post_meta( $post->ID, '_health_benefits_title', true );
|
||||||
$initial = mb_substr($author, 0, 1);
|
$icon_list = array( 'heart-pulse' => '❤️ تپش قلب', 'flame' => '🔥 شعله', 'stomach' => '🫀 معده', 'sparkles' => '✨ جرقه', 'shield-check' => '🛡️ سپر', 'droplets' => '💧 قطره', 'leaf' => '🍃 برگ', 'sun' => '☀️ خورشید', 'zap' => '⚡ برق', 'moon' => '🌙 ماه', 'star' => '⭐ ستاره', 'smile' => '😊 لبخند' );
|
||||||
$date = get_comment_date('Y/m/d');
|
$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' => 'نیلی' );
|
||||||
$text = wpautop( esc_html( get_comment_text($comment) ) );
|
?>
|
||||||
$is_pending = ('0' == $comment->comment_approved);
|
<div id="motayeb-benefits-wrapper">
|
||||||
|
<p><label for="benefits_title_field"><strong>عنوان این بخش (در تب محصول):</strong></label>
|
||||||
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">';
|
<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>
|
||||||
echo '<div class="flex items-center justify-between mb-4">';
|
<hr>
|
||||||
echo '<div class="flex items-center gap-3">';
|
<p>هر آیتم شامل عنوان، توضیحات، آیکون و رنگ است. برای افزودن آیتم جدید، دکمه زیر را بزنید.</p>
|
||||||
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>';
|
<div id="motayeb-benefits-container">
|
||||||
echo '<div>';
|
<?php if ( empty( $benefits ) ) : ?>
|
||||||
echo '<div class="font-bold text-sm text-earth-400 dark:text-dark-text">' . $author . '</div>';
|
<div class="motayeb-benefit-item" style="background:#f9f9f9;padding:15px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;">
|
||||||
echo '<div class="text-xs text-cream-400 dark:text-dark-muted flex items-center gap-1.5"><span>' . $date . '</span>';
|
<p><label>عنوان: <input type="text" name="benefit_title[]" value="" style="width:100%;" /></label></p>
|
||||||
echo edit_comment_link('ویرایش', ' <span class="text-xs text-forest-500 dark:text-forest-300 hover:underline">', '</span>');
|
<p><label>توضیحات: <textarea name="benefit_desc[]" rows="2" style="width:100%;"></textarea></label></p>
|
||||||
echo '</div></div></div>';
|
<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>
|
||||||
comment_reply_link(array_merge($args, array('reply_text' => '<iconify-icon icon="lucide:reply" width="16"></iconify-icon>', 'depth' => $depth, 'max_depth' => 3, 'before' => '')));
|
<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>
|
||||||
echo '</div>';
|
<button type="button" class="button remove-benefit">حذف این آیتم</button>
|
||||||
|
</div>
|
||||||
if ($is_pending) {
|
<?php else : ?>
|
||||||
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>';
|
<?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>
|
||||||
echo '<div class="text-sm text-cream-500 dark:text-dark-muted leading-7">' . $text . '</div>';
|
<p><label>توضیحات: <textarea name="benefit_desc[]" rows="2" style="width:100%;"><?php echo esc_textarea( $item['description'] ); ?></textarea></label></p>
|
||||||
echo '</article>';
|
<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
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===================================================================
|
function motayeb_save_product_metaboxes( $post_id ) {
|
||||||
// دیتای تستی (فقط با زدن ?run_motayeb_seed در آدرس سایت اجرا میشود)
|
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return; }
|
||||||
// ===================================================================
|
if ( ! current_user_can( 'edit_post', $post_id ) ) { return; }
|
||||||
add_action('init', 'motayeb_seed_test_data');
|
if ( isset( $_POST['motayeb_ingredients_nonce'] ) && wp_verify_nonce( $_POST['motayeb_ingredients_nonce'], 'motayeb_ingredients_nonce' ) && isset( $_POST['ingredients_field'] ) ) {
|
||||||
function motayeb_seed_test_data() {
|
update_post_meta( $post_id, '_ingredients', wp_kses_post( $_POST['ingredients_field'] ) );
|
||||||
if (get_option('motayeb_seeded_done') || !isset($_GET['run_motayeb_seed'])) {
|
}
|
||||||
|
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;
|
return;
|
||||||
}
|
}
|
||||||
require_once(ABSPATH . 'wp-admin/includes/media.php');
|
wp_enqueue_media();
|
||||||
require_once(ABSPATH . 'wp-admin/includes/file.php');
|
wp_enqueue_script( 'jquery' );
|
||||||
require_once(ABSPATH . 'wp-admin/includes/image.php');
|
}
|
||||||
|
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');
|
function motayeb_register_settings() {
|
||||||
if (!$term) { $term = wp_insert_term($cat_name, 'product_cat'); }
|
// ثبت یک بخش
|
||||||
$cat_ids[$cat_name] = is_array($term) ? $term['term_id'] : $term;
|
add_settings_section(
|
||||||
}
|
'motayeb_shop_section',
|
||||||
|
'تنظیمات صفحه فروشگاه',
|
||||||
$products_data = array(
|
'motayeb_shop_section_callback',
|
||||||
array('name' => 'عسل طبیعی کوهستان', 'desc' => 'عسل خالص و طبیعی جمعآوری شده از دامنههای زاگرس.', 'price' => 295000, 'sale_price' => 249000, 'cat' => 'عسل طبیعی', 'img' => 'https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=600&q=80'),
|
'motayeb_settings'
|
||||||
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')
|
|
||||||
);
|
);
|
||||||
|
|
||||||
foreach ($products_data as $p_data) {
|
// ۱. فیلد بنر فروشگاه
|
||||||
$attach_id = media_sideload_image($p_data['img'], 0, $p_data['name'], 'id');
|
add_settings_field(
|
||||||
if (is_wp_error($attach_id)) { $attach_id = ''; }
|
'motayeb_shop_banner',
|
||||||
|
'عکس بنر فروشگاه',
|
||||||
$product_id = wp_insert_post(array(
|
'motayeb_shop_banner_callback',
|
||||||
'post_title' => $p_data['name'], 'post_content' => $p_data['desc'],
|
'motayeb_settings',
|
||||||
'post_status' => 'publish', 'post_type' => 'product',
|
'motayeb_shop_section'
|
||||||
));
|
|
||||||
|
|
||||||
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')
|
|
||||||
);
|
);
|
||||||
|
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');
|
for ( $i = 1; $i <= 4; $i++ ) {
|
||||||
if (is_wp_error($attach_id)) { $attach_id = ''; }
|
// آیکون
|
||||||
$post_id = wp_insert_post(array(
|
add_settings_field(
|
||||||
'post_title' => $post_data['title'], 'post_content' => $post_data['content'],
|
'motayeb_feature_' . $i . '_icon',
|
||||||
'post_status' => 'publish', 'post_type' => 'post',
|
'آیکون ویژگی ' . $i . ' (مثلاً: lucide:leaf)',
|
||||||
));
|
'motayeb_text_field_callback',
|
||||||
if (!is_wp_error($post_id)) {
|
'motayeb_settings',
|
||||||
wp_set_object_terms($post_id, array((int)$blog_cat_id), 'category');
|
'motayeb_shop_section',
|
||||||
if ($attach_id) { set_post_thumbnail($post_id, $attach_id); }
|
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'));
|
add_settings_field(
|
||||||
exit;
|
'motayeb_feature_' . $i . '_text',
|
||||||
}
|
'متن ویژگی ' . $i,
|
||||||
|
'motayeb_text_field_callback',
|
||||||
add_action('admin_notices', 'motayeb_seed_success_notice');
|
'motayeb_settings',
|
||||||
function motayeb_seed_success_notice() {
|
'motayeb_shop_section',
|
||||||
if (isset($_GET['seed_success'])) {
|
array( 'id' => 'motayeb_feature_' . $i . '_text', 'default' => 'ویژگی ' . $i )
|
||||||
echo '<div class="notice notice-success is-dismissible"><p><strong>موفقیتآمیز!</strong> دیتای تستی اضافه شد.</p></div>';
|
);
|
||||||
|
register_setting( 'motayeb_settings', 'motayeb_feature_' . $i . '_text', 'sanitize_text_field' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
add_action( 'admin_init', 'motayeb_register_settings' );
|
||||||
|
|
||||||
// ===================================================================
|
/**
|
||||||
// تابع کمکی برای ظاهر کامنتها (بدون خطای Cannot redeclare)
|
* ۴. توابع بازگشتی (Callback) برای نمایش فیلدها در ادمین
|
||||||
// ===================================================================
|
*/
|
||||||
add_action('init', function() {
|
function motayeb_shop_section_callback() {
|
||||||
remove_action('comment_template', 'comment_form');
|
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
450
header.php
@ -1,15 +1,350 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* هدر سایت - مطابق با UI Kolli.html
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
|
*/
|
||||||
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fa" dir="rtl" class="scroll-smooth">
|
<html <?php language_attributes(); ?> class="scroll-smooth">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<?php wp_head(); ?>
|
<?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'); ?>>
|
<!-- Tailwind CSS -->
|
||||||
<style>* { font-family: 'Vazirmatn', sans-serif; }</style>
|
<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">
|
<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="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="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
@ -19,6 +354,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-4">
|
<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>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -27,12 +364,12 @@
|
|||||||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||||||
<div class="flex items-center justify-between h-16 md:h-20">
|
<div class="flex items-center justify-between h-16 md:h-20">
|
||||||
<!-- Mobile Menu Toggle -->
|
<!-- 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>
|
<iconify-icon icon="lucide:menu" width="22"></iconify-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- 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">
|
<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>
|
<iconify-icon icon="lucide:leaf" width="20" class="text-white"></iconify-icon>
|
||||||
</div>
|
</div>
|
||||||
@ -41,47 +378,38 @@
|
|||||||
<span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
|
<span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Desktop Nav (WP Menu) -->
|
<!-- Desktop Nav -->
|
||||||
<nav class="hidden md:flex items-center gap-8">
|
<nav class="hidden md:flex items-center gap-8">
|
||||||
<?php
|
<?php
|
||||||
if ( has_nav_menu( 'primary' ) ) {
|
wp_nav_menu( array(
|
||||||
wp_nav_menu( array(
|
'theme_location' => 'primary',
|
||||||
'theme_location' => 'primary',
|
'menu_class' => 'flex items-center gap-8',
|
||||||
'container' => false,
|
'container' => false,
|
||||||
'menu_class' => 'flex items-center gap-8',
|
'fallback_cb' => false,
|
||||||
'items_wrap' => '%3$s',
|
'depth' => 1,
|
||||||
'depth' => 1,
|
'walker' => new Motayeb_Desktop_Walker(),
|
||||||
) );
|
) );
|
||||||
} 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 } ?>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="flex items-center gap-2">
|
<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>
|
<iconify-icon icon="lucide:search" width="20"></iconify-icon>
|
||||||
</button>
|
</button>
|
||||||
|
<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="حالت تاریک">
|
||||||
<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:moon" width="20" class="dark:hidden"></iconify-icon>
|
<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>
|
<iconify-icon icon="lucide:sun" width="20" class="hidden dark:block text-honey-400"></iconify-icon>
|
||||||
</button>
|
</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="علاقهمندی">
|
||||||
<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="سبد خرید">
|
<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>
|
<iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
|
||||||
<?php
|
<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>
|
||||||
$count = WC()->cart->get_cart_contents_count();
|
</button>
|
||||||
if ( $count > 0 ) : ?>
|
<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="حساب کاربری">
|
||||||
<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="حساب کاربری">
|
|
||||||
<iconify-icon icon="lucide:user" width="20"></iconify-icon>
|
<iconify-icon icon="lucide:user" width="20"></iconify-icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -89,45 +417,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Search Overlay -->
|
<!-- ===== MAIN CONTENT ===== -->
|
||||||
<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 backdrop-blur-sm hidden" onclick="this.classList.add('hidden')">
|
<main class="pt-16 md:pt-[104px]">
|
||||||
<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>
|
|
||||||
@ -1,29 +1,270 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* قالب تکی محصول
|
* صفحه تک محصول - مطابق با UI Kolli.html
|
||||||
|
* با پشتیبانی از محصولات ساده و متغیر + ترکیبات و خواص سلامت (متافیلد دستی)
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header();
|
get_header();
|
||||||
|
|
||||||
// نمایش breadcrumb مسیر صفحه
|
while ( have_posts() ) : the_post();
|
||||||
woocommerce_breadcrumb( array(
|
global $product;
|
||||||
'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">',
|
$gallery_images = $product->get_gallery_image_ids();
|
||||||
'wrap_after' => '</div>',
|
$main_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
|
||||||
'delimiter' => ' <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon> '
|
$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">
|
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||||||
<?php while ( have_posts() ) : ?>
|
<!-- Breadcrumb -->
|
||||||
<?php the_post(); ?>
|
<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)
|
<div id="tab-desc" class="tab-content">
|
||||||
wc_get_template_part( 'content', 'single-product' );
|
<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>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
<?php get_footer(); ?>
|
<?php
|
||||||
|
endwhile;
|
||||||
|
get_footer();
|
||||||
183
single.php
183
single.php
@ -1,138 +1,77 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* مقاله تکی بلاگ
|
* صفحه تک پست - مطابق با UI Kolli.html
|
||||||
|
*
|
||||||
|
* @package Motayeb
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header();
|
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]">
|
<!-- ===== SINGLE POST ===== -->
|
||||||
<div class="max-w-3xl mx-auto px-4 md:px-6 py-12 md:py-16">
|
<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">
|
||||||
<!-- نوار breadcrumbs -->
|
<!-- Categories & Date -->
|
||||||
<div class="flex items-center gap-2 text-sm text-cream-500 dark:text-dark-muted mb-8">
|
<div class="flex items-center gap-2 mb-6">
|
||||||
<a href="<?php echo home_url(); ?>" class="hover:text-forest-500 transition">خانه</a>
|
<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>
|
||||||
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
|
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_date( 'j F Y' ); ?></span>
|
||||||
<a href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ); ?>" class="hover:text-forest-500 transition">مجله</a>
|
<span class="w-1 h-1 bg-cream-400 rounded-full"></span>
|
||||||
<iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
|
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_author(); ?></span>
|
||||||
<span class="text-earth-400 dark:text-dark-text line-clamp-1 max-w-[200px]"><?php the_title(); ?></span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php while ( have_posts() ) : the_post(); ?>
|
<!-- Title -->
|
||||||
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-6"><?php the_title(); ?></h1>
|
||||||
<!-- عنوان -->
|
|
||||||
<h1 class="text-3xl md:text-4xl font-extrabold leading-tight mb-6 text-earth-400 dark:text-dark-text">
|
|
||||||
<?php the_title(); ?>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<!-- متادیتا (نویسنده و تاریخ) -->
|
<!-- Featured Image -->
|
||||||
<div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-cream-200 dark:border-dark-border">
|
<div class="rounded-2xl overflow-hidden mb-8 border border-cream-200/50 dark:border-dark-border/50">
|
||||||
<?php
|
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-auto max-h-[500px] object-cover">
|
||||||
$author_id = get_the_author_meta('ID');
|
</div>
|
||||||
$avatar_url = get_avatar_url($author_id, 80);
|
|
||||||
if ( $avatar_url && ! is_wp_error($avatar_url) ) {
|
<!-- Content -->
|
||||||
?>
|
<div class="prose prose-lg prose-forest dark:prose-invert max-w-none text-cream-500 dark:text-dark-text leading-relaxed">
|
||||||
<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 the_content(); ?>
|
||||||
<?php } ?>
|
</div>
|
||||||
<div>
|
|
||||||
<div class="text-sm font-bold text-earth-400 dark:text-dark-text"><?php the_author(); ?></div>
|
<!-- Tags -->
|
||||||
<div class="flex items-center gap-2 text-xs text-cream-400 dark:text-dark-muted">
|
<?php if ( has_tag() ) : ?>
|
||||||
<iconify-icon icon="lucide:calendar" width="14"></iconify-icon>
|
<div class="mt-8 pt-8 border-t border-cream-200 dark:border-dark-border">
|
||||||
<span><?php echo get_the_date('d F Y'); ?></span>
|
<div class="flex flex-wrap gap-2">
|
||||||
</div>
|
<?php the_tags( '<span class="text-sm font-medium text-cream-500 dark:text-dark-muted">برچسبها:</span> ', ' ' ); ?>
|
||||||
</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>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- عکس اصلی مقاله -->
|
<!-- Navigation -->
|
||||||
<?php if ( has_post_thumbnail() ) : ?>
|
<div class="mt-10 pt-8 border-t border-cream-200 dark:border-dark-border flex flex-wrap justify-between gap-4">
|
||||||
<div class="rounded-2xl overflow-hidden mb-10 border border-cream-200/50 dark:border-dark-border/50">
|
<div class="flex-1 min-w-[120px]">
|
||||||
<?php the_post_thumbnail( 'large', array( 'class' => 'w-full object-cover' ) ); ?>
|
<?php previous_post_link( '%link', '<iconify-icon icon="lucide:chevron-right" width="18"></iconify-icon> <span class="text-sm font-medium">مطلب قبلی</span>', false ); ?>
|
||||||
</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(); ?>
|
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<!-- تگها -->
|
<!-- Comments -->
|
||||||
<?php
|
<?php if ( comments_open() || get_comments_number() ) : ?>
|
||||||
$tags = get_the_tags();
|
<div class="mt-12 pt-8 border-t border-cream-200 dark:border-dark-border">
|
||||||
if ( $tags && ! is_wp_error( $tags ) ) : ?>
|
<?php comments_template(); ?>
|
||||||
<div class="flex items-center gap-2 flex-wrap mb-12 pb-12 border-b border-cream-200 dark:border-dark-border">
|
</div>
|
||||||
<iconify-icon icon="lucide:tag" width="18" class="text-cream-400 dark:text-dark-muted flex-shrink-0"></iconify-icon>
|
<?php endif; ?>
|
||||||
<?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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
<?php get_footer(); ?>
|
<?php
|
||||||
|
endwhile;
|
||||||
|
get_footer();
|
||||||
117
woocommerce/checkout/form-checkout.php
Normal file
117
woocommerce/checkout/form-checkout.php
Normal 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
112
woocommerce/myaccount/dashboard.php
Normal 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();
|
||||||
Loading…
Reference in New Issue
Block a user