Product NFC Tags for Magento 2

Magento 2 PWA NFC tag integration allows store management to be more efficient. With the help of this short-range wireless connectivity service the products are added to cart in a go. Thus, this small yet highly efficient technology can add to a lot of advantages for the customers and store owners.

Henceforth, this technology is best for any POS outlet to quickly add the product to the cart. It can even give an edge to the e-Commerce website users as they can even scan the NRC tag and add it to the cart.

With the much recognized PWA the store owner can easily increase the user experience with a lighting fast technology. Additionally the app efficiently performance even in a slow internet connection.

• More user-friendly than a web application.
• Works lightning fast if compared to the website.
• Supports push notification for Android devices.
• Completely responsive on all the platforms.
• Launches without the internet or low-quality internet.
• It looks and feels like a native application.
• Users do not need to update the progressive web application.
• No app store requires managing the application.
• Increases user engagement in the store.
• Increases store revenue due to user engagement.
• The application name can be entered by the admin.
• Admin can upload and change the application icon.
• The splash background color of the Progressive Web Application can also be changed by the admin.
• Admin can set the theme color of the Progressive Web Application and manage the NFC settings.
• The products are added to the cart by just tapping the respective NFC tag with the help of the smartphones.
• Additional quantities can be added to the cart by scanning the same tag multiple times.
• The admin can create/update NFC tags for the products from the code end.
• Easy checkout with the desired product using PWA.
• Managed long ques in the physical store.
• It makes the POS management much easy.

Important

• The device browser must support the NFC feature.
• The functionality works on HTTPS only.

This feature is a utility for both e-Commerce and the physical store owners. Using this extension in PWA can add a divergent benefit for users. Thus, increasing the sales on both type of stores and increment in revenue.

The addition of the product to cart saves time of the user in fetching the product on a complete store. Thus, allowing the decrementing the bounce rate.

Note – If you want to create an NFT Marketplace use our Magento 2 NFT Marketplace extension for digital assets tarding.

Product NFC Tags for Magento 2 module installation is super easy. You need to move the app & pub folder in Magento2 root directory that’s it as per the screenshot.

After the successful installation, you have to run these 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 the commands, you have to log in to the admin panel and you have to clear the Cache. You can refer to the below screenshot.

Language Translation

For translation of the module language, navigate through src/app/code/Webkul/Pwa/i18n and edit the en_US.csv file.

Now, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code like de_DE.csv.

Creating Firebase Product Credentials

In order to use this module, you need to have Firebase Project Credentials, which will be used in the Magento configuration. So, please visit this link and create a new project with your Gmail account.

1.  After opening the Firebase website, please click CREATE NEW PROJECT button as shown in the above screenshot.

2. A small pop-up window will appear with the name of Create a project, here you have to enter your Project Name and then select your Country/Region.

3. Hence, after completing the details click CREATE PROJECT button.

4. So, after creating your new project click on the Storage and create a new bucket. You can also find the default bucket here.

Thus, post creating bucket now go to, Settings menu icon and select Project Settings option. Please view the below-attached screenshot. A new Settings page will be opened.

5. In the General tab find the project ID, web API key, etc. under the setting page.

Now click on the button as shown in the image below. This will be used to add the firebase to the web app.

Henceforth, clicking on the button above Register the app by entering the app nickname and click on register app-

Now after successful registration you can get the credentials which are required for the module configuration.

Now, click CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your Server Key and Sender ID, Web Push Certificates/ Public Key as displayed below.

These credentials will be used in the Magento configuration.

Configuration

After installation of the module, admin can configure the module settings.

Henceforth, for this, the admin will navigate to Stores > Configuration > Progressive Web Application as per the below image.

Here, the admin can:

Settings

• Status: enable or disable the module.
• Application Name: set the application name.
• Application Short Name: set the application short name.
• Web API Key: The admin can get the Web API key from the firebase in the General tab under the project setting.

• FCM–
  • Auth Domain: enter the auth domain name here from the firebase web app.
  • Database URL: enter the FCM database URL here
  • Project Id: enter the generated FCM Project ID here.
  • Storage Bucket: enter the FACM storage bucket here.
• Messaging Sender Id: enter the sender ID here.
• FCM App Id: enter the FCM App ID here.
• Server Key: Server key which is generated using the firebase web app and it can be found in cloud messaging under the project setting.

• Public Key: enter the public key here and it can be find in cloud messaging under the project setting as web push certificates as shown in the image below-

• Application Icon: upload application icon.
• Splash Background Color: set the splash background color.
• Theme Color: set the theme background color.

Thus, the admin can now enable or disable the NFC setting in the PWA.

Admin can manage the Push Notifications by going to PWA > Manage Push Notifications. 

From here admin can add/edit or delete any push notification. Admin can also enable or disable any push notification and can ‘Push’ the notification message by clicking on “Send“.

For adding or editing a Push Notification Message, the admin has to provide the Title, Message Body, Target URL, and the message icon image.

The Magento 2 Progressive Web Application (PWA) enabled website while browsing will open up as below.

Hence, the POS user or website user will get a pop-up requesting permission to send Push Notification to the customer.

Following this, the user can see the Add to home screen button (Plus Sign) near to the cart, and on the bottom of the page as shown in the image below.

Hence, the customer can click on the “Plus Sign” button near to the cart or click on the bottom of the webpage to add the app to the home screen. Now a pop window will appear as shown in the image below –

Henceforth, the PWA is visible on the homescreen of the device which launches with a click.

The app opens up to a launch screen which is a Splash Screen. Moreover, splash screen shows the application name and icon. The application launches in the same way as the native app.

The app opens up with the list of multiple products from which the customer can process the purchase. Hence, using this plugin the user can tap the NFC tag to add products to the cart.

Note: We need the enable the NFC in their device.

To get more clear idea on the Magento 2 NFC, kindly review the video below-

So, that’s all for the Magento 2 PWA NFC Tap Purchase module, still, have any issue feel free to add a ticket and let us know your views to make the module better http://webkul.uvdesk.com/