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:
co-authored by
Cursor
parent
a39aef0c8c
commit
77080a7a4b
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user