Improve website settings and special-item pick UX.

Tighten sitemap/settings controls, debounce product search to 10 results, keep catalog-only specials visible after add, and use frosted glass on link/category modals.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-22 20:38:58 +03:30
co-authored by Cursor
parent a39aef0c8c
commit 77080a7a4b
13 changed files with 490 additions and 296 deletions
+57 -42
View File
@@ -90,7 +90,14 @@ export function StoreItemCard({
return (
<article className={styles.card}>
<button type="button" className={styles.clickable} onClick={() => onOpen(listing)}>
<button
type="button"
className={styles.clickable}
onClick={() => {
if (listing.variantCount > 0) onOpen(listing)
}}
disabled={listing.variantCount === 0}
>
<div className={styles.imageWrap}>
{showImage ? (
<img
@@ -132,9 +139,11 @@ export function StoreItemCard({
) : null}
</>
)}
<p className={styles.variantLabel}>
{formatVariantCount(listing.variantCount, locale)}
</p>
{listing.variantCount > 0 ? (
<p className={styles.variantLabel}>
{formatVariantCount(listing.variantCount, locale)}
</p>
) : null}
<StoreItemPrice
price={listing.displayPrice}
discountedPrice={listing.displayDiscountedPrice}
@@ -144,34 +153,38 @@ export function StoreItemCard({
<div className={styles.controls} onClick={(e) => e.stopPropagation()}>
<div className={styles.controlsLeft}>
<Tooltip label={t('storeItems.card.edit')}>
<button
type="button"
onClick={() => onEdit(listing)}
aria-label={t('storeItems.card.edit')}
>
<Pencil size={16} />
</button>
</Tooltip>
<Tooltip label={t('storeItems.card.discount')}>
<button
type="button"
onClick={() => onDiscount(listing)}
aria-label={t('storeItems.card.discount')}
>
<Percent size={16} />
</button>
</Tooltip>
<Tooltip label={t('storeItems.card.festivalPoints')}>
<button
type="button"
className={listing.showFestival ? styles.festivalActive : undefined}
onClick={() => onFestival(listing)}
aria-label={t('storeItems.card.festivalPoints')}
>
<Sparkles size={16} />
</button>
</Tooltip>
{listing.variantCount > 0 ? (
<>
<Tooltip label={t('storeItems.card.edit')}>
<button
type="button"
onClick={() => onEdit(listing)}
aria-label={t('storeItems.card.edit')}
>
<Pencil size={16} />
</button>
</Tooltip>
<Tooltip label={t('storeItems.card.discount')}>
<button
type="button"
onClick={() => onDiscount(listing)}
aria-label={t('storeItems.card.discount')}
>
<Percent size={16} />
</button>
</Tooltip>
<Tooltip label={t('storeItems.card.festivalPoints')}>
<button
type="button"
className={listing.showFestival ? styles.festivalActive : undefined}
onClick={() => onFestival(listing)}
aria-label={t('storeItems.card.festivalPoints')}
>
<Sparkles size={16} />
</button>
</Tooltip>
</>
) : null}
<Tooltip label={removeLabel}>
<button
type="button"
@@ -184,16 +197,18 @@ export function StoreItemCard({
</Tooltip>
</div>
<Tooltip label={t('storeItems.card.addToCart')}>
<button
type="button"
className={styles.addToCartBtn}
onClick={() => onAddToCart(listing)}
aria-label={t('storeItems.card.addToCart')}
>
<GradientPlusIcon gradientId={plusGradientId} />
</button>
</Tooltip>
{listing.variantCount > 0 ? (
<Tooltip label={t('storeItems.card.addToCart')}>
<button
type="button"
className={styles.addToCartBtn}
onClick={() => onAddToCart(listing)}
aria-label={t('storeItems.card.addToCart')}
>
<GradientPlusIcon gradientId={plusGradientId} />
</button>
</Tooltip>
) : null}
</div>
</article>
)