Cart Rental Summary Label

General usage

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

<!-- cart mode -->
<x-topi-cart-rental-summary-label
  mode="cart"
></x-topi-cart-rental-summary-label>

<!-- product mode -->
<x-topi-cart-rental-summary-label
  mode="product"
  reference="muster1"
></x-topi-cart-rental-summary-label>

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",
    },
  },
  {
    price: {
      currency: "EUR",
      gross: 89900,
      net: 75546,
      taxRate: 1900,
    },
    quantity: 2,
    sellerProductReference: {
      reference: "muster2",
      source: "SAP",
    },
  },
];

Placements

This element is designed to be used on several pages:

• On the Cart page
• On the Payment selection page

Usage as summary for entire Cart

Exactly as described in the cart mode example in General usage.

Usage on every line item in the Cart

You can also use this element on every line item within the cart on the Cart page.

Pass a reference and mode attribute:

<!-- product mode -->
<x-topi-cart-rental-summary-label
  mode="product"
  reference="muster1"
></x-topi-cart-rental-summary-label>

If you have set cartItems and one of the items includes the one with the passed in reference, this element will render the quantity-aware rental price of that product.

Note: When in product mode, the element will not render the "Learn more" link as that visually clutters the Cart page (imagine a cart with 10 SKUs!).

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:

Options

mode (required)

Mode determines whether the instance of the element should render the rental price of a product or the whole cart.

mode	Use case	Description
cart	Render price based on all cart items
product	Render price based on a single product, accounting for quantity	Requires additional reference attribute

reference

Only applicable if mode is "product". (Ignored if mode is "cart".)

The reference will be used to find an item in the Cart and render the price for.