For those who are curious about the things we are working on, here is a glimpse at our upcoming Magento PWA mega menu module called UB PWA Mega Menu.
For the past month or so, we have dived deep into early development of this module which is built on top of Magento PWA Studio. Although the module will undergo further development, we’re excited to share a quick preview of the features and demo to give you a general overview of the module.
Ready GraphQL based module
As you might know, GraphQL is defined as the main API to support PWA Studio functionality. You can check out this article to learn why GraphQL API could be an obvious choice against REST API in Magento 2 in the near future.
Our approach of UB PWA Mega Menu is to help build a flexible mega menu on top of Magento PWA Studio, so the module uses PWA Studio’s libraries -- GraphQL, React and many other technologies as part of its stack.
Although UB PWA Mega Menu is still in early development, it is a ready GraphQL based module where a schema is defined and resolvers are ready to return menus’ data to the storefront on the storefront GraphQL query request.
By default the module constructs the query, fetches the menus’ data (based on menu group keys) from the Magento backend, transforms that data into a GraphQL data format, and return the result in a callable function in a resolver class. Once the resolvers are ready, which will return menus’ data to the storefront on the storefront GraphQL query request, the menus will be populated and presented by ReactJS in the client side.
As two examples of GraphQL query show, it allows to fetch only the menus data needed for the menu UI, so there is no overfetching -- one of the major advantages of using GraphQL in UB PWA Mega Menu.
UB PWA Mega Menu file structure
UB PWA Mega Menu is built on top of Magento PWA Studio, so it is somewhat related to PWA Studio implementation. An example of UB PWA Mega Menu file structure is indicated in the screenshots below:
Typical PWA mega menu features
Not 100% of the functionalities available in our current UB Mega Menu are fully prepared for UB PWA Mega Menu on a PWA storefront, however we’ll continue to develop and enhance in our upcoming release cycle. For now, UB PWA Mega Menu consists of the following general features which serve as a good base for you to start with your own Magento PWA Studio project.
Rich content: Custom content & CMS static blocks
UB PWA Mega Menu supports a large number of links and other rich content arrayed in columns including:
- Category links
- Product link
- Custom content, cms pages, cms static blocks
- Custom link
Flexible grid of menu columns
You have full control over the menu levels and grid of columns via UB PWA Mega Menu’s configuration panel. It enables you to define the custom width of menu columns. Even though GraphQL allows to call unlimited menu levels, UB PWA Mega Menu supports up to 5 levels at the moment.
It’s also easy to show menu item’s description (if any) or enable/disable a menu item’s link or title via the backend configuration. Please note Magento 2’s core product widgets have not been supported in the storefront, so they’re not available in UB PWA Mega Menu yet.
Magento PWA Studio introduces so many major changes -- React, GraphQL, and much more, our team at Ubertheme needs quite some time to move along with it carefully.
Since UB PWA Mega Menu module remains to be a work-in-progress and experiment project, it is aimed at helping you familiarize yourself with the new Magento PWA Studio tech stacks to catch up this major move. So, stay tuned for further updates.
Once UB PWA Mega Menu module is ready, we will make it available for free for ones with an active UB Mega Menu subscription at Ubertheme.
If you want to try it for yourself now, have a look at our work-in-progress demo of UB PWA Mega Menu below:
(Jul 28, 2021 Update: We use npmjs.com to manage the module components and their dependencies. So, you can get and install the UB Mega Menu for your PWA Studio project following the steps noted here)
We hope you like the preview! Let us know what you think…
P.S. If you have any questions or suggestions about PWA-based functionalities not just this one but and next modules, do not hesitate to contact us on email info (at) ubertheme.com, we love to hear from you!