Skip to main content
Version: 2.0.0

Components

Components are reusable feature modules in yui/components/*. They are the main building unit for storefront UX, and are usually assembled by page templates.

Component Scope​

A component can contain:

  • feature-level markup
  • display logic for already-prepared data
  • small interaction wiring (via included scripts or Alpine bindings already used by plugin patterns)

A component should not contain:

  • unrelated route control logic
  • duplicated versions of existing plugin components
  • large query-heavy logic that should be done in controllers/services

Current Component Domains​

  • yui/components/cart/*
  • yui/components/catalog/*
  • yui/components/checkout/*
  • yui/components/customer/*
  • yui/components/global/*
  • yui/components/header/*
  • yui/components/product/*

Real Components Used in Production​

  • cart summary/sidebar: yui/components/cart/summary.twig
  • checkout sections: yui/components/checkout/{form,items,sidebar,summary,shipping-methods}.twig
  • product presentation: yui/components/product/{media-simple,details-simple,prices-simple}.twig
  • customer account modules: yui/components/customer/account/*
  • global scripts/messages: yui/components/global/{scripts,messages,checkout-scripts}.twig

Component Design Rules​

  1. Keep input explicit. {% include '...' with {...} %} is preferred when variables are non-trivial.

  2. Keep naming domain-specific. Use folder names that match business domains (checkout, cart, customer).

  3. Keep overrides surgical. Override only the component you need; avoid copying full directory trees.

Example Inclusion Pattern​

{% include 'yui/components/cart/summary' with {
    items: items is defined ? items : []
} %}

When to Split into a Block​

Move code to blocks when:

  • it is reused by multiple components
  • it is a small rendering fragment (for example one totals line)
  • it should remain UI-fragment focused rather than feature-focused