Compare commits

...

12 Commits

Author SHA1 Message Date
Antigravity AI be04bbee74 fix: correct volume names and dollar escaping in docker-stack.yml 2026-07-06 22:29:15 +08:00
Antigravity AI 6793d72b0d feat: add docker-stack.yml for Swarm deployment so Traefik discovers ummah2-wp 2026-07-06 22:28:01 +08:00
Antigravity AI c7016fa1bf fix: rename Traefik routers to ummah2wp to avoid conflict with wordpress2 Swarm service 2026-07-06 22:21:20 +08:00
Antigravity AI 63af5a6f6b fix: add WORDPRESS_TABLE_PREFIX to wpcli service 2026-07-06 22:11:50 +08:00
Antigravity AI dceb30ed8c 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
2026-07-06 22:10:47 +08:00
Antigravity AI 0a551c8367 fix: set table prefix to wp_umm_ to match cPanel backup 2026-07-06 22:10:12 +08:00
Antigravity AI 528b770907 fix: escape $$_SERVER in docker-compose, remove https-redirect middleware (Cloudflare handles it) 2026-07-06 21:54:41 +08:00
Antigravity AI 139475dc3c feat: premium UI overhaul for falah-shortcodes widgets — Islamic luxury design system v2 2026-07-06 21:52:37 +08:00
Antigravity AI 25fde75fc8 feat: add migrate-from-gitea.sh — deploy + import Gitea DB backup in one step 2026-07-06 18:56:09 +08:00
Antigravity AI 9d1707fbdb fix: use Gitea authenticated download for WP plugin zips (GitHub repo is private) 2026-07-06 18:53:00 +08:00
Antigravity AI ff09a84060 fix: use Traefik labels instead of Caddy — update deploy stack for Contabo
- docker-compose.yml: Traefik routers/services labels, TLS via letsencrypt certresolver
- deploy.sh: auto-detects Traefik network, installs plugins from GitHub raw URLs
- Containers: ummah2-db, ummah2-wp (apache variant for simpler setup), ummah2-wpcli
2026-07-06 18:36:54 +08:00
Antigravity AI d51e1b54bd feat: ummah2.falahos.my WordPress stack on Contabo + falah-shortcodes plugin
- docker-compose.yml: MariaDB 11 + WordPress 6.7 PHP8.3-FPM + Nginx
- nginx/default.conf: FastCGI pass, security headers, cache headers
- deploy.sh: one-command spin-up with WP-CLI install + plugin activation
- migrate-from-cpanel.sh: import cPanel backup (SQL/tar.gz/zip) with URL rewrite
- wordpress-plugins/falah-shortcodes: prayer times, dhikr, qibla, daily verse, nur/wallet/souq iframes
- wordpress-plugins/hermes-ai-bridge: REST API bridge with plugin install/activate endpoints

Migration path: cPanel → Contabo Docker (Imunify360 bypass)
2026-07-06 18:31:41 +08:00
18 changed files with 2102 additions and 136 deletions
+14
View File
@@ -0,0 +1,14 @@
# ummah2.falahos.my WordPress — Contabo Deployment
# Copy to .env and fill values (retrieve from bitwarden.falahos.my)
DB_ROOT_PASSWORD=
DB_PASSWORD=
# WP Admin (set during wp-install.sh)
WP_ADMIN_USER=admin
WP_ADMIN_EMAIL=wanjauhari@gmail.com
WP_ADMIN_PASSWORD=
# Site
WP_SITE_URL=https://ummah2.falahos.my
WP_SITE_TITLE=Ummah FalahOS
+127
View File
@@ -0,0 +1,127 @@
#!/usr/bin/env bash
# deploy.sh — spin up ummah2.falahos.my on Contabo via Traefik
set -euo pipefail
DEPLOY_DIR="/opt/ummah-wordpress"
SITE_URL="https://ummah2.falahos.my"
REPO="https://github.com/maifors/falah-os.git"
BRANCH="community-edition"
echo "▶ Deploying ummah2.falahos.my"
# ── Clone / update repo ───────────────────────────────────────────────────────
if [ -d "$DEPLOY_DIR/.git" ]; then
git -C "$DEPLOY_DIR" fetch origin
git -C "$DEPLOY_DIR" reset --hard origin/$BRANCH
else
git clone --branch "$BRANCH" --depth 1 "$REPO" "$DEPLOY_DIR"
fi
cd "$DEPLOY_DIR/ummah-wordpress"
# ── .env setup ────────────────────────────────────────────────────────────────
if [ ! -f .env ]; then
cp .env.example .env
echo ""
echo "⚠️ Fill .env before continuing:"
echo " nano $DEPLOY_DIR/ummah-wordpress/.env"
echo ""
echo " DB_ROOT_PASSWORD — strong random password"
echo " DB_PASSWORD — strong random password"
echo " WP_ADMIN_PASSWORD — strong password for /wp-admin"
exit 0
fi
source .env
# ── Detect Traefik network name ───────────────────────────────────────────────
TRAEFIK_NETWORK=$(docker network ls --format '{{.Name}}' | grep -iE "traefik|proxy|public" | head -1 || echo "traefik-public")
export TRAEFIK_NETWORK
echo " Using Traefik network: $TRAEFIK_NETWORK"
# ── Check https-redirect middleware exists ────────────────────────────────────
# If not, add it (some Traefik setups define it globally, some don't)
if ! docker inspect traefik 2>/dev/null | grep -q "https-redirect"; then
echo " Note: https-redirect middleware may need to be pre-defined in Traefik config"
fi
# ── Start stack ───────────────────────────────────────────────────────────────
echo "── Starting DB ──"
docker compose up -d db
echo " Waiting for MariaDB…"
until docker compose exec -T db mysqladmin ping -u root -p"$DB_ROOT_PASSWORD" --silent 2>/dev/null; do
sleep 2
done
echo " DB ready ✅"
echo "── Starting WordPress ──"
docker compose up -d wordpress
echo " Waiting for WordPress files…"
for i in $(seq 1 40); do
if docker compose exec -T wordpress test -f /var/www/html/wp-includes/version.php 2>/dev/null; then
break
fi
sleep 3
done
# ── WP-CLI install ────────────────────────────────────────────────────────────
echo "── Running WP install via WP-CLI ──"
docker compose run --rm wpcli core install \
--url="$SITE_URL" \
--title="${WP_SITE_TITLE:-Ummah FalahOS}" \
--admin_user="${WP_ADMIN_USER:-admin}" \
--admin_password="$WP_ADMIN_PASSWORD" \
--admin_email="${WP_ADMIN_EMAIL:-wanjauhari@gmail.com}" \
--skip-email 2>/dev/null || echo " Already installed."
# ── Set permalink ─────────────────────────────────────────────────────────────
docker compose run --rm wpcli rewrite structure '/%postname%/' --hard 2>/dev/null
# ── Install plugins ───────────────────────────────────────────────────────────
echo "── Installing Falah plugins ──"
GITEA_BASE="https://git.falahos.my/falahos/falah-os-ce/raw/branch/community-edition/wordpress-plugins"
GITEA_TOKEN="${GITEA_TOKEN:-81dad6b01711baff0f23218dd3fd53d60e97751b}"
# Download zips locally (WP-CLI can't auth via header, so pre-download)
curl -sL -H "Authorization: token $GITEA_TOKEN" \
"$GITEA_BASE/falah-shortcodes.zip" -o /tmp/falah-shortcodes.zip
curl -sL -H "Authorization: token $GITEA_TOKEN" \
"$GITEA_BASE/hermes-ai-bridge.zip" -o /tmp/hermes-ai-bridge.zip
# Copy zips into the WP container volume mount
WP_VOLUME=$(docker volume inspect ummah-wordpress_ummah2-wp-data --format '{{.Mountpoint}}' 2>/dev/null || echo "")
if [ -n "$WP_VOLUME" ]; then
cp /tmp/falah-shortcodes.zip "$WP_VOLUME/falah-shortcodes.zip"
cp /tmp/hermes-ai-bridge.zip "$WP_VOLUME/hermes-ai-bridge.zip"
docker compose run --rm wpcli plugin install /var/www/html/falah-shortcodes.zip \
--activate --force 2>/dev/null && echo " falah-shortcodes ✅" || echo " falah-shortcodes: upload manually"
docker compose run --rm wpcli plugin install /var/www/html/hermes-ai-bridge.zip \
--activate --force 2>/dev/null && echo " hermes-ai-bridge ✅" || echo " hermes-ai-bridge: upload manually"
rm -f "$WP_VOLUME/falah-shortcodes.zip" "$WP_VOLUME/hermes-ai-bridge.zip"
else
echo " ⚠️ Volume not found — install plugins manually from /tmp/*.zip"
fi
# Essential WP.org plugins
echo "── Installing WP.org plugins ──"
for plugin in astra tutor-lms mailpoet woocommerce easy-digital-downloads litespeed-cache; do
docker compose run --rm wpcli plugin install "$plugin" --activate 2>/dev/null \
&& echo " $plugin" || echo " $plugin ⚠️"
done
# ── Astra theme ───────────────────────────────────────────────────────────────
docker compose run --rm wpcli theme install astra --activate 2>/dev/null || true
# ── WP performance settings ───────────────────────────────────────────────────
docker compose run --rm wpcli option update blogdescription "Learn, Discuss, and Grow Together" 2>/dev/null || true
docker compose run --rm wpcli option update timezone_string "Asia/Kuala_Lumpur" 2>/dev/null || true
docker compose run --rm wpcli option update date_format "d F Y" 2>/dev/null || true
echo ""
echo "✅ ummah2.falahos.my is live!"
echo " WP Admin: $SITE_URL/wp-admin"
echo " User: ${WP_ADMIN_USER:-admin}"
echo ""
echo "── DNS (add in Cloudflare) ──"
echo " ummah2.falahos.my A 13.140.161.244 (proxied)"
+96
View File
@@ -0,0 +1,96 @@
version: "3.9"
# ummah2.falahos.my — WordPress on Contabo
# Reverse proxy: Traefik (already running)
# Run: docker compose up -d
services:
db:
image: mariadb:11
container_name: ummah2-db
restart: unless-stopped
environment:
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
MYSQL_DATABASE: ummah2_wp
MYSQL_USER: ummah2_wp
MYSQL_PASSWORD: ${DB_PASSWORD}
volumes:
- ummah2-db-data:/var/lib/mysql
networks:
- ummah2-internal
healthcheck:
test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
interval: 10s
timeout: 5s
retries: 5
wordpress:
image: wordpress:6.7-php8.3-apache
container_name: ummah2-wp
restart: unless-stopped
depends_on:
db:
condition: service_healthy
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_NAME: ummah2_wp
WORDPRESS_DB_USER: ummah2_wp
WORDPRESS_DB_PASSWORD: ${DB_PASSWORD}
WORDPRESS_TABLE_PREFIX: wp_umm_
WORDPRESS_DEBUG: "false"
PHP_MEMORY_LIMIT: 256M
WORDPRESS_CONFIG_EXTRA: |
define('WP_MEMORY_LIMIT', '256M');
define('WP_HOME', 'https://ummah2.falahos.my');
define('WP_SITEURL', 'https://ummah2.falahos.my');
$$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_ADMIN', true);
volumes:
- ummah2-wp-data:/var/www/html
- ./wordpress-config/php.ini:/usr/local/etc/php/conf.d/ummah2.ini:ro
networks:
- ummah2-internal
- traefik-public
labels:
- "traefik.enable=true"
- "traefik.docker.network=falah_traefik-net"
# HTTPS router (Cloudflare terminates SSL, Traefik sees HTTP on websecure)
- "traefik.http.routers.ummah2wp.rule=Host(`ummah2.falahos.my`)"
- "traefik.http.routers.ummah2wp.entrypoints=websecure"
- "traefik.http.routers.ummah2wp.tls.certresolver=letsencrypt"
- "traefik.http.services.ummah2wp.loadbalancer.server.port=80"
# HTTP router — no middleware, just pass through (Cloudflare handles redirect)
- "traefik.http.routers.ummah2wp-http.rule=Host(`ummah2.falahos.my`)"
- "traefik.http.routers.ummah2wp-http.entrypoints=web"
- "traefik.http.routers.ummah2wp-http.service=ummah2wp"
wpcli:
image: wordpress:cli-2-php8.3
container_name: ummah2-wpcli
depends_on:
- wordpress
- db
user: "33:33"
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_NAME: ummah2_wp
WORDPRESS_DB_USER: ummah2_wp
WORDPRESS_DB_PASSWORD: ${DB_PASSWORD}
WORDPRESS_TABLE_PREFIX: wp_umm_
volumes:
- ummah2-wp-data:/var/www/html
networks:
- ummah2-internal
entrypoint: ["tail", "-f", "/dev/null"]
profiles: ["tools"]
networks:
ummah2-internal:
driver: bridge
traefik-public:
external: true
name: ${TRAEFIK_NETWORK:-traefik-public}
volumes:
ummah2-db-data:
ummah2-wp-data:
+83
View File
@@ -0,0 +1,83 @@
version: "3.9"
# ummah2.falahos.my — WordPress on Contabo Docker Swarm
# Deploy: docker stack deploy -c docker-stack.yml --with-registry-auth ummah2
services:
db:
image: mariadb:11
environment:
MYSQL_ROOT_PASSWORD: "FalahDB_Root_2026!"
MYSQL_DATABASE: ummah2_wp
MYSQL_USER: ummah2_wp
MYSQL_PASSWORD: "FalahDB_WP_2026!"
volumes:
- ummah2-db-data:/var/lib/mysql
networks:
- ummah2-internal
healthcheck:
test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
interval: 10s
timeout: 5s
retries: 5
start_period: 30s
deploy:
replicas: 1
restart_policy:
condition: on-failure
wordpress:
image: wordpress:6.7-php8.3-apache
depends_on:
- db
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_NAME: ummah2_wp
WORDPRESS_DB_USER: ummah2_wp
WORDPRESS_DB_PASSWORD: "FalahDB_WP_2026!"
WORDPRESS_TABLE_PREFIX: wp_umm_
WORDPRESS_DEBUG: "false"
PHP_MEMORY_LIMIT: 256M
WORDPRESS_CONFIG_EXTRA: |
define('WP_MEMORY_LIMIT', '256M');
define('WP_HOME', 'https://ummah2.falahos.my');
define('WP_SITEURL', 'https://ummah2.falahos.my');
$$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_ADMIN', true);
volumes:
- ummah2-wp-data:/var/www/html
networks:
- ummah2-internal
- falah_traefik-net
deploy:
replicas: 1
restart_policy:
condition: on-failure
labels:
- "traefik.enable=true"
- "traefik.docker.network=falah_traefik-net"
# HTTPS router
- "traefik.http.routers.ummah2wp.rule=Host(`ummah2.falahos.my`)"
- "traefik.http.routers.ummah2wp.entrypoints=websecure"
- "traefik.http.routers.ummah2wp.tls=true"
- "traefik.http.routers.ummah2wp.middlewares=ratelimit-public,sec-headers,compress"
- "traefik.http.services.ummah2wp.loadbalancer.server.port=80"
# HTTP router (Cloudflare handles HTTP→HTTPS)
- "traefik.http.routers.ummah2wp-http.rule=Host(`ummah2.falahos.my`)"
- "traefik.http.routers.ummah2wp-http.entrypoints=web"
- "traefik.http.routers.ummah2wp-http.service=ummah2wp"
networks:
ummah2-internal:
driver: overlay
attachable: true
falah_traefik-net:
external: true
volumes:
ummah2-db-data:
external: true
name: ummah-wordpress_ummah2-db-data
ummah2-wp-data:
external: true
name: ummah-wordpress_ummah2-wp-data
+79
View File
@@ -0,0 +1,79 @@
#!/usr/bin/env bash
# migrate-from-cpanel.sh — import cPanel WordPress backup into Contabo
# Usage: bash migrate-from-cpanel.sh <backup.tar.gz or SQL dump>
# Run AFTER deploy.sh has the new WP running.
set -euo pipefail
DEPLOY_DIR="/opt/ummah-wordpress"
OLD_URL="https://ummah.falahos.my"
NEW_URL="https://ummah2.falahos.my"
BACKUP_FILE="${1:-}"
if [ -z "$BACKUP_FILE" ]; then
echo "Usage: $0 <wordpress-backup.tar.gz | database.sql>"
echo ""
echo "Export from cPanel:"
echo " 1. cPanel → Backup Wizard → Full Backup (downloads .tar.gz)"
echo " 2. OR: cPanel → phpMyAdmin → Export DB as SQL"
echo " 3. OR: cPanel → File Manager → compress /public_html"
exit 1
fi
cd "$DEPLOY_DIR"
source .env
EXT="${BACKUP_FILE##*.}"
if [ "$EXT" = "sql" ]; then
echo "▶ Importing SQL database dump"
docker compose exec -T db mysql \
-u ummah_wp -p"$DB_PASSWORD" ummah_wp < "$BACKUP_FILE"
echo "── Updating URLs ──"
docker compose run --rm wpcli search-replace "$OLD_URL" "$NEW_URL" \
--all-tables --report-changed-only
elif [ "$EXT" = "gz" ] || [ "$EXT" = "zip" ]; then
echo "▶ Extracting backup archive"
TMP_DIR=$(mktemp -d)
if [ "$EXT" = "gz" ]; then
tar -xzf "$BACKUP_FILE" -C "$TMP_DIR"
else
unzip -q "$BACKUP_FILE" -d "$TMP_DIR"
fi
# Find SQL dump inside archive
SQL_FILE=$(find "$TMP_DIR" -name "*.sql" | head -1)
if [ -n "$SQL_FILE" ]; then
echo "── Importing database: $SQL_FILE ──"
docker compose exec -T db mysql \
-u ummah_wp -p"$DB_PASSWORD" ummah_wp < "$SQL_FILE"
docker compose run --rm wpcli search-replace "$OLD_URL" "$NEW_URL" \
--all-tables --report-changed-only
fi
# Sync wp-content (themes, plugins, uploads)
WP_CONTENT=$(find "$TMP_DIR" -type d -name "wp-content" | head -1)
if [ -n "$WP_CONTENT" ]; then
echo "── Syncing wp-content ──"
VOLUME_PATH=$(docker volume inspect ummah-wordpress_ummah-wp-data \
--format '{{.Mountpoint}}')
rsync -av --exclude="cache" "$WP_CONTENT/" "$VOLUME_PATH/wp-content/"
docker compose exec wordpress chown -R www-data:www-data /var/www/html/wp-content
fi
rm -rf "$TMP_DIR"
else
echo "❌ Unknown file type: $EXT (expected .sql, .tar.gz, or .zip)"
exit 1
fi
# ── Post-migration ────────────────────────────────────────────────────────────
echo "── Post-migration cleanup ──"
docker compose run --rm wpcli cache flush
docker compose run --rm wpcli rewrite flush
echo ""
echo "✅ Migration complete. Visit: $NEW_URL"
echo " Once verified, update DNS: ummah.falahos.my → 13.140.161.244"
echo " Then run: wp-cli search-replace ummah2.falahos.my ummah.falahos.my --all-tables"
+52
View File
@@ -0,0 +1,52 @@
#!/usr/bin/env bash
# migrate-from-gitea.sh — deploy WordPress + import Gitea DB backup
# Run on Contabo: bash migrate-from-gitea.sh
set -euo pipefail
DEPLOY_DIR="/opt/falah-os-ce/ummah-wordpress"
GITEA_TOKEN="${GITEA_TOKEN:-81dad6b01711baff0f23218dd3fd53d60e97751b}"
DB_BACKUP_URL="https://git.falahos.my/falah-os/cpanel-db-backups/raw/branch/main/ummah_falahos_my_20260703_125628.sql"
OLD_URL="https://ummah.falahos.my"
NEW_URL="https://ummah2.falahos.my"
echo "▶ Step 1: Ensure repo is up to date"
if [ -d "/opt/falah-os-ce/.git" ]; then
git -C /opt/falah-os-ce pull origin community-edition --ff-only
else
git clone --branch community-edition https://github.com/maifors/falah-os.git /opt/falah-os-ce
fi
cd "$DEPLOY_DIR"
echo "▶ Step 2: Run deploy.sh (starts DB + WordPress + WP-CLI install)"
bash deploy.sh
echo ""
echo "▶ Step 3: Download DB backup from Gitea"
curl -sL -H "Authorization: token $GITEA_TOKEN" \
"$DB_BACKUP_URL" -o /tmp/ummah_backup.sql
echo " Downloaded: $(wc -c < /tmp/ummah_backup.sql) bytes"
source .env
echo "▶ Step 4: Import database backup"
docker compose exec -T db mysql \
-u root -p"$DB_ROOT_PASSWORD" ummah2_wp < /tmp/ummah_backup.sql
echo " DB imported ✅"
echo "▶ Step 5: Search-replace old URL → new URL"
docker compose run --rm wpcli search-replace \
"$OLD_URL" "$NEW_URL" \
--all-tables --report-changed-only
echo " URLs updated ✅"
echo "▶ Step 6: Flush caches and rewrite rules"
docker compose run --rm wpcli cache flush
docker compose run --rm wpcli rewrite flush
docker compose run --rm wpcli rewrite structure '/%postname%/' --hard
echo ""
echo "✅ Migration complete!"
echo " Visit: $NEW_URL"
echo " WP Admin: $NEW_URL/wp-admin"
rm -f /tmp/ummah_backup.sql
+47
View File
@@ -0,0 +1,47 @@
server {
listen 80;
server_name _;
root /var/www/html;
index index.php;
client_max_body_size 64M;
# Security headers
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header Referrer-Policy strict-origin-when-cross-origin;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
fastcgi_pass wordpress:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_read_timeout 300;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
}
# WordPress uploads
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
# Block sensitive files
location ~ /\.(ht|git|env) {
deny all;
}
location = /xmlrpc.php {
deny all;
}
location /wp-json/ {
try_files $uri $uri/ /index.php?$args;
}
}
+10
View File
@@ -0,0 +1,10 @@
memory_limit = 256M
max_execution_time = 300
upload_max_filesize = 64M
post_max_size = 64M
max_input_vars = 5000
opcache.enable = 1
opcache.memory_consumption = 128
opcache.interned_strings_buffer = 8
opcache.max_accelerated_files = 4000
opcache.revalidate_freq = 60
Binary file not shown.
File diff suppressed because it is too large Load Diff
@@ -273,4 +273,150 @@
}) })
.catch(() => {}); .catch(() => {});
// ── Falah Wallet ──────────────────────────────────────────────────────────
const walletWidget = document.getElementById('falah-wallet-widget');
if (walletWidget) {
const balanceEl = document.getElementById('falah-wallet-balance');
const balanceFiat = document.getElementById('falah-wallet-balance-fiat');
const btnSend = document.getElementById('falah-wallet-btn-send');
const btnReceive = document.getElementById('falah-wallet-btn-receive');
const txList = document.getElementById('falah-wallet-tx-list');
const loginPrompt = document.getElementById('falah-wallet-login-prompt');
const sendModal = document.getElementById('falah-wallet-send-modal');
const receiveModal = document.getElementById('falah-wallet-receive-modal');
function openModal(el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
function closeModal(el) { el.style.display = 'none'; document.body.style.overflow = ''; }
if (btnSend) btnSend.addEventListener('click', () => sendModal && openModal(sendModal));
if (btnReceive) btnReceive.addEventListener('click', () => receiveModal && openModal(receiveModal));
document.getElementById('falah-wallet-send-backdrop')?.addEventListener('click', () => closeModal(sendModal));
document.getElementById('falah-wallet-send-close')?.addEventListener('click', () => closeModal(sendModal));
document.getElementById('falah-wallet-receive-backdrop')?.addEventListener('click', () => closeModal(receiveModal));
document.getElementById('falah-wallet-receive-close')?.addEventListener('click', () => closeModal(receiveModal));
// Copy address
document.getElementById('falah-wallet-copy-addr')?.addEventListener('click', function () {
const addr = document.getElementById('falah-wallet-address-text')?.textContent || '';
if (!addr) return;
navigator.clipboard?.writeText(addr).then(() => {
this.title = 'Copied!';
setTimeout(() => { this.title = 'Copy address'; }, 1500);
});
});
// Send form
document.getElementById('falah-wallet-send-submit')?.addEventListener('click', function () {
const to = document.getElementById('falah-wallet-send-to')?.value.trim();
const amount = parseFloat(document.getElementById('falah-wallet-send-amount')?.value);
const errEl = document.getElementById('falah-wallet-send-err');
if (!to || !to.startsWith('0x') || to.length < 10) {
if (errEl) errEl.textContent = 'Please enter a valid recipient address.';
return;
}
if (!amount || amount <= 0) {
if (errEl) errEl.textContent = 'Please enter a valid amount.';
return;
}
if (errEl) errEl.textContent = '';
// Redirect to wallet app with prefilled params
const base = (cfg.mobileUrl || 'https://falahos.my/mobile').replace(/\/$/, '');
const url = `${base}/wallet/send?to=${encodeURIComponent(to)}&amount=${encodeURIComponent(amount)}`;
window.open(url, '_blank', 'noopener,noreferrer');
closeModal(sendModal);
});
// Fetch wallet data from Falah Mobile REST API
function fetchWalletData() {
const base = (cfg.mobileUrl || 'https://falahos.my/mobile').replace(/\/$/, '');
fetch(`${base}/api/wallet/balance`, {
credentials: 'include',
headers: { 'X-WP-Nonce': cfg.nonce || '' },
})
.then(r => {
if (r.status === 401 || r.status === 403) throw new Error('unauthenticated');
if (!r.ok) throw new Error('api_error');
return r.json();
})
.then(data => {
if (balanceEl) balanceEl.textContent = (data.balance || '0') + ' ' + (data.currency || 'FLH');
if (balanceFiat && data.fiat_value) balanceFiat.textContent = '≈ ' + data.fiat_value;
if (btnSend) btnSend.disabled = false;
if (btnReceive) btnReceive.disabled = false;
// Render receive address + QR
if (data.address) {
const addrEl = document.getElementById('falah-wallet-address-text');
if (addrEl) addrEl.textContent = data.address;
const qrInner = document.getElementById('falah-wallet-qr-inner');
if (qrInner) {
const img = document.createElement('img');
img.alt = 'Wallet QR Code';
img.src = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(data.address)}&size=160x160&margin=4`;
img.width = 160; img.height = 160;
qrInner.innerHTML = '';
qrInner.appendChild(img);
}
}
return fetch(`${base}/api/wallet/transactions?limit=5`, {
credentials: 'include',
headers: { 'X-WP-Nonce': cfg.nonce || '' },
});
})
.then(r => r && r.ok ? r.json() : null)
.then(data => {
if (!txList || !data) return;
const items = Array.isArray(data.transactions) ? data.transactions : [];
txList.innerHTML = '';
if (!items.length) {
txList.innerHTML = '<div class="falah-wallet-tx-empty">No transactions yet</div>';
return;
}
items.forEach(tx => {
const type = tx.type === 'sent' ? 'sent' : 'received';
const icon = type === 'sent' ? '↑' : '↓';
const sign = type === 'sent' ? '' : '+';
const date = tx.date ? new Date(tx.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }) : '';
const desc = tx.description || (type === 'sent' ? 'Sent' : 'Received');
const amount = (tx.amount || '0') + ' ' + (tx.currency || 'FLH');
const row = document.createElement('div');
row.className = 'falah-wallet-tx-item';
row.innerHTML = `
<div class="falah-wallet-tx-icon ${type}">${icon}</div>
<div class="falah-wallet-tx-info">
<div class="falah-wallet-tx-desc">${escapeHtml(desc)}</div>
<div class="falah-wallet-tx-date">${escapeHtml(date)}</div>
</div>
<div class="falah-wallet-tx-amount ${type}">${sign}${escapeHtml(amount)}</div>
`;
txList.appendChild(row);
});
})
.catch(err => {
if (err.message === 'unauthenticated') {
if (balanceEl) balanceEl.textContent = '—';
if (loginPrompt) loginPrompt.style.display = '';
if (txList) txList.innerHTML = '';
} else {
if (balanceEl) balanceEl.textContent = '—';
if (txList) txList.innerHTML = '<div class="falah-wallet-tx-empty">Could not load wallet. <a href="' + (cfg.mobileUrl || '') + '/wallet" target="_blank" rel="noopener">Open wallet app →</a></div>';
}
});
}
fetchWalletData();
}
function escapeHtml(str) {
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
})(); })();
@@ -315,7 +315,106 @@ add_shortcode( 'nur_ai_chat', function ( $atts ) {
// ─── [falah_wallet] ─────────────────────────────────────────────────────────── // ─── [falah_wallet] ───────────────────────────────────────────────────────────
add_shortcode( 'falah_wallet', function ( $atts ) { add_shortcode( 'falah_wallet', function ( $atts ) {
return falah_iframe_widget( 'Falah Wallet', '💰', '/wallet', 'Loading Falah Wallet…' ); falah_sc_enqueue();
$atts = shortcode_atts( [
'currency' => 'FLH',
'show_tx' => 'true',
], $atts );
$currency = esc_html( $atts['currency'] );
$show_tx = filter_var( $atts['show_tx'], FILTER_VALIDATE_BOOLEAN );
ob_start();
?>
<div class="falah-widget falah-wallet-widget" id="falah-wallet-widget">
<div class="falah-widget-header">
<span class="falah-icon">💰</span>
<h3>Falah Wallet</h3>
<span class="falah-wallet-currency-badge"><?php echo $currency; ?></span>
</div>
<div class="falah-wallet-body">
<div class="falah-wallet-balance-card" id="falah-wallet-balance-card">
<div class="falah-wallet-balance-label">Total Balance</div>
<div class="falah-wallet-balance-amount" id="falah-wallet-balance">
<span class="falah-wallet-loading-dots"><span></span><span></span><span></span></span>
</div>
<div class="falah-wallet-balance-sub" id="falah-wallet-balance-fiat"></div>
<div class="falah-wallet-actions">
<button class="falah-wallet-btn falah-wallet-btn-send" id="falah-wallet-btn-send" disabled>
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 10h14M10 3l7 7-7 7"/></svg>
Send
</button>
<button class="falah-wallet-btn falah-wallet-btn-receive" id="falah-wallet-btn-receive" disabled>
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M17 10H3M10 17L3 10l7-7"/></svg>
Receive
</button>
</div>
</div>
<div class="falah-wallet-login-prompt" id="falah-wallet-login-prompt" style="display:none">
<p>Sign in to access your Falah Wallet</p>
<a href="<?php echo esc_url( wp_login_url( get_permalink() ) ); ?>" class="falah-wallet-login-link">Sign In</a>
</div>
<?php if ( $show_tx ) : ?>
<div class="falah-wallet-tx-section" id="falah-wallet-tx-section">
<div class="falah-wallet-tx-header">
<span class="falah-wallet-tx-title">Recent Transactions</span>
<a href="<?php echo esc_url( get_option( 'falah_mobile_url', 'https://falahos.my/mobile' ) . '/wallet' ); ?>" target="_blank" rel="noopener" class="falah-wallet-tx-viewall">View all →</a>
</div>
<div class="falah-wallet-tx-list" id="falah-wallet-tx-list">
<div class="falah-wallet-tx-skeleton">
<div class="falah-wallet-tx-skel-row"></div>
<div class="falah-wallet-tx-skel-row"></div>
<div class="falah-wallet-tx-skel-row"></div>
</div>
</div>
</div>
<?php endif; ?>
</div>
<div class="falah-wallet-modal" id="falah-wallet-send-modal" role="dialog" aria-modal="true" aria-label="Send <?php echo $currency; ?>" style="display:none">
<div class="falah-wallet-modal-backdrop" id="falah-wallet-send-backdrop"></div>
<div class="falah-wallet-modal-box">
<div class="falah-wallet-modal-header">
<h4>Send <?php echo $currency; ?></h4>
<button class="falah-wallet-modal-close" id="falah-wallet-send-close" aria-label="Close">✕</button>
</div>
<div class="falah-wallet-modal-body">
<label class="falah-wallet-field-label" for="falah-wallet-send-to">Recipient Address</label>
<input class="falah-wallet-field" type="text" id="falah-wallet-send-to" placeholder="0x…" autocomplete="off" />
<label class="falah-wallet-field-label" for="falah-wallet-send-amount">Amount (<?php echo $currency; ?>)</label>
<input class="falah-wallet-field" type="number" id="falah-wallet-send-amount" placeholder="0.00" min="0" step="any" />
<div class="falah-wallet-modal-err" id="falah-wallet-send-err" role="alert"></div>
<button class="falah-wallet-btn falah-wallet-btn-send falah-wallet-btn-full" id="falah-wallet-send-submit">Confirm Send</button>
</div>
</div>
</div>
<div class="falah-wallet-modal" id="falah-wallet-receive-modal" role="dialog" aria-modal="true" aria-label="Receive <?php echo $currency; ?>" style="display:none">
<div class="falah-wallet-modal-backdrop" id="falah-wallet-receive-backdrop"></div>
<div class="falah-wallet-modal-box">
<div class="falah-wallet-modal-header">
<h4>Receive <?php echo $currency; ?></h4>
<button class="falah-wallet-modal-close" id="falah-wallet-receive-close" aria-label="Close">✕</button>
</div>
<div class="falah-wallet-modal-body falah-wallet-receive-body">
<div class="falah-wallet-qr-placeholder" id="falah-wallet-qr">
<div class="falah-wallet-qr-inner" id="falah-wallet-qr-inner"><div class="falah-spinner"></div></div>
</div>
<div class="falah-wallet-address-box" id="falah-wallet-address-box">
<span id="falah-wallet-address-text" class="falah-wallet-address-text"></span>
<button class="falah-wallet-copy-btn" id="falah-wallet-copy-addr" title="Copy address">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="7" y="7" width="11" height="11" rx="2"/><path d="M3 13V3h10"/></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<?php
return ob_get_clean();
} ); } );
// ─── [souq_marketplace] ─────────────────────────────────────────────────────── // ─── [souq_marketplace] ───────────────────────────────────────────────────────
Binary file not shown.
@@ -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' );
Binary file not shown.