Displays a list of products

Component products settings

Options

  • start - Start offset for pagination, default 0
  • limit - Number of products to display, 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 - Filter by manufacturer id, default null
  • vendor_id - Filter by vendor id, default null
  • order_by - Order by, allowed: 'product_id', 'price', 'created_at', 'updated_at' (anything else is ignored)
  • direction - Order direction, allowed: 'asc', 'desc' (lowercase)
  • taxonomy_item_id - Filter by taxonomy,
  • product_image - Include product gallery images, useful 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,
  • search_boolean - Enable boolean full-text search mode
  • like - Alternative LIKE-based search filter
  • variant / variant_price / promotion / points / stock_status / rating / reviews - Set to include that extra product data
  • image_size - Product image size ('xlarge', 'large', 'medium', 'thumb'), default 'medium'
  • 404 - Flag a 404 when a page beyond the results is requested

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-product_image="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>