dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Misc fixes: Storefront shop layout, product filter UI improvements, and cart badge styling

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-06-02 19:37:50 +07:00
parent dcdd6d8cac
commit fd8eb38512
10 changed files with 402 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
admin-spa/src/routes/Appearance/Shop.tsx
View File

@@ -19,6 +19,7 @@ export default function AppearanceShop() {
const [gridStyle, setGridStyle] = useState('standard');
const [cardStyle, setCardStyle] = useState('card');
const [aspectRatio, setAspectRatio] = useState('square');
const [filterLayout, setFilterLayout] = useState('basic');
const [elements, setElements] = useState({
category_filter: true,
@@ -50,6 +51,7 @@ export default function AppearanceShop() {
setCardStyle(shop.layout?.card_style || 'card');
setAspectRatio(shop.layout?.aspect_ratio || 'square');
setCardTextAlign(shop.layout?.card_text_align || 'left');
setFilterLayout(shop.layout?.filter_layout || 'basic');
if (shop.elements) {
setElements(shop.elements);
@@ -83,7 +85,8 @@ export default function AppearanceShop() {
grid_style: gridStyle,
card_style: cardStyle,
aspect_ratio: aspectRatio,
card_text_align: cardTextAlign
card_text_align: cardTextAlign,
filter_layout: filterLayout
},
elements: {
category_filter: elements.category_filter,
@@ -181,6 +184,18 @@ export default function AppearanceShop() {
</Select>
</SettingsSection>
<SettingsSection label="Filter Layout" htmlFor="filter-layout" description="Choose how catalog filters are presented">
<Select value={filterLayout} onValueChange={setFilterLayout}>
<SelectTrigger id="filter-layout">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="basic">Basic - Horizontal Top Bar</SelectItem>
<SelectItem value="rich_sidebar">Rich - Left Sidebar</SelectItem>
</SelectContent>
</Select>
</SettingsSection>
<SettingsSection label="Product Card Style" htmlFor="card-style" description="Visual style adapts to column count - more columns = cleaner style">
<Select value={cardStyle} onValueChange={setCardStyle}>
<SelectTrigger id="card-style">

2
admin-spa/src/routes/Products/SoftwareVersions/index.tsx
View File

@@ -152,7 +152,7 @@ export default function SoftwareVersions() {
placeholder={__('Search products...')}
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
className="!pl-9"
/>
</div>
</div>

13
admin-spa/src/routes/Products/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useCallback } from 'react';
import { useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Filter, Package, Trash2, RefreshCw, MoreHorizontal, Eye, Edit } from 'lucide-react';
import { Filter, Package, Trash2, RefreshCw, MoreHorizontal, Eye, Edit, Search } from 'lucide-react';
import { ErrorCard } from '@/components/ErrorCard';
import { getPageLoadErrorMessage } from '@/lib/errorHandling';
import { __ } from '@/lib/i18n';
@@ -18,6 +18,7 @@ import {
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { toast } from 'sonner';
import {
Select,
@@ -253,6 +254,16 @@ export default function Products() {
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
{__('Refresh')}
</button>
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<Input
placeholder={__('Search products...')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-[200px] lg:w-[250px] !pl-9"
/>
</div>
</div>
<div className="flex gap-2 items-center">

34
customer-spa/src/components/ProductCard.tsx
View File

@@ -70,9 +70,9 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
if (isLoading) {
return (
<div className="animate-pulse">
<div className="bg-gray-200 aspect-square rounded-lg mb-4" />
<div className="h-4 bg-gray-200 rounded mb-2" />
<div className="h-4 bg-gray-200 rounded w-2/3" />
<div className="bg-muted aspect-square rounded-lg mb-4" />
<div className="h-4 bg-muted rounded mb-2" />
<div className="h-4 bg-muted rounded w-2/3" />
</div>
);
}
@@ -91,17 +91,17 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
if (cardStyle === 'minimal') {
return gridCols >= 4
? 'overflow-hidden hover:opacity-90 transition-opacity'
: 'overflow-hidden hover:opacity-80 transition-opacity border-b border-gray-100 pb-4';
: 'overflow-hidden hover:opacity-80 transition-opacity border-b border-border pb-4';
}
if (cardStyle === 'overlay') {
return gridCols >= 4
? 'relative overflow-hidden group-hover:shadow-lg transition-all rounded-md'
: 'relative overflow-hidden group-hover:shadow-xl transition-all rounded-lg bg-white';
: 'relative overflow-hidden group-hover:shadow-xl transition-all rounded-lg bg-card';
}
// Default 'card' style
return gridCols >= 4
? 'border border-gray-200 rounded-md overflow-hidden hover:shadow-md transition-shadow bg-white'
: 'border rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-white';
? 'border border-border rounded-md overflow-hidden hover:shadow-md transition-shadow bg-card'
: 'border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-card';
};
const cardClasses = getCardClasses();
@@ -118,7 +118,7 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
<Link to={`/product/${product.slug}`} className="group h-full">
<div className={`${cardClasses} h-full flex flex-col`}>
{/* Image */}
<div className={`relative w-full overflow-hidden bg-gray-100 ${aspectRatioClass}`}>
<div className={`relative w-full overflow-hidden bg-muted ${aspectRatioClass}`}>
{product.image ? (
<img
src={product.image}
@@ -126,7 +126,7 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
className="absolute inset-0 w-full !h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="absolute inset-0 flex items-center justify-center text-gray-400">
<div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
No Image
</div>
)}
@@ -146,12 +146,14 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
<div className="absolute top-2 left-2 z-10">
<button
onClick={handleWishlistClick}
className={`font-[inherit] p-2 rounded-full shadow-md hover:bg-gray-50 flex items-center justify-center transition-all ${inWishlist ? 'bg-red-50' : 'bg-white'
className={`font-[inherit] p-2 rounded-full shadow-md border flex items-center justify-center transition-all ${
inWishlist
? 'bg-red-50 border-red-100 dark:bg-red-950 dark:border-red-900'
: 'bg-background border-border hover:bg-muted text-foreground'
}`}
title={inWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
>
<Heart className={`w-4 h-4 block transition-all ${inWishlist ? 'fill-red-500 text-red-500' : ''
}`} />
<Heart className={`w-4 h-4 block transition-all ${inWishlist ? 'fill-red-500 text-red-500' : ''}`} />
</button>
</div>
)}
@@ -174,7 +176,7 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
{/* Content */}
<div className={`p-4 flex-1 flex flex-col ${textAlignClass}`}>
<h3 className="text-sm font-medium text-gray-900 mb-2 line-clamp-2 leading-snug group-hover:text-primary transition-colors">
<h3 className="text-sm font-medium text-foreground mb-2 line-clamp-2 leading-snug group-hover:text-primary transition-colors">
{product.name}
</h3>
@@ -182,15 +184,15 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
<div className={`flex items-center gap-2 mb-3 ${(layout.card_text_align || 'left') === 'center' ? 'justify-center' : (layout.card_text_align || 'left') === 'right' ? 'justify-end' : ''}`}>
{product.on_sale && product.regular_price ? (
<>
<span className="text-base font-bold" style={{ color: 'var(--color-primary)' }}>
<span className="text-base font-bold text-primary">
{formatPrice(product.sale_price || product.price)}
</span>
<span className="text-xs text-gray-500 line-through">
<span className="text-xs text-muted-foreground line-through">
{formatPrice(product.regular_price)}
</span>
</>
) : (
<span className="text-base font-bold text-gray-900">
<span className="text-base font-bold text-foreground">
{formatPrice(product.price)}
</span>
)}

2
customer-spa/src/hooks/useAppearanceSettings.ts
View File

@@ -14,6 +14,7 @@ interface AppearanceSettings {
grid_columns: string;
card_style: string;
aspect_ratio: string;
filter_layout?: 'basic' | 'rich_sidebar';
};
elements: {
category_filter: boolean;
@@ -86,6 +87,7 @@ export function useShopSettings() {
card_style: 'card' as string,
aspect_ratio: 'square' as string,
card_text_align: 'left' as string,
filter_layout: 'basic' as 'basic' | 'rich_sidebar',
},
elements: {
category_filter: true,

17
customer-spa/src/hooks/useDebounce.ts Normal file
View File

@@ -0,0 +1,17 @@
import { useState, useEffect } from 'react';
export function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return debouncedValue;
}

26
customer-spa/src/layouts/BaseLayout.tsx
View File

@@ -166,13 +166,13 @@ function ClassicLayout({ children }: BaseLayoutProps) {
<div className="relative">
<ShoppingCart className="h-5 w-5" />
{itemCount > 0 && (
<span className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center font-medium">
<span className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-primary text-primary-foreground text-xs flex items-center justify-center font-medium">
{itemCount}
</span>
)}
</div>
<span className="hidden lg:block">
Cart ({itemCount})
Cart
</span>
</button>
)}
@@ -261,7 +261,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
<button onClick={openCart} className="font-[inherit] flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 relative">
<ShoppingCart className="h-5 w-5" />
{itemCount > 0 && (
<span className="absolute top-1 right-2 h-4 w-4 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center">
<span className="absolute top-1 right-2 h-4 w-4 rounded-full bg-primary text-primary-foreground text-xs flex items-center justify-center">
{itemCount}
</span>
)}
@@ -497,7 +497,15 @@ function ModernLayout({ children }: BaseLayoutProps) {
)}
{headerSettings.elements.cart && (
<button onClick={openCart} className="font-[inherit] flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors">
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
<div className="relative">
<ShoppingCart className="h-4 w-4" />
{itemCount > 0 && (
<span className="absolute -top-2 -right-2 h-4 w-4 rounded-full bg-primary text-primary-foreground text-[10px] flex items-center justify-center font-medium">
{itemCount}
</span>
)}
</div>
<span>Cart</span>
</button>
)}
</nav>
@@ -657,7 +665,15 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
)}
{headerSettings.elements.cart && (
<button onClick={openCart} className="font-[inherit] flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors">
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
<div className="relative">
<ShoppingCart className="h-4 w-4" />
{itemCount > 0 && (
<span className="absolute -top-2 -right-2 h-4 w-4 rounded-full bg-primary text-primary-foreground text-[10px] flex items-center justify-center font-medium">
{itemCount}
</span>
)}
</div>
<span>Cart</span>
</button>
)}
</nav>

204
customer-spa/src/pages/Shop/index.tsx
View File

@@ -8,16 +8,37 @@ import { Button } from '@/components/ui/button';
import Container from '@/components/Layout/Container';
import { ProductCard } from '@/components/ProductCard';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
import { useShopSettings } from '@/hooks/useAppearanceSettings';
import SEOHead from '@/components/SEOHead';
import { useDebounce } from '@/hooks/useDebounce';
import type { ProductsResponse, ProductCategory } from '@/types/product';
function useBreakpoint() {
const [breakpoint, setBreakpoint] = React.useState<'mobile' | 'tablet' | 'desktop'>('desktop');
React.useEffect(() => {
const check = () => {
if (window.innerWidth < 768) setBreakpoint('mobile');
else if (window.innerWidth < 1024) setBreakpoint('tablet');
else setBreakpoint('desktop');
};
check();
window.addEventListener('resize', check);
return () => window.removeEventListener('resize', check);
}, []);
return breakpoint;
}
export default function Shop() {
const navigate = useNavigate();
const { layout: shopLayout, elements } = useShopSettings();
const [page, setPage] = useState(1);
const [search, setSearch] = useState('');
const [category, setCategory] = useState('');
const [minPriceInput, setMinPriceInput] = useState('');
const [maxPriceInput, setMaxPriceInput] = useState('');
const minPrice = useDebounce(minPriceInput, 500);
const maxPrice = useDebounce(maxPriceInput, 500);
const [sortBy, setSortBy] = useState('');
const { addItem } = useCartStore();
@@ -73,15 +94,25 @@ export default function Shop() {
const masonryColsClass = `${masonryMobileClass} ${masonryTabletClass} ${masonryDesktopClass}`;
const isMasonry = shopLayout.grid_style === 'masonry';
const isRichSidebar = shopLayout.filter_layout === 'rich_sidebar';
// Automatically reset page when filters change
React.useEffect(() => {
setPage(1);
}, [search, category, minPrice, maxPrice, sortBy]);
const breakpoint = useBreakpoint();
// Fetch products
const { data: productsData, isLoading: productsLoading } = useQuery<ProductsResponse>({
queryKey: ['products', page, search, category],
queryKey: ['products', page, search, category, minPrice, maxPrice],
queryFn: () => apiClient.get(apiClient.endpoints.shop.products, {
page,
per_page: 12,
search,
category,
min_price: minPrice,
max_price: maxPrice,
}),
});
@@ -135,24 +166,124 @@ export default function Shop() {
<p className="text-muted-foreground">Browse our collection of products</p>
</div>
{/* Filters */}
{(elements.search_bar || elements.category_filter) && (
{/* Main Content Area */}
<div className={isRichSidebar ? "flex flex-col lg:flex-row gap-8" : ""}>
{/* Rich Sidebar */}
{isRichSidebar && (elements.search_bar || elements.category_filter) && (
<div className="w-full lg:w-64 flex-shrink-0 space-y-6 lg:sticky lg:top-24 lg:self-start lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto no-scrollbar">
<h2 className="text-lg font-semibold border-b pb-2 mb-4">Filters</h2>
{/* Search */}
{elements.search_bar && (
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"
placeholder="Search products..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="!pl-10 pr-10"
/>
{search && (
<button
onClick={() => setSearch('')}
className="font-[inherit] absolute right-3 top-1/2 -translate-y-1/2 p-1 hover:bg-muted rounded-full transition-colors"
>
<X className="h-4 w-4 text-muted-foreground" />
</button>
)}
</div>
)}
{/* Categories */}
{elements.category_filter && categories && categories.length > 0 && (
<div className="space-y-3">
<h3 className="font-medium text-sm text-muted-foreground uppercase tracking-wider">Categories</h3>
<div className="flex flex-col gap-2">
<button
className={`text-left text-sm hover:text-primary transition-colors ${!category ? 'font-semibold text-primary' : 'text-foreground'}`}
onClick={() => setCategory('')}
>
All Categories
</button>
{categories.map((cat: any) => (
<button
key={cat.id}
className={`text-left text-sm hover:text-primary transition-colors flex justify-between items-center ${category === cat.slug ? 'font-semibold text-primary' : 'text-foreground'}`}
onClick={() => setCategory(cat.slug)}
>
<span>{cat.name}</span>
<span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground">{cat.count}</span>
</button>
))}
</div>
</div>
)}
{/* Price Filter */}
{isRichSidebar && (
<div className="space-y-3">
<h3 className="font-medium text-sm text-muted-foreground uppercase tracking-wider">Price Range</h3>
<div className="flex items-center gap-2">
<Input
type="number"
placeholder="Min"
value={minPriceInput}
onChange={(e) => setMinPriceInput(e.target.value)}
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none"
/>
<span className="text-muted-foreground">-</span>
<Input
type="number"
placeholder="Max"
value={maxPriceInput}
onChange={(e) => setMaxPriceInput(e.target.value)}
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none"
/>
</div>
</div>
)}
{/* Clear Filters */}
{(search || category || minPrice || maxPrice) && (
<Button
variant="outline"
className="w-full mt-4"
onClick={() => {
setSearch('');
setCategory('');
setMinPriceInput('');
setMaxPriceInput('');
setSortBy('');
}}
>
Clear All Filters
</Button>
)}
</div>
)}
{/* Product Grid Area */}
<div className="flex-1">
{/* Top Bar Filters (Basic Layout) */}
{!isRichSidebar && (elements.search_bar || elements.category_filter || elements.sort_dropdown) && (
<div className="flex flex-col md:flex-row gap-4 mb-8">
{/* Search */}
{elements.search_bar && (
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<input
<Input
type="text"
placeholder="Search products..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full !pl-10 pr-10 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
className="!pl-10 pr-10"
/>
{search && (
<button
onClick={() => setSearch('')}
className="font-[inherit] absolute right-3 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-100 rounded-full transition-colors"
className="font-[inherit] absolute right-3 top-1/2 -translate-y-1/2 p-1 hover:bg-muted rounded-full transition-colors"
>
<X className="h-4 w-4 text-muted-foreground" />
</button>
@@ -199,29 +330,65 @@ export default function Shop() {
</div>
)}
{/* Sort Dropdown (Rich Layout) */}
{isRichSidebar && elements.sort_dropdown && (
<div className="flex justify-end mb-6">
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-sm"
>
<option value="">Default sorting</option>
<option value="popularity">Sort by popularity</option>
<option value="rating">Sort by average rating</option>
<option value="date">Sort by latest</option>
<option value="price">Sort by price: low to high</option>
<option value="price-desc">Sort by price: high to low</option>
</select>
</div>
)}
{/* Products Grid */}
{productsLoading ? (
<div className={`grid ${gridColsClass} gap-6`}>
{[...Array(8)].map((_, i) => (
<div key={i} className="animate-pulse">
<div className="bg-gray-200 aspect-square rounded-lg mb-4" />
<div className="h-4 bg-gray-200 rounded mb-2" />
<div className="h-4 bg-gray-200 rounded w-2/3" />
<div className="bg-muted aspect-square rounded-lg mb-4" />
<div className="h-4 bg-muted rounded mb-2" />
<div className="h-4 bg-muted rounded w-2/3" />
</div>
))}
</div>
) : productsData?.products && productsData.products.length > 0 ? (
<>
<div className={isMasonry ? `${masonryColsClass} gap-6` : `grid ${gridColsClass} gap-6`}>
{isMasonry ? (
<div className={`grid grid-cols-1 md:grid-cols-${gridCols.tablet || '3'} lg:grid-cols-${gridCols.desktop || '4'} gap-6`}>
{(() => {
const currentCols = parseInt(gridCols[breakpoint] || (breakpoint === 'mobile' ? '2' : breakpoint === 'tablet' ? '3' : '4'));
// Use a safe column count fallback (e.g. at least 1)
const cols = Math.max(1, currentCols);
const masonryColumns: any[][] = Array.from({ length: cols }, () => []);
productsData.products.forEach((p: any, i: number) => {
masonryColumns[i % cols].push(p);
});
return masonryColumns.map((col, colIndex) => (
<div key={colIndex} className="flex flex-col gap-6">
{col.map((product) => (
<ProductCard key={product.id} product={product} onAddToCart={handleAddToCart} />
))}
</div>
));
})()}
</div>
) : (
<div className={`grid ${productsData.products.length < parseInt(gridCols.desktop || '4') ? `grid-cols-1 sm:grid-cols-2 lg:grid-cols-${productsData.products.length}` : gridColsClass} gap-6`}>
{productsData.products.map((product: any) => (
<div key={product.id} className={isMasonry ? 'mb-6 break-inside-avoid' : ''}>
<ProductCard
product={product}
onAddToCart={handleAddToCart}
/>
<div key={product.id}>
<ProductCard product={product} onAddToCart={handleAddToCart} />
</div>
))}
</div>
)}
{/* Pagination */}
{productsData.total_pages > 1 && (
@@ -249,12 +416,15 @@ export default function Shop() {
) : (
<div className="text-center py-12">
<p className="text-muted-foreground text-lg">No products found</p>
{(search || category) && (
{!isRichSidebar && (search || category || minPrice || maxPrice) && (
<Button
variant="outline"
onClick={() => {
setSearch('');
setCategory('');
setMinPriceInput('');
setMaxPriceInput('');
setSortBy('');
}}
className="mt-4"
>
@@ -263,6 +433,8 @@ export default function Shop() {
)}
</div>
)}
</div>
</div>
</Container>
);
}

2
includes/Admin/AppearanceController.php
View File

@@ -356,6 +356,7 @@ class AppearanceController
'card_style' => sanitize_text_field($data['layout']['card_style'] ?? 'card'),
'aspect_ratio' => sanitize_text_field($data['layout']['aspect_ratio'] ?? 'square'),
'card_text_align' => sanitize_text_field($data['layout']['card_text_align'] ?? 'left'),
'filter_layout' => sanitize_text_field($data['layout']['filter_layout'] ?? 'basic'),
],
'elements' => [
'category_filter' => (bool) ($data['elements']['category_filter'] ?? true),
@@ -588,6 +589,7 @@ class AppearanceController
'grid_columns' => '3',
'card_style' => 'card',
'aspect_ratio' => 'square',
'filter_layout' => 'basic',
],
'elements' => [
'category_filter' => true,

34
includes/Frontend/ShopController.php
View File

@@ -54,6 +54,14 @@ class ShopController
'default' => '',
'sanitize_callback' => 'sanitize_text_field',
],
'min_price' => [
'default' => '',
'sanitize_callback' => 'sanitize_text_field',
],
'max_price' => [
'default' => '',
'sanitize_callback' => 'sanitize_text_field',
],
],
]);
@@ -106,6 +114,8 @@ class ShopController
$slug = $request->get_param('slug');
$include = $request->get_param('include');
$exclude = $request->get_param('exclude');
$min_price = $request->get_param('min_price');
$max_price = $request->get_param('max_price');
$args = [
'post_type' => 'product',
@@ -152,6 +162,30 @@ class ShopController
$args['s'] = $search;
}
// Add price filter
if ($min_price !== '' || $max_price !== '') {
$price_query = [
'key' => '_price',
'type' => 'NUMERIC',
];
if ($min_price !== '' && $max_price !== '') {
$price_query['compare'] = 'BETWEEN';
$price_query['value'] = [(float)$min_price, (float)$max_price];
} elseif ($min_price !== '') {
$price_query['compare'] = '>=';
$price_query['value'] = (float)$min_price;
} else {
$price_query['compare'] = '<=';
$price_query['value'] = (float)$max_price;
}
if (!isset($args['meta_query'])) {
$args['meta_query'] = [];
}
$args['meta_query'][] = $price_query;
}
$query = new \WP_Query($args);
// Check if this is a single product request (by slug)