Skip to main content

Rental Overview

Rental overview

General usage​

To render the Rental Overview, place this HTML on a specific part of the page:

<x-topi-rental-overview></x-topi-rental-overview>

And tell topi Elements about the contents of the cart using JavaScript:

topi.cartItems = [
  {
    price: {
      currency: "EUR",
      gross: 119000,
      net: 100000,
      taxRate: 1900,
    },
    quantity: 1,
    sellerProductReference: {
      reference: "muster1",
      source: "SAP",
    },
  },
];

Placements​

This element is designed to be used on a single page:

Usage on Payment selection page​

Exactly as described in General usage.

Possible states​

StateWhat it looks like rendered
Cart can be checked out with topiRental overview when cart can be fully checked out
Cart has items that cannot be checked out with topi or has non-rentable (purchase-only) itemsRental overview when cart is mixed

Toggling behaviour​

Gif showing clicks on various tenures like 6 months and 12 months

Price calculations​

The rental prices are grouped into the rental tenures (e.g. 6, 12, 24, 36 months). For example, if these were in the cart:

  • Item A
    • 6 months price: 600
    • 12 months price: 300
    • 24 months price: 150
    • 36 months price: 100
  • Item B
    • 6 months price: 6000
    • 12 months price: 3000
    • 24 months price: 1500
    • 36 months price: 1000

Then the aggregated prices shown in the element under each tenure toggle will be calculated as follows:

  • 6 months: 600 + 6000 = 6600
  • 12 months: 300 + 3000 = 3300
  • 24 months: 150 + 1500 = 1650
  • 36 months: 100 + 1000 = 1100

Options​

themeConfig.primaryColor​

You can configure the primary color that is used in the Rental Overview at time of instantiation of the library:

const topi = new TopiElements({
  themeConfig: {
    primaryColor: "#002bff",
  },
});