Developer Videos
Page Builder - Developer Series
Why Web Components
10.05.00 +
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.
Video Length: 2.10 minutes
How to Build a Web Component
10.05.00 +
An overview on how to build a basic web componentVideo Length: 1.33 minutes
Flex Component Overview
10.05.00 +
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.Video Length: 1.31 minutes
Flex Component Config
10.05.00 +
Page Builder uses the flex.json file to define the components 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.
Video Length: 1.30 minutes
Working with Flex Properties
10.05.00 +
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. Video Length: 2.22 minutes
Importing & Exporting Flex Components
10.05.00 +
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
Video Length: 1.18 minutes
MMX Web Components
10.05.00 +
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.
Video Length: 1.40 minutes
MMX Base
10.05.00 +
The mmx-base web component is the foundation of all the mmx web components.Video Length: 1.40 minutes
MMX Example
10.05.00 +
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 Video Length: 2.27 minutes