User Guide for Magento 2 Point of Sale

• Create multiple physical outlets for his/her online store and associate products with them.
• Assign multiple cashiers to the POS outlet.
• The admin can force log out of the cashier POS account.
• The sales agents get the login details of the POS through email.
• Separate Panel for a sales agent for sales management.
• The admin can print barcode slips.
• Add the Invoice logo from the admin panel configuration setting.
• The admin can assign inventory to the outlet on the basis of sources. 
• Inventory assignment to the outlet on the basis of all products and categories of the source.
• Default customer and address assignment to the outlet.
• A new customer can add from the Sales agent POS panel.
• Easy real-time synchronization of sales and transactions.
• The products can be added to cart in three ways- on clicking the product, through SKU and 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 Sales agent can hold an order for later check-out processes.
• Agents can change among multiple languages and currencies.
• The cashiers can view the cash drawer for computing the profit generated in a day or days by them.
• The cashiers can print the order receipt with the help of a printer.
• A cash drawer can connect to your printer to open after printing the sales receipt.
• The sales agent can even file the return and generate cash memo for the product(s).
• Cashiers can update the product stock after the product return.

New Features

• POS agents can refresh the whole product list and the category list.
• The sales agent can add the POS to the homepage as PWA.
• The sales agent can even refresh the individual products instead of refreshing the whole product list.
• Admin can create the custom payment methods label for POS that will be printed in receipts and invoices.
• Admin can edit the static content for the POS orders email – Subject and static content.
• The cashier can search the customer by phone number at POS end.
• Admin can view Cashier and Outlet Reporting includes details like revenue, tax, shipping, quality.

Please Note-

• Do not use the default source while working with the POS. Always create one stock and two sources. Among them, one is for POS and the other is for the website (frontend).  
• Support product types – simple, virtual, and configurable product types.
• 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.
• Signature field is required. 
• Only stock assigned to the main website sales channel will be available on the POS page.

For module translation, navigate to the following path in your system  app/code/Webkul/Pos/i18n/en_US.csv.

Open the file name en_US.CSV for editing as shown in the below screenshot:

Then replace the words after the comma(,) on the right in the file with your translated words.

After editing and translating the CSV file, the users need to save the translated file name according to your region language and country code such as – de_DE.CSV.

Followed by uploading the translated file to the same folder from where the users have obtained it.

Thus, module translation is completed.

You must allow Request Origin as well as Request headers to make it work with the POS theme. Please follow the below instructions.

# For Apache

Header set Access-Control-Allow-Origin "*"

Header set Access-Control-Allow-Headers "Accept, Content-Type, POS-TOKEN, Store"

Header set Access-Control-Allow-Methods: "POST, OPTIONS"

# For Nginx

add_header 'Access-Control-Allow-Origin' '*';

add_header 'Access-Control-Allow-Headers' 'Accept, Content-Type, POS-TOKEN, Store';

add_header 'Access-Control-Allow-Methods' 'POST, OPTIONS'

Note –  You can test if a URL is setup correctly to work with CORS.

Headless Theme Installation

Prerequisites
Node >=16.0.0
NPM >=8.1.0 OR YARN >=1.22.0

Customers can install the theme via two methods: 

1. Vercel 
2. Manual Installation

1. Vercel

Vercel is the native Next.js platform, designed to enhance the Next.js experience. It is the best way to host the next js (framework). 

You can import the Git Repository from GitHub, GitLab or BitBucket. 

Login using Git, you can also log in with your email but need to link with Git. Now follow the steps mentioned below for logging in: 

1: Go to Vercel Dashboard and click on Add New. 

2: Select a Git provider to import an existing project from a Git Repository. 

3: Now click on the import option as mentioned below in the snapshot: 

4: Here you have to enter the environment variables with their values, which you will get after extracting the zip file in the .env.template. 

5: Once you click on deploy you will get the URL from Vercel also you can manage your domain from Vercel > Settings > Domain.

After clicking on POS, You can check the project Dashboard as mentioned below in the snapshot:

2. Manual Installation

• The Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has a NextJs folder, move the folder into the directory where you want to install it.
• Setup env – Duplicate env.template rename the duplicate to .env. Now update the values mentioned below in the env file:

  MAGENTO_URL=https://magento-url.com/ (your Magento BASE URL)
  IMAGE_DOMAIN=magento-url.com (domain from where images will be load eg: magento-url domain, cloudflare-domain)
  APP_URL=http://localhost:3000/ (Headless app URL)
  FALLBACK_LOCALE=en (fallback locale)

• Run the following command via the terminal:

  npm install OR yarn install
  

  npm run build OR yarn build
  

  npm run start OR yarn start
  

  In case you want to change the value of any of the messages then open the locale folder go to message.po file inside en.

  Enter the value in msgstr in respective to the msgid. Then run the command of build and start.

•  It will serve on a 3000 port to your server for eg: http://localhost:3000/. 
  
  

• You can access POS by using your-serverip:3000 and also you can ask your server team to map your 3000 port to any dedicated domain. 

In the case of installing the theme through Vercel, it will provide the POS URL automatically. 

If you want to do it manually, then install the theme and it will deploy to port 3000 of your server. 

#vercel deployment For, e.g., https://your-vercel-url.com/

#mannual installation For, e.g., http://localhost:3000/ OR http://server-ip:3000/

Thus, the user can easily log in to the POS System (frontend) by using the Username (email address) and Password, which is created by Admin.

NOTE: – If the POS is logged in by any user,  then all front-end pages will redirect to the POS-END.

Henceforth, after Signing up, the Sales Agents will be redirected to their POS panel as per the below image.

• All products are visible by default. To view products by category, Sale agent can apply a category filter.
• POS menu is for sales management like Customers, Cashier, Orders, Reports and Refresh.
• Product Search is for searching the product by Name and SKU.
• Hold Cart icon can be used for holding a cart for later checkout or product addition.
• The cart icon shows the count of the products in the cart.
• The sales agent can add a product to the cart by clicking on it. The number of clicks on the product is the number of units of the products added to the cart.
• Cart area has all the products 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 the Barcode button.
• The cashier can add products to the cart by the product’s SKU.
• The Low Stock indicator on the product will indicate that the product quantity is low.

The sales agent can add products via multiple methods:

• By clicking on the products.
• Through the product SKU.
• By a barcode reader.

• The sales agent can add products to the cart by simply 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.
• Product search is for searching a product by name or SKU.
• The products in the cart can be deleted by the Delete Product icon button present on each product shown in the cart.
• The Products are shown in the cart with details like the name of the product, unit of product, the price per unit and, the total price of the product by adding all unit’s prices.
• The cashier can see the subtotal and grand total price of the cart.
• The sales 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.
• Also, the sales agent can directly delete the whole cart by the “Delete Cart” button.

The sales agent can add products to the cart by scanning the 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 the barcode option.

• The 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 the “Barcode/SKU” icon that will open a pop-up. In this, the cashier can either enter a barcode through a scanner or type the product SKU.
• However, after entering the SKU, the cashier can click on “Proceed”  to add a product to the cart and then on the “Close” button to disable the pop-up.
• The unit of product in the cart increase with the number of a scan of a product or SKU entered.

Once all the products of customer requirements are inside the cart, the sales agent can choose/add the customer for which the order has to be made.

The sales agent has to click on Choose/Add customer icon.

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

• If a customer is not registered to the store then, the agent can add the customer by clicking on the “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. Enter the Password.
6. At last, the agent will click “Add” to register the customer.

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 the “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 redirect to the Place Order page.

• The “place order” page shows the name of the customer and add a new customer, the salesperson can add a new customer by entering the details. 
• The Grand Total is the total amount of products in the cart.
• Add the payable amount to the cart.
• After entering the amount click on Confirm Payment and proceed.
• The sales agent can allow its customers to pay either via Cash or through Card.
• If chosen a card then you have to enter the card details and then can pay the amount. 

• Lastly, the agent will click on Confirm Payment to place the order and generate the invoice. The agent can print the invoice or move it to the next order.