Getting started with Swissuplabs Magento 2 extensions designed on Magento PWA Studio

Getting started with Swissuplabs Magento 2 extensions designed on Magento PWA Studio.

Here comes the big story of the day. We share 10 Magento 2 PWA extensions with you.

And in the meantime, we mention here the new 11.0.0 release for PWA Studio. The latest version is compatible with Magento 2.4.3. Among recent updates, you can see fully implemented WishList specific components, integration tests for PageBuilder, and the ability to browse and view Virtual Product types. To see other refactors, bug fixes, and improvements, visit the official release page.

This having been said, we have to turn to our new extensions.

We've been working hard to integrate Progressive Web App (PWA) into our solutions for eCommerce. PWA compatibility will boost your store in many avenues. We'll discuss it in the post.

Today we are ready to help you turn your website into PWA. The turning may start with some extensions. Even they will improve the entire user interaction by providing a mobile app-like experience. Let's see how to install and configure them.

Why use PWA extensions for Magento 2?

Developing PWA for your Magento eCommerce stores has many advantages. So let's go through a couple of those.

  • Offline browsing. Users can also check out offline. It must be clarified - the order would be completed after the reestablishing connection.
  • Ability to load your e-commerce on any device across each major OS.
  • Faster load times. The lightweight PWA framework is nice for low-bandwidth networks.
  • Fast native mobile-like application behavior is complemented by the presence of PWA pages directly in SERPs. It will improve your store visibility for clients.

Our first 10 pre-made Magento PWA modules

Now we point out the PWA module names and around common pages of our extensions. So you may go and learn about features, advantages, and functionality of each of them.

Pay attention that the PWA core module will be in the package right after installation. We use it to enable the integration of PWA studio and our extensions.

How to install and configure Magento 2 PWA extensions

Okay, let's go over each one. But first, we show a step common to all.

Pre install

Open the root directory of your Magento PWA-studio project. You should have set it before via instructions we shared with you. And in case you haven't done it yet, please read our guide on How to start using Magento 2 PWA Studio on your hosting?

In this example, we'll use the folder named pwa-studio fundamentals.

PWA Highlight module installation

  • To install module, you have to run the next command in console:
 yarn add @swissup/pwa-highlight
  • Then run pwa-studio in developer mode
yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

To configure the module, you have to follow instructions on how to add a Highlight widget to CMS pages.

Note: supported widget types are "popular", "bestsellers", "onsale", "default".

After you add the widget to your Magento backend CMS page, clear cache. Then restart PWA-studiо. The new block implemented as the PWA component should appear on the page.

PWA EasyTabs module installation

To install module, you have to run the next command in console:

yarn add @swissup/pwa-easytabs

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

To configure the module, you have to follow instructions on how to add an Easytabs widget to CMS pages.

Note: in case you have Argento based theme, you’ve already have widgets included on the homepage.

PWA Easy Catalog Images module installation

To install module, you have to run the next command in console:

 yarn add @swissup/pwa-easycatalogimg

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

To configure the module, you have to follow instructions on how to add an EasyCatalogImages widget to CMS pages.

Note: in case you have Argento Stripes theme, you’ve already have widgets included on the homepage.

PWA Navigation Pro module installation

To install module, you have to run the next command in console:

yarn add @swissup/pwa-navigationpro 

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

Now you have to check if the main navigation menu was replaced. It must have the same look as on Magento 2 Luma theme.

PWA EasySlide module installation

To install module, you have to run the next command in console:

yarn add @swissup/pwa-easy-slide

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

To configure the module, you have to follow instructions on how to add an Easyslider widget to CMS pages.

Note: in case you have Argento theme, you’ve already have widgets included on the homepage in some Argento designs.

PWA Ajax Search module installation

To install module, you have to run the next command in console:

yarn add @swissup/pwa-ajaxsearch

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

Now you have to check if the default PWA studio search was replaced with our search. If you need a few more options to be included, please contact us. For now this is the initial release of the module.

PWA AskIt module installation

To install module, you have to run the next command in console:

yarn add @swissup/pwa-askit 

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

Now you have to check the integration. Go to the product page and review the list of questions/answers. Check how it works on frontend.

PWA Easy Banner module installation

To install module, you have to run the next command in console:

 yarn add @swissup/pwa-easy-banner

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

To configure the module, you have to follow instructions on how to add an Easybanner widget to CMS pages.

Note: in case you have Argento theme, you’ve already have widgets included on the homepage of some Argento designs.

PWA Sold Together module installation 

To install module, you have to run the next command in console:

yarn add @swissup/pwa-sold-together

Then run pwa-studio in developer mode

yarn watch

If correct, you can also try running pwa-studio in production mode. Run the command:

yarn build

Now you have to review if cross-sell blocks were added to the PWA-studio product page. Check how it works.

In summary

Well, you can see we have been aimed at providing the same look of PWA elements as on the standard Magento 2 theme.

Still, we are working on the first Argento theme design implemented at PWA studio. The new big story is coming.

For now, we're supposed to ask you some questions.

  • What PWA benefits are the most important for you?
  • How would you be using the new modules?
  • Do you have any ideas of what other PWA elements should be implemented asap?

To summarize, we want you to be prepared to try all the benefits of Magento PWA Studio. Stay tuned.

One thought on “Getting started with Swissuplabs Magento 2 extensions designed on Magento PWA Studio”

  • Peren

    ux and Ui is more and more important and google schema .etc
    User exprience is more important for now
    if you want I can send for you some good pwa magento design !!

    Reply
Leave a Reply