Introduction- Headless PWA
The Headless Progressive Web Application(PWA) for Magento 2 uses web compatibilities to provide mobile application experiences to the users.
The headless PWA’s are instantly discoverable and useable via browsers that’s why it eliminates the need to download the application before start using it.
The front-end of this module is completely built on React-JS which makes it easily customizable and provides a better experience to its users.
In other words, headless PWA’s are designed in a way to offer clients the same experience as a native Android or iOS application in the form of a regular website instead of a separate application.
Magento recently introduced Magento PWA Studio project in Magento 2.3.0 version.
This Module is built on headless Magento 2 PWA Studio (A suite of tools by Magento for building a web store to a Progressive Web Application).
NOTE: This module is compatible with Magento 2.3.0
Why Do we need Magento PWA Studio?
Now, Magento 2 is entirely shifting towards PWA platform and natively supports headless Magento 2.
PWA’s are the future of web application development. PWA is definitely a right step to give the web store app-like experiences.
PWA Studio gives front-end developers an open-ended toolkit for creating PWA themes for Magento 2. It requires less development effort to build in comparison to a traditional standalone application.
Following are the features of the Magento2 PWA (Pwa-Studio):
- PWA’s provides a great experience to the users as it is lightweight and super fast.
- PWA’s are easily accessible in poor connectivity.
- Easy to customize because the frontend is built on React JS.
- The PWA supports Push Notifications.
- The Progressive Web App’s can also be operational during the offline mode (Coming Soon).
- Supports various devices including Android and iOS.
- The App is purely responsive on all the platforms and it provides cross-browser compatibility.
- The Progressive Web Application will give the feel of a native App.
- Since it is not a native application so there will no updating issues.
- The PWA’s are easy to install since the user just has to visit the site and adding it to the home screen.
- No App store is required for managing the application.
- The App provides better User Interface which leads to increases the traffic on the store.
- The Admin can set the user name and password from the backend.
- The Splash Background image of the application can also set by the admin.
- The Admin can manage or add the banner images, notifications, featured categories, category’s banner images, and icons.
- The carousel and carousel images can also managed and added by the Admin.
The installation of PWA (PWA Studio) for Magento2 module is very easy.
You need to Unzip the respective extension zip and then move “app” folder (inside “src” folder) into Magento2 root directory as per the screenshot.
After the successful installation, you have to run the following commands in the Magento2 root directory.
First command- php bin/magento setup:upgrade
Second Command – php bin/magento setup:di:compile
Third Command – php bin/magento setup:static-content:deploy
After running these commands, you have to log in to the admin panel and have to clear the Cache.
For the reference check the below screenshot.
For setting up Magento 2.3 PWA Studio, check the link below:
Now move the “packages” folder (inside “pwa-studio” folder) into magento installed pwa-studio directory.
Enter the following command in package.json of pwa-studio folder:
—> under “workspace” key enter “packages/mobikul”
—> under “scripts” key enter the following command
“watch:mobikul”: “yarn workspace @magento/mobikul run watch; cd – >/dev/null”
“stats:mobikul”: “yarn workspace @magento/mobikul run build:analyze && yarn workspace @magento/mobikul run stats”
“stage:mobikul”: “yarn workspace @magento/mobikul run start; cd – >/dev/null”
For the reference check the below link:
In the lerna.json file of pwa-studio directory enter the following command:
under “packages” key enter “packages/mobikul”
Now install the following packages by running the following command parallel to pwa-studio folder:
First Command- yarn add @material-ui/core
Second Command- yarn add @material-ui/icons
Third Command- yarn add jquery
Fourth Command- yarn add forever -g -W
Fifth Command- yarn add firebase -W
To run the new mobikul theme of pwa, run the following command:
i) sudo yarn run build
ii) yarn run watch:mobikul
After successful installation of the Module admin can configure the module from the backend.
For this admin have to navigate to Stores > Configuration > Mobikul Basic Configuration:
- User Name- The Admin needs to provide the username and it is used for connecting to the respective server.
- Password- Here the admin needs to set the password which will used with the above username for connecting to the server.
- Collection Page Size- The size of the collection page decides, how many products are going to show on the collection page of PWA at a time.
- Enable random featured product in home page?- Admin can Enable or Disable the featured product from the home page which will taken on a random basis.
Note- If the field is Disabled then, the admin needs to enable “Is featured for Mobikul ?” on the product page.
So, for enabling any product to get in featured product display on the application homepage you need to navigate through the following path at your admin panel.
Products > Catalog > Add Product / Edit
- Allowed CMS Pages- The admin can choose the CMS page which they want to display at the front-end.
- Splash Screen image- Admin can upload the splash screen image for the app.
FMC Push Notification Parameters:
If the admin wants to setup Push Notification feature for their PWA, then they must need to configure this section.
- API key- Admin needs to provide the Server API key which they will get after the firebase console registration.
Manage Banner Images:
Admin can set a new banner image or manage the previous one by navigating towards Mobikul > Manage Banner Images.
After clicking on Manage Banner Images, the admin can see the existing banner images and therefore can edit the images.
Also, the admin can apply various actions for the existing Banner images like admin can Enable, Disable, or Delete it.
The admin have to select Add Images so that, they can add a new Banner Image.
For the reference, check the below snapshot:
So, When the Admin hits on the Add Images Button, they can see the various fields to be filled as per below image:
Banner Image: Admin can upload the banner image here.
Sort Order: Here the order of the particular Banner Image can set.
Banner Type: The Admin can select the Banner Type from here as Products or Category.
Product/Category Id: Here the admin can enter the id of the product or category which they want to redirect by clicking on the Banner.
Store View: Admin can select the store views on which they want to display the Banner.
Banner Status: The Banner can be Enabled or Disabled by the admin at any time.
Admin can set a new notification or edit the previous one by navigating towards Mobikul > Manage Notification.
So, After clicking on the Add Notification, the customer can add new notification.
- Image Notification- The Admin can set the image of the notification from here.
- Notification Title- The admin can mention the topic of notification in this section, to symbolize the notification.
- Notification Content- The details of the notification which contains the information about the notification.
- Type of Notification- The admin can select here the notification type with which the notifications are linked. It can either- Product, category, Custom Collection or Other types of pages.
- Product/Category Id- If the notification is of product type the admin needs to enter the Product Id of the product. However, if the notification type is category then provide the Category Id of the product.
- Store View- The admin can select the view for which the notification is enabled.
- Notification Status- The admin can enable or disable the notification as per the requirement.
Note– If the notification type is custom collection. In that case, the admin needs to enter ‘Create Product Collection Based on’ of the Product Attribute Assigned or Product ids or Newly Added Products with Counts.
So, when the admin selects the Product Attribute Assigned.
Then, they have to enter the corresponding Product Type which one they want to show in the custom collection notification.
Manage Featured Categories:
The Progressive Web Application supports displaying and configuring featured categories.
The featured categories can easily be configured from the admin panel, for that admin needs to navigate through Mobikul > Manage Featured Categories.
Check the below image for the reference:
After clicking on the Manage Feature Categories, admin can see the exiting categories added in the features category list and therefore can change the status of the category as Enable and Disable or can Delete it.
The admin can also add the new featured category.
So, After clicking on the Add Featured Category admin can see the various option shown in the below image to add a new featured category.
- Image: The Admin can upload the featured category image from this field.
- Sort Order: This is the sort order of the featured category among other featured categories.
- Store View: The featured category can shown store view wise. “All Store Views” can selected for displaying the featured category in all the store views.
- Featured Category Status: The featured category can enabled or disabled as per the requirement.
The admin can chooses the category which will redirected when the featured category image will clicked.
Manage Category’s Banners and Icons:
The admin can configure the banner image and icon for each category.
So for configuring the category’s banner and icon, the admin needs to navigate through the following path:
Mobikul > Manage Category’s Banners and Icons
The category’s banner and icon added/edited/deleted easily from the admin panel’s of PWA.
If the admin selected the Add images option, they will see the following fields to filled as per below image:
- Icon image- The admin can enter the icon here for the category.
- Store View- The admin can select the view for which category image will visible.
So, After setting the Icon image, the admin have to select the categories associated with it.
Once, the category selection is done the admin can enter multiple banners from Banner tab.
Mobikul Order History:
Mobikul Carousel Images:
The admin can add/edit carousel images from Mobikul Carousel Images;
by navigating through Mobikul > Mobikul carousel image as per below image:
For adding a new carousel image the admin needs to click on the Add images.
- Carousel image- The admin can upload an image in this section.
- Title- The image name can defined in this section.
- Carousel Image Type- The image type can shared in this section wherein the admin defines if the image is linked to a category or product.
- Product/Category Id- The admin can state the id of the product or category as chosen in the above option.
- Carousel Image status- This must set as enable to make it visible in the Assign Carousel Images Tab.
The application’s homepage is into multiple carousels which can manage from the backend.
Therefore, the admin can enter the information in the carousel from here to display on the homepage.
These sections will contain information in the form of the image.
The admin needs to navigate through Mobikul > Mobikul Carousel to manage the carousel.
Here the admin can perform various actions such as Enable, Disable or Delete on the existing carousel or can also add a new Carousel.
Thus, after hitting on the Add carousel button admin needs to fill various fields to create a new one.
- Title- The name of the carousel can entered in this section by the admin.
- Carousel Type- In this field the admin can enter the type of carousel as image or product type.
- Background Image- The background of the carousel can set in this section in the form of the image.
- Background Color code- The admin can set a solid color for the image by mentioning the color code in this section for the background.
- Sort Order- The admin can sort the carousel by entering the sort order in this section.
- Store View- The admin can set different banners for different store views.
- Carousel Image Status- This will set to enable to make it visible on the homepage or else disable.
The admin can assign images from this section by selecting them via the checkbox.
The images appear here are taken from the Mobikul Carousel Images.
If the admin has selected Carousel type as the Product Type. Then the admin can assign the product in Assign Carousel Products.
In this section, the admin needs to assign the products to the carousel by clicking on the checkbox.
Front-View of PWA
It is the launching screen of the app when the user opens up the Progressive Web Application.
It helps the application owner to introduce the app or organization.
The homepage of the PWA is having multiple sections.
- Featured categories carousel- It is situated on the top of the homepage where the customer can find a product according to the categories.
- Featured Products- These Products are an exclusive collection of the store meant to highlighted.
- New Products- It displays all the new products added to the store which can easily purchased by the customer.
- Hot Deals- It shows all the products which are having a good deal on the admin store.
Other Carousel Sections- Appart from the above section multiple carousels can added by the app owner for the user.
Some of them are listed below:
- Latest Deal
On clicking the search icon the app user can save their time from scrolling effort. The admin can search for any product via term.
The navigation drawer has multiple options for the app user to use.
- Sign In
The customer can Sign In via Username or Email through the Progressive Web Application.
Create An Account
The customer can also create their account by filling up some basic details through Progressive Web Application (PWA).
The feature permits to display all the products of the store, with their assigned and associated Sub-categories and Parent category in the PWA too.
On clicking on a particular category the PWA user will be redirected to a section where the list product collection will visible.
The Product Page will display the details related to the products, therefore, the PWA user can scan through. The page has the following details-
- Add your Review- Post-purchase the PWA user can review the product by entering the rating.
- Edit quantity- The PWA user can edit the quantity to purchase the product from here.
- Add to Cart- The PWA user can click on the Add To Cart button to add the product to the cart for checkout.
- Buy Now- The customer can click on Buy Now Button in order to directly move to the checkout.
- Choose Options- If the product has multiple options associated with it app user can select them and add the product to the cart.
- Details- The product complete details are also mentioned in this page for the app user to refer before purchase.
Cart And Checkout
The Product added to the cart is to be seen by clicking on the Cart button present on the homepage.
The cart here is just similar to the shopping trolley which is present in the physical store.
So, that’s all for the Headless PWA for Magento 2. still, have any issue feel free to raise a ticket and let us know your views to make the module better https://webkul.uvdesk.com
Current Product Version - 2.0.0
Supported Framework Version - 2.0.x, 2.1.x, 2.2.x, 2.3.0