Working with Components

Components are the reusable building blocks of every PeakCommerce page. You assemble pages — storefronts, checkout, payment, and customer / partner / CSR portal pages — by placing components onto them rather than editing monolithic HTML templates. Building a library of well-defined components means a change to a shared block (say your branded product card) updates consistently wherever it's used, and non-technical authors can build on-brand pages without writing markup. Browse and manage components in Content → Component Library.

What defines a component

Each component in the library has:

• Category — how it's grouped in the library (for example Storefront, Portal Widgets, Content, or a custom category your tenant defines). Categories are just labels for organizing the library; they don't restrict where a component can be used.

• Contexts — the editors (and therefore the page types) a component can be placed in: Storefront, Checkout, Customer Portal, Partner Portal, CSR Portal, and Payment Pages. A component can target one context or several.

• Source — System (built-in components that ship with PeakCommerce, such as the Product Card) or User (components created in your tenant).

• Status — whether the component is Active (available to place on pages) or inactive.

Components and the page editor

Pages are composed in PeakCommerce's visual editor, where each component appears as a block you can drop in, arrange, and configure. When you build or edit a page, the page's context determines which components are offered — a Storefront page surfaces Storefront-context components, a payment page surfaces payment-context ones, and so on. System components give you a ready-made starting set; user components let you reuse your own standardized blocks.

Things to watch

• Context, not category, controls availability. If a component isn't appearing on the page you're editing, check that its Contexts include that page's editor — not just that it's in a sensible category.

• A component must be Active to be placed. Inactive components stay in the library for editing but won't appear in the page editor's block list.

• System components can't be deleted, but you can build user components that adapt or extend them — for example a tailored product card. For tuning the built-in Product Card specifically, see Product Card Customizations.

See Creating a Component to add your own.