feat(products): Add barcode scanner to product form #335
Conversation
Integrates the html5-qrcode library to introduce a barcode scanning feature in the product creation and editing forms. Key changes include: - Added a new `generateBarcodeFormComponent` to create the barcode input field with a camera icon action. - The action opens a modal containing the camera view for scanning. - On successful scan, the barcode input is automatically populated, and the modal closes. - The scanner is correctly stopped when the modal is closed, either automatically after a scan or manually by the user, preventing the camera from remaining active."
…The labels and messages in the barcode scanning component are updated to be in English. This includes changes to button texts, console messages, and comments in the code, improving language consistency in the application.
|
Thank you so much for your contribution! 🎉 One thing I noticed: currently the scanner is only available in the product form. It would be even more useful if we also support scanning directly in the POS transaction page (so users can scan products when making a sale). |
you can check the existing code for that is in |
There was a problem hiding this comment.
Pull Request Overview
This PR adds barcode scanning functionality to the product form using the html5-qrcode library. Users can now click a camera icon in the barcode field to open a modal that uses their device's camera to scan barcodes and automatically populate the field.
- Integrates html5-qrcode library via CDN for barcode scanning capabilities
- Adds a new barcode scanner modal component with Alpine.js integration
- Modifies the product form to include a camera icon action that triggers the scanner
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| resources/views/filament/components/barcode-scanner.blade.php | New Blade component containing the scanner UI and Alpine.js logic for camera initialization and barcode detection |
| app/Providers/Filament/TenantPanelProvider.php | Adds html5-qrcode library from CDN to panel assets |
| app/Filament/Tenant/Resources/ProductResource/Traits/HasProductForm.php | Enhances barcode form component with camera icon action and scanner modal |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| // Close the modal | ||
| const closeButton = document.getElementById('close-barcode-scanner-button'); | ||
| closeButton.click(); |
There was a problem hiding this comment.
Missing null check for closeButton before calling click(). If the element is not found, this will throw a TypeError and break the scanner functionality.
| closeButton.click(); | |
| if (closeButton) { | |
| closeButton.click(); | |
| } |
| const input = document.querySelector('input[name=barcode]'); | ||
| if (input) { | ||
| input.value = decodedText; | ||
| // This notifies Livewire that the value has changed | ||
| input.dispatchEvent(new Event('input', { bubbles: true })); | ||
| } | ||
There was a problem hiding this comment.
Redundant barcode value setting. The code sets the input value via DOM manipulation (lines 55-57) and then via Livewire's $wire.set (line 60). Consider using only the $wire.set approach for consistency with Livewire patterns.
| const input = document.querySelector('input[name=barcode]'); | |
| if (input) { | |
| input.value = decodedText; | |
| // This notifies Livewire that the value has changed | |
| input.dispatchEvent(new Event('input', { bubbles: true })); | |
| } |
| ->visible(Feature::active(ProductBarcode::class)) | ||
| ->translateLabel(); | ||
| ->translateLabel() | ||
| ->id($scanModalId) |
There was a problem hiding this comment.
Setting the form input ID to the modal ID value creates confusion and potential conflicts. The TextInput ID should be unique and descriptive for the input field, not reuse the modal identifier.
| ->id($scanModalId) | |
| ->id('barcode-input') |
| use Filament\Forms\Set; | ||
| use Filament\Support\RawJs; | ||
| use Laravel\Pennant\Feature; | ||
| use Livewire\Attributes\On; |
There was a problem hiding this comment.
Unused import. The Livewire\Attributes\On attribute is imported but not used anywhere in the code changes.
| use Livewire\Attributes\On; |
|
Hi @sheenazien8, Thank you so much for the positive feedback! I'm really glad you like the implementation. That's an excellent suggestion to add the scanner to the POS page as well. I completely agree it would be a very useful feature for processing sales quickly. Thank you for pointing me to the I'll start working on integrating it right away. I will push the new commits to this branch and update the PR once it's ready for another review. Thanks again for your guidance! |
Changes were made to the cashier view to optimize code readability and structure. Styles were adjusted and the organization of elements was improved, including the implementation of a QR code scanner in a modal. Additionally, some minor bugs were fixed and event handling for barcode scanning was improved.
Comments and messages in the cashier view component are updated to be in English, improving language consistency across the application. Adjustments were made to the code structure and the state management of the QR scanner was optimized.
feat: Implement Advanced Camera Barcode Scanner for Cashier InterfaceSummaryThis pull request introduces a robust and user-friendly camera-based barcode scanning feature to the cashier/POS interface. It allows users to scan product barcodes directly with their device's camera, providing a seamless alternative to a physical scanner. The implementation is designed for a fast-paced retail environment, featuring continuous scanning, immediate UI feedback, performance optimizations, and several bug fixes to ensure stability with Livewire's lifecycle. Key Features & Changes ✨📷 Camera Scanner Integration: Integrates the html5-qrcode library to enable scanning via the device's camera. A new QR code icon has been added to the cashier header to launch the scanner modal. The library automatically provides a camera selection dropdown if multiple cameras (e.g., front/rear) are detected. 🔄 Continuous Scanning Mode: The scanner modal remains open after a successful scan, allowing the cashier to scan multiple items in rapid succession without reopening the modal. ⏳ Scan Cooldown (Throttling): A 1-second cooldown period is enforced after each successful scan. This prevents a single barcode from being scanned and added multiple times if held in front of the camera for too long. ⚙️ Asynchronous UI Feedback (Loading Spinner): After a barcode is scanned, the camera view is temporarily replaced by a loading spinner. This provides clear visual feedback that the system is processing the product. The camera view reappears automatically once the Livewire backend call is complete, ready for the next scan. 🚀 Performance & Stability Fixes: DOM Preservation: Implemented wire:ignore on the scanner's container to prevent Livewire from removing the camera view during component re-renders. This was a critical fix to enable continuous scanning. Optimized Barcode Detection: The scanner is now configured with formatsToSupport to look only for specific barcode types (EAN, UPC, Code128, etc.), improving detection speed and accuracy. Robust State Management: Refactored the JavaScript to use a more reliable method (element.closest()) for interacting with the Alpine.js component, fixing a null reference error. Clean Shutdown: The scanner is now reliably stopped (releasing the camera) when the user manually closes the modal. Visual DemonstrationHere’s a quick demonstration of the new workflow: scanning multiple items, the loading spinner appearing for each, and the cart updating in real-time. How to Test This PR 🧪
|
|
Hi @ellpanda23 , Thank you so much for this contribution — I really appreciate the effort you put in to bring barcode scanning into the product form! 🙏 I’ll pull this branch and test it out locally first to see how it works in our environment. thanks! 🚀 |
|
Important: To test the camera barcode scanner feature, you must serve the application over a secure connection (HTTPS). |
sweet, thanks for your advice |
Integrates the html5-qrcode library to introduce a barcode scanning feature in the product creation and editing forms.
Initially, I attempted to integrate
html5-qrcodeas an NPM module. However, due to my limited experience with Filament's specific Vite integration for dynamically loaded modal content, I encountered challenges getting the compiled assets to load correctly. To ensure a stable and functional contribution, I opted for the more direct CDN-based approach, which works reliably. I am keen to receive feedback on how this could be better implemented with Vite in the future.Key changes include:
generateBarcodeFormComponentto create the barcode input field with a camera icon action.What’s this PR about?
This pull request introduces a barcode scanning functionality to the product form, allowing users to populate the barcode field using their device's camera. This enhances user experience by speeding up data entry and reducing manual errors.
The implementation uses the html5-qrcode library, loaded via CDN, and is integrated as a modal action within a Filament form component.
Key Changes:
Panel Provider (TenantPanelProvider.php): The html5-qrcode library is now loaded from the unpkg CDN via the panel's asset registration.
Product Form Trait (HasProductForm.php): A new generateBarcodeFormComponent method has been added. It creates the TextInput and a suffix action that triggers the scanner modal. The modal's cancel button is assigned a static ID for JavaScript targeting.
Scanner View (barcode-scanner.blade.php): A new Blade view was created to house the scanner's UI and the inline Alpine.js logic. This script handles:
Initializing the camera.
Populating the input field and dispatching an input event to notify Livewire upon a successful scan.
Programmatically clicking the close button to dismiss the modal.
Adding an event listener to the close button to ensure the scanner stops if the modal is closed manually.
🧾 Screenshots
How to Test:
1Navigate to the "Create Product" or "Edit Product" page.
2. Locate the "Barcode" input field.
3. Click the camera icon on the right side of the field.
4. A modal with a camera view should appear. Grant camera permissions if prompted.
5. Scan a standard barcode (e.g., EAN-13, CODE-128).
6. Verify that upon successful scan, the modal closes automatically, and the barcode field is populated with the correct value.
7. Re-open the modal and click the "Cancel" button. Verify that the modal closes and the camera deactivates.
Note: This is my first-ever contribution to an open-source repository. I'm excited to learn and would greatly appreciate any feedback on my code, the commit structure, or the pull request itself. I'll be attentive to any comments or requested changes. Thank you for the opportunity!*