category

---

The category property provides a category batch list in the Page Builder admin interface. It allows users to select a single category from the store, storing both the category code and its default data for use in templates or scripts.

category Definition

{
  "code": "featured_category",
  "prompt": "Select a Category",
  "type": "category",
  "required": false,
  "placeholder": "Search for a category"
}

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 "category".
required	boolean	No	If true, a category must be selected.
placeholder	string	No	Hint text displayed before selection.
preview_property_selector	string	No	Used to target preview DOM nodes.
visibility_conditions	object	No	Used for conditional UI logic.

l.settings:instance Structure

When a category is selected, the following structure is created in l.settings:instance:

:featured_category:category_code=CATEGORY_CODE
:featured_category:category:active=1
:featured_category:category:agrpcount=0
:featured_category:category:code=CATEGORY_CODE
:featured_category:category:depth=0
:featured_category:category:disp_order=2
:featured_category:category:dt_created=1234567890
:featured_category:category:dt_updated=1234567890
:featured_category:category:id=1
:featured_category:category:link=https%3A%2F%2FDOMAIN_NAME.com%2FCATEGORY_SLUG.html
:featured_category:category:name=CATEGORY_NAME
:featured_category:category:original_parent_id=0
:featured_category:category:parent_id=0
:featured_category:category:validated_parent_id=0

Template Usage

<h3>&mvte:instance:featured_category:category:name;</h3>
<a href="&mvte:instance:featured_category:category:link;">Shop Now</a>

Load Category Data

<mvt:assign name="g.cat_code" value="l.settings:instance:featured_category:category_code" />
<mvt:do name="l.category" file="g.Module_Library_DB" value="Category_Load_Code(g.cat_code)" />

JavaScript Access

<script>
  const instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  const category = instance.featured_category.category;

  console.log(category.code);  // "SUMMER-SALE"
  console.log(category.name);  // "Summer Sale"
  console.log(category.link);  // "/category/summer-sale.html"
</script>

defaults Definition

To pre-fill a category:

"defaults": {
  "featured_category": {
    "category_code": "SUMMER-SALE"
  }
}

This selects a category by code on initial load.

Best Practices

• Use required: true if the category selection is essential for rendering.
• Use the category object to display metadata without reloading it.
• Use category_code in <mvt:do> if you need to query additional fields like product count or description.
• Use placeholder to guide search input behavior in the admin UI.

Complete Example

{
  "code": "featured_category",
  "prompt": "Choose a Category",
  "type": "category",
  "placeholder": "Search by name or code",
  "required": true
}

Output

:featured_category:category_code=SUMMER-SALE
:featured_category:category:name=Summer Sale
:featured_category:category:link=/category/summer-sale.html

Template

<div class="featured-category">
  <h3>&mvte:instance:featured_category:category:name;</h3>
  <a href="&mvte:instance:featured_category:category:link;">Explore</a>
</div>