Component product

Product Component

The Product Component renders one or more products on any page or template. Use it to display a single product detail, a product card, or a small product list (related products, featured items, etc.). Add the component by placing the data-v-component-product attribute on a container element.

Component Options

Add options as HTML attributes using the data-v-* syntax.

Option	Attribute	Description	Default
product id	`data-v-product_id`	Load a specific product by ID	URL detection (page param)
slug	`data-v-slug`	Load a product by slug	URL detection (page param)
limit	`data-v-limit`	Number of products to return	`4`
page	`data-v-page`	Page number for pagination	`1`
language id	`data-v-language_id`	Language for product name/content	Current language
site id	`data-v-site_id`	Site to load products from	Current site
type	`data-v-type`	Product type (custom types supported)	`product`
status	`data-v-status`	`1` = enabled, `0` = disabled	`1`
user group id	`data-v-user_group_id`	Use group pricing rules	`null`
product variant id	`data-v-product_variant_id`	Show a specific variant by default	`null`
include variants	`data-v-variant`	Include variant data (`true/false`)	`false`
include promotion	`data-v-promotion`	Include promotional price (`true/false`)	`false`
include stock	`data-v-stock_status`	Include stock status info (`true/false`)	`false`
image size	`data-v-image_size`	`xlarge`, `large`, `medium`, `thumb`	`large`
image resize	`data-v-image_resize`	`cs` = crop and resize, `c` = crop, `r` = resize, `s` = stretch	Site setting

Component Properties

Each product returned by the component is wrapped in an element marked with data-v-product. Use the data-v-product-* attributes inside that element to render product fields.

Core product fields

Property	Attribute	Description
name	`data-v-product-name`	Product title
slug	`data-v-product-slug`	Product slug
content	`data-v-product-content`	Full description
excerpt	`data-v-product-excerpt`	Short description
url	`data-v-product-url`	Product detail page URL
image	`data-v-product-image`	Featured image
images	`data-v-product-images`	Gallery images
price	`data-v-product-price`	Price without tax
price tax	`data-v-product-price_tax`	Price including taxes
price formatted	`data-v-product-price_formatted`	Formatted price with currency
price tax formatted	`data-v-product-price_tax_formatted`	Formatted price including taxes with currency
old price	`data-v-product-old_price`	Price before discount
old price tax	`data-v-product-old_price_tax`	Price before discount with tax
old price tax formatted	`data-v-product-old_price_tax`	Price before discount with taxes and currency
stock quantity	`data-v-product-stock_quantity`	Units in stock
stock status	`data-v-product-stock_status_id`	Stock status id/name
product id	`data-v-product-product_id`	Internal product id
product variant id	`data-v-product-product_variant_id`	Active variant id
has variants	`data-v-product-has_variants`	`true/false`
add to cart url	`data-v-product-add_cart_url`	URL to add product to cart
buy url	`data-v-product-buy_url`	Direct buy URL
manufacturer	`data-v-product-manufacturer_name`	Manufacturer name
vendor	`data-v-product-vendor_name`	Vendor name
created at	`data-v-product-created_at`	Creation timestamp
updated at	`data-v-product-updated_at`	Last update timestamp
pubDate at	`data-v-product-pubDate`	Publish date in RFC2822 format
modDate at	`data-v-product-modDate`	Last update in RFC2822 format

Additional available properties

The component exposes many more fields for advanced templates. Common additional fields include: sku; model; mpn; barcode; origin_country; weight, weight_type_id; length, width, height, length_type_id; tax_type_id; points; promotion_* fields; min_price / max_price for variants; reviews and rating; product_related; product_option and product_option_value; product_to_site (site visibility); price_formatted variants for tax/no-tax; pubDate and modDate. Use these when you need detailed product data or variant-aware pricing.

Example Usage

<div data-v-component-product
     data-v-slug="product-19"
     data-v-limit="1">

  <div class="product-card" data-v-product>
    <a href="" data-v-product-url>
      <img src="/placeholder.jpg" data-v-product-image alt="Product Image">
      <h3 data-v-product-name></h3>
    </a>

    <p data-v-product-excerpt></p>

    <div class="price">
      <span class="price-current" data-v-product-price_formatted></span>
      <span class="price-old" data-v-product-old_price_formatted data-v-if="product.old_price"></span>
    </div>

    <div class="actions">
      <a class="btn btn-outline" data-v-product-add_cart_url> Add to cart </a>
      <a class="btn btn-primary" data-v-product-buy_url> Buy now </a>
    </div>
  </div>

  <div data-v-if-not="products">
    <p>No products match your criteria.</p>
  </div>
</div>

Notes and Best Practices

Load by page context: On a product detail page you can omit data-v-product_id and data-v-slug; the component will detect the product from the page URL.
Variants and pricing: If your store uses variants, set data-v-product_variant_id or enable data-v-variant to surface variant-specific price and option fields.
Formatting: Use the formatted price attributes (*_formatted) to display currency symbol and decimals consistently.
Multisite and multilingual: Combine data-v-site_id and data-v-language_id to render site‑specific or language‑specific product content.

The Product component displays a single product on any page or template.

Component Options

Each option can be added as an HTML attribute using the data-v-* syntax.

product_id - Id of the product to display. Default: url (take id from the page get parameter).
slug - Slug of the product to display. Default: url (take slug from the page get parameter).
limit - Number of products to display. Default: 4.
page - Page number for pagination. Total pages = total products ÷ limit.
language_id - Language ID for product name and content. Default: current language.
site_id - Site ID to load products from. Default: current site.
type - Product type. Default: product. Useful for custom product types.
status - 1 = enabled, 0 = disabled, default 1. 'user_group_id' => null, // user group id to use to calculate promotional price 'product_variant_id' => null, // product variant id to display variant as default, for price and product options 'variant' => null, //[true, false] include variants 'variant_price' => null, //[true, false] include variants prices 'promotion' => null, //[true, false] include promotional price 'points' => null, //[true, false] include points 'stock_status' => null, //[true, false] include stock status info 'weight_type' => null, //[true, false] include weight type info 'length_type' => null, //[true, false] include length type info 'rating' => null, //[true, false] include rating average 'reviews' => null, //[true, false] include reviews count 'image_size' => 'large', //options: xlarge, large, medium, thumb - if null site settings is used 'image_resize' => null, //options: cs = Crop & resize, c = crop, r = resize, s = stretch - if null site settings is used

Component Properties

Inside the component, the following repeatable product properties are available. Each product is wrapped in an element marked with data-v-product.

name - data-v-product-name - Product name.
content - data-v-product-content - Product description or content.
price - data-v-product-price - Product price.
image - data-v-product-image - Main product image.
images - data-v-product-images - Product gallery images.
url - data-v-product-url - Product detail page URL.
product_id -
language_id -
name - slug content excerpt meta_title meta_description meta_keywords admin_id - id of admin user/author model sku upc ean jan isbn mpn barcode hs_code origin_country mid_code location stock_quantity - the number of products available in stock stock_status_id - stock status id, available, sold out, in one week etc image - featured product image manufacturer_id vendor_id requires_shipping - if physical product, needs shipping, for digital products should be set to false old_price - price before discount, if set should be bigger then current price and displayed with a strike out price - price without tax points - number points to buy with points tax_type_id material weight weight_type_id length width height length_type_id date_available type - custom product type, default product template - if product has a custom template to display the page views - number of views, used of analytics subtract_stock - if stock is substracted after a product is bought minimum_quantity - minimum quantity to allow adding to cart subscription_onetime - if product has subscriptions and the product can be bought as regular one time without subscription status - 1 enabled, 0 disabled sort_order created_at updated_at manufacturer_slug manufacturer_name vendor_slug vendor_name stock_status_name product_content - content in all languages for multi language stores product_image - product images gallery product_related - related products product_variant - product variants product_subscription product_attribute product_to_digital_asset product_discount product_promotion product_points product_option product_option_value option_value_content product_to_site - list of site id's where the product is enabled/visible images - list of image galelry add_cart_url buy_url add_wishlist_url add_compare_url manufacturer_url vendor_url product_variant_id price_tax - price with tax price_formatted - price without tax formatted with currency sign and decimals price_tax_formatted - price with tax formatted with currency sign and decimals price_price_currency promotion_tax promotion_formatted promotion_tax_formatted promotion_price_currency old_price_tax old_price_formatted old_price_tax_formatted old_price_price_currency min_price - if product has variants min price is the lowest price among variants min_price_tax - min price with tax min_price_formatted - min price with tax formatted with currency sign and decimals min_price_tax_formatted min_price_price_currency max_price - - if product has variants max price is the biggest price among variants max_price_tax max_price_formatted max_price_tax_formatted max_price_price_currency has_variants pubDate - publish date in RFC2822 format modDate - modification date in RFC2822 format

These properties repeat for each product returned by the component.

HTML Example

<div data-v-component-product
     data-v-slug="product-19" 
>

    <div class="product-card">
        <img src="/placeholder.jpg" data-v-product-image alt="Product Image">
        
        <h3 data-v-product-name>Product Name Placeholder</h3>
        <p data-v-product-content>Short description goes here...</p>
        
        <span class="price" data-v-product-price_tax_formatted>$0.00</span>
        
        <a href="#" data-v-product-url class="button">View Product</a>
    </div>
    
    <div data-v-if-not="products">
        <p>No products match your criteria.</p>
    </div>
</div>