Shipping summary component
Introduction
ShippingSummary is a Livewire component that shows a concise overview of the customer's chosen delivery method and, when required, the shipping address or recipient name. It mirrors the design of the checkout sidebar in Figma and updates automatically when other checkout components emit events.
Public properties
| Property | Type | Description |
|---|---|---|
$carrierId | int|null | Current shipping carrier ID. When null, no carrier is selected. |
$currentCurrency | string | ISO currency code used for price formatting. |
Note
shippingTypeis no longer passed as a public property—the component derives the type (deliveryvswarehouse) from the selected carrier.
Listeners
| Event | Method | Payload |
| -------------- | ----------------- | ------- | ---------------- |
| setCarrierId | updateCarrierId | int | null $carrierId |
Browser events emitted
| Event | Purpose |
|---|---|
accordion-open | Opens the corresponding accordion (e.g., Shipping Method or Shipping Address) so the user can make edits. |
Computed properties (getters)
| Getter | Returns | Purpose |
| -------------------------------- | ------- | ---------------------------------------------------------- | ------------------------------------------------------- |
| isDelivery | bool | true when the carrier type equals delivery. |
| isWarehouse | bool | true when the carrier type equals warehouse. |
| shippingTypeLabel | string | null | Localised label (e.g., "Delivery", "Pickup"). |
| recipientName | string | null | Customer's full name when warehouse shipping is used. |
| hasCompleteAddressData | bool | Indicates whether all required address fields are present. |
| formattedShippingAddressString | string | null | A single-line, human-friendly address (used in the UI). |
Usage
@livewire('cart.shipping-summary', [ 'carrierId' => $checkout->carrierId,
'currentCurrency' => $currentCurrency, ])
Accessibility
- The component uses ARIA live regions (
aria-live="polite") to announce real-time updates. - All action buttons include descriptive
aria-labels sourced fromaccessibility.phptranslations.
Related files
- PHP class:
app/Http/Livewire/Cart/ShippingSummary.php - View:
resources/views/livewire/cart/shipping-summary.blade.php - Shared trait:
app/Http/Livewire/Cart/Traits/ShippingDataHelper.php
Updated for Laravel 10, Livewire 2, Alpine 2, and Tailwind 3.