Product Card

Examples

Preview
Code

<style>
  vviinn-product-card::part(custom-label-0 custom-label-content) {
    display: block;
  }
</style>
<vviinn-product-card
  custom-labels="UVP"
  add-to-basket-show="true"
  favorite-show="true"
  locale="en-US"
  deeplink="#"
  currency-sign="€"
  image-width="300"
  image-resolution-width="500"
  product-id="632083"
  product-title="Windlicht-Set"
  brand="MARILU"
  product-type="Accessoires > Gedeckter Tisch > Kerzen & Leuchter"
  price="8.9"
  base-price='{"price":2.23,"quantity":1,"measure":"Stk"}'
  sale-price="8"
  base-sale-price='{"price":2,"quantity":1,"measure":"Stk"}'
  image="https://cdn.vviinn.com/image/0/fit/400/0/ce/0/Z3M6Ly92dmlpbm4tY2F0YWxvZy1pbWFnZXMtcHJvZHVjdGlvbi9tZWRpYS50cmVuZHMuZGUvWkFCdDVQd2RkcUEtTDJKcGJHUXhMekEyTXpJd09ETXVhbkJuLmpwZw=="
>
  <div slot="vviinn-product-card-actions">
    <vviinn-vpr-button
      token="YOUR_READ_ONLY_TOKEN"
      product-id="YOUR_PRODUCT_ID"
      mode="continuity"
      locale="en-US"
      add-style="false"
      is-standalone="false"
    ></vviinn-vpr-button>
  </div>
</vviinn-product-card>

Partial content view with appended One-Click Discovery

Preview
Code

<vviinn-product-card
  add-to-basket-show="true"
  is-standalone="true"
  locale="en-US"
  deeplink="#"
  currency-sign="€"
  image-width="300"
  image-resolution-width="500"
  product-id="955098"
  product-title="Hängeleuchte GAETANO 1 (DH 38x150 cm)"
  brand="EGLO"
  price="99.0"
  sale-price="89.99"
  image="https://cdn.vviinn.com/image/0/fit/400/0/ce/0/Z3M6Ly92dmlpbm4tY2F0YWxvZy1pbWFnZXMtcHJvZHVjdGlvbi9tZWRpYS5vc3Rlcm1hbm4uZGUvcGhob3huVER5ZnMtTDJKcGJHUXhMekE1TlRVd09UZ3VhbkJuLmpwZw=="
  energy-certifications-string='[{"certificationClass":"A","classIconUrls":{"left":"https://cdn.vviinn.com/assets/certification/energy/AtoG/left/A.svg","right":"https://cdn.vviinn.com/assets/certification/energy/AtoG/right/A.svg"},"classRange":{"min":"A","max":"G"},"classLabelUrl":"https://energy-efficient-products.ec.europa.eu/sites/default/files/styles/embed_medium_2x/public/2024-04/sample-energy-label-with-numbers-new.png?itok=x7puJdbG","classDataSheetUrl":"https://www.roller.de/medias/sys_master/datasheets/datasheets/h7a/hc5/11687118700574/1328023300-P01.pdf","productType":"Tischleuchte"}]'
>
  <div slot="vviinn-product-card-actions">
    <vviinn-vpr-button
      token="YOUR_READ_ONLY_TOKEN"
      product-id="YOUR_PRODUCT_ID"
      mode="continuity"
      locale="en-US"
      add-style="false"
      is-standalone="false"
      append-sidebar-to-id="product-card-append-container"
    ></vviinn-vpr-button>
  </div>
</vviinn-product-card>
<div id="product-card-append-container"></div>

Partial content view (set mode)

Preview
Code

<vviinn-product-card
  is-set-mode="true"
  add-to-basket-show="true"
  is-standalone="true"
  locale="en-US"
  deeplink="#"
  currency-sign="€"
  image-width="300"
  image-resolution-width="500"
  product-id="309717"
  product-title="Sessel Buddy"
  brand="VITO"
  price="149.0"
  image="https://cdn.vviinn.com/image/0/fit/400/0/ce/0/Z3M6Ly92dmlpbm4tY2F0YWxvZy1pbWFnZXMtcHJvZHVjdGlvbi9tZWRpYS5vc3Rlcm1hbm4uZGUvVnRNRmtqWktFWFEtTDJKcGJHUXhMekF6TURrM01UY3VhbkJuLmpwZw=="
></vviinn-product-card>

Minimalistic view with manually hidden content

Preview
Code

<style>
  vviinn-product-card::part(brand),
  vviinn-product-card::part(product-type),
  vviinn-product-card::part(price-outdated) {
    display: none;
  }
</style>
<vviinn-product-card
  is-standalone="true"
  locale="en-US"
  deeplink="#"
  currency-sign="€"
  image-width="300"
  image-resolution-width="500"
  product-id="585101"
  product-title="Sideboard"
  brand="ELTON"
  product-type="Möbel > Schränke & Regale > Sideboards"
  price="599.0"
  sale-price="550.0"
  image="https://cdn.vviinn.com/image/0/fit/400/0/ce/0/Z3M6Ly92dmlpbm4tY2F0YWxvZy1pbWFnZXMtcHJvZHVjdGlvbi9tZWRpYS5vc3Rlcm1hbm4uZGUvU1A4YmlseTRGeW8tTDJKcGJHUXhMekExT0RVeE1ERXVhbkJuLmpwZw=="
></vviinn-product-card>