Custom PrestaShop development for Rue du Cadre

Customization of Framer API integration

PrestaShop stores all ready-to-use frames and special accessories that Rue du Cadre offers to customers. And Framer creates custom items. They don’t exist at the store but the user must be able to see them in a cart. To organize that, we adjusted the API integration.

Our developing team set up a special rule. Firstly, a customer makes an item in Framer, uploads a photo to see how it would look with a frame, and orders. Then, PrestaShop automatically creates this custom frame as a new product and adds it to the user cart. The website transfers both the frame image and the user photo from the tool to the cart. And the order is ready.

Built-up Cropper tool

Cropper is the other custom third-party tool we implemented into the Rue du Cadre webstore. It’s an independent instrument that allows users to order their printed photos. When the BelVG team got the work, it was just a separate modal window. But we significantly widen its functionality.

We took the provided basis and implemented different tools for downloading the image, making changes, and finally adding it to the cart as an order. We introduced such functions as changing orientation and imposing filters. But the main one is changing the size of the image to print it correctly. It’s the key point as Rue du Cadre often works with professional high-resolution photos that need to be cropped and compressed without losing the final quality. We also put a lot of effort into making the interface clear and logical.

• Text and icon designations are combined to explain certain functions for every category of users.
• Custom size regulation is available to crop the picture using the computer mouse. In some cases, it is a more convenient solution than entering the required parameters for a quick lookup.
• Minimum filters and settings are presented to adjust the picture without using other applications.
• A standard set of sizes is introduced to facilitate cropping. The user can choose one of the proposed sizes and avoid entering parameters and custom settings. The picture will be changed automatically.

BelVG specialists dedicated lots of attention and effort to the adaptive design. The whole tool functionality is available with the screen sizes and doesn’t require a long scroll. The buttons and fields are aligned and do not overlap each other or any other details.

Cropper works as a separate tool, but Rue du Cadre is planning to integrate it into Framer. In that case, it would be possible for a user to upload a photo into Framer, adjust it using the Cropper instruments, and create a custom frame. As a result, the user will be able to order a printed picture already placed in an individual frame.

Price rule adjustment and website support

Rue du Cadre doesn’t have a loyalty program, but each product including custom ones has its discount depending on the number of items in the order. Buying 2+ identical items, a customer receives a 10% discount, 5+ items give a 15% discount, and so on. When a user creates an item in Framer and sets the quantity of 5, the tool calculates the price with a 15% discount. The order is added to the cart with the same price. If the user decides that they want 4 frames instead of 5, they don’t need to create a new order in Framer. They can change the quantity in the cart, and the price will be recalculated automatically to a 10% discount, even though such a custom frame doesn’t exist in a PrestaShop catalog. We set up synchronization of all these data transfers via the API.

As the website had lots of modules, our team also held some tech support tasks such as bug fixing and compatibility solutions. We added cross-sell and best-sell sections, adjusted the check-out by adding new payment methods, and installed the Quick View module. This extension allows customers to look at the product and place it in the cart from a popup window without opening a full product page and reloading a catalog.