Dokkaner: Developing a Localized Online Sales Channel for a Middle-Eastern Multi-Vendor Marketplace
A brief background on Dokkaner
Dokkaner is a Saudi Arabian business that sells a diverse portfolio of products on a multi-vendor eCommerce platform. Being a consumer-focused brand, Dokkaner aims to grow its presence within the Saudi Arabian market while having plans for global expansion in the future, particularly in North America.
Background and challenges
Dokkaner approached nopStation with the project of rebuilding and enhancing their existing nopCommerce 4.30-based website. Their existing website was using a pre-built theme from another nopCommerce vendor alongside a collection of custom nopCommerce plugins. Aside from that, the website also had some source code customizations in the Order processing workflow. They desired a complete redesign of the website's UI and user experience to more accurately reflect their brand value and product offerings. Aside from design and UX, Dokkaner requested several functional customizations to better serve their business operations within the Saudi Arabian region such as support for e-invoicing for QR code generation as mandated by the Saudi Zakat, Tax and Customs Authority (ZATCA).
After a concise requirement analysis process, our team at nopStation identified some key development challenges for the project.
Working without access to source code for the custom theme and plugins: As mentioned previously, Dokkaner’s existing nopCommerce 4.30-based website was using a custom theme from another nopCommerce vendor along with an assortment of custom nopCommerce plugins. Upon receiving the Dokkaner project, our team did not have access to the source code for the custom theme or the plugins, which presented a significant challenge for adding customizations and new functionality. Our team had to conduct an analysis of the existing functionality and account for dependencies within the project.
Implementing ZATCA-specified e-invoices with QR code generation: Due to being a business operating in Saudi Arabia, Dokkaner requires compliance with the bylaws of the Saudi Zakat, Tax and Customs Authority (ZATCA). Post-December 4, 2021, ZATCA required eCommerce platforms to have support for their specified e-invoicing standard with an encoded QR Code containing specified data in a TLV format. Due to these regulations, our team had to develop a way to generate invoices in compliance with these bylaws and generate an encoded QR Code.
Applying customizations on top of the existing theme: Dokkaner requested extensive UI/UX customizations and enhancements for their website. They shared a comprehensive Figma mockup of their desired UX changes and requirements with us. However, these customizations had to be implemented on top of their existing nopCommerce theme. As our team did not have access to the source code of the theme, implementing customizations on top of it required formulating several workarounds and extensive development efforts.
Adding support for product video banners and custom product boxes: Dokkaner wanted to have the ability to display product video banners on their product details pages, which was not supported in default nopCommerce version 4.30. In addition, they wanted the product boxes to be more compact while showing product attributes that can be configured such as color or size. Implementing these customizations required significant development efforts from our team.
Providing vendor-specific admin side endpoints for 3rd party integration: Another requirement was the development of some vendor-specific nopCommerce admin side endpoints to open up their website for integration with 3rd party systems such as ERP or CRM systems in the future for added utility as a multi-vendor-platform.
Integrating shipping support and order status sync through Saee: Dokkaner wanted extended integration with Saee, a notable Saudi Arabian shipping provider. On Dokkaner's current website, they had customized the Order processing by incorporating custom order statuses from Saee and utilizing a custom Saee shipping plugin. Unfortunately, the existing plugin lacked crucial functionalities, specifically the ability to automate order status updates with Saee. In addition, Dokkaner wanted to synchronize City and District data in nopCommerce with Saee. To achieve this, our team had to do a complete redesign and refactoring of the plugin, incorporating automated order status sync and City and District data sync with nopCommerce through Saee.
Adding Google Analytics 4 & Google Tag Manager support with eCommerce optimizations: Dokkaner previously did not utilize any web analytics services for tracking website analytics and sales insights. Alongside website functionality and design-based changes, they requested support for Google Analytics 4 as well as Google Tag Manager on their website. Besides integration with nopCommerce, they also wanted tracking and analytics enhancements that are optimized for eCommerce platforms like their own. Our team had to develop a way to integrate Google Analytics 4 and Google Tag Manager while adding eCommerce-specific enhancements.
Adding support for 3rd party sign-up & authentication: Besides email, Dokkaner also wanted sign-up and authentication support with 3rd party platforms such as Google, Facebook, and Instagram. Our team had to support sign-up and authentication through these platforms on their storefront.
Our Solution
To establish a development roadmap for the project, the nopStation team conducted extensive R&D along with thorough requirement analysis. We decided to utilize a plugin-driven development approach for adding new features and enhancements on top of nopCommerce with some source code customization.
Developed Custom Order Invoice plugin for generating ZATCA-compliant invoices with QR codes In order to generate ZATCA-compliant invoices, our team conducted extensive R&D to develop a custom Order Invoice plugin. This plugin overwrites the default invoice structure in nopCommerce to generate invoices with QR codes using specified data in the TLV format. This lets Dokkaner easily comply with ZATCA standards and maintain their business operations without hassle.
Implementing UX enhancements through JavaScript and Enhancements plugin: In order to add the UX enhancements and functionality on top of the existing theme, our team utilized several formulated development strategies after careful analysis. For non-functional UI changes, our UI developers used JavaScript to implement the design and theming requested by Dokkaner. Our team was able to craft a UX and theme design that is optimized for both desktop and mobile devices.
Image: 1.2 Mobile Optimized UX
Our UI engineers also designed and developed UX components with extensive RTL and Arabic support in mind to create a localized shopping experience and brand presence.
Image: 1.3 RTL View optimized for Arabic localization
For implementing functional changes regarding UX that are not handled using JavaScript, our team developed an Enhancements plugin. This plugin is used for implementing the functionality of the UX changes. Our team added several features and enhancements through this plugin such as adding avatar support on my account page, displaying an enhanced order information page tracking order status along with an assortment of other changes.
Image: 1.4 Customized My Account page with avatar support
Utilizing a plugin-driven development approach here made the process of migrating these changes to newer versions of nopCommerce more convenient from a development standpoint.Added product video support through custom Video Banner plugin: One of the major UX enhancements requested was adding support for product videos on the product details page. Our team developed a custom video banner plugin that lets admins add video URLs to show product video banners on the product details page. This enables a more immersive presentation of their products while adding depth to product promotion and marketing.
Image: 1.5 Product videos on the product details page
Added compact product boxes through Smart Product Box plugin: Our team enabled product box support through a customized version of our Smart Product Box plugin which added a more compact view as per Dokkaner’s requirements. This plugin can also show product attributes such as color, size, or other variations as well on the product box for a more interactive view that highlights the product portfolio.
Image: 1.6 Compact Smart Product Box
Developing Google Analytics 4 & Google Tag Manager plugins with enhanced eCommerce tracking support: Our team developed custom nopCommerce plugins for Google Analytics 4 and Google Tag Manager. Our Google Analytics 4 plugin, in particular, is specifically developed to enable enhanced eCommerce event tracking as it comes with support for common eCommerce events out-of-the-box. With advanced eCommerce tracking, the plugin can track various events such as order completions, products, categories, manufacturers, vendor pages, searches, the home page, view cart page, add to cart and wish list, checkout page, complete registration pages, and more. This makes it easy to track eCommerce events and obtain critical insights about their nopCommerce-powered business.
In addition, our Google Tag Manager plugin supports various popular trackers including Google Analytics 4, Universal Analytics, Google Ads, Meta Pixel, and other 3rd party trackers. This plugin enables admins to seamlessly add and manage tags and tracking tools while receiving precise data and insights.
Utilizing our Admin REST API plugin to provide vendor-side endpoints: For adding the vendor-specific admin side endpoints requested by Dokkaner, we provided them with our class-leading Admin REST API plugin for nopCommerce. Our Admin REST API provides coverage for vendor-specific endpoints alongside coverage of all of the core nopCommerce admin side operations. This makes creating a more flexible end-to-end integration between their website and 3rd party systems more accessible, providing added convenience and efficiency.
Refactoring Saee shipping plugin with order status automation & sync support for City and District: Our team had to do extensive refactoring of the existing Saee plugin being used by Dokkaner. We were able to implement order status automation with Saee to show the current status of orders within the shipment cycle. Additionally, our team implemented sync functionality with Saee to fetch supported Cities and Districts to nopCommerce to ensure up-to-date shipping information. This helped create a more streamlined order management and shipping process for Dokkaner.
Adding support for 3rd party authentication through custom plugin development: In order to add support for 3rd party authentication, our team had to develop custom authentication plugins with support for Google, Facebook, and Instagram. Our team had to develop Google, Facebook, and Instagram-based authentication plugin for sign-up and authentication.
Image: 1.7 Third-party login and authentication support
Results
- Ensured ZATCA-compliant invoice and QR code generation
- Created responsive UX design that reflects brand identity with extensive RTL support & Arabic localization
- Enabled out-of-the-box eCommerce tracking optimizations through custom Google Analytics 4 and Google Tag Manager plugin
- Enabled automated order status sync custom by using a custom Saee shipping plugin
- Ensured City and District data sync with nopCommerce with a custom Saee shipping plugin
- Enhanced product presentation through product video banners
- Enabled vendor endpoints integration with 3rd party systems through Admin REST API for nopCommerce
- Added 3rd party signup and authentication through Google, Facebook, and Instagram
nopStation is a Gold Solution Partner of nopCommerce and an eCommerce wing of Brain Station 23 Ltd., a top-ranking software development company, headquartered in Dhaka, Bangladesh. At nopStation, we design, build and enhance eCommerce solutions on top of the nopCommerce platform for clients of all business sizes. As a company, we have technology partnerships with 12+ leading ISVs including, Microsoft, Google, and AWS. We help our customers build their business online by developing the right eCommerce solution using nopCommerce at a competitive price and reasonable timeline.