Login

Magento Frontend UI Components

  • Create a module

  • Add a block template to the layout

  • Style a block template (alternative)

  • Create the most basic UI Component

    Free Preview

  • Alternate UI Component JSON syntax

    Free Preview

  • UI Component initialization

  • UI Component defaults properties

  • Binding data from UI Components to KnockoutJS

  • Create a KnockoutJS template

  • Fallbacks & overrides of UI Component properties

  • Debug UI Components with uiRegistry

  • Use ViewModel functions for separation of concerns

  • Understand Knockout observables, tracks & reactivity

  • Update UI Component with model data

  • Use Underscore helper functions

  • Subscribe to Knockout observables

  • Access UI Component properties with template literals

  • Create computed properties with Knockout

  • Add or override UI Component methods

  • Override an existing UI Component template

  • Override a UI Component template with static path mapping

  • Create and render a child UI Component

  • Create and render UI Component regions & children

  • Filter and query UI Components

  • Import an external property value into a UI Component

  • Listen for changes of UI Component properties

  • Export a property value to another UI Component

  • Change load ordering of UI Components

  • Implement UI Component dynamic properties

  • Style a block template