Bazar | E-commerce Platform Integration
Stefan Leßle
About the Project
Bazar is an innovative e-commerce platform tailored specifically for the fashion industry. Built on WordPress/WooCommerce, it offers a seamless shopping experience for fashion enthusiasts, displaying a wide range of products from various brands and designers.
Goal
The primary goal of Bazar was to create a dynamic and visually appealing e-commerce platform that caters to the diverse needs of fashion consumers. It aimed to provide a user-friendly interface for browsing and purchasing fashion items while offering a platform for brands and designers to showcase their collections.
Implementation Strategy
Bazar was developed using WordPress/WooCommerce as the foundation, leveraging its robust e-commerce capabilities and extensive plugin ecosystem. Custom templates were created to ensure a unique and branded shopping experience, tailored to the aesthetic preferences of the fashion industry.
Custom plugin development was undertaken to extend the functionality of WooCommerce and accommodate specific requirements such as advanced product filtering, size/color variations, dynamic pricing options, and filtering brands & products by country on a map. Integration with third-party services like Stripe and PayPal enabled seamless payment processing, shipping management, and order fulfillment.
Browse by Country on a World-Map
With close cooperation with the client and a designer, we conceived a more user-friendly and interactive approach for consumers to browse brands by country. The previous approach involved selecting a country from a lengthy list in a select box. The idea was to present a map with pins representing each country, allowing users to click on a pin to view a list of brands and their products below.
For this functionality, I decided to develop a custom WordPress Plugin. The map itself was quickly implemented by displaying a commercially free SVG map, and a prototype with fixed pin locations was promptly established.
The more challenging aspect was meeting the requirement of adding pins in the WordPress Backend and setting latitude and longitude coordinates for each pin, rather than using fixed pixel values. This required converting coordinates into pixel values.
Quick research allowed me to find the answer:
Convert Longitude to Pixel:
(longitude*widthOfContainerElement)/360
Convert Latitude to Pixel:
(latitude*heightOfContainerElement)/180
Simple, right? Right! But wait, the pins were not placed correctly. They were pointing in the right direction but were not where they were supposed to be! The reason? The map projection was incorrect or my projection onto the map was inaccurate. After further research, I discovered that there are different map projections of Earth. One of them, the so-called "Robinson Projection," necessitated a complex conversion of coordinates, which could be resolved by repositories such as this repository. After a quick discussion with the client, I received permission to change the SVG image to a map with a different projection. This adjustment ensured that the pins were accurately placed.
UX Optimization
User experience optimization was prioritized throughout the development process, with emphasis on intuitive navigation, responsive design, and streamlined checkout processes while keeping the design as simple and intuitive as possible. Comprehensive testing and refinement ensured compatibility across devices and browsers, delivering a seamless shopping experience to users.
Conclusion
Bazar has successfully achieved its objective of providing a sophisticated e-commerce solution for the fashion industry. Its innovative design, robust functionality, and user-friendly interface position it as a leading platform for fashion enthusiasts and brands alike. By leveraging WordPress/WooCommerce and custom development expertise, Bazar exemplifies excellence in e-commerce development, catering to the dynamic needs of the fashion market.
