Why Web Components#
Runtime: 2:10
Miva Page Builder utilizes web components to create reusable custom elements for a Miva Store. The Flex components in Miva build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Flex Component Overview#
Runtime: 1:31
Web Components are a core part of Page Builder and flexible enough to output HTML/CSS/JS in any format. Miva leverages Web Components as the structure in which to output the code by utilizing the MMX Web Component architecture that our team has developed.
Flex Component Config#
Runtime: 1:30
Page Builder uses the flex.json file to define the component’s properties and other settings. The JSON object contains 4 required definitions including code, name, version and the resource group code to assign the defined CSS and JS files.
Working with Flex Properties#
Runtime: 2:22
Properties are the settings an end user will change to modify the content for each component. This includes content focused properties such as adding text to a banner, or uploading an image for a hero image on the homepage.
Importing & Exporting Flex Components#
Runtime: 1:18
Flex Components cannot directly be edited via the Miva admin interface like other areas of the software. In order to modify a flex component you first need to export it which will give you a component-name.tar.bz2 file. Components can be viewed and exported under User Interface -> Flex Components.
MMX Web Components#
Runtime: 1:40
The native Miva Flex Components are built using the MMX Web Component framework built by Miva. The MMX Web Component framework is a combination of web components that power the native Miva Flex Components. The MMX framework uses a mixture of JavaScript methods to access the data from the Flex Components as well as CSS variables for dynamically applying styles.
MMX Example#
Runtime: 2:27
An example of a flex component using the MMX Web component architecture that helps highlight the fundamental touchpoints of a very basic flex & mmx web component.