Book free consultation
Book free consultation

Magento 2 Plugin development - process and Javascript events description

written by

Ranaprathap Madhala

Magento Freelance Developer at SoftwareSupport

This project is a continuation of the Smartech Magento Plugin project for Netcore. Magento developer worked on the plugin for marketing automation solutions. The first stage of the described project is focused mainly on creating project documentation and initial work to prepare the plugin for Magento marketplace requirements. The second phase concerns completing full plugin implementation, custom events, testing, and on-demand support.

I am a certified Magento expert. Over the last seven years, I have completed a lot of Magento projects. I mainly specialize in customizing modules, third-party module integration, custom API creations, ERP integrations, email marketing integration, and custom payment method integrations. Moreover, I have experience in integrations of plugins like Smartech: Yotpo, Dotdigital, Klaviyo. To complete this project the following skills were required: Magento2, RequireJS, PHP, Javascript.

I have always loved to code, and Magento 2 is a great framework for mid to large eCommerce businesses. Shops built on Magento 2 perfectly match the trends. The main one is adjusting the website to mobile devices. It is estimated that in 2021, sales through mobile devices will reach 73% of e-commerce sales. To ensure data security and customer experience at an appropriate level, large shops should consider transferring the store from Magento 1 to Magento 2. - Rana Madhala, SoftwareSupp Freelancer

According to the data provided by W3tech, Magento powers 1.2% of all CMS world's websites.

Smartech Magento 2 Plugin

Smartech is a client’s flagship product. It has been already listed on the Magento marketplace and is available to download. In the Magento ecosystem, plugins are called extensions. Developers can seamlessly integrate it into the Magento websites. As Magento.com claims, the software offers more than 5,000 Magento extensions. Interestingly, the Smartech plugin can also be integrated with Shopify or WordPress.

As reported by Netcore, by getting access to the plugin, e-commerce brands uplift web conversions by 5X.

Smartech empowers modern marketers to map their customer journey to deliver an exceptional 1:1 Customer Experience. An additional feature developed for our client is designed to collect all user events and perform personalized marketing activities. Smartech provides a Web SDK (software development kit) that helps track, analyze and engage with website customers. Engaging users, tracking their performance, and analysis of their activities aim to build SMART conversions. Below are listed main Smartech functions:

  • Events tracking
  • Browser push notifications, web messages, and emails to increase conversions
  • Construction comprehensive segments using the events and their underlying parameters.
  • Running campaigns and automation
  • Insights on the campaigns
  • Automation settings to send out campaigns using the website event data as triggers.

Magento2 plugin- project’s scope

  1. Plugin's complete development, JS events
  2. Custom events
  3. Unity testing
  4. Support or any other tasks on road to successful project's delivery
  5. Meetings & Discussions
  6. Historical syncs

Project time: 95 hours

Effect: Development of the Smartech Magento2 plugin published at the marketplace

Smartech Netcore Magento plugin
Shoping cart containing Smartech Netcore Magento2 plugin

My job on this project was to complete plugin development. Most of the work has been done by using Javascript. We have added the JS events for these elements and get the details for particular situations. The last step was to send them into Netcore by using SW.js. In simple words, from Magento, after adding a product to the cart, we are fetching the product details like name, SKU, qty, and sending those into Smartech with JS events. Example:

Product : Iphone13

Name : Iphone 13 with 256GB

SKU : iphone-13

qty : 1

Example product URL: https://www.amazon.com/iphone13.html

Magento marketplace
https://marketplace.magento.com/netcore-smartech.html

The main goal for the Smartech plugin is ecommerce website marketing improvements. Once all the data is transferred from Magento, Smartech processes data like emails, Google Ads, Promotions.

Below we present a list of the details that have been implemented within the project's scope.

  • Adding store wise setup, admin end configurations and verify
  • Page Browse
  • Category Search
  • Product search
  • Product view
  • Add to cart
  • Add to wishlist
  • Remove from wishlist
  • Remove from cart
  • Checkout
  • Product purchase
  • Sign Up
  • Log In / Sign In
Magento 2 configuration
Magento 2 history data sync configuration

During the project, I have worked on the existing plugin and added new features like webhooks for checkout and purchase orders, historical syncs, Admin configuration changes, and whole customer journey events.

Few features presented on the General configuration's screenshot:

Module Enable: The Smartech module enable or not, once its enable then data sync start from Magento to Smartech

Web Tracking Id: The tracking ID from the Netcore team to validate the exact ID and start accepting the data. It is like a gate pass for data to Netcore.

Site Id: Different IDs for several sites mean one customer has more than one site. So, he will have the same license with a separate site ID

Registration Primary key: The key for Smartech JS to load and validate

IDC Region: Netcore has different regions to load the JS & API endpoints, so the customer needs to specify which region he belongs to. Regions like IN, EU, US

IDC: IDC value for region

Netcore configuration for described features
Netcore General Configuration

Custom events for magento2 plugin development

The project also included the creation of Custom events available below. Custom events mean its Magento customizations based on customer requirements, and it is not available from default Magento.

I have implemented an API for archival data sync to Netcore and hooks to get the details of real-time events and performed the code cleaning.

  • Web Push(with token migration if required), Web Message, Personalization should work
  • Handling CSP console errors (Content security policy)
  • Code cleaning
  • Multi-store development
  • Historical API data(at least 2 months) customers
  • Historical API data(at least 2 months) orders
  • Historical API data(at least 2 months) products
  • Hooks for products, orders, customers (CRUD) operations
  • Business Triggers API call(back in stock)
  • Location tracking via browser location access as well as IP based.
  • Product Collection (Cart or product abandonment use)

Moreover, I have Worked on webhook changes, checkout journey events, and custom implementation for abandoned carts data. For the project, we conducted employee training, during which we discussed specific elements of plugin implementation and how Magento will work. Minimum 3 to 5 members participated in every meeting. During these conferences, we discussed the further scope of the project. The final stage was testing the developed product. I verified work done in my local machine with logs and console logs.

The described project lasted a total of 115 hours of certified Magento developer's working hours. The project assumed the development of the Smartech plugin for the Magento marketplace. The goal of the project has been achieved. Throughout the work, Rana had to work directly with the client's IT team, particularly in the early stages of the project. Later, the client only controlled the reported hours by the freelancer. On the project board, the client could see how long the implementation of individual tasks took.

Magento developer reports working hours
Working hours reporting system
Share Article

written by

Ranaprathap Madhala

Magento Freelance Developer at SoftwareSupport

Order projects, hire with SoftwareSupport.

Book free consultation

You might also be interested in these