storefront

README

Storefront Block

Copy this package as source when an application needs the storefront prototype.

Copy:

• props.go
• storefront.templ
• controls.templ
• helpers.go
• placeholders.go

Do not copy generated files:

• *_templ.go

After copying:

1. Change the package name only if the destination package uses a different name.
2. Run templ generate ./....
3. Run .ui8px checks for the destination app.

The package is intentionally self-contained and depends only on UI8Kit.

Documentation

Overview

templ: version: v0.3.1001

templ: version: v0.3.1001

Index

• Constants
• func BenefitsBar(items []BenefitItem) templ.Component
• func CartSummaryCard(props CartSummary) templ.Component
• func CategoryGrid(items []CategoryCard) templ.Component
• func CollectionStrip(items []CollectionCard) templ.Component
• func FilterCard(props FilterPanel) templ.Component
• func Footer(props FooterProps) templ.Component
• func Hero(props HeroProps) templ.Component
• func InspirationPanel(props InspirationCard) templ.Component
• func NewsletterCard(props NewsletterProps) templ.Component
• func PriceRangeControl(props PriceRange) templ.Component
• func ProductShowcase(props ProductPreview) templ.Component
• func QuantityStepper(props QuantityProps) templ.Component
• func RightRail(props RailProps) templ.Component
• func StorefrontPage(props StorefrontPageProps) templ.Component
• func SwatchGroup(label string, items []SwatchItem, selectedValue string) templ.Component
• type Action
• type BenefitItem
• type CartItem
• type CartSummary
• type CategoryCard
• type CollectionCard
• type DetailRow
• type FilterPanel
• type FooterGroup
• type FooterProps
• type HeroProps
• type ImageRef
• type InspirationCard
• type NewsletterProps
• type PriceRange
• type ProductPreview
• type QuantityProps
• type RailProps
• type StorefrontPageProps
• type SwatchItem

Constants

const (
	PlaceholderHeroInterior = "" /* 650-byte string literal not displayed */
	PlaceholderSofa         = "" /* 586-byte string literal not displayed */
	PlaceholderTable        = "" /* 462-byte string literal not displayed */
	PlaceholderLamp         = "" /* 466-byte string literal not displayed */
	PlaceholderVase         = "" /* 674-byte string literal not displayed */
	PlaceholderChair        = "" /* 518-byte string literal not displayed */
	PlaceholderProduct      = "" /* 582-byte string literal not displayed */
)

Functions

func BenefitsBar

func BenefitsBar(items []BenefitItem) templ.Component

func CartSummaryCard

func CartSummaryCard(props CartSummary) templ.Component

func CategoryGrid

func CategoryGrid(items []CategoryCard) templ.Component

func CollectionStrip

func CollectionStrip(items []CollectionCard) templ.Component

func FilterCard

func FilterCard(props FilterPanel) templ.Component

func Footer

func Footer(props FooterProps) templ.Component

func Hero

func Hero(props HeroProps) templ.Component

func InspirationPanel

func InspirationPanel(props InspirationCard) templ.Component

func NewsletterCard

func NewsletterCard(props NewsletterProps) templ.Component

func PriceRangeControl

func PriceRangeControl(props PriceRange) templ.Component

func ProductShowcase

func ProductShowcase(props ProductPreview) templ.Component

func QuantityStepper

func QuantityStepper(props QuantityProps) templ.Component

func RightRail

func RightRail(props RailProps) templ.Component

func StorefrontPage

func StorefrontPage(props StorefrontPageProps) templ.Component

func SwatchGroup

func SwatchGroup(label string, items []SwatchItem, selectedValue string) templ.Component

Types

type Action

type Action struct {
	Label     string
	Href      string
	AriaLabel string
	Icon      string
}

type BenefitItem

type BenefitItem struct {
	Icon        string
	Title       string
	Description string
}

type CartItem

type CartItem struct {
	Title    string
	Subtitle string
	Price    string
	Image    ImageRef
}

type CartSummary

type CartSummary struct {
	Title          string
	CountLabel     string
	Items          []CartItem
	TotalLabel     string
	Total          string
	CheckoutAction Action
	ViewCartAction Action
}

type CategoryCard

type CategoryCard struct {
	Title string
	Count string
	Href  string
	Image ImageRef
}

type CollectionCard

type CollectionCard struct {
	Label       string
	Title       string
	Description string
	Href        string
	Image       ImageRef
}

type DetailRow

type DetailRow struct {
	Label string
	Value string
}

type FilterPanel

type FilterPanel struct {
	Title         string
	ResetLabel    string
	CategoryLabel string
	CategoryValue string
	MaterialLabel string
	Materials     []SwatchItem
	Price         PriceRange
	ColorLabel    string
	Colors        []SwatchItem
	ShowAllAction Action
}

type FooterGroup

type FooterGroup struct {
	Title string
	Links []Action
}

type FooterProps

type FooterProps struct {
	BrandName string
	Copyright string
	Groups    []FooterGroup
}

type HeroProps

type HeroProps struct {
	Kicker       string
	Title        string
	Description  string
	Primary      Action
	SlideCurrent string
	SlideTotal   string
	Previous     Action
	Next         Action
	Image        ImageRef
}

type ImageRef

type ImageRef struct {
	Src string
	Alt string
}

type InspirationCard

type InspirationCard struct {
	Title       string
	Description string
	Action      Action
	Image       ImageRef
}

type NewsletterProps

type NewsletterProps struct {
	Title       string
	Description string
	Placeholder string
	SubmitLabel string
}

type PriceRange

type PriceRange struct {
	Label    string
	MinLabel string
	MaxLabel string
	Value    string
}

type ProductPreview

type ProductPreview struct {
	Badge          string
	Name           string
	Price          string
	OldPrice       string
	Description    string
	Gallery        []ImageRef
	MainImage      ImageRef
	ColorsLabel    string
	Colors         []SwatchItem
	SelectedColor  string
	Quantity       QuantityProps
	AddAction      Action
	FavoriteAction Action
	Details        []DetailRow
}

type QuantityProps

type QuantityProps struct {
	Label      string
	Value      string
	MinusLabel string
	PlusLabel  string
}

type RailProps

type RailProps struct {
	Cart        CartSummary
	Filter      FilterPanel
	Inspiration InspirationCard
	Newsletter  NewsletterProps
	Socials     []Action
}

type StorefrontPageProps

type StorefrontPageProps struct {
	Hero        HeroProps
	Categories  []CategoryCard
	Collections []CollectionCard
	Benefits    []BenefitItem
	Product     ProductPreview
	Rail        RailProps
	Footer      FooterProps
}

type SwatchItem

type SwatchItem struct {
	Label    string
	Value    string
	Class    string
	Selected bool
}