feat: add falah-souq marketplace plugin and native falah_wallet widget

- [falah-souq] new standalone plugin with [souq_marketplace] shortcode
  Fiverr-style service grid with Islamic luxury design (Emerald/Gold/Cream/Navy)
  Custom post type 'souq_service', category filter bar, card hover states
- [falah_wallet] replace iframe with native balance+transactions widget
  Balance card with loading state, send/receive action buttons
  Recent transactions list, login-gated with smooth reveal
  CSS tokens matching Islamic design system
- Rebuild falah-shortcodes.zip with updated wallet widget
This commit is contained in:
Antigravity AI
2026-07-06 22:10:47 +08:00
parent 0a551c8367
commit dceb30ed8c
9 changed files with 1158 additions and 1 deletions
@@ -0,0 +1,317 @@
/* ============================================================
Falah Souq — Islamic Marketplace Design System
Emerald #0A5C36 · Gold #C8921A · Cream #FAF7F0 · Navy #0A1628
============================================================ */
:root {
--souq-emerald: #0A5C36;
--souq-emerald-dk: #084828;
--souq-emerald-lt: #E8F5EE;
--souq-gold: #C8921A;
--souq-gold-lt: #FFF8E6;
--souq-cream: #FAF7F0;
--souq-navy: #0A1628;
--souq-text: #1A1A2E;
--souq-muted: #6B7280;
--souq-border: #E5E0D6;
--souq-white: #FFFFFF;
--souq-shadow-sm: 0 1px 3px rgba(10,28,40,0.08), 0 1px 2px rgba(10,28,40,0.04);
--souq-shadow-md: 0 4px 16px rgba(10,28,40,0.10), 0 2px 6px rgba(10,28,40,0.06);
--souq-shadow-hover:0 8px 32px rgba(10,92,54,0.14), 0 4px 12px rgba(10,92,54,0.08);
--souq-radius: 12px;
--souq-radius-sm: 6px;
--souq-duration: 250ms;
--souq-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---- Marketplace Container ---- */
.souq-marketplace {
font-family: 'Inter', system-ui, sans-serif;
color: var(--souq-text);
padding: clamp(1.5rem, 4vw, 3rem) 0;
}
/* ---- Filters ---- */
.souq-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.souq-filter-btn {
padding: 0.45rem 1.1rem;
border: 1.5px solid var(--souq-border);
border-radius: 999px;
background: var(--souq-white);
color: var(--souq-muted);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all var(--souq-duration) var(--souq-ease);
line-height: 1.4;
}
.souq-filter-btn:hover {
border-color: var(--souq-emerald);
color: var(--souq-emerald);
background: var(--souq-emerald-lt);
}
.souq-filter-btn.active {
background: var(--souq-emerald);
border-color: var(--souq-emerald);
color: var(--souq-white);
box-shadow: 0 2px 8px rgba(10,92,54,0.25);
}
/* ---- Grid ---- */
.souq-grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.souq-grid--2col { grid-template-columns: repeat(2, 1fr); }
.souq-grid--3col { grid-template-columns: repeat(3, 1fr); }
.souq-grid--4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.souq-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.souq-grid--3col,
.souq-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.souq-grid--2col,
.souq-grid--3col,
.souq-grid--4col { grid-template-columns: 1fr; }
}
/* ---- Card ---- */
.souq-card {
background: var(--souq-white);
border-radius: var(--souq-radius);
border: 1px solid var(--souq-border);
overflow: hidden;
box-shadow: var(--souq-shadow-sm);
transition: transform var(--souq-duration) var(--souq-ease),
box-shadow var(--souq-duration) var(--souq-ease);
}
.souq-card:hover {
transform: translateY(-4px);
box-shadow: var(--souq-shadow-hover);
border-color: rgba(10,92,54,0.2);
}
.souq-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
/* ---- Thumbnail ---- */
.souq-card__thumb {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--souq-cream);
}
.souq-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms var(--souq-ease);
}
.souq-card:hover .souq-card__img {
transform: scale(1.04);
}
.souq-card__img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--souq-emerald-lt);
}
.souq-card__img-placeholder svg {
width: 80px;
height: 60px;
opacity: 0.6;
}
.souq-card__badge {
position: absolute;
top: 0.65rem;
left: 0.65rem;
padding: 0.2rem 0.65rem;
background: var(--souq-gold);
color: var(--souq-white);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 999px;
}
/* ---- Body ---- */
.souq-card__body {
flex: 1;
padding: 0.9rem 1rem 0.6rem;
}
.souq-card__seller {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.souq-card__seller-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--souq-emerald);
color: var(--souq-white);
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.souq-card__seller-name {
font-size: 0.78rem;
color: var(--souq-muted);
font-weight: 500;
}
.souq-card__title {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
color: var(--souq-text);
margin: 0 0 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- Stars ---- */
.souq-card__rating {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.4rem;
}
.souq-card__stars {
display: flex;
gap: 1px;
}
.souq-star {
font-size: 0.8rem;
line-height: 1;
}
.souq-star--full { color: var(--souq-gold); }
.souq-star--half { color: var(--souq-gold); opacity: 0.6; }
.souq-star--empty { color: var(--souq-border); }
.souq-card__rating-value {
font-size: 0.78rem;
font-weight: 700;
color: var(--souq-gold);
}
.souq-card__reviews {
font-size: 0.75rem;
color: var(--souq-muted);
}
/* ---- Footer ---- */
.souq-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1rem 0.85rem;
border-top: 1px solid var(--souq-border);
margin-top: auto;
}
.souq-card__delivery {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--souq-muted);
}
.souq-card__price {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.souq-card__price-from {
font-size: 0.7rem;
color: var(--souq-muted);
}
.souq-card__price-amount {
font-size: 1rem;
font-weight: 700;
color: var(--souq-emerald);
}
/* ---- Empty State ---- */
.souq-empty {
text-align: center;
padding: clamp(3rem, 8vw, 6rem) 2rem;
background: var(--souq-cream);
border-radius: var(--souq-radius);
border: 1.5px dashed var(--souq-border);
}
.souq-empty__icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}
.souq-empty__text {
color: var(--souq-muted);
max-width: 32ch;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.souq-empty__cta {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.5rem;
background: var(--souq-emerald);
color: var(--souq-white);
border-radius: var(--souq-radius-sm);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: background var(--souq-duration) var(--souq-ease);
}
.souq-empty__cta:hover {
background: var(--souq-emerald-dk);
color: var(--souq-white);
}
@@ -0,0 +1,45 @@
<?php
/**
* Plugin Name: Falah Souq
* Plugin URI: https://falahos.my
* Description: Islamic marketplace shortcode — [souq_marketplace] renders a Fiverr-style service grid.
* Version: 1.0.0
* Author: FalahOS
* Text Domain: falah-souq
*/
defined( 'ABSPATH' ) || exit;
define( 'FALAH_SOUQ_VERSION', '1.0.0' );
define( 'FALAH_SOUQ_DIR', plugin_dir_path( __FILE__ ) );
define( 'FALAH_SOUQ_URL', plugin_dir_url( __FILE__ ) );
require_once FALAH_SOUQ_DIR . 'includes/post-type.php';
require_once FALAH_SOUQ_DIR . 'includes/shortcode.php';
function falah_souq_enqueue( $hook ) {
if ( is_singular( 'souq_service' ) || has_shortcode( get_post()->post_content ?? '', 'souq_marketplace' ) ) {
wp_enqueue_style(
'falah-souq',
FALAH_SOUQ_URL . 'assets/falah-souq.css',
[],
FALAH_SOUQ_VERSION
);
}
}
add_action( 'wp_enqueue_scripts', 'falah_souq_enqueue' );
function falah_souq_enqueue_always() {
wp_enqueue_style(
'falah-souq',
FALAH_SOUQ_URL . 'assets/falah-souq.css',
[],
FALAH_SOUQ_VERSION
);
}
add_action( 'wp_enqueue_scripts', 'falah_souq_enqueue_always' );
register_activation_hook( __FILE__, function () {
falah_souq_register_post_type();
flush_rewrite_rules();
} );
@@ -0,0 +1,51 @@
<?php
defined( 'ABSPATH' ) || exit;
function falah_souq_register_post_type() {
register_post_type( 'souq_service', [
'labels' => [
'name' => __( 'Services', 'falah-souq' ),
'singular_name' => __( 'Service', 'falah-souq' ),
'add_new_item' => __( 'Add New Service', 'falah-souq' ),
'edit_item' => __( 'Edit Service', 'falah-souq' ),
],
'public' => true,
'has_archive' => true,
'rewrite' => [ 'slug' => 'souq' ],
'supports' => [ 'title', 'editor', 'thumbnail', 'excerpt', 'custom-fields' ],
'menu_icon' => 'dashicons-store',
'show_in_rest' => true,
] );
register_post_meta( 'souq_service', '_souq_price', [
'type' => 'number',
'single' => true,
'show_in_rest' => true,
] );
register_post_meta( 'souq_service', '_souq_delivery_days', [
'type' => 'integer',
'single' => true,
'show_in_rest' => true,
] );
register_post_meta( 'souq_service', '_souq_category', [
'type' => 'string',
'single' => true,
'show_in_rest' => true,
] );
register_post_meta( 'souq_service', '_souq_seller_name', [
'type' => 'string',
'single' => true,
'show_in_rest' => true,
] );
register_post_meta( 'souq_service', '_souq_rating', [
'type' => 'number',
'single' => true,
'show_in_rest' => true,
] );
register_post_meta( 'souq_service', '_souq_reviews_count', [
'type' => 'integer',
'single' => true,
'show_in_rest' => true,
] );
}
add_action( 'init', 'falah_souq_register_post_type' );
@@ -0,0 +1,153 @@
<?php
defined( 'ABSPATH' ) || exit;
function falah_souq_shortcode( $atts ) {
$atts = shortcode_atts( [
'category' => '',
'limit' => 12,
'columns' => 3,
], $atts, 'souq_marketplace' );
$query_args = [
'post_type' => 'souq_service',
'post_status' => 'publish',
'posts_per_page' => (int) $atts['limit'],
'orderby' => 'date',
'order' => 'DESC',
];
if ( $atts['category'] ) {
$query_args['meta_query'] = [ [
'key' => '_souq_category',
'value' => sanitize_text_field( $atts['category'] ),
] ];
}
$services = new WP_Query( $query_args );
ob_start();
?>
<div class="souq-marketplace" data-columns="<?php echo esc_attr( $atts['columns'] ); ?>">
<div class="souq-filters">
<button class="souq-filter-btn active" data-filter="all">All Services</button>
<button class="souq-filter-btn" data-filter="quran">Quran</button>
<button class="souq-filter-btn" data-filter="design">Design</button>
<button class="souq-filter-btn" data-filter="writing">Writing</button>
<button class="souq-filter-btn" data-filter="tech">Tech</button>
<button class="souq-filter-btn" data-filter="business">Business</button>
</div>
<?php if ( $services->have_posts() ) : ?>
<div class="souq-grid souq-grid--<?php echo esc_attr( $atts['columns'] ); ?>col">
<?php while ( $services->have_posts() ) : $services->the_post();
$price = get_post_meta( get_the_ID(), '_souq_price', true );
$days = get_post_meta( get_the_ID(), '_souq_delivery_days', true );
$category = get_post_meta( get_the_ID(), '_souq_category', true );
$seller = get_post_meta( get_the_ID(), '_souq_seller_name', true );
$rating = (float) get_post_meta( get_the_ID(), '_souq_rating', true );
$reviews = (int) get_post_meta( get_the_ID(), '_souq_reviews_count', true );
$stars_full = floor( $rating );
$has_half = ( $rating - $stars_full ) >= 0.5;
?>
<article class="souq-card" data-category="<?php echo esc_attr( $category ); ?>">
<a href="<?php the_permalink(); ?>" class="souq-card__link">
<div class="souq-card__thumb">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium_large', [ 'class' => 'souq-card__img', 'loading' => 'lazy' ] ); ?>
<?php else : ?>
<div class="souq-card__img-placeholder">
<svg viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="80" height="60" fill="#0A5C36" opacity="0.08"/>
<path d="M32 20h16M32 30h16M32 40h10" stroke="#0A5C36" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<?php endif; ?>
<?php if ( $category ) : ?>
<span class="souq-card__badge"><?php echo esc_html( ucfirst( $category ) ); ?></span>
<?php endif; ?>
</div>
<div class="souq-card__body">
<?php if ( $seller ) : ?>
<div class="souq-card__seller">
<span class="souq-card__seller-avatar"><?php echo esc_html( mb_substr( $seller, 0, 1 ) ); ?></span>
<span class="souq-card__seller-name"><?php echo esc_html( $seller ); ?></span>
</div>
<?php endif; ?>
<h3 class="souq-card__title"><?php the_title(); ?></h3>
<?php if ( $rating > 0 ) : ?>
<div class="souq-card__rating" aria-label="Rating: <?php echo esc_attr( number_format( $rating, 1 ) ); ?> out of 5">
<div class="souq-card__stars" aria-hidden="true">
<?php for ( $i = 1; $i <= 5; $i++ ) : ?>
<?php if ( $i <= $stars_full ) : ?>
<span class="souq-star souq-star--full">★</span>
<?php elseif ( $i === $stars_full + 1 && $has_half ) : ?>
<span class="souq-star souq-star--half">★</span>
<?php else : ?>
<span class="souq-star souq-star--empty">★</span>
<?php endif; ?>
<?php endfor; ?>
</div>
<span class="souq-card__rating-value"><?php echo esc_html( number_format( $rating, 1 ) ); ?></span>
<?php if ( $reviews ) : ?>
<span class="souq-card__reviews">(<?php echo esc_html( number_format( $reviews ) ); ?>)</span>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<div class="souq-card__footer">
<?php if ( $days ) : ?>
<span class="souq-card__delivery">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2"/>
<path d="M6 3.5v2.5l1.5 1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<?php echo esc_html( $days ); ?>d delivery
</span>
<?php endif; ?>
<?php if ( $price ) : ?>
<span class="souq-card__price">
<span class="souq-card__price-from">From</span>
<span class="souq-card__price-amount">RM <?php echo esc_html( number_format( (float) $price, 0 ) ); ?></span>
</span>
<?php endif; ?>
</div>
</a>
</article>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
<div class="souq-empty">
<div class="souq-empty__icon" aria-hidden="true">🕌</div>
<p class="souq-empty__text">No services listed yet. Be the first to offer your skills to the Ummah.</p>
<?php if ( current_user_can( 'edit_posts' ) ) : ?>
<a href="<?php echo esc_url( admin_url( 'post-new.php?post_type=souq_service' ) ); ?>" class="souq-empty__cta">Add Service</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<script>
(function(){
var mp = document.querySelector('.souq-marketplace');
if (!mp) return;
mp.querySelectorAll('.souq-filter-btn').forEach(function(btn){
btn.addEventListener('click', function(){
mp.querySelectorAll('.souq-filter-btn').forEach(function(b){ b.classList.remove('active'); });
btn.classList.add('active');
var filter = btn.dataset.filter;
mp.querySelectorAll('.souq-card').forEach(function(card){
card.style.display = (filter === 'all' || card.dataset.category === filter) ? '' : 'none';
});
});
});
})();
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'souq_marketplace', 'falah_souq_shortcode' );