Webshop with infinite config-urations.

Project description.

PromoBee is an important supplier of promotional items and promotional gifts on the Dutch and Belgian market since mid-2018. They previously had a poorly constructed Magento webshop with many obstacles and was ready for a renewed site. Requested by Team Koen, I was allowed to develop a completely new and custom website in WordPress with WooCommerce. The products that were being sold had various and complex variations. From color choice to a number of printing colors. These variations are not standard in the WooCommerce system. It was therefore important to integrate a solution for this within the webshop.

Configuration system + filter.

Based on certain guidelines, the design for this project was developed immediately during development with Bootstrap built at a rapid pace based on the brand style guide of Promobee. WooCommerce is then built in with the components and layout of the theme. For the complex product variations, a custom configuration system has been developed with which the customer can flexibly and dynamically set up the configurations per product with different input fields that a user can fill in to configure the product. For the configurations, a custom filter system was built for the overview/shop page with which you can filter products based on the values ​​of the configurations.

Compare and sort system.

The products are sold in bulk, so for the shop overview I have built a sorting function with which you can display a total price or a price per piece. In addition, you can compare the products in the overview by ‘number’ and ‘budget’ with a customized comparison system. You can also switch the colors of a product in the overview, so you do not have to open the product which offers the user a direct comparison tool.

Multi-step checkout + Quotation system.

The webshop also has a custom multi-step checkout process built in, with the option for the customers of Promobee to provide a file for a proof design and a custom quote system is built in that allows you to request a quote for the products in the shopping cart instead of ordering. The orders end up in the back-end as a quote request and different e-mails are sent out and a different process is used for processing the orders.

Google Shopping Feed.

Due to all customization and complex variations, a solution had to be devised for the Google Shopping Feed for which the products with the correct configurations can be retrieved from a feed on the website for display in Google Shopping. For this purpose, a custom feed has been built with custom algorithms so certain configurations can split products with the correct data  so that the products are displayed in Google Shopping in the most optimal view.

Optimizations.

During development, all script libraries are managed via Node.JS/NPM, so that the latest version can always be easily deployed (think of Bootstrap, Fontawesome etc.) and task runners are used with Gulp.js to compile all SASS and JavaScript to minified and combined scripts. In addition, the scripts ensure that images are lazyloaded and where possible scripts are loaded in the footer. This ensures that a minimum number of requests is maintained, which greatly benefits the speed. Since the website has been developed responsive and “mobile first”, the site works optimally on every device and can also be viewed for every device and potential customer.