Learn More Info

What is this element for?

This was initially an internal element that is rendered inside the "Learn more" modal, which is embedded in some of the other elements like the Product Rental Summary Label and the Rental Overview.

While this element continues to be embedded in other elements provided by this library, we've also made it available for you to place onto any part of the shopping journey, e.g. within your own modal or in an "About renting with topi" description tab on the Product detail page (PDP).

General usage

To render Learn More Info, place this HTML on a specific part of the page:

<!-- product mode -->
<x-topi-learn-more-info mode="product"></x-topi-learn-more-info>

<!-- cart mode -->
<x-topi-learn-more-info mode="cart"></x-topi-learn-more-info>

And tell topi Elements about the PDP item and/or the Cart items:

// required in 'product' mode
topi.pdpItem = {
  price: {
    currency: "EUR",
    gross: 119000,
    net: 100000,
    taxRate: 1900,
  },
  quantity: 1,
  sellerProductReference: {
    reference: "muster1",
    source: "SAP",
  },
};

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

By setting the mode, you are telling topi Elements to render an instance of this element using the price specific to either the product set by topi.pdpItem, or the entire cart's products set by topi.cartItems.

Placements

This element is designed to be used inside your own elements. Some possible placements:

• Inside your own modal on the PDP
• Inside a description tab on the PDP

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
cart	Render price based on all cart items
product	Render price based on the PDP item, accounting for quantity