The Products component displays a list of products on any page or template. It supports filtering, sorting, pagination, and optional image galleries, making it suitable for category pages, featured product sections, search results, or custom product listings.

Component Options

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

  • start - Starting offset for pagination. Default: 0.
  • 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.
  • manufacturer_id - Filter by manufacturer ID. Default: null.
  • vendor_id - Filter by vendor ID. Default: null.
  • order - Field used for sorting. Options: product_id, price, date_added, date_modified.
  • direction - Sorting direction. Options: asc, desc.
  • taxonomy_item_id - Filter by taxonomy (category, collection, etc.).
  • include_image_gallery - Include product gallery images. Useful for hover image swap. Default: true.
  • product_id - Filter by one or more product IDs. Accepts single value or comma‑separated list (e.g., 1,2,3).
  • search - Search term to filter products by name or description.
  • slug - Filter by product slug. Accepts single value or comma‑separated list (e.g., slug-1,slug-2).
  • related - Display products related to a specific product. Value must be the product_id of the reference product.

Component Properties

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

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

These properties repeat for each product returned by the component.

HTML Example

<div data-v-component-products 
     data-v-limit="10" 
     data-v-page="2" 
     data-v-order="price"
     data-v-direction="asc"
     data-v-include_image_gallery="false">

    <div class="product-card" data-v-product>
        <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>$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>

This example loads 10 products from page 2, without including the image gallery. Each product is rendered inside the data-v-product block.