Laravel eCommerce Point of Sale extension offers extensive functionality for admins, enabling easy creation of multi-stores.
It also allows seamless tracking of daily sales and efficient customer management.
The physical stores will have a POS front-end for which the admin can assign a POS agent who can easily manage the daily sales with their respective customers.
The POS system can work both online and offline mode in case of poor connectivity.
**Note:
- Laravel eCommerce Point of Sales module is supported by Bagisto version, 1.5.1
Which printer and scanner support Bagisto POS?
Bagisto point of sale system supports Epson TM-T82 Thermal POS Receipt Printer and the paper width and roll diameter are 79.5 ± 0.5 (W) × dia. 83.0; 57.5 ± 0.5 (W) × dia. 83.0.
And mostly barcode scanner support bagisto POS system like Retsol Ls450.
Check a brief overview of the POS terminal workflow –
Check a brief overview of the POS backend configuration –
Features Of Laravel eCommerce Point of Sale
- Creation of multiple outlets from the back-end.
- Sales agents can manage discounts from the front-end.
- Sales agents can handle customers both online and offline.
- Front-end cart hold functionality.
- Ability to create multiple carts from the front-end.
- Barcode generation and printing available at the back-end.
- Separate product inventory management by assigning inventory sources to each outlet.
- Support for cash and card payments at the front-end.
- Real-time synchronization of customers and orders in offline mode.
- Capability to place orders with custom products.
- Support for various product types: Simple, Configurable, Downloadable, Virtual, Bundle, Grouped, Booking, and Custom.
- Customizable POS sales invoices.
- POS sales reporting with extensive filtering options at the admin end.
-
Barcode prefix option added into module configuration.
Installation of Laravel eCommerce Point of Sale
The customer will get a zip folder
Follow these steps to install the Bagisto POS Extension:
1. **Unzip and Merge Files**
Unzip the extension zip file and merge the `packages` folders into your project root directory.
2. **Update `composer.json`**
Add the following line under the `psr-4` section in `composer.json`:
"Webkul\\Pos\\": "packages/Webkul/Pos/src"
3. **Update `config/app.php`**
Add the following line under the `providers` section in `config/app.php`:
Webkul\Pos\Providers\PosServiceProvider::class,
4. **Run Commands**
Execute the following commands from the root directory in the terminal:
composer dump-autoload
php artisan pos:install
5. **POS Frontend Setup**
To access the POS frontend, follow these steps:
Step 1: Update Environment Variables
1. Open the `.env` file located in the `Frontend` folder of your Laravel backend.
2. Update the following environment variable:
VITE_APP_URL=<your-backend-url>
3. Open the `apollo.config.mjs` file and ensure the correct settings are applied.
Step 2: Install and Build the POS Frontend
1. Navigate to the `packages/Webkul/Pos/frontend` directory using the terminal.
2. Run the following commands:
npm install npm run build npm run preview
### Step 3: Access the POS Frontend
After running the commands, a preview URL will be displayed. Open this URL in your browser.
'Webkul\Pos\Providers\PosServiceProvider::Class
Now, Run these commands below to complete the setup in the bagisto root directory.
composer dump-autoload
php artisan migrate
php artisan route:cache
php artisan vendor:publish
-> press 0 then press enter to publish all assets and configurations
php artisan migrate php artisan route:cache php artisan vendor:publish -> press 0 then press enter to publish all assets and configurations
Once all the commands have been executed successfully, then you will see the POS icon on the left-hand side in the menu bar.
Laravel eCommerce Point of Sale Configuration
From the Admin dashboard, click “Configure > Point of Sale” in the left-hand menu. This will redirect you to the POS Configuration page.
General Settings
The fields below depicting [Default] refer to the setting of the default channel and English locale.
Let’s go through with the Configuration Settings one by one:
Status
Here Admin can also active or inactive the POS status.
Heading On Login
Enter the POS heading which will also be visible on the POS login panel.
Sub-Heading on Login
Enter the Sub-Heading which will be visible on the POS login panel.
Footer Content
Enter the footer content which will be displayed in the footer section of the POS login panel.
Footer Note
Enter the footer note.
Barcode
Print Product Name With Barcode
Admin can also select Yes in the option if they want toprint the product name with the product barcode.
Barcode Size [Width of the barcode in pixels]
Here admin can enter the width size of the barcode.
Barcode Size [Height of the barcode in pixels]
Here admin can enter the height of the barcode.
Generate Barcode With
Admin can generate the barcode with the Product ID or with Product SKU(Stock keeping unit) from the drop-down.
Generate Barcode Prefix [Left blank if don’t want to add prefix]
The admin can also add a “Prefix” if they want.
Hide Barcode Icon
The admin can also active or inactive the section as per their need.
POS Product
Allow Sku For Custom Product
Once the admin active this section, at the front end the POS agent can add the Custom Product SKU while adding the product to the customer cart.
Laravel eCommerce Point of Sale – Admin View
On the admin dashboard, click the POS icon which is there on the left-hand side to check on for the features available in the backend for admin.
- Agents: Here you will find the list of multiple users that have been created by the admin.
Add User
The admin can add the agents by clicking on the”Add User” button.
Here, the admin needs to enter the below details:
Username
The admin can enter the username of the user.
First name
Here the admin can enter the first name of the user.
Lastname
The admin needs to enter the last name of the user.
The admin can enter the email ID of a user.
Add Image
Add an image to represent the user.
Password
The admin can set the password for the user.
Outlet
Select the store from the drop-down.
Status
Admin can active or inactive the store status from the drop-down.
Lastly, hit the Save User button to save the user configuration successfully.
Stores
Here you will find the list of multiple POS stores.
The admin can also add the store by clicking on the “Add Store” button.
Here, the admin needs to enter some details –
Store Name
The admin needs to enter the name of the store in the field.
Status
The admin can active or inactive the store status from the drop-down.
Store Address
The address of the store will be provided in this section.
Country
The admin can select the country of the store.
Store State
The admin needs to select the state of the store.
Store City
Need to select the city of the store.
Store PostCode
Need to enter the postcode of the store.
Inventory Source
The admin has to choose the separate inventory for each store from the drop-down.
Receipts
The admin needs to select the US receipts or Indian receipts from the drop-down.
Lastly, hit the Save Store button to save the store configuration successfully.
After creating the store, the admin will Manage the Product in the store by hitting the below icon shown in the image.
Manage Products
Now, under the Manage Products tab, the admin will assign the products to the store by enabling the products for the store. Assigned products will be displayed on the POS front end.
**Note:
However, In POS Inventory is Centralised.
This centralized inventory will depict that any inventory changes done on the website will be reflected in the POS end or vice versa.
Likewise, if the online stock of the product is 200, then all the POS store stock will be the same i.e. 200.
The stock will automatically decrease on each sale from the online store or the POS store accordingly.
Barcode Product List
Here admin can view all the products associated with his store accordingly.
They can generate barcodes for the products to be used by the POS agent to add a product to the cart during the check-out process.
Generate Barcode
After that now admin is allowing POS users to easily print a barcode for a product in a required quantity by clicking on the Print Barcode button available on the product.
Here admin will first select the products for which they also want to set the barcode quantity.
Then they will select the barcode option to “Print the Barcode” from the drop-down then click on the submit button.
Now, the admin will also add the quantity of the barcode to print.
Orders
Here admin can view all the POS orders in a given list or they can view any order details by simply clicking on the order as shown in the image below.
By clicking on the eye icon as shown in the above image, the admin can easily check the order information.
Request Product
Under the Request Product tab, the admin will check the “Low stock product request” sent by the POS user.
Admin can click on the action button shown in the above image the open tab will show all information like User, store details, the required quantity and inventory source.
Admin can select the request status from the drop-down and then complete the product request by assigning the requested quantity to the respective store.
Bank Details
Under this section, the admin can add the bank details for the successful payment process on his POS store.
Also in the section admin can see his Bank List.
Once the admin clicks on the “Add Bank” button they will find the below snapshot, under that he will enter the information about his bank details.
General
Bank Name: The admin needs to enter the bank name.
Bank address: Needs to enter the bank address
Email: Needs to enter the email ID
Phone Numer: The admin can enter the phone number
POS Agent & Bank Status
Assign POS Agent: Here admin can assign the bank to the POS agent
Bank Status: Select the Bank Status, Active/Inactive
Now at the POS store once the customer pays the bill the POS agent can select the preferred bank from the below Select Bank drop-down.
Detailed Sales Report
This section allows the admin to check his detailed sales report for his POS and website. As you can see in the below image the admin can easily filter the sales report based on Banks and Sales Type.
Receipts
Here the admin can manage receipts according to their requirement such as adding new receipts, editing receipts, and previewing receipts.
Add Recepit
The admin can add a new receipt by clicking on “Add Receipt”.
- Title: The admin can enter the title of the receipt.
- Status: The admin can enable or disable receipt status.
- Display Store Name: By enabling this the admin can display the store name.
- Display Date: By enabling this option the admin can display the date on receipt.
- Display Order ID: The admin can display the order ID on receipt by enabling this.
- Order ID Label: The admin can enter the order ID label.
- Display Customer Name: By enabling this the admin can display the customer name on the receipt.
- Display Sub Total: The admin can display the subtotal on receipt by enabling this.
- Sub-Total Label- The admin can enter the sub-total label.
- Display Tax: By enabling this the admin can display tax on the receipt.
- Tax Label: The admin can enter the tax label.
- Display Credit Amount: By enabling this admin can display the credit amount on the receipt.
- Credit Amount Label: The admin enters the credit amount label.
- Display Change Amount: The admin can display the change amount by enabling this.
- Change Amount Label: The admin can enter the change amount label.
- Display Cashier Name: By enabling this the admin can display the cashier’s name on the receipt.
- Cashier Name Label: The admin can enter the cashier name label.
- Display Store Address: By enabling this the admin can display the store address on receipt.
- Grand Total Label: The admin can enter the grand total label.
- Display Discount Amount: By enabling this the admin can display the discount amount on the receipt.
- Discount Label: The admin can enter the discount label.
- Display Logo: By enabling this the admin can display the logo on the receipt.
- Upload/Remove/Set Size of Logo: The admin can upload, remove and resize a logo.
- Header/Footer Content: The admin can enter header or footer content on receipt.
Laravel eCommerce Point of Sale Front-end
The user can easily log in to the POS System by using the Username (email address) and Password.
After signing in to the POS system, the POS Users will be redirected to the POS panel as shown in the below image.
Once you have made any changes in the admin end, make sure you refresh the POS front end to reflect the changes.
However, you can do this by hitting the refresh button which you can see at the top of the right-hand side of the below snapshot.
POS Cash Drawer Amount
After logging into the POS system, the user is prompted to enter the cash drawer amount. A pop-up appears, asking for the Drawer Opening Amount and a remark.
The POS user has to enter the drawer opening amount, for example, $200 as shown in the image, which is the required amount set for that particular day.
The POS user can easily search for any product from the search bar.
Moreover, the POS agent can add the bulk product(s) to the cart by scanning the barcode of the products from a single search bar.
POS users can also look out for the products available in their respective categories as shown in the below image.
The below image shows all categories listed in the POS.
POS – Custom Product
The POS user can also add a product in the cart which is not available in their POS but the product is available in the physical store.
POS user will have to click on the button as shown in the below image.
Here, the POS user will have to enter the product details and then add the product to the cart by clicking on the Add to Cart button.
After that, the POS user can proceed with the order as normal.
POS – Cashier Management
Under the Cashier, The POS user manages the functionalities given below –
- Close Counter
- Today Cash
- Sale History
After clicking the Close Counter tab, the User will find Drawer Amount Details, Counted Drawer Amount, and Closing Drawer Detail options.
Before closing, the drawer’s opening amount is $10.
When the POS agent closes the drawer, the total cash amount for the day is added to the opening amount, and the current drawer sale is reset to zero.
- The Drawer Amount Details display the opening amount which is $90.00 here, today total cash sales are $80.00 and the expected amount in the drawer is $90.00
- The Counted Drawer Amount displays the counted drawer amount which is $90. The POS agent may add the remarks as well.
- Closing Drawer Details displays the difference between the opening and the closing amount(current drawer sale) which is $90.00.
Today Cash
Under Cashier, there is another option Today Cash is available which displays the Today Cash Sale and the Today Card Sale.
The order ID, time, order total and the order payment mode details are also visible to the POS agent under the Today Cash option.
Sale History
The POS user can view the sale history under the Sale History option. For a particular date, the cash sale and the card sale are listed under Sale History.
POS – Order Management
The POS user can manage sales activity like adding products to the cart, adding customer details, putting the cart on hold to process it later, and paying for the order from his panel as shown below.
After adding the products to the cart the POS user will now add customer details by clicking on the default customer option and then following the steps as shown in the below image.
Note: The Pos user can search customers by their name or email as well.
After clicking on the add customer button the below pop-up will be displayed.
The POS user can add a new customer step by step filling in the above fields as shown in the image and then clicking on the save button to proceed with the payment.
Once the customer is selected the after POS user can also complete the order after a click on the pay button.
If the customer has chosen the cash method then the customer will also provide some amount to pay for the order and the POS user will refund him the remaining money as shown in the screenshot below.
As shown in the above image Payment Method is Cash, the Total Order Amount is $110.00, the amount paid by the customer is $110.00 and the balance amount to be paid back to the customer is $0.00.
Finally, click on the Confirm Payment button, After clicking on confirm payment below pop will be displayed to complete the payment successfully Click on the confirm button now.
Under the Sale History Section, POS users can print the invoice for the order and can continue further with other orders.
Customers can even pay via card, it depends on the customer’s wish. In the Card Payment method, the total amount of the order will be deducted from the customer’s card.
POS Panel- Apply Discount
The POS user can apply the discount to the cart.
To apply the discount, the POS user will click the Cash Discount option available in the cart as shown below.
After clicking on the Cash Discount, the below pop-up will be displayed. The POS can easily choose the discount from the drop-down and then click on the apply discount button.
Once the POS user applies the discount, the chosen discount will be added to the cart as shown in the below image.
POS Panel- Cart on hold
The POS user can put a cart On Hold to process it later by simply clicking on the Hold Cart option as shown below.
Clicking on the Hold option will display a below pop-up where the POS user will specify the reason for putting the cart on hold.
After successfully holding the cart, the POS user can check the Hold Sale by navigating to POS > Sales > Hold Sale.
The above image displays the cart details of the product which has also been put on Hold. The Note entered by the POS user is also displayed under the Note section.
Here POS user can:-
- Click the “Add To Cart” button to add the order back to the cart to process it further.
- Also, Click the “Remove” button to remove the hold cart.
Split Payment
Now the customer can also split the order payment into Cash and Credit/Debit card at the checkout as shown in the below image.
The agent can also choose the options as per their customer preference.
POS Panel – Offline Sale
The sales orders which got processed in the offline mode will be seen under POS > Sales > Offline Sales.
Once the POS System get connected to the internet, the POS user can synchronize offline sales with the online store.
After syncing, the offline sale the POS user can see offline orders in the Sale History section.
Under Sale History, the POS User can –
- View the complete list of the orders placed.
- View the details of any order from the sales order list.
- Search the order from the Search Order By ID panel at the top.
- Print the invoice of the order by clicking the Print Invoice button.
POS Panel-Product Management
The POS user can manage their Store Product under the Product Section.
Here POS users can –
- Set the minimum unit of quantity for the low-stock product by navigating to POS>Products>Setting as shown in the below image.
- The POS user can check the low stock product under the Low Stock Product section as shown in the below image.
- The POS user can send the request for Low Stock Products by clicking on the Send Request button as shown in the above image.
After clicking on the Send Request button below pop-up will be displayed. The POS user can mention the required quantity for the particular product along with the comment then hit the done button.
- The POS user can also check the sent requests of the low-stock product under the Requested Product section along with the request status by navigating to POS>Products>Requested Product as shown in the below image.
POS Panel- Setting
The POS user can also navigate to POS > Settings to edit settings for the account and POS settings as shown below. Under the profile setting POS user can also update the Profile.
Here, the POS user will –
-
- First Name – enter the first name of the POS user.
- Last Name – enter the second name of the POS user.
- Account Email – enter the email address.
- Previous Password – enter the previously saved password of the POS account.
- New Password – enter the new password for the POS account.
- Confirm Password – reenter the new password of the POS account to confirm it.
And, lastly hit the Done button to save the configuration successfully.
- Under the Basic Settings tab, the POS user can configure the basic settings as shown below.
-
Here, the POS user will –
-
- Select the locale for the store from the drop-down.
- Select the currency for the store from the drop-down.
-
After hitting the done button the Percentage Discount will be added as shown in the below image.
With the same process, the POS user can add the Fixed Discount.
Here POS user can:-
- Enter the Offer Name.
- Enter From Price – To Price.
- Discount Type- Fixed
- Enter the Value.
After hitting the done button Fixed Discount will be added, as shown in the below image.
That’s all for Laravel eCommerce Point of Sale, still, have any issues feel free to add a ticket.
Also, let us know your views on making the module Laravel eCommerce Point of Sale better https://bagisto.uvdesk.com/en/
Current Product Version - 2.2.2
Supported Framework Version - Bagisto v2.2.2
10 comments
Thanks for sharing the content related POS system; it really is good and useful information for every website owners.
One of My new Blog post on Laravel POS System hope you would be enjoyed it –
https://i-verve.com/blog/integrate-pos-system-with-your-laravel-website
Greetings of the day !!
POS agent can easily add the custom product to the cart. And from the admin panel, the admin can easily add/edit the product.
Let me know if this solved your query or there something else you want to clarify on your question.