8d1403d972
Refactor WooCommerce product loop templates to support AJAX quick add-to-cart, wishlist functionality, and improved visual badges. Added new static pages for About and Contact. - Refactor `content-product.php` to include quick actions and discount badges - Update `archive-product.php` and `front-page.php` for improved product display - Add `motayeb_get_rating_html` helper function in `functions.php` - Add `page-about.php` and `page-contact.php` - Fix product card width issues in `header.php` - Implement dynamic banner option in `front-page.php`
91 lines
4.1 KiB
PHP
91 lines
4.1 KiB
PHP
<?php
|
||
/**
|
||
* کارت محصول - سفارشی مطابق با طراحی مطیب (با AJAX و علاقهمندی)
|
||
*
|
||
* @package Motayeb
|
||
*/
|
||
|
||
defined( 'ABSPATH' ) || exit;
|
||
|
||
global $product;
|
||
|
||
// اگر محصول معتبر نبود، رد شو
|
||
if ( ! is_a( $product, WC_Product::class ) ) {
|
||
return;
|
||
}
|
||
|
||
// دریافت دادههای ضروری
|
||
$product_id = $product->get_id();
|
||
$image_id = $product->get_image_id();
|
||
$img_src = wp_get_attachment_image_url( $image_id, 'medium' );
|
||
if ( ! $img_src ) {
|
||
$img_src = 'https://picsum.photos/seed/' . $product_id . '/400/400.jpg'; // عکس پیشفرض
|
||
}
|
||
$rating = $product->get_average_rating();
|
||
$review_count = $product->get_rating_count();
|
||
$is_on_sale = $product->is_on_sale();
|
||
$is_featured = $product->is_featured();
|
||
|
||
// محاسبه درصد تخفیف برای برچسب
|
||
$badge = '';
|
||
if ( $is_on_sale ) {
|
||
$regular_price = $product->get_regular_price();
|
||
$sale_price = $product->get_sale_price();
|
||
if ( $regular_price > 0 ) {
|
||
$discount = round( ( ( $regular_price - $sale_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 <?php wc_product_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 w-full', $product ); ?>>
|
||
|
||
<!-- عکس و لینک محصول -->
|
||
<a href="<?php the_permalink(); ?>" class="block relative overflow-hidden">
|
||
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php echo esc_attr( $product->get_name() ); ?>" 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 ( $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>
|
||
</a>
|
||
|
||
<!-- دکمههای عملیات (هاور در دسکتاپ، همیشه در موبایل) -->
|
||
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2 z-10">
|
||
<!-- دکمه افزودن به سبد با AJAX -->
|
||
<button onclick="quickAddToCart(<?php echo esc_js( $product_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>
|
||
<span>افزودن</span>
|
||
</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 class="p-4">
|
||
<!-- عنوان -->
|
||
<a href="<?php the_permalink(); ?>" class="block font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition leading-relaxed">
|
||
<?php echo wp_kses_post( $product->get_name() ); ?>
|
||
</a>
|
||
|
||
<!-- ستارهها -->
|
||
<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>
|
||
|
||
<!-- قیمت -->
|
||
<div class="flex items-end gap-2">
|
||
<span class="font-extrabold text-forest-500 dark:text-forest-300 text-sm md:text-base">
|
||
<?php echo wp_kses_post( $product->get_price_html() ); ?>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|