The project
This project was done for a website selling gift baskets online. Until now, it only sold pre-made gift baskets, where the products were pre-selected. In order to make it more attractive and customizable, we were asked to design a tool that would allow customers to create their own gift basket, a configurator. We defined with the client the different characteristics of the configurator and we found these points:
- The configurator will have 4 steps.
- The selection of the box.
- The product selection.
- The selection of a possible gift wrap.
- And finally, the possible selection of a want card with a text.
- Some steps will only be accessible under certain conditions.
- The configurator should display the filling rate of the gift basket according to the selected products.
- Once the gift basket is added to the cart, it should be possible to reopen it in order to edit it and update the product in the cart.
- The products displayed should be filterable in the same way as on a classic category page.
- Each step of the configurator will correspond to a category created specifically for it in the Shopware administration. The customer will be able to assign products dynamically to these categories to save time.
Implementation
To begin with, having never worked with the Shopware 6 framework, we thought we would implement the configurator by extending and reusing the category templates. However, this option quickly proved to be too complicated to implement and did not fit our needs. After some research, we found that Shopware 6 offered a very complete API that allowed us to execute queries on all entities of the framework. Implementing the configurator with this API seemed like the best solution, as we didn’t want to refresh the page between each step of the gift basket creation. So we made a configurator almost entirely client-side in Javascript. Only the initial loading of the page, the addition to the cart and the recovery of the cart in case of payment failure were implemented on the server side. So we started by implementing the design of the configurator and then we designed the whole part in JS of product recovery, product filters and pagination. Finally, we implemented the constraints defined by the client in order to prevent the website’s customers from buying, for example, gift baskets without any product or products without a box to contain them. We also added some information such as displaying the product description in a pop-up when clicking on the product, entering the text of the greeting card.
The challenges
During this project, we had to overcome many challenges.
- To start with, we had to optimize our requests to the Shopware API as much as possible in order to write as little JS code as possible and to make it more flexible. In total only three requests are implemented. One for retrieving products, one for retrieving the current context to display the right currency and one for adding the configuration to the cart.
- The second challenge was to make the add to cart function. To do this, we had to create a new product type in Shopware and implement all the classes necessary to calculate the price and to “enrich” the products in the shopping cart.
- Another challenge was the recovery of the cart in case of payment failure. We use an external payment service provider to manage the payment part of the orders. The main problem was that shopware does not integrate a functionality to recover the cart when a payment fails. The only way is that the plugin of our payment service provider implements this functionality in order to return to the shopping cart page to be able to re-execute the payment in another way. This retrieval of products from the cart works by product type, so we had to implement ours in order to retrieve a cart with gift baskets after a failed checkout. This was not easy, because the plugin of the payment service provider was not very stable. After some discussions with the plugin developers, we were able to find solutions to the plugin problems and get our functionality working for our new product type.
Conclusion
Creating a configurator with the API offered by Shopware 6 was a very interesting experience. Being backend developers, we were able to enrich our frontend development skills with Javascript. The flexibility of the requests that we can send to the Shopware API is really very practical and allowed us to build our configurator on a single page. Moreover, the different challenges we had to face during the realization of this project were very enriching in terms of software development skills.