Cart & Summary

Manage shopping cart items, display order summaries, and offer discount codes using Flowbite Blade e-commerce block components.

Default Shopping Cart

imac image

$1,499

PC system All in One APPLE iMac (2023) mqrq3ro/a, Apple M3, 24" Retina 4.5K, 8GB, SSD 256GB, 10-core GPU, Keyboard layout INT
playstation image

$598

Sony Playstation 5 Digital Edition Console with Extra Blue Controller

Order summary

Original price
$7,592.00
Savings
-$299.00
Store Pickup
$99
Tax
$799
Total
$8,191.00
Proceed to Checkout
or Continue Shopping

Blade code

<x-fwb.blocks.ecommerce.shopping-cart />

Custom Shopping Cart

Your Bag

imac image

$1,499

PC system All in One APPLE iMac (2023) mqrq3ro/a, Apple M3, 24" Retina 4.5K, 8GB, SSD 256GB, 10-core GPU, Keyboard layout INT
playstation image

$598

Sony Playstation 5 Digital Edition Console with Extra Blue Controller

Order summary

Original price
$7,592.00
Savings
-$299.00
Store Pickup
$99
Tax
$799
Total
$8,191.00
Proceed to Checkout
or Continue Shopping

Blade code

<x-fwb.blocks.ecommerce.shopping-cart title="Your Bag" />

Default Order Summary

product
PC system All in One APPLE iMac (2023)

x1

$1,499

product
Sony Playstation 5 Digital Edition

x2

$598

product
Apple Watch SE (2nd Gen)

x3

$799

Original price
$6,592.00
Savings
-$299.00
Store Pickup
$99
Tax
$799
Total
$7,191.00
Return to shopping

Blade code

<x-fwb.blocks.ecommerce.order-summary />

Custom Order Summary

Review your order

product
PC system All in One APPLE iMac (2023)

x1

$1,499

product
Sony Playstation 5 Digital Edition

x2

$598

product
Apple Watch SE (2nd Gen)

x3

$799

Original price
$6,592.00
Savings
-$299.00
Store Pickup
$99
Tax
$799
Total
$7,191.00
Return to shopping

Blade code

<x-fwb.blocks.ecommerce.order-summary title="Review your order" />

Default Discount

Blade code

<x-fwb.blocks.ecommerce.discount />

Custom Discount

Get 10% OFF your first order!

Sign up for our newsletter and receive an exclusive discount code.

Discount code:
WELCOME10
Start Shopping

Blade code

<x-fwb.blocks.ecommerce.discount
    title="Get 10% OFF your first order!"
    description="Sign up for our newsletter and receive an exclusive discount code."
    code="WELCOME10"
    buttonText="Start Shopping"
    buttonHref="/products"
/>

Component Properties

Shopping Cart x-fwb.blocks.ecommerce.shopping-cart

PropTypeDefaultDescription
title string Shopping Cart Section heading for the shopping cart.
summary slot - Named slot to replace the default sidebar with order summary and voucher form.
slot slot - Default slot to replace the cart item list.

Order Summary x-fwb.blocks.ecommerce.order-summary

PropTypeDefaultDescription
title string Order summary Section heading for the order summary.
totals slot - Named slot to replace the default price breakdown and total.
actions slot - Named slot to replace the default "Return to shopping" and "Send the order" buttons.
slot slot - Default slot to replace the order items list.

Discount x-fwb.blocks.ecommerce.discount

PropTypeDefaultDescription
title string Get 5% OFF your order! Discount banner heading.
description string Use our exclusive discount... Description text for the discount offer.
code string SAVE5NOW Discount code displayed with a copy-to-clipboard button.
buttonText string Shop Now Label for the call-to-action button.
buttonHref string # URL for the call-to-action button.
actions slot - Named slot to replace the default button.
slot slot - Default slot for additional content below the discount section.