EdJoPaTo / grammy-inline-menu

Inline Menus for Telegram made simple. Successor of telegraf-inline-menu.
MIT License
357 stars 44 forks source link

How to build a dynamic shopping cart layout #150

Closed JustAnotherSmyth closed 3 years ago

JustAnotherSmyth commented 3 years ago

Describe your goal Thank you for building such a great library. As a young student still learning JavaScript I am enjoying learning using the work shared here. And thank you for also getting me on Github! šŸ™

I am completing a telegram store for a school project and have come up against the edge of my knowledge for building the dynamic shopping cart portion.

I've looked through the examples and can see that .choose could maybe be an option and would work well since the cart is supplied a simple key:value object currently, but the problem I see is there is no way to create different columns within .choose for each list item provided.

The layout I would like to replicate is from the @GuruWCTGBot bot example in the screenshot below.

telegram-cart

I've got around this for the moment by building out a cart design using a separate builder function that builds each group of buttons based on the cart object passed to it. This feels very messy and requires storing a history of what buttons are built so they don't get rebuilt etc. Now if an item is removed from the object that is used to rebuild the cart, the entire cart menu fails. I guess I would need a way to remove the group of buttons once the item was removed from the cart - if I were to continue down this hacky feeling method.

Any guidance for a better way to manage a cart design based on the image above would be very much appreciated, sir!

TL;DR - I'd like a way to build out sections of buttons that have different widths and actions by looping over the keys of an object.

EdJoPaTo commented 3 years ago

Thanks for your interest in the library!

I think I personally would approach that a little bit differently. In the screenshot there are a lot of seemingly "dead" buttons without any interaction (the names, prices and the separating ---) and some repetitive ones (Remove, -, +). I try to put dead buttons into the message body. For the repetitive ones I would try to create a submenu for that which I can use for every item.

Resulting would be a text message with a list of items, their amount and prices. For each item there is a button which leads into a submenu for that item (chooseIntoSubmenu). Within the submenu you can remove it completely, or add or subtract the amount.

That way you have a way simpler set of buttons which are also easier to understand what they do if you press them. I hope this helps :)

JustAnotherSmyth commented 3 years ago

This does help. Thank you for taking the time to detail a response. You're always so thoughtful in each issue - I've learned a lot just from reading through closed issues

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.