Eurofenster preisrechner kalkulator cen produktów z branży budowlanej

Firma Eurofenster z sidzibą w Wiedniu zajmuje się sprzedażą i montażem okien, drzwi i innych elementów budowlanych. W ofercie posiada szeroką gamę produktów a swoje usługi oferuje w dużej części kraju.

Napisany przeze mnie kalkulator cen dla firmy Eurofenster to rozbudowana aplikacja internetowa. Służy do wyliczania ceny ostatecznego produku na podstawie ustawionych parametrów a także obliczania rabatów, kosztów transportu i ostatecznie składania zamówienia w formie mailowej. To już kolejna iteracja konfiguratora cenowago jaką miałem okazję tworzyć. Pierwszą wersję napisałem kilka lat temu. Była stworzona w technologi Adobe Flex, która dzięki zastosowaniu w podstawie mechanizmu Adobe Flash pozwalała na uzyskanie przyjemnych dla oka i funkcjonalnych interfejsów użytkownika. Po kilku latach aplikacja nie straciła na funkcjonalności ale przez zastosowanie Flasha nie można było uruchamiać jej na urządzeniach mobilnych dlatego klient zlecił napaisanie nowej wersji. Projekt graficzny odświeżonej wersji powstał w firmie Webidea a ja byłem odpowiedzialny za napisanie całej aplikacji oraz przygotowanie wszystkich danych.

Konstrukcja strony zastosowane rozwiązania i kluczowe cechy

Eurofenster preisrechner - strona startowa
Podstawą do zbudowania tej aplikacji jest framework Backbone.js uzupełniony dodatkowym frameworkiem Marionette.js. Do konstrukcji zanagażowałem ponadto masę dodatkowych skryptów i blibliotek odpowiedzialnych m.in za przetwarzanie plików CSV, tworzenie komponentów interfejsu użytkownika a także warstwy biznesowej. Całość podzieliłem na moduły JavaScript AMD. Do ładowania modułów zastosowałem bibliotekę RequireJS, dzięki czemu mogłem w prosty sposób dołączać do modułów odpowiednie zależności i potrzebne biblioteki. Wszystkie dane niezbędne do pracy kalkulatora składowane są w statycznych plikach JSON oraz CSV, które ładują się w momencie kiedy są potrzebne. Aplikację od podstaw zbudowałem z uzwzględnieniem podejścia RWD (Responsive Web Design), dzięki czemu można ją bezproblemowo wyświetlać na komputerze jak i na ekranie smartfona lub tabletu. Strona w sposób płynny dostosowuje się do rozmiaru ekranu, a całośc starałem się zbudowac tak, aby dostarczyć podobne wrażenia podczas używania aplikacji na różnych urządzeniach.

Podsumowanie odnośniki i podstawowe informacje