Renders a single product: image gallery, price (with tax and formatted variants), stock info, add-to-cart / buy URLs and manufacturer/vendor data.

Usage

<div data-v-component-product data-v-slug="product-19">
  <h1 data-v-product-name></h1>
  <img src="" data-v-product-image alt="Product image">
  <span data-v-product-price_formatted></span>
  <a href="" data-v-product-add_cart_url>Add to cart</a>
</div>

On a product detail page you can omit the options - the component reads the product from the page URL automatically.

Settings

  • data-v-product_id - render a specific product by id (default url)
  • data-v-slug - render by slug (default url)
  • data-v-status - 1 = enabled, default 1
  • data-v-product_variant_id - preselect a variant (price and options follow it)
  • data-v-variant / data-v-variant_price / data-v-promotion / data-v-points / data-v-stock_status / data-v-rating / data-v-reviews - include that extra data
  • data-v-language_id / data-v-site_id - language and site, default to current
  • data-v-image_size - xlarge, large, medium, thumb, default large

Item fields

data-v-product-name, data-v-product-content, data-v-product-excerpt, data-v-product-image, data-v-product-images (gallery), data-v-product-url, data-v-product-price / data-v-product-price_tax / data-v-product-price_formatted, data-v-product-old_price*, data-v-product-add_cart_url, data-v-product-buy_url, data-v-product-manufacturer_name, data-v-product-vendor_name and all other product columns map to elements with data-v-product-*.