Want to customize POS but am not able to

[yogeshvachhani]

I have a need to customize POS but any change I make to its page makes is non functional.

What I want to do is first show users all the Item Groups.

When user clicks on a Group I want to list all the items in that Group.

Any ideas how to do this?

[NCP]

@yogeshvachhani

When user clicks on a Group I want to list all the items in that Group.

Could you please double-check? Whenever the user picks a item group, the items within that item group should display correctly.

[yogeshvachhani]

I have already checked. What is happening is that use has to select the group from the top.

But the user wants to see the groups as items are currently show below.

Now when user clicks on the group the POS page should fetch all the sub-groups and then all the items in that group.

Here the information has to be show similar to what we see in file explorer (or finder) view where all folders are listed above files.

Am I making sense?

[NCP]

Actually, you want, when the user selects the Products Item Group then only show the Products Item Group related item, not subgroup item. right?

[yogeshvachhani]

I also have to show all those items have Qty > 0 at the top and all items with Qty = 0 below them.

[yogeshvachhani]

No.

I want to show all the groups that are sub to selected group and all the items in that group.

So for example if user selects the Item Group - All Item Groups then all those groups whose Parent Item Group is All Item Groups should be show and all those items whose Item Group is All Item Groups should be show.

[NCP]

@yogeshvachhani

So for example if user selects the Item Group - All Item Groups then all those groups whose Parent Item Group is All Item Groups should be show and all those items whose Item Group is All Item Groups should be show.

Already checked, When using All Item Group then all items shown with subgrouped.

[NCP]

@yogeshvachhani

I also have to show all those items have Qty > 0 at the top and all items with Qty = 0 below them.

If you want to make it so that only items with a quantity above zero are displayed, you can do that.
Please check it.

Before:

After:

You have to customize the pos_item_selector.js

Thank You!

[yogeshvachhani]

Thank you very much for your suggestions and tips.

I have already explored all the features of POS.

I think I am not able to explain what I want.

Let me try again.

When the user opens POS the user should see only the Item Groups whose property Is Group is true.
Now when the user clicks on any of this Item Group I want to show all child groups that are under the selected group and all the items that are in that group.

Now in case of Items all those items whose Qty is greater then 0 are show at the top and all those items whose Qty is less then or equal to 0 should be shown at the bottom.

[NCP]

@yogeshvachhani

When the user opens POS the user should see only the Item Groups whose property Is Group is true.
Now when the user clicks on any of this Item Group I want to show all child groups that are under the selected group and all the items that are in that group.

Can’t catch the scenario now but try it and check it in a different way.

@yogeshvachhani

Now in case of Items all those items whose Qty is greater then 0 are show at the top and all those items whose Qty is less then or equal to 0 should be shown at the bottom.

might be possible but lots of customization is required.

Before:

After:

Thank You!

[shirkit]

One of the features he means is instead of listing the squares with the products, shows squares with Item Groups for better filtering. What he means is a category listing and clickable categories for easier navigation.

Imagine you have the following Item Groups (gonna call categories from now on):

   G1
  /   \
G2    G3
        \
         G4

So when you open the POS, in this configuration, you’d only see one square containing the name of G1. Once you click, you’d see the squares for G2 and G3. If you click on G2, then you’ll only see the products listed in the G2. If you click on G3, it would show G4, and only when you click on G4 you’d see the products listed under G4.

This the default approach for most POS that have categories implemented for product organization.

[yogeshvachhani]

Thanks a lot.
You have perfectly explained my requirements.

[yogeshvachhani]

Finally!!

I have managed to duplicate the page of POS and customize as per the requirement.

@NCP thanks again for getting started by suggesting the file I should pay attention to.

[shirkit]

Can you share your modifications @yogeshvachhani ? I’d love to use them as we currently need but do not know how to implement.

[yogeshvachhani]

Sure will share when we complete customization of the POS.

But to get started yourself follow below…

Originally the POS is implemented using Frappe Page.

So what we did was created a new Page and them copied all the files from original POS page folder to the newly created page folder.

Then we created a file in frappe/public/js folder. This again is the copy of the POS related bundle file that exist in the same folder.

Once we got the code working we started customizing it as per our needs.

Hope this will get you started soon.

[Ketan.ERPNext]

Hi @yogeshvachhani ,

Can you please share idea how we can customization of pos_payment.js and
/erpnextv15/frappe-bench/apps/erpnext/erpnext/public/scss/point-of-sale.scss
using custom app

Can you please help us

[yogeshvachhani]

What do you want to customize in the POS?

[Ketan.ERPNext]

@yogeshvachhani

ou want to customize in the POS?

POS Screen customization. Add “Pay” button in POS screen using custom app