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">