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.

  • 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.

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.