Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Product NFC Tags for Magento 2

    Introduction

    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.

    Features

    • 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.

    Usage Of Product NFC Tags Magento 2 PWA In e-Commerce and Physical Store

    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.

    Installation

    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.

    Progressive Web Application For Magento2

    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.

    Progressive Web Application For Magento2

    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.

    translation

    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.

    firebase

    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.

    add-a-new-project-1

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

    add-bucket

    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.

    project-setting

    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.

    generate-app

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

    register-app

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

    firebase-config

    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.

    cloud messaging

    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.

    PWA_adminConfiguration

    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.
    firebase-config
    • 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.
    server-key
    • 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-
    web-push-certificates
    • Application Icon: upload application icon.
    • Splash Background Color: set the splash background color.
    • Theme Color: set the theme background color.

    NFC Settings

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

    PWA Magento 2 NFC _admin-settings

    Push Notifications

    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“.

    webpush notification

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

    PWA Magento 2 NFC_push notification message

    How Does Magento 2 PWA NFC Tap Purchase work?

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

    PWA Magento 2 NFC_tap_tag_introduction

    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.

    PWA Magento 2 NFC_Add_to_home_screen

    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 –

    PWA Magento 2 NFC_Pop_up_add_to_homescreen

    Add To Homescreen

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

    PWA Magento 2 NFC_PWA_icon

    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.

    PWA Magento 2 NFC_Splashscreen

    Add To Cart

    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.

    PWA Magento 2 NFC_Add_to_cart

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

    PWA Magento 2 NFC_device_Settings

    Video

    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/

    Current Product Version - 3.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content

    Hide Index