Implementing the project
The web-shop wanted something we had never really seen before, an entirely custom frontend, that would be made to last. CS-Cart comes with plenty of challenges when having to rewrite the frontend. Most of this comes from the mindset that was chosen by CS-Cart. How it normally works, is that CS-Cart observers changes in the DOM, and then resynchronizes parts of the website, using AJAX. All the code written, is dependent on this single bit of logic. So for the initial draft we created a basic AJAX implementation in typescript that would mimic this behavior.
The challenges
However, we soon realized, that we forgot one crucial part, which was the layout builder in CS-Cart. Its currently very challenging to create a frontend that is able to keep the layout editor functional. So we created a new framework called 'Elementals'. This allowed us to create very simple components, whilst keeping no-js compatability.
Now, you can create basic ones, like a ClickProxy, but we have also created predictive navigation menus, modals, facets, media galleries, grids, typeahead search, etc. After this, we would run our own Webpack module that collects all these Elementals and adds them to the according entries, basically creating highly optimized files for each single page.
This was by far one of the hardest challenges, as you simply need to test everything on every single browser, with and without JavaScript. Furthermore, we also had to do a lot of optimisations in regard to rendering times, as every second just counts.
The backend
Although the frontend was challenging, the backend is just something else.
Cloud hosting
ActiveStyle is one of the few CS-Cart stores to run a highly available configuration. This means, that there is a lot of redundancy in place to make sure the website remains available at all times. This means we ended up with one of the most common configurations you can find:
- Aurora as RDS;
- ElastiCache for caching;
- SQS for job queueing with lambda functions to handle them;
- EC2 autoscaling for the application servers;
- EFS for file storage;
Usually we would use something like S3 to store assets, but the fact is that CS-Cart is just very file system based. It does not have very good abstractions for using a CDN, which ended up worsening the experience for customers in many cases.
Marketplace integrations
ActiveStyle sells on other platforms as well, such as Amazon and Bol.com. We have created a proper integration that synchronizes orders, product inventory, RMA requests, order statuses, shipments, and much more. This made it much easier to manage orders and due to the abstractions we put in place, we can now easily add a new integration in a matter of hours. Having a centralized location for all your business is essential to your entire workflow.
Stock management
A large warehouse can be tough to manage, so we created a special application that allows staff to use a hand scanner to scan and update the stock automatically on the website. We have also added a specialized section that allows to define a custom handling time per order, to make sure that customers can still order, even if a product is out of stock. Out of stock products automatically get emailed to sales staff to make sure that they will order the products in time.
Order automation
The packing for products is completely automized. We have created a special restful print server that allows us to assign printers to certain employees, which made it possible to create a special packing page. This would hand an order to someone working in the warehouse, print the packing slip and according shipping labels, and mark the order as completed when instructed by the packer. This made the entire process from retrieving products from the supplier, to sending it to the customer a breeze. It has now been simplified to such an extent, that there is no more room for errors.
Results
Customers are excited with how clean the design is, a large product assortment does not impede the website speed, back-end features help the administrator to serve the customers in a fast and comfortable way.