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>