76efba55bd
Replaces JSON textarea with professional Excel-like spreadsheet interface for managing product variant properties. Features: - Handsontable 14.6.1 spreadsheet component - Property presets (Size, Color, Material, Storage, Custom) - Inline cell editing with Tab/Enter navigation - Context menu for add/remove rows and columns - Keyboard shortcuts (Ctrl+D delete, Ctrl+Enter save, Ctrl+Z undo) - Mobile touch gestures (swipe to delete rows) - Automatic JSON serialization on form submit - Form validation before saving - Comprehensive user guide documentation Files Changed: - LittleShop/package.json: NPM package management setup - LittleShop/wwwroot/js/variant-editor.js: 400-line spreadsheet editor module - LittleShop/wwwroot/lib/handsontable/: Handsontable library (Community Edition) - LittleShop/wwwroot/lib/hammerjs/: Hammer.js touch gesture library - LittleShop/Areas/Admin/Views/VariantCollections/Edit.cshtml: Spreadsheet UI integration - VARIANT_COLLECTIONS_USER_GUIDE.md: Complete user guide (18+ pages) Technical Details: - Excel-like editing experience (no more manual JSON editing) - Mobile-first responsive design - Browser compatibility: Chrome 90+, Firefox 88+, Edge 90+, Safari 14+ - Touch-optimized for mobile administration - Automatic data validation and error handling |
||
|---|---|---|
| .. | ||
| languages | ||
| handsontable.css | ||
| handsontable.full.css | ||
| handsontable.full.js | ||
| handsontable.full.min.css | ||
| handsontable.full.min.js | ||
| handsontable.js | ||
| handsontable.min.css | ||
| handsontable.min.js | ||
| README.md | ||
Handsontable distributions
Full distribution (recommended)
The full distribution allows you to use Handsontable by including just 2 files:
<script src="dist/handsontable.full.js"></script>
<link href="dist/handsontable.full.css" rel="stylesheet">
You can also use minified files:
<script src="dist/handsontable.full.min.js"></script>
<link href="dist/handsontable.full.min.css" rel="stylesheet">
handsontable.full.js and handsontable.full.css are compiled with all the needed dependencies.
Bare distribution
If you are a "Bob the Builder" kind of hacker, you will need to load Handsontable JS, CSS and their dependencies:
<!-- Required dependencies (as external scripts) -->
<link href="https://cdn.jsdelivr.net/npm/pikaday@1.5.1/css/pikaday.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pikaday@1.5.1/pikaday.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/numbro@2/dist/numbro.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.0.8/dist/purify.js"></script>
<!-- Optional dependencies -->
<script src="https://cdn.jsdelivr.net/npm/hyperformula@0.6.0/dist/hyperformula.full.min.js"></script>
<!-- Handsontable bare files -->
<script src="dist/handsontable.js"></script>
<link href="dist/handsontable.css" rel="stylesheet">
handsontable.js and handsontable.css are compiled without the needed dependencies. You will have to include pikaday.js, moment.js, numbro.js, hyperformula and dompurify on your own ie. from JSDelivr CDN.
Internationalization
It is possible to include files which will register languages dictionaries. They allow to translate parts of Handsontable UI. You can either use only particular languages files or include all of them at once as a single file.
All the information about the API and additional options can be found at our official documentation.
<!-- Internationalization, Polish - Poland language-country file -->
<script src="dist/languages/pl-PL.js"></script>
<!-- Internationalization, all available language files in one file -->
<script src="dist/languages/all.js"></script>
Custom distribution
If you want to build your own custom Handsontable package distribution check out our guide covering all the details.