mirror of
https://github.com/clucraft/PriceGhost.git
synced 2026-05-15 10:52:36 +02:00
Add out-of-stock detection and display
- Add stock_status column to products table (in_stock/out_of_stock/unknown) - Detect out-of-stock status on Amazon by checking: - #availability text for "currently unavailable" - #outOfStock element presence - Missing "Add to Cart" button - Add generic stock status detection for other sites - Allow adding out-of-stock products (they just won't have a price) - Update background scheduler to track stock status changes - Display stock status badge in product list and detail pages - Dim out-of-stock products in the dashboard - Show "Currently Unavailable" badge instead of price when out of stock Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
bf111e13d8
commit
8c5d20707d
9 changed files with 274 additions and 44 deletions
|
|
@ -40,8 +40,10 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
|
|||
: ''
|
||||
: '';
|
||||
|
||||
const isOutOfStock = product.stock_status === 'out_of_stock';
|
||||
|
||||
return (
|
||||
<div className="product-list-item">
|
||||
<div className={`product-list-item ${isOutOfStock ? 'out-of-stock' : ''}`}>
|
||||
<style>{`
|
||||
.product-list-item {
|
||||
background: var(--surface);
|
||||
|
|
@ -138,6 +140,36 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
|
|||
color: #10b981;
|
||||
}
|
||||
|
||||
.product-stock-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.product-stock-badge.out-of-stock {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .product-stock-badge.out-of-stock {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.product-list-item.out-of-stock {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.product-list-item.out-of-stock .product-thumbnail {
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
.product-sparkline {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -209,13 +241,21 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
|
|||
</div>
|
||||
|
||||
<div className="product-price-section">
|
||||
<span className="product-current-price">
|
||||
{formatPrice(product.current_price, product.currency)}
|
||||
</span>
|
||||
{product.price_change_7d !== null && product.price_change_7d !== undefined && (
|
||||
<span className={`product-price-change ${priceChangeClass}`}>
|
||||
{formatPriceChange(product.price_change_7d)} (7d)
|
||||
{isOutOfStock ? (
|
||||
<span className="product-stock-badge out-of-stock">
|
||||
Out of Stock
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="product-current-price">
|
||||
{formatPrice(product.current_price, product.currency)}
|
||||
</span>
|
||||
{product.price_change_7d !== null && product.price_change_7d !== undefined && (
|
||||
<span className={`product-price-change ${priceChangeClass}`}>
|
||||
{formatPriceChange(product.price_change_7d)} (7d)
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue