SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redesign variant editor with preset buttons

Browse Source 
Major UX improvements based on user feedback:
- Replaced auto-populated columns with preset shortcut buttons
- Quick Add buttons for Size, Color, Material, Storage
- Custom button for user-defined property names
- Double-click column headers to rename
- Rename column option in context menu
- Starts with single empty column instead of defaults
- Improved usage instructions in UI
- Cache-busting version updated to force reload

This design is more flexible and less confusing than auto-generating columns.
This commit is contained in:
sysadmin
2025-11-14 00:05:02 +00:00
parent b53597f250
commit abe01cb8a0
3 changed files with 176 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
LittleShop/Areas/Admin/Views/VariantCollections/Create.cshtml
View File

@@ -42,11 +42,11 @@
<div class="form-text mt-2">
<strong><i class="fas fa-info-circle"></i> How to use:</strong>
<ul class="mb-1">
<li><strong>Click column headers</strong> to select property type (Size, Color, Material, Storage, or Custom)</li>
<li><strong>Click cells</strong> to edit values directly</li>
<li><strong>Right-click</strong> for menu to add/remove rows and columns</li>
<li><strong>Quick Add buttons:</strong> Click preset buttons (Size, Color, Material, Storage) to add pre-populated columns</li>
<li><strong>Custom button:</strong> Click Custom to add a column with your own name</li>
<li><strong>Double-click headers:</strong> Double-click column headers to rename them</li>
<li><strong>Right-click menu:</strong> Add/remove rows and columns, rename columns, clear values</li>
<li><strong>Keyboard shortcuts:</strong> Tab to move right, Enter to move down, Ctrl+D to delete, Ctrl+Enter to save</li>
<li><strong>Mobile:</strong> Swipe rows left/right to delete</li>
</ul>
<small class="text-muted">Changes are automatically saved when you click "Create Collection" below.</small>
</div>
@@ -67,14 +67,14 @@
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<!-- Handsontable Spreadsheet Library -->
<link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113" />
<script src="~/lib/handsontable/handsontable.full.min.js?v=20251113"></script>
<link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113b" />
<script src="~/lib/handsontable/handsontable.full.min.js?v=20251113b"></script>
<!-- Hammer.js for Touch Gestures -->
<script src="~/lib/hammerjs/hammer.min.js?v=20251113"></script>
<script src="~/lib/hammerjs/hammer.min.js?v=20251113b"></script>
<!-- Variant Editor Module -->
<script src="~/js/variant-editor.js?v=20251113"></script>
<script src="~/js/variant-editor.js?v=20251113b"></script>
<!-- Initialize Variant Editor -->
<script>

16
LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml
View File

@@ -43,11 +43,11 @@
<div class="form-text mt-2">
<strong><i class="fas fa-info-circle"></i> How to use:</strong>
<ul class="mb-1">
<li><strong>Click column headers</strong> to select property type (Size, Color, Material, Storage, or Custom)</li>
<li><strong>Click cells</strong> to edit values directly</li>
<li><strong>Right-click</strong> for menu to add/remove rows and columns</li>
<li><strong>Quick Add buttons:</strong> Click preset buttons (Size, Color, Material, Storage) to add pre-populated columns</li>
<li><strong>Custom button:</strong> Click Custom to add a column with your own name</li>
<li><strong>Double-click headers:</strong> Double-click column headers to rename them</li>
<li><strong>Right-click menu:</strong> Add/remove rows and columns, rename columns, clear values</li>
<li><strong>Keyboard shortcuts:</strong> Tab to move right, Enter to move down, Ctrl+D to delete, Ctrl+Enter to save</li>
<li><strong>Mobile:</strong> Swipe rows left/right to delete</li>
</ul>
<small class="text-muted">Changes are automatically saved when you click "Save Changes" below.</small>
</div>
@@ -78,14 +78,14 @@
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<!-- Handsontable Spreadsheet Library -->
<link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113" />
<script src="~/lib/handsontable/handsontable.full.min.js?v=20251113"></script>
<link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css?v=20251113b" />
<script src="~/lib/handsontable/handsontable.full.min.js?v=20251113b"></script>
<!-- Hammer.js for Touch Gestures -->
<script src="~/lib/hammerjs/hammer.min.js?v=20251113"></script>
<script src="~/lib/hammerjs/hammer.min.js?v=20251113b"></script>
<!-- Variant Editor Module -->
<script src="~/js/variant-editor.js?v=20251113"></script>
<script src="~/js/variant-editor.js?v=20251113b"></script>
<!-- Initialize Variant Editor -->
<script>