product

---

The product property creates product batch list in the Page Builder admin interface. It allows users to select a single product, storing both the product code and a default product details inside l.settings:instance.

product Definition

{
  "code": "featured_product",
  "prompt": "Featured Product",
  "type": "product",
  "required": false,
  "placeholder": "Search for a product"
}

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 "product".
required	boolean	No	If true, a product 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

:featured_product:product_code=PRODUCT_CODE
:featured_product:product:active=1
:featured_product:product:agrpcount=0
:featured_product:product:base_price=1
:featured_product:product:cancat_id=0
:featured_product:product:catcount=1
:featured_product:product:code=PRODUCT_CODE
:featured_product:product:cost=2
:featured_product:product:descrip=ENCODED_PRODUCT_DESCRIPTION
:featured_product:product:disp_order=3
:featured_product:product:dt_created=1234567890
:featured_product:product:dt_updated=1234567890
:featured_product:product:formatted_base_price=%241%2C.00
:featured_product:product:formatted_cost=%242%2C.00
:featured_product:product:formatted_price=%241%2C.00
:featured_product:product:formatted_retail=%241%2C.00
:featured_product:product:formatted_weight=0.01+lb
:featured_product:product:id=3
:featured_product:product:inv_active=0
:featured_product:product:link=https%3A%2F%2FDOMAIN_NAME.com%2FPRODUCT_SLUG.html
:featured_product:product:name=ENCODED_PRODUCT_NAME
:featured_product:product:original_active=1
:featured_product:product:pgrpcount=0
:featured_product:product:price=1
:featured_product:product:quantity=0
:featured_product:product:retail=1
:featured_product:product:sku=PRODUCT_SKU
:featured_product:product:taxable=1
:featured_product:product:weight=0.01

Template Usage

<mvt:assign name="g.code" value="l.settings:instance:featured_product:product_code" />
<mvt:do name="l.product" file="g.Module_Library_DB" value="Product_Load_Code(g.code)" />

<h2>&mvte:instance:featured_product:product:name;</h2>
<p>&mvte:instance:featured_product:product:formatted_price;</p>
<a href="&mvte:instance:featured_product:product:link;">View Product</a>

JavaScript Access

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var product = instance.featured_product.product;
  console.log(product.name); // "Sample Product"
  console.log(product.price); // 24.99
</script>

defaults Definition

"defaults": {
  "featured_product": {
    "product_code": "ABC123"
  }
}

Best Practices

• Use required: true to enforce product selection in the admin UI.
• Use injected product values for display-only components.
• Use product_code with <mvt:do> if you need full database lookups (inventory, variants, etc.).
• Use placeholder to guide the user to search by name or code.
• Combine with imagetype, link, or texteditor for product callouts and CTAs.

Complete Example

{
  "code": "featured_product",
  "prompt": "Featured Product",
  "type": "product",
  "placeholder": "Search by name or SKU",
  "required": true
}

Output

:featured_product:product_code=ABC123
:featured_product:product:name=Sample Product

Template

<h3>&mvte:instance:featured_product:product:name;</h3>
<p class="price">&mvte:instance:featured_product:product:formatted_price;</p>
<a href="&mvte:instance:featured_product:product:link;">Buy Now</a>