Skip to content

Flex Components#

The Flex Component introduces a modern approach to crafting user interface components for Miva’s Page Builder, offering developers a streamlined method to create dynamic elements without the need for extensive coding. Designed to enhance the user experience, it furnishes a rich library of administrative UI components like input fields, selectors, and image pickers, empowering developers to fashion reusable components effortlessly within JavaScript.

A flex component serves as the foundation for various website features, including hero sections, sliders, text segments, promotional banners, embedded videos, and more. Each component is equipped with developer-defined properties, enabling non-technical users to customize content and appearance seamlessly via Miva’s intuitive Page Builder interface.

All of Miva’s native flex components can be found at our GitHub repository: https://github.com/mivaecommerce/flex-components

Components Structure#

The Flex Component comprises five essential elements:

  1. Flex Configuration File (flex.json): This file encompasses configurable settings defined by the component developer. These settings are natively integrated into Miva’s Page Builder, allowing users to personalize each component easily.

  2. JavaScript: The JavaScript associated with the component facilitates its functionality, ensuring seamless operation and interaction.

  3. CSS: The CSS styles associated with the component provide the necessary visual styling to ensure consistency and aesthetic appeal.

  4. Initialization Template: This template is output once during component initialization, regardless of the number of times the component is utilized on the page.

  5. Instance Template: The instance template contains HTML or template code that needs to be output for every occurrence (instance) of the component.

Understanding Flex Components#

Flex Component Architecture

Importing & Exporting Flex Components#

Flex components can be exported via the Miva admin and saved as component-name.tar.bz2. Managed components cannot be edited within the admin. Component templates are also available via the MMT command line tool.

To install a new component it must be added via the admin under User Interface > Flex Components. To package and install a component follow these steps:

  1. Navigate to the Flex Component Directory: Open a command line terminal and navigate to the directory containing your Flex component files. Use the cd command to move into the appropriate folder.

  2. Create the Tar.bz2 File: Once inside the Flex component directory, execute the following command, replacing flex_component with the desired name for your tar.bz2 file:

    tar -cjf flex_component.tar.bz2 .

    This command compresses all files and directories within the current directory (.) into a single tar.bz2 file named flex_component.tar.bz2.

  3. Import into Miva: After creating the tar.bz2 file, proceed to import it into Miva. Navigate to “User Interface” -> “Flex Components” in the Miva admin interface and locate the “Upload Component” option. Upload the newly created tar.bz2 file, and once successfully imported, your updated Flex component will be available for use in Miva’s Page Builder.

Leveraging Web Components#

The native MMX Flex Components leverage Web Components as the underlying structure for outputting HTML, CSS, and JavaScript. Here’s why:

  • Modern Web Technologies with Broad Browser Support: Web Components harness contemporary web technologies while ensuring compatibility across various browsers.
  • Native Encapsulation: With Web Components, multiple versions of the same component can coexist on a single page without conflicts in HTML, CSS, or JavaScript, thanks to native encapsulation.
  • JavaScript-Centric Development: As the primary development language, JavaScript streamlines the creation and management of Flex Components, facilitating efficient development workflows.

Github Repository#

For more information and resources, you can refer to the Flex Components GitHub repository.