Products Component

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

&lt;div data-v-component-products 
     data-v-limit=&quot;10&quot; 
     data-v-page=&quot;2&quot; 
     data-v-order=&quot;price&quot;
     data-v-direction=&quot;asc&quot;
     data-v-include_image_gallery=&quot;false&quot;&gt;

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

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