Release V6.10.0
🎨 Completely Updated Mobile Experience
With our configurators increasingly used on smartphones, it was time to give our mobile users a new experience. We tirelessly worked with our UI/UX team to make the best mobile user experience available.
Better Mobile Configurator UI
Currently, the UI for the Mobile is a little dated and should be upgraded to be more interactive with swipes. For example right now when you click to see an option you're talking to a full-screen view and when you're changing parameters you can't see them changing in the 3-D canvas at the same time. Below is a list of requests: One view with everything on the same page now pop up Allow for tapping the product (specific Mesh) will open the options related to the mesh Groups could be in some small icon Idea to have next and previous arrows to toggle between groups or options when entering the configurator some initial tooltips, tour icons/tooltips to indicate the key way to use the UI
2
🧹Configurator Widgets based on web components
Today we updated our configurator to use web components, replacing our react component system.
We have done this for several reasons, best explained by a copy and paste from the Mozilla developer's website here.
Web Components
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Concepts and usage
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
- Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
- Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
- HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.