Live Demo Buy Now

Magento 2 Point of Sale

Magento 2 Point of Sale System gives the liberty to store owner to have an online store along with multiple physical stores. The physical stores will have their own POS panels for customer and sales management. Multiple sales agent can be created by the admin for each physical store. The system works in online mode.

Features

  • The admin can create multiple physical outlets for his/her online store and associate products with them.
  • Separate Panel for sales agent for sales management.
  • Admin can Print Barcode Slip.
  • Add Invoice logo from the configuration.
  • Product Inventory division for Web and POS through configuration.
  • Mass Inventory Assignment to the outlet / All Inventory Assignment to the outlet.
  • Default Customer and Address assignment to the outlet.
  • New customer can be added from the Sales agent POS panel.
  • Easy real-time synchronization of sales and transactions.
  • Easy centralized inventory and sales management for the admin.
  • The products can be added to cart in three ways- on clicking the product, through SKU and through Barcode Reader.
  • The agent can Put the POS in Full-screen mode.
  • The POS easily operates in offline mode as well to provide better processing.
  • The Product list and Category list can be Refreshed from the frontend.
  • Hassle-free payment and checkout process.
  • Sales agent can hold an order for later check-out processes.
  • Sales agent can change among multiple languages and currencies.
  • The sales agent can view the cash drawer for computing the profit generated in a day or days by them.
  • Sales agent can even file the return and generate cash memo for the product(s).

Please Note-

  • Product support type for now- Simple and virtual.
  • The Magento POS connects only to the Printer, and barcode reader, whereas it doesn’t connect directly with the cash drawer and card swapping machine.
  • POS requires a browser to work on it.
  • POS supports 7.5 screen size minimum.

Installation

Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento 2 root directory on the server as shown below.

After the successful installation, you have to run the command on Magento2 root directory-“php bin/magento setup:upgrade”


Now, run this command in the Magento 2 Root  -“php bin/magento setup:di:compile” as shown below in the snapshot.

Also, run this command into the Magento2 Root- “php bin/magento setup:static-content:deploy” You can refer the below screenshot.

After running the commands, you have to flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below.

Module Configuration

After the module installation, the admin can configure the module settings by navigating to Stores -> Configuration -> Webkul -> POS as per the below image.

Here, the admin can:

  • Enable Offline Mode- The admin can give the Cashier the privilege to do the transactions in offline mode by enabling this option.
  • Product Page Load: set the number of products to be loaded while POS initialization.
  • Enable Cashier Single Login: enable the cashier single login by selecting “Yes” else select “No” if want to allow the multiple logins.
  • Choose attribute for Barcode: choose the product attribute for barcode scanning.
  • Divide Catalog inventory for WEB and POS separately: You can divide the catalog for Web and POS separately.

For Example:- Let us consider the product”Strive Shoulder Pack” with the inventory of 100. If we change the inventory of the product to 90. Following results will appear when “Divide catalog inventory” is selected as :-

Case 1:- When “YES” is selected;

The product inventory will be updated in the POS end along with the Web store.

Case 2:- when “NO” is selected

The product inventory will not change in the POS end. It will remain 100 but on buying product quantity above 90 from the POS end will show a error pop up message as shown below.

 

  • Invoice Slip logo: Upload the logo that you want to display on your printed invoice slip.

POS Management

Now, the admin can manage the POS module by navigating to POS panel as per the below image.

Here, the admin can view several menu options to manage the POS module.

Add / Manage Outlets

Under this section, the admin can add and manage an unlimited number of outlets.

Here, the admin can:

      • View the complete list of the outlets.
      • Delete/Disable/Enable the selected outlets from “Actions” drop-down.
  • Edit the existing outlets.
  • Add a New Outlet to the store.

For adding the new outlet, the admin will click on Add New Outlet button which navigates the admin to the Outlet Information under which will have 4 sections:

Outlet Information:

Product Assignment basisProduct based:

Here, the admin will:

    • Outlet Name: Enter the outlet name.
    • Product Assignment Basis:
      Product assignment basis can be selected as – Product Based(products can be assigned individually to the outlet), Category Based,and All Products.
    • Set Default Customer: Select Yes to set the default customer for the POS frontend.
    • Outlet Address: Enter the address of the outlet. The address section has HTML edit option and tools.
    • Status: Set the status of the outlet as enabled or disabled.

After above workflow, click the Save Outlet button.

This shows us 2 messages to complete – To choose a default customer and to Select at least one product inventory for this outlet.

To choose the default customer navigate to Default Customer and Address section. Here, search for a customer whom you want to set as default customer and select it, then select his saved address and click the Save Outlet button at the top right-hand side of the page.

After this, to add the product inventory for the outlet navigate to Associate Products Individually menu option. Here, you can assign the products individually to this outlet when the Product Assignment basis setting is set to – Product based. lastly, click the Save Outlet button to save the outlet.

Product Assignment basis is set as – Category based:

Now, the procedure to add the outlet is same as defined above. But if the Category based assignment is selected then you will have to select the category/categories that you want to assign after clicking the Save Outlet button. Also, if you have set the Set Default customer to Yes then you will have to select the default customer first and after that proceed for the category selection.

If set default customer option is set to Yes then you will have to add the default customer else if the default customer option is set to No there is no need to do this step and the outlet gets saved.

Go to the Associate Categorie’s Product menu option. Select the category/categories that you want to assign to this outlet and click the Save Outlet button to save the outlet.

Product Assignment basis  as – All Products:

Initially, after entering the information under the Outlet Information, when you click the Save Outlet you will have to select the default customer by navigating to the Default Customer and Address menu option(if default customer option is set to Yes else if the default customer option is set to No there is no need to do this step and the outlet gets saved).

To choose the default customer navigate to Default Customer and Address section. Here, search for a customer whom you want to set as default customer and select it, then select his saved address and click the Save Outlet button at the top right-hand side of the page.

Add / Manage Cashier(Sales Agent)

The admin can add/manage cashiers by navigating through POS -> Add/Manage Cashier

  • The admin can delete/enable/disable the selected cashiers from “Actions” drop-down.
  • Mass selection checkbox for selecting all the cashiers at once for deleting/enabling/disabling cashiers.
  • Cashier check-box for deleting/enabling/disabling cashier.
  • Edit button for viewing/editing cashiers.
  • Add New Cashier for adding new cashier for an outlet. The admin has to fill some fields of Cashier Information to add a new cashier.

  1. The admin can upload Image of the cashier.
  2. Full Name of the cashier.
  3. Last Name of the cashier.
  4. Email Address of the cashier.
  5. Contact No. of the cashier.
  6. Password for the cashier’s account.
  7. Confirm Password for confirming the cashier’s password.
  8. Sort Order for the cashier.
  9. The admin can choose the outlet for which the cashier account is been added.
  10. The admin can enable or disable the cashier’s account by changing its status.
POS Orders

To view, the complete list of POS orders navigates, to POS -> POS Orders. This is the separate section to view POS orders.

To view, the complete order details click View Order details.

POS Configuration

From here also, the admin can navigate to the module configuration page as per the below image.

Print Barcode Slip

The Barcode Slip could be printed by navigating to the Product>Catalog. On the Catalog page, the admin needs to select products for which Barcodes need to be printed. And then, from the action drop-down list select Print Barcode Slip.

Front-End Point of Sales panel

The POS panel link can be obtained by adding “/pos” to the base URL of the website.

For eg. www.example.com/pos

In the given demo the base URL is http://mobikul.webkul.com/magento2mobikul. If we add “/pos” then we will get the POS link for the demo website which will be http://mobikul.webkul.com/magento2mobikul/pos

The user can easily Login the POS System (fronted) by using the Username (email address) and Password which is created by Admin.

After the Sign-up, the Sales Agents will be redirected to their POS panel as per the below image.

  • The POS panel shows all the products in the default category. The agent can change the category to view the product category wise.
  • Sales Agent POS menus for sales management like Orders, Orders on hold, and Cash Drawer.
  • Product Search for searching the product by Name and SKU.
  • Cart Hold icon can be used for holding a cart for later checkout or product addition. The held cart can be continued for processing by the sales agent.
  • The cart icon shows the count of the products in the cart.
  • Sales agent can add a product to the cart by clicking on it. The number of clicks on the product is the number of unit of the products added to the cart.
  • Cart area has all the product with quantity detail. The sales agent can directly delete products from the cart.
  • The Sales agent can use a barcode reader to add products to the cart by enabling Barcode Reader input via Barcode button.
  • The sales agent can add products to the cart by product’s SKU.
  • The Low Stock indicator on the product will indicate that the product quantity is low.

Shortcuts

The POS is enabled with shortcuts in order to make the POS functioning faster-

  • Home ——————— (ctrl+shft+1)
  • Order History ———— (ctrl+shft+2)
  • Hold Order History ——- (ctrl+shft+3)
  • Cash Drawer ————– (ctrl+shft+4)
  • Refresh Product List —– (ctrl+shft+5)
  • Refresh Category List —- (ctrl+shft+6)
  • Open Menu —————- (ctrl+shft+7)
  • Product Search ———– (ctrl+shft+f)
  • Hold Cart —————- (ctrl+shft+h)
  • Put on Fullscreen ——– (F11)
  • Choose customer ———- (alt+c)

Add products to cart

The sales agent can add products via multiple methods. The products can be added by clicking on the products, by product SKU, and by a barcode reader.

Add Products By Clicking on Products

The sales agent can add products by clicking on the products. The number of clicks on a product is the number of units of that product added to the cart.

  • The sales agent can view the products category wise by choosing a category from the category select drop down.
  • Product search is for searching a product by name or SKU.
  • The products of the cart can be deleted by Delete Product icon button present on each product is shown in the cart.
  • The Products are shown in the cart with details like the name of the product, unit of product, price per unit and the total price of the product by adding all units price.
  • The agent can see the subtotal and grand total price of the cart.
  • The agent can change the quantity of a product by selecting the product and clicking on the “Quantity” button icon. The agent can give the required quantity and save it by clicking on the “Done” button.
  • The agent can directly delete the whole cart by “Delete Cart” button.
Adding Products By Barcode Reader/SKU

The sales agent can add products to the cart by scanning barcodes of the product through a barcode reader or by entering the SKU of the product.

Please Note: The barcode reader must be attached to the sale agent system for adding the products to the cart via barcode option.

  • Barcode icon button is for enabling the input from the barcode reader to add a product to the cart.
  • The cashier needs to click on “Barcode/SKU” icon that will open a pop-up. In this, the cashier can either enter a barcode through a scanner or simply type the product SKU.
  • When all the required products are added then the agent can click “Close” to disable input from the barcode reader. However, after entering the SKU the Cashier can click on “Done”  to add a product to cart and then on the “Close” button to disable the pop-up.
  • Unit of product in cart increase with number scan of a product or SKU is entered.

 

Customer Management by Sale Agent

After all the required products of a customer has been added to the cart then, the sales agent can choose/add customer for which the order has to be made. Click on Choose/Add customer icon.

  • The sales agent can choose a customer from the registered customer list. The agent can search registered customers by name.

  • If a customer is not registered to the store then, the agent can add the customer by clicking on “Add Customer” icon.

  1. First Name of the customer.
  2. Last Name of the customer.
  3. Email-Id of the customer.
  4. The telephone number of the customer.
  5. Street Address of the customer
  6. Street Address 2 is a much detailed street address.
  7. City name of the customer.
  8. Zip/Postal Code of the customer’s location.
  9. Country name of the customer.
  10. State of the customer.
  11. Lastly, the agent will click “Continue” to register the customer and redirecting to the Place Order page.

Completing Order

After the customer has been added to the cart for creating an order, the agent will complete the order by placing the order to generate the invoice.

  • If the customer is registered then select the customer from the registered customer list and click on “Pay” button. After clicking the button the Place Order page will appear on the screen.
  • If the customer is not registered then, the agent will add the customer and click on “Continue” to register the customer and redirecting to the Place Order page.

  • The place order page shows the name of the customer and the address which can be Edited that is the salesperson can choose from multiple addresses saved or add a new additional address.
  • Amount to pay is the total amount of products in the cart, Amount paid is the amount paid against the total amount.
  • The Extra amount is the amount which needs to be returned by the salesperson as a change.
  • Address of the customer can be chosen and saved by the “Done” button. The customer can change/add an address of the customer by clicking on the Edit button. On clicking “Add New“, the customer add page will open. Change the address and continue to place the order with a new address.

  • Select the payment method available. The sales agent can allow its customer split the payment between card and cash by split payment option. This option is meant for dividing the payment amount into bits as the customer can pay some amount in cash and some amount as the card.

  • Lastly, the agent will click on Place Order to place the order and generate the invoice. The agent can print the invoice and move to next order.

Discount

The admin can enable discount in the backend as a price rule which will be applied at the time of checkout.

Order On Hold

The sales agent can put the cart-on hold for the later processes and can continue to process on the held cart when required. The agent can put a cart-on hold by clicking on “Put cart on hold” icon placed on the right side of the full-screen button.

  • On clicking cart on hold button, the salesperson will get a pop-up that will be asking about a custom note for the particular order. This note is meant to recognize the order when there is a long queue of customers.

  • The agent can navigate to the “Order on Hold” through POS menu icon -> Order on Hold.

After Clicking on the Order on Hold tab the agent will be redirected to the orders on hold.

  • List of orders on hold.
  • Order Details including the product information along with the price and grand total.
  • The agent can Re-cart the held order to continue the further processes.
  • The agent can Remove Cart from the held order list.

Orders

The agent can check the orders by navigating through the POS menu -> Orders.

  • List of the orders including all the orders.
  • Order Detail of each order.
  • Customer Details like name and address.
  • Date, time and time zone of order.
  • Payment method detail.
  • Print Invoice button to print the invoice.
  • Return

Return Orders

The orders can be returned by clicking the Return button on the order placed.

The cashier can select the products which need to be returned by the customer and then click on “Done” and finalize the Return.

Note- Return process can be accomplished in only online mode.

 

The salesperson can click on a credit memo button to generate credit memo.

Offline Orders

The cashier can even process a transaction in offline mode, this is a beneficial feature for the areas where internet connectivity is weak.

The cashier can view all the transactions processed in offline mode by following the navigation POS menu>Offline Mode.

After this, the cashier can view all the offline orders which can get auto-sync or the cashier can individually sync the order for Sync Order button which will add this to the list of orders.

 

Cash Drawer

As the Sales Agent Sign in, he checks the cash amount in his Cash Drawer. After checking, the amount is submitted initially just after the Sign in.

  • The Credit amount is the amount taken by the agent from the customer against the payable amount of an order.
  • The Debit amount is the return of extra money as a change to the customer.
  • The Balance is the net amount added to the cash drawer after debit and credit.
  • Opening Balance is the starting balance amount in the cash drawer.
  • Closing Balance is the closing amount is the cash drawer after a set of work hour.

Refresh Product list

This helps in refreshing the product list, any changes done by admin in the backend is reflected on the frontend.

 

Refresh Category list

This helps in refreshing the category list, any changes done by admin in the backend is reflected on the frontend.

 

Multi-currency support

The salesperson can change the currency according to the requirements, by clicking on the Menu tab the salesperson can select among currencies available.

Current Product Version - 2.0.5

Supported Framework Version - 2.0.x, 2.1.x, 2.2.x

. . .

Comment

Add Your Comment

Be the first to comment.

css.php

Index