Magento 2 Custom Feature Development for Vinduesgrossisten

Custom Price Rule for Each Storefront

Each country store on the website has its currencies and mechanisms of product cost forming. As a result, we had to adjust unique price rules for each of them while migrating.

• Denmark is the main market for the company, and the Danish krone is considered a basic default currency. To keep product costs synchronized on all the storefronts, we implemented an everyday conversion. For example, every morning, when the exchange rate is updated, the price in Danish krone is converted into euros, and the new numbers are displayed on the German site.
• Value Added Tax, or VAT, differs from state to state. And Vinduesgrossisten works within Germany and Denmark, which are EU members, Norway, which is a European Economic Area state, and Iceland belongs to a European Free Trade Association. To display the final product price correctly, our dev team configured independent VAT calculations for each store.
• The EU has a law that regulates discount implementation. According to it, a business owner has to take the lowest price in the past 30 days and use it as the original one for applying the discount. The law was passed to prevent companies from speculating during big sales. BelVG adjusted the German and Dahish site mechanism to consider this restriction while calculating such prices.

• Iceland law also has a restriction rule for businesses that apply loyalty programs. It states that only those clients who have joined the special store’s program can benefit from discounts. Our team came up with a solution to still promote lower prices. During promotions, we show the price with a discount as the main one on the product page. And then send several pop-up reminders at different steps of the order so customers wouldn’t forget to join a program. All they need to do is check a relevant box when confirming the order.
• The Norwegian store also underwent some customization that concerned the product price calculation. The state has a special Environment Compensation Tax to encourage citizens to use higher-quality materials, doors, and windows while building houses. The more heat-saving a product is, the lower tax is imposed. That’s why we implemented a dynamic cost of this tax that is calculated and shown on the checkout according to the product characteristics.

Theme Development

As Vinduesgrossisten had already worked with the webstore on the Magento platform, they had an already developed theme that met their criteria. However, our team reworked it to suit M2 and new business requirements. We also added some special features that enriched the user experience.

Dynamic Blocks

Vinduesgrossisten has multiple offline outlets and online consultants in four different countries. The company decided to vary their working hours based on the state, day of the week, national holidays, and common store schedule to operate effectively. BelVG suggested introducing dynamic blocks into each storefront so clients can easily navigate both through outlet and specialist working hours.

Managers can set up working hours from the admin panel every day of the week. If the outlet is open, the site displays green banners with the time range and contact numbers. If it’s closed, the banners automatically change to red ones and indicate the next working day.

Window and Door Configuration Tool

Vinduesgrossisten wanted to have a very special feature that would set the store apart from its competitors. The idea was to create a product configuration tool. Not only would it allow changes to the item, but also would it momentarily display them on the screen. Mostly, they concern the shape, dimension, content, and color of the product. That’s when BelVG came up with a custom solution for a window and door configuration tool.

We took the Mageworx Custom Options module as the basis and reworked it deeply to suit the specific business needs. During the customization, we added the following:

• An option that generates a different price for the same paint depending on the implementation zone: internal, external, or the same for both sides.
• Automatic conservation of all implemented changes in the URL that allows sharing the link with the already configured product.
• A special color option that allows one to choose any author’s color from the palette with the color picker.
• Warning message for some categories that are configurable within the admin panel and warns about the peculiarities of the selected setting.

Layout Customizer

Visually, the configuration tool is divided into two parts: the product scheme that changes during the customization, and the menu itself, where the desired characteristics are set. Technically, these are also two different integrated tools. The menu for selecting characteristics is a highly customized Mageworx Custom Options module. And the scheme is a completely custom solution made by our team and called Layout Customizer.

Even though visually the scheme of the product resembles a drawing, it’s not. It’s a dynamic scheme that is always in the creation process. And all the changes implemented in the settings are immediately displayed. The scheme is converted into the image format only when a customer saves the product and adds it to the cart.

When a user sets up characteristics, certain instructions are sent to the browser. For example, to draw a line from A to B. The browser only has to reflect this on the user’s device, regardless of whether it is a computer, tablet, or cell phone. In addition to dimensions and specifications, Layout Customizer can reflect changes in the color of glasses and windows, both outside and inside.

Speed Optimization

Search engines pay a lot of  attention to a website’s loading speed while forming search results. That’s why our QA team always looks for ways to improve this indicator. Both huge and creative work was done to hold a speed optimization for the Vinduesgrossisten webstore.

When we came to the final stage of developing the window and door configuration tool, it was a heavy custom solution that consumed a lot of traffic. As it includes many functions and characteristics, it used to take a relatively long time for the initial product price to load. And the first purchase sum displayed for a few seconds equaled zero. This delay harmed the store’s position in the Google search results as the engine saw the difference between a price in the catalog and the price on a product page.

The BelVG team used Server Side Rendering to solve this problem. Initially, all the configurator tool functionalities were handled at the frontend. They included a scheme drawing, characteristic menu loading, and price calculation. We decided to copy the work logic to the backend. As a result, we were able to simply load a pre-prepared HTML file when a user opened the product page. This manipulation allowed us to fixate the price and reduce the loading speed. The website’s search engine ranking has significantly improved.

Ordering Process Customization

Vinduesgrossisten works with multiple suppliers and manufacturers. Online stores operate throughout several European countries. Such a diverse market needs custom solutions to be handy both for supplies and customers. Thus, our team introduced a couple of significant improvements to the website regarding order placement and processing.

Split Order

Vinduesgrossisten cooperates with several manufacturers, most of them specialize in particular materials. That’s why when a user places an order, the system divides it into several sub-orders for different the manufacturers. The division is visible only the admin panel.

When the company turned to us, such orders were divided manually. When manager saw an order, they divided it into suborders and chose the factories. It took significant time, so BelVG was asked to develop an automatic system for that.

We came up with a Split Order feature. It automatically divides the order into several ones choosing the preferable manufacturer. After, the store manager sees an original order and the generated suborders. They can monitor production, shipment, and any other process. The client continues to see the only order.

Master Key

Vinduesgrossisten is aimed to meet the requests of each customer. For those who order many doors, the company has introduced the possibility of adding a master key to the order.

It’s a universal key that fits all doors in the house. It will only be possible if they have the same type of locks, the product design doesn’t matter. In that case, the manufacturer can adjust the cylinders in each door according to the same principle, and they will be opened with the only key. This was the reason for a special price rule implementation. The item cost is calculated according to the door amount, even if only one key is ordered. This is explained by the fact that lock cylinders are the ones that need special adjustments to fit the key, not vice versa.

The opportunity to order a master key is automatically offered to every customer who adds two or more doors with the same lock type to the shopping cart. When the customer proceeds to checkout, a notification pops up offering to order a master key. If the customer agrees, the item is automatically saved to the cart. Since this moment, the information has been added to the right order, so the manufacturer gets the master key details as a separate product.