Skip to main content

Product Rental Summary Label

General usage​

To render the Product Rental Summary Label, place this HTML on a specific part of the page:

<x-topi-product-rental-summary-label></x-topi-product-rental-summary-label>

And tell topi Elements about the PDP item:

topi.pdpItem = {
  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 several pages. Click on the link to see examples:

Usage on PDP page​

Product Rental summary label for PDP

If you're rendering this element on the PDP, you'll likely want the rental price to not change according to the quantity selected as this conforms to the typical ecommerce shop behaviour, and it is likely what your customers expect.

To render this element:

<x-topi-product-rental-summary-label></x-topi-product-rental-summary-label>

Then, to instruct the element to render the price for just 1 quantity of this item, set quantity: 1:

topi.pdpItem = {
  // ... other optional fields
  quantity: 1,
  sellerProductReference: {
    reference: "muster1",
    source: "SAP",
  },
};

Once you call this setter, topi Elements will fetch the data and visualize the data in the element for this item.

Usage on Cart page per line item (no longer supported)​

Functionality has moved

Previously, this element was also designed to be used per line item in the Cart page, where you could pass in a quantity and the element would display the price multiplied by the quantity.

This functionality now provided by the Cart Rental Summary Label element, so use that instead.

What happens when "Learn more" is clicked?​

Clicking on the "Learn more" link (which is semantically a button) will open a modal that provides the customer with more information about topi. The modal looks like this:

Learn more modal

What if I want the price to be multiplied by quantity?​

You can achieve this by passing in the right quantity:

topi.pdpItem = {
  // ... other optional fields
  quantity: 4,
  sellerProductReference: {
    reference: "muster1",
    source: "SAP",
  },
};

The displayed price will be the per unit price multipled by the quantity you've specified.

Note: If you'd like to use this element on the Cart page on every line item in the cart, you should use the Cart Rental Summary Label element instead. This is because you'd need to pass in multiple individual items, and calling the topi.pdpItem setter overrides the existing PDP item, whereas the Cart takes in a list of items that already reflect the line items explicitly.