Component products

Displays a list of products

Options

start - Start offset for pagination, default 0
limit - Number of products to displat, default 4
page - Page number, the number of pages is the total number of products divided by limit
language_id - Language id for name and content, default is current language
site_id - Site id to show products for, default is current site
type - Custom product type, default is 'product'
manufacturer_id - Fitler by manufacuter id, default null
vendor_id - Fitler by vendor id, default null
order - Order by, available options: 'product_id', 'price', 'date_added', 'date_modified'
direction - Order direction, available options: 'asc', 'desc'
taxonomy_item_id - Filter by taxonomy,
include_image_gallery - Include product images, usefull for image swap on hover, default true
product_id - Filter by product_id can be a single value or a comma delimited list eg: 1,2,3
search - Filter products by name or description that contain the search term
slug - Filter by product slug can be a single value or a comma delimited list eg: slug-1,slug-2,slug-3
related - Filter products and show only related products, related must be the product_id of the product to which to show related products,

Properties

Product - data-v-product - repeatable element for each product to display
- └── name - data-v-product-name - Product name
- └── content - data-v-product-content - Product content
- └── price - data-v-product-price - Product price
- └── image - data-v-product-image - Product image
- └── images - data-v-product-images - Product gallery
- └── url - data-v-product-url - Product url

Html example

<div data-v-component-products data-v-limit="10" data-v-page="2" data-v-include_image_gallery="0">

    <div data-v-product>
        <span data-v-product-name>Product name placeholder</span>
        <span data-v-product-price>$100</span>
        <img src="" data-v-product-image>$100</span>
        <a href="#" data-v-product-url>View product</a>
    </div>
</div>