How do you turn complex foundation planning into a seamless online experience? Our client, LogFoot, needed a tool that would allow customers to independently “build” their terrace, receive precise material calculations, and add them directly to their shopping cart.
Today, we’re sharing how our team developed this high-performance product configurator (Terrassen Builder) in just 40 hours.
The Challenge
Our goal was to simplify complex engineering calculations for the end user. The project involved three main hurdles:
- Mathematical Precision: Translating complex geometric formulas (distribution of support legs, beams, and cross-beams) into clean code while adhering to strict building constraints (e.g., 60–150 cm spacing).
- Seamless Integration: The configurator had to calculate requirements and automatically fetch the correct products from the WooCommerce catalog to update the cart in real-time.
- Tight Timeline: The entire functional module needed to be developed and tested within approximately one work week (30–40 hours).
Our Approach
We worked as a dedicated team (PM, WordPress Engineer, QA) using a robust tech stack: WordPress, WooCommerce, ACF, TCPDF (for PDF exports), custom PHP classes, and native JavaScript.
- From Wireframe to Interface: We started by outlining the logic and UI structure, ensuring every step of the multi-step flow was intuitive for the user, based on the provided Figma design.
- “Smart” Math Engine: We built a custom PHP engine to handle terrace geometry. For example, when a user inputs dimensions (e.g., 470 × 530 cm), the system automatically calculates the required quantity of support legs and beams based on professional construction standards.
- Automated Documentation: We implemented TCPDF for instant PDF generation. The user receives a detailed project summary on-screen, which is also sent via email after the checkout process.
- WooCommerce Integration: Using custom hooks, the system automatically calculates quantities and updates the cart, eliminating any manual effort for the customer.
AI as a Technical Accelerator
We combined ChatGPT for initial prototyping with Google AI Studio to act as a technical accelerator. This integration allowed us to:
- Architect PHP Blueprints: AI helped us structure complex PHP classes, reducing algorithm development time by 50%.
- System Stability: We built a more stable calculation engine with minimized logic loops and refined handling of edge cases to ensure 100% logic integrity.
Results
- Delivery Speed: AI-assisted engineering allowed us to blueprint the core class structure twice as fast as expected.
- High-Performance Execution: Optimized, native JavaScript logic resulted in a 35% faster response time within the configurator.
- 100% Logic Integrity: Refined algorithms handle 100% of tested user inputs without generating errors.
- Refined Commerce UX: A seamless “design-to-checkout” flow that boosted conversion confidence for custom orders.
💬 Do you have an idea for a complex technical solution? Let’s collaborate to turn your challenge into an efficient, sales-driving business tool. Reach out to us via LinkedIn.
We specialize in turning complex logic into high-performing, user-friendly business tools. Discover how we helped another client simplify technical calculations by building an intuitive mobile power estimator for wind turbines: Green Energy in Your Pocket: How We Simplified Complex Wind Turbine Power Estimation.
