Line Item
<sc-line-item></sc-line-item>
Line items are used to display a piece of information in the checkout form that contains currency (such as a price, total or subtotal). This is a low-level component used simply to display information - for more enhanced functionality (such as total and subtotal displaying) use those appropriate components.
- Preview
- Code
<sc-line-item><img src="https://placekitten.com/200/300" slot="image" /><span slot="title">Subscription </span><sc-quantity-select quantity="1" max="10" slot="description"></sc-quantity-select><span slot="price">$10.00</span><span slot="price-description">Monthly</span></sc-line-item><sc-divider style="--spacing: 20px;"></sc-divider><sc-line-item><img src="https://placekitten.com/200/300" slot="image" /><span slot="title">Subscription </span><sc-quantity-select quantity="1" max="10" slot="description"></sc-quantity-select><span slot="price">$10.00</span><span slot="price-description">Monthly</span></sc-line-item>
Product Line Item
The line item also accepts an image, as well as different components in different slots, so you can be creative with your markup to create and enhance UI.
- Preview
- Code
<sc-line-item><img src="https://placekitten.com/200/300" slot="image" /><span slot="title">Monthly Box of Kittens</span><sc-quantity-selectquantity="1"max="10"slot="description"></sc-quantity-select><span slot="price">$10.00</span><span slot="price-description">Monthly</span></sc-line-item>
Component Codex
Properties
Property | Description | Type | Default |
---|---|---|---|
currency | Currency symbol | string | |
price | Price of the item | string |
Slots
Slot | Description |
---|---|
currency | Used for the 3 character currency code. |
description | Line item description (below the title) |
image | Line item image |
price | Price amount, including currency sign. |
price-description | Description for the price (i.e. monthly) |
title | Line item title. |
Shadow Parts
Part | Description |
---|---|
base | The elements base wrapper. |
currency | Used for the 3 character currency code. |
description | Line item description (below the title) |
image | The image wrapper. |
price | Price amount, including currency sign. |
price-description | Description for the price (i.e. monthly) |
price-text | The price text. |
text | The text. |
title | The title. |
Used By
- sc-coupon-form
- sc-line-item-bump
- sc-line-item-shipping
- sc-line-item-tax
- sc-line-item-total
- sc-line-items
- sc-order
- sc-order-confirmation-details
- sc-order-confirmation-line-items
- sc-order-confirmation-totals
- sc-order-summary
- sc-product-line-item
- sc-subscription-next-payment
- sc-summary
- sc-upcoming-invoice
- sc-upsell-totals