Product Sticky Bar

Open source

Sticky add-to-cart bars — a pinned purchase bar with variant, quantity and add-to-cart.

resources/views/blocks/product-sticky-bar-bottom.blade.php Blade

@props([
    'name' => 'Aero Knit Running Shoe',
    'price' => '$148.00',
    'comparePrice' => '$180.00',
    'image' => null,
    'rating' => 4.5,
    'reviewCount' => 128,
    'description' => 'A featherweight everyday trainer with a breathable engineered-knit upper, responsive foam midsole, and a grippy outsole tuned for road and track alike.',
    'variants' => null,
    'action' => '#',
])

@php
    // Variant options (e.g. size). Plain strings so the block renders standalone
    // without bundling product data; the consumer passes their own array.
    $variants ??= ['XS', 'S', 'M', 'L', 'XL'];

    // The Alpine seed defaults the variant to "M" when present, else the first.
    $defaultVariant = in_array('M', $variants, true) ? 'M' : ($variants[0] ?? '');

    // `$image` is an optional label for the decorative tinted placeholder so the
    // block ships without binary assets; null keeps the icon-only fallback.
@endphp

<section
    x-data="{ qty: 1, variant: @js($defaultVariant) }"
    data-slot="product-sticky-bar-01"
    {{ $attributes->merge(['class' => 'relative bg-background text-foreground']) }}
>
    {{-- Product hero excerpt --}}
    <div class="mx-auto grid max-w-5xl grid-cols-1 gap-8 px-4 py-12 sm:py-16 md:grid-cols-2 md:items-center md:gap-12">
        <div
            class="relative flex aspect-square items-center justify-center overflow-hidden rounded-lg bg-muted"
            role="img"
            aria-label="{{ __($name) }}"
        >
            <svg class="size-28 text-muted-foreground/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M3 7l9-4 9 4-9 4-9-4Z" />
                <path d="M3 7v10l9 4 9-4V7" />
                <path d="M12 11v10" />
            </svg>
            @if (filled($image))
                <span class="absolute bottom-4 end-4 text-sm font-medium uppercase tracking-wide text-muted-foreground">{{ __($image) }}</span>
            @endif
        </div>

        <x-ui.card class="flex flex-col gap-4 border-none bg-transparent p-0 shadow-none">
            @if ($comparePrice)
                <div>
                    <x-ui.badge variant="secondary">{{ __('Sale') }}</x-ui.badge>
                </div>
            @endif

            <h1 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($name) }}</h1>

            <div class="flex flex-wrap items-center gap-4">
                <x-ui.rating :value="$rating" readOnly size="sm" />
                <span class="text-sm font-medium text-foreground">{{ number_format((float) $rating, 1) }}</span>
                <span class="text-sm text-muted-foreground">{{ trans_choice('(:count review)|(:count reviews)', (int) $reviewCount, ['count' => number_format((int) $reviewCount)]) }}</span>
            </div>

            <div class="flex items-baseline gap-4">
                <span class="text-3xl font-semibold tracking-tight">{{ $price }}</span>
                @if ($comparePrice)
                    <span class="text-xl text-muted-foreground line-through">{{ $comparePrice }}</span>
                @endif
            </div>

            <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($description) }}</p>
        </x-ui.card>
    </div>

    {{-- Filler content so the sticky behaviour is demonstrable in the preview --}}
    <div class="mx-auto max-w-5xl px-4 pb-16">
        <x-ui.separator class="mb-8" />
        <h2 class="text-xl font-semibold tracking-tight">{{ __('Product details') }}</h2>
        <div class="mt-4 grid grid-cols-1 gap-y-4 text-sm leading-relaxed text-muted-foreground sm:grid-cols-2 sm:gap-8">
            <p class="text-pretty">{{ __('Engineered for daily mileage, the breathable knit upper moulds to your foot while the foam midsole returns energy on every stride. A reinforced heel counter locks you in without weighing you down.') }}</p>
            <p class="text-pretty">{{ __('The grippy rubber outsole is tuned for both road and track, and a moisture-wicking lining keeps things cool over distance. Machine washable and built to hold its shape wash after wash.') }}</p>
        </div>
    </div>

    {{-- Sticky purchase bar --}}
    <div class="sticky bottom-0 z-30 border-t border-border bg-card/95 backdrop-blur">
        <form
            method="POST"
            action="{{ $action }}"
            class="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:gap-4"
        >
            @csrf
            <input type="hidden" name="quantity" x-bind:value="qty" />
            <input type="hidden" name="variant" x-bind:value="variant" />

            {{-- Thumbnail + compact title/price --}}
            <div class="flex min-w-0 items-center gap-4">
                <span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground" aria-hidden="true">
                    <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 7l9-4 9 4-9 4-9-4Z" />
                        <path d="M3 7v10l9 4 9-4V7" />
                    </svg>
                </span>
                <div class="flex min-w-0 flex-col">
                    <span class="truncate text-sm font-medium text-foreground">{{ __($name) }}</span>
                    <span class="flex items-baseline gap-2 text-sm">
                        <span class="font-semibold text-foreground">{{ $price }}</span>
                        @if ($comparePrice)
                            <span class="text-sm text-muted-foreground line-through">{{ $comparePrice }}</span>
                        @endif
                    </span>
                </div>
            </div>

            {{-- Controls: variant + quantity + add to cart --}}
            <div class="flex flex-col gap-4 sm:ms-auto sm:flex-row sm:items-center sm:gap-4">
                <label class="flex items-center gap-2 text-sm text-muted-foreground">
                    <span class="shrink-0">{{ __('Size') }}</span>
                    <x-ui.select size="sm" name="variant-select" x-model="variant" class="w-24" aria-label="{{ __('Select size') }}">
                        @foreach ($variants as $option)
                            <option value="{{ $option }}">{{ __($option) }}</option>
                        @endforeach
                    </x-ui.select>
                </label>

                {{-- The hidden `quantity` input above posts the value; the stepper only
                     drives the block's `qty` state through x-model. --}}
                <x-ui.number-field
                    variant="stepper"
                    size="md"
                    x-model="qty"
                    :min="1"
                    :max="10"
                    :label="__('Quantity')"
                    class="w-fit"
                />

                <x-ui.button type="submit" class="w-full sm:w-auto">
                    <x-slot:icon>
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <circle cx="9" cy="21" r="1" />
                            <circle cx="20" cy="21" r="1" />
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
                        </svg>
                    </x-slot:icon>
                    {{ __('Add to cart') }}
                </x-ui.button>
            </div>
        </form>
    </div>
</section>

Installation

terminal

php artisan ui:add blocks/product-sticky-bar-bottom

Installs these dependencies automatically:

card button badge rating separator select number-field

Registry contract

Install confidence

php artisan ui:add blocks/product-sticky-bar-bottom writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.1
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/product-sticky-bar-bottom.blade.php

Registry dependencies

card button badge rating separator select number-field

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

product-sticky-bar-bottom.md

# Brok UI block: Product Sticky Bar (`product-sticky-bar-bottom`)

A product page excerpt — square image placeholder, title, rating, price with optional compare-at, and description — followed by filler detail copy and a sticky bottom purchase bar that spans the width. The translucent, blurred bar carries a small thumbnail, the compact product title and price, a size variant select, a minus/value/plus quantity stepper, and a primary add-to-cart button; it stacks to a full-width button on mobile.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/product-sticky-bar-bottom
```

## Render it

```blade
<x-blocks.product-sticky-bar-bottom />
```

## Props

- `name` (string, default `Aero Knit Running Shoe`) — Product name.
- `price` (string, default `$148.00`) — Current price, pre-formatted.
- `compare-price` (string, default `$180.00`) — Original price shown struck through; falsy hides the sale badge.
- `image` (mixed|null, default `null`) — Optional label rendered over the decorative image placeholder.
- `rating` (float, default `4.5`) — Average star rating value.
- `review-count` (int, default `128`) — Number of reviews shown next to the rating.
- `description` (string, default `A featherweight everyday trainer with a breathable engineered-knit upper, responsive foam midsole, and a grippy outsole tuned for road and track alike.`) — Product description shown in the hero excerpt.
- `variants` (mixed|null, default `null`) — Size/variant option strings for the select; null falls back to a default XS–XL sample set.
- `action` (string, default `#`) — Form submission URL for the add-to-cart POST.

## Use when

- Showing a product page excerpt above filler detail copy with a persistent, translucent bottom bar that carries a thumbnail, compact price, a size select, a quantity stepper and an add-to-cart button.
- Use when the add-to-cart action must stay reachable while the shopper scrolls a longer product page.

## Avoid when

- Needing a self-contained modal purchase flow instead of a page with a bottom bar; use product-quick-view-modal or product-quick-view-gallery instead.

## Rules

- Render the installed block with `<x-blocks.product-sticky-bar-bottom />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/product-sticky-bar-bottom
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/product-sticky-bar-bottom.json

Ask about Product Sticky Bar in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Showing a product page excerpt above filler detail copy with a persistent, translucent bottom bar that carries a thumbnail, compact price, a size select, a quantity stepper and an add-to-cart button.
Use when the add-to-cart action must stay reachable while the shopper scrolls a longer product page.

Avoid when

Needing a self-contained modal purchase flow instead of a page with a bottom bar; use product-quick-view-modal or product-quick-view-gallery instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: product excerpt (image, title, rating, price) filler detail copy sticky bottom bar thumbnail and compact price size select quantity stepper add-to-cart submit button

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.product-sticky-bar-bottom />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.