Flex Component

---

A flex component can be exported to a series of text files. It gets deployed by compressing the folder as a tar.bz2 file and uploading it to the Miva admin.

flex.json Configuration File

In the root folder of your component, you’ll have a flex.json file which defines the component name, code, and version as well as paths to scripts, CSS, initialization/instance templates, and properties.

Property Definitions

Property	Definition
code	The flex component code
name	The flex component name
type	The flex component type: component or library
managed	True / False will add the component to the Miva managed components
version	The flex version number
resourcegroup_code	This is the Miva resource group the CSS/JS will get output from.
initialization_template	Path to the initialization template. This is a .mvt text file that can contain Miva template logic.
instance_template	Path to the instance template. This is a .mvt text file that can contain Miva template logic.
properties	Array of JSON objects for the properties
the component will provide in admin for the end user
advanced_properties	Array of JSON objects for the properties
that will appear in the advanced tab
defaults	Object containing the default values for all properties
#property-default-values)
category	must be one of the following: image, image-slider, image-across, featured-product, product-carousel, category-carousel, text-utility, text-banner, image-text, video, text-editor. This is used to categorize the component in Page Builder.
images	This allows you to include images
#component-images) in your component that will get added to the server/store upon import.

Sample flex.json

{
    "code": "ex-basic",
    "name": "Example: Basic",
    "type": "component",
    "managed": false,
    "version": "1.0.0",
    "resourcegroup_code": "ex-basic",
    "initialization_template": "src/templates/init.mvt",
    "instance_template": "src/templates/instance.mvt",
    "scripts": [
        {
            "filepath": "src/js/ex-basic.js",
            "resource_code": "ex-basic",
            "attributes": [
                {
                    "name": "type",
                    "value": "module"
                }
            ]
        }
    ],
    "styles": [
        {
            "filepath": "src/css/ex-basic.css",
            "resource_code": "ex-basic",
            "attributes": [
                {
                    "name": "type",
                    "value": "text/css"
                },
                {
                    "name": "media",
                    "value": "all"
                },
                {
                    "name": "rel",
                    "value": "stylesheet"
                }
            ]
        }
    ],
    "properties": [
        {
            "code": "text",
            "prompt": "Display Text",
            "type": "text"
        }
    ],
    "defaults": {
        "text": {
            "value": "This is the default text"
        }
    }
}

Instance Template Example

<hello-world data-text="&mvte:text;"></hello-world>

Initialization Template Example

<mvt:item name="head" param="js:flex_helloworld" />

<template id="hello-world">
    <mvt:item name="head" param="css:flex_helloworld" />
    <span class="hello-world-text"></span>
</template>

JavaScript Example

class HelloWorld extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: "open"});
    }

    connectedCallback() {
        const template = document.getElementById("hello-world");
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        this.shadowRoot.querySelector(".hello-world-text").textContent = this.getAttribute("data-text");
    }
}

customElements.define("hello-world", HelloWorld);

CSS Example

.hello-world-text {
    color: red;
    font-size: 32px;
}

Component Images

Its possible to package up and include image files in your component. Upon install of the flex component into a store, any images defined will get copied to the destination path specified.

Parameter	Definition
source_filepath	The path of the image in the flex folder locally.
destination_filepath	Destination for image to be copied on the Miva server.

The default location for images on a Miva store is graphics/store_id/image_name. A common use case for this could be including placeholder images for your component into the flex component file that gets imported.

"images": [
    {
        "source_filepath": "src/images/placeholder__1440x580.jpg",
        "destination_filepath": "graphics/%STORE_ID%/image1.jpg"
    },
    {
        "source_filepath": "src/images/placeholder__335x240.jpg",
        "destination_filepath": "graphics/%STORE_ID%/image2.jpg"
    },
    {
        "source_filepath": "src/images/placeholder__728x320.jpg",
        "destination_filepath": "graphics/%STORE_ID%/image3.jpg"
    }
]