fragment

---

The fragment property allows users to select an existing Page Fragment from the store. Fragments enable modular, reusable content by letting admins choose from pre-built Mvia templates (managed under User Interface → Fragments in Miva).

fragment Definition

{
  "code": "banner_fragment",
  "prompt": "Choose a Banner Fragment",
  "type": "fragment",
  "required": true,
  "preview_property_selector": ".banner-wrapper"
}

Supported Fields

Field	Type	Required	Description
code	string	Yes	Unique key used in l.settings:instance.
prompt	string	Yes	Label shown in the admin interface.
type	string	Yes	Must be "fragment".
required	boolean	No	If true, the user must select a fragment.
preview_property_selector	string	No	Used to target preview DOM nodes.
visibility_conditions	object	No	Used for conditional UI logic.

l.settings:instance Structure

:banner_fragment:value=homepage_banner

The selected value is the Fragment Code, not the content itself.

Template Usage

Add the fragment value to the DOM as an HTML attribute:

<mvt:assign name="l.settings:fragment_code" value="l.settings:instance:fragment:value" />
<mmx-fragment-api
    data-fragment="&mvte:fragment_code;"
    data-store="&mvte:store:code;"
></mmx-fragment-api>

This will give you access to use the fragment code in the Flex Component JavaScript.

JavaScript Access

getFragmentCode() {
  return this?.data?.advanced?.settings?.fragment_code?.value;
}
renderProductFragmentPart(product) {
  const fragmentCode        = this.getFragmentCode();
  const fragmentContent = this.renderProductFragment({product, fragmentCode});

  if (MMX.valueIsEmpty(fragmentContent)){
    return '';
  }

  return /*html*/`
    <div part="product-fragment product-fragment__${MMX.encodeEntities(fragmentCode)}">
      ${fragmentContent}
    </div>`;
}

If your component is using the MMX Base JavaScript helper functions, you can use the renderProductFragment function to dynamically add the content to the client-side preview.

defaults Definition

You can specify a default selected fragment inside the defaults block:

"defaults": {
  "banner_fragment": {
    "value": "homepage_banner"
  }
}

This ensures a fragment is selected even if the user does not configure one manually.

Best Practices

• Use required: true if a fragment must always be populated.
• Always verify that the fragment code exists in the store.
• Modularize repeated content (banners, notices, CTA blocks) into Fragments for easy reuse.
• Combine with visibility logic to change which fragment displays based on other settings.