Magento PWA Menu: Hamburger vs Tab Bars

When it comes to the PWA Studio project, should we stick with the classic Hamburger Menus or switch to Tab Bars on mobile?

Even though there are a few alternatives for navigation on mobile, we’re going to lay out all the pros and cons of the hamburger menus and tab bars (bottom navigation) only. We hope it gives you evaluation criteria to find which one is right for your Magento PWA project.

Hamburger menu

The hamburger menus are often listed as #1 choice and become the go-to icon for traditional responsive eCommerce websites. The hamburger menu is the ‘3-bars’ icon on mobile that typically opens up into a side menu or navigation drawer.

However, from an app perspective, during a talk at the Worldwide Developers Conference in 2014, Mike Stern -- designer and Apple UX Evangelist -- was against using the hamburger menu for their apps, saying:

“Remember, the [two] key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.”.

So, is the hamburger menu really effective and the best way to display your Magento PWA Studio project’s navigation? To answer this question, first, we need to dive into the effectiveness and usability of this UI element in mobile navigation. Continue reading

Time to care - combat Coronavirus

We all have known the huge impact of the coronavirus pandemic on almost every aspect of our daily life and business. It has caused a significant disruption.

At Ubertheme we care about all of our team safety so our team has moved remote for 2 weeks now -- quite frankly that’s okay with us. We are lucky enough to have business continuity as normal.

Time to care - Combat Coronavirus

Time to care -- Let’s combat Coronavirus

However, we know the months ahead are going to be really freaking tough if the coronavirus pandemic continues to spread. Even though our team can’t change the world, we want to help our partners and merchants navigate this tricky period where possible. Continue reading

PWA Megamenu Installation Guide

In the previous article on Magento PWA Studio tutorial, we walked you through how to have a working copy of the Venia storefront installed and running on top of Magento 2 using @magento/create-pwa command. In this second article on setting up a Magento PWA project, we’ll give you step-by-step instructions for merging our UB Mega Menu storefront into your existing Magento PWA Studio project, so you can get started with your PWA project as quickly as possible.

Before you get started…

If you’re new to UB Mega Menu module and new to Magento PWA Studio in general, get yourself familiar with the following terms first. Continue reading

UB Trex Pro thumbnail

Changelog for (Magento 2 theme) UB Trex Pro -- version 1.0.2:
Latest update: Feb 14, 2020

  • Compatibility testing with Magento 2.3.4
  • Fixed: Updated the style for default category description and static block on the category pages.
  • Fixed: Added the language file for all the texts of core Magento 2 and UB Trex Pro theme
  • Fixed: Adjusted the position of ‘Print receipt’ link in the Order confirmation page.
  • Fixed: Improved the ‘My Cart’ icon when no items are added to the cart.
  • Fixed: Removed the space between the Header and system message on the product detail pages (V4 & V5 types)
  • Fixed: The magnifier was not displaying properly on the 1280×1024 screen.
  • Fixed: Update the style for the Pagination on the Shopping cart page.
  • Fixed: Changes in the image size of the product grid on the homepage was not applied properly.
  • Fixed: The style issue of the Review tab when changing the theme’s color.
  • Fixed: Applied the ‘Primary Button’ style to the ‘Go to Product’ button on the Quickview popup.
  • Fixed: Changed the position of the Review’s count number on the Product detail page V3.
  • Fixed: Improved the style of product page V2
  • Fixed: [iPad] highlighted the active menu item on the horizontal screen.
  • Fixed: [mobile] style issue on the Quickview of the Bundle product page.
  • Compatibility testing with Magento 2.3.3
  • Fixed: adjust center-align for product thumbnail in the Category List View
  • Fixed: ‘My Cart’ heading section was missing when clicking to view the attributes in the Minicart
  • Fixed: zooming the product images on product pages did not work properly when scrolling down to the page bottom.
  • Fixed: style issue with the Bundle product when using Product V2 layout
  • Fixed: [iPad] adjust font size for the quickview of Bundle Product.
  • Fixed: [Mobile] hide ‘My Wishlist’ block on the Guest mode
  • Fixed: [Mobile] missing navigation on the horizontal view
  • Fixed: [Mobile] adjust the alignment of the ‘Close’ icon on the quickview popup
  • Fixed: Mobile] adjust the alignment of the text on the quickview popups (Left to Right & Right to Left)

Continue reading

Magento PWA Studio tutorial

Note: At the time of writing this tutorial, the Magento PWA Studio version was 5.0.0. We’ve just tested the tutorial with the latest PWA Studio v5.0.1 as well.

As you might know, Magento PWA Studio v5.0.0 officially introduced a new handy command -- @magento/create-pwa -- that allows for getting a new PWA Studio project up and running way easier. Actually, our team noticed that this command was in place before and we did try this command successfully with PWA Studio 4.0.0 for an experimental setup.

This tutorial will walk you through all steps to use this command to set up an initial project structure using the Venia storefront as a template. Continue reading

Update extensions and themes for Magento 234

On January 28th, Magento released version 2.3.4 -- the latest addition to Magento Open Source and Magento Commerce.

The version has addressed over 275 contributions from the community that cover significance enhancements and functional fixes. This big release also covers over 30 security enhancements that address vulnerabilities like cross-site scripting, deserialization of untrusted data, security bypassing etc.

Magento 2.3.4 Updates

Magento 2.3.4 Updates

In the meantime, Magento introduces new integrations, such as Adobe Stock image galleries and Live Chat from dotdigital. It also deprecated some payment gateways from the Magento core platform, such as

Apart from the upgrades mentioned above, there have been enhancements with the release of Magento PWA Studio 5.0.0. The latest update of PWA Studio now includes new tools to help get a new project up and running quickly. You can see detailed changes in the PWA Studio Release Notes. In case you’re using our UB PWA Mega Menu, you can get started with PWA Studio 5.0.0 now (it’s fully compatible).

Continue reading

UB PWA Mega Menu

Jan 10, 2020 Update: UB Mega Menu v1.1.8 has just been released, packed with the newly added service layer for UB Mega Menu (MegaMenuGraphQL with GraphQL APIs ready for PWA Storefront).
Dec 31, 2019 Update: UB PWA Mega Menu has been enhanced with progressive skeleton loading pattern and newly added sticky menu.
Dec 20, 2019 Update: We’ve just updated UB PWA Mega Menu demo with incremental optimization and video content type demo.

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. Continue reading

Magento 2.3.3 New features

On Oct 8th, Magento announced the new version, Magento 2.3.3, bringing with its numerous significant platform upgrades and functional fixes. We were amazed when 2.3.0 was introduced with 11 exciting features -- some of which were represented for the first time. So let’s explore what’s different and what can we expect from this new 2.3.3 release.

What are the updates for Magento 2.3.3?

Here are the key updates according to the official Magento 2.3.3 release notes:

  • Substantial security enhancements
  • Core platform component upgrades boost platform security and support PCI compliance, including PHP 7.3.x, PHP7.2.x, Varnish 6.2.0, Zend Framework 2 Components
  • Performance boosts with new Generate “category/product” URL Rewrites; moving non-critical CSS elements to the bottom of the page; refactored jQuery/ui library
  • The WYSIWYG editor has been upgraded to TinyMCE v. 4.9.5
  • Introducing Adobe Analytics integration which allows to track user actions and events on the Admin.
  • Inventory Management enhancements
  • Expanded GraphQL functionality and improved coverage for PayPal payment integrations, gift cards, and store credit features.
  • PWA Studio 4.0.0 with new hooks in Peregrine.
  • Google Shopping ads Channel available as a bundled extension
  • Improved Magento Shipping
  • And multiple fixed issues

Continue reading

GraphQL API in Magento 2

Jan 10, 2020 Update: Check out UB PWA Mega Menu v1.1.8, packed with a newly added service layer --  MegaMenuGraphQL that helps you build flexible mega menus on top of Magento PWA Studio. View details here.

The new GraphQL API turns out to be one of the major moves in Magento 2.3, as written in our first blog post. Originally, GraphQL is a query language developed internally by Facebook in 2012 and has introduced a new era in web development since it was publicly released in 2015.

Let’s explore the advantages of using GraphQL API over REST API and the current state of GraphQL API in Magento 2.

Why GraphQL API?

As you might know, GraphQL has become the main API to support PWA Studio functionality and other custom storefronts. Magento introduced a layer of GraphQL endpoints as a communication protocol with PWA based storefront since Magento 2.3.0. There are still some gaps in GraphQL API coverage (not 100% of the functionalities available in Magento 2 are fully prepared), however its capabilities have increased with each release cycle of Magento. Continue reading

UB Data Migration Pro v3.2.2

We’re pleased to announce the 3.2.2 release of our UB Data Migration Pro module. Here are two important new features we added to the version 3.2.2:

  • It’s now possible to migrate CMS content from Magento 1 to Magento 2
  • Keeping the migrated data in Magento 2 in sync with the source data that no longer exists in Magento 1

Ability to migrate CMS content to Magento 2

Since version 3.2.2, UB Data Migration Pro module enables you to migrate all CMS blocks and CMS pages from Magento 1 to Magento 2. In order to migrate these CMS contents, you can optionally tick the CMS Pages, CMS Blocks checkboxes in Step 8 -- Migrating Other Data like this screenshot: Continue reading