Extension Points

Introduction to Extension Points

Extension points are predefined locations within a module where developers can inject custom React components. This strategy allows you to extend and customize the functionality and UI of different modules without modifying their core code. Whether you’re working with a Checkout module or another part of the platform, extension points provide a flexible way to adapt the module to your specific needs while maintaining its stability and integrity.

By using extension points, engineer can confidently make changes to the module’s UI and UX without impacting the core functionality. For example, you might insert a promotional banner, add custom actions, or display dynamic content at key points in the user flow.

Example: Checkout Extension

Let’s consider a Checkout extensions as an example. You could inject a custom component at an extension point defined within a Cart:

import { defineExtensions } from '@vtex/checkout';

const CustomComponent = () => {
  return <div>Custom content goes here!</div>;
};

export default defineExtensions({
  'cart.cart-item.footer': CustomComponent,
});

In this example, the CustomComponent is rendered at the footer of each cart item. This could be used to display additional product information, promotional content, or dynamic data relevant to the cart item.

Extension Points as a Contract

Extension points act as a contract between your custom code and the module. This ensures that the core of the module remains stable, and changes to the extension points are made in a way that avoids unexpected breaking changes. The contract guarantees that the extension points will persist and function as expected, even as the module evolves through updates. This stability allows developers to build and deploy customizations with confidence.

Security of Extension Points

Because extension points are designed to be stable over time, they are carefully managed to avoid breaking changes. Modules maintain these extension points as part of their public contract, ensuring that updates to the module will not unintentionally disrupt existing extensions. This approach ensures that custom components can continue to function reliably across updates, safeguarding the integrity of the core module while still allowing for flexibility and customization.

Available Modules and Future Plans

Currently, the Checkout and Sales App modules support this extension point strategy. Future releases will expand this capability to other modules, allowing for broader customization across the platform.

Best Practices for Using Extension Points

1. Respect the Contract: When developing custom components, remember that the extension points act as a contract with the module. Avoid directly modifying core elements outside of the extension point, ensuring your customizations remain stable over time.

2. Handle Dynamic Data: If your component relies on dynamic data (e.g., API calls), ensure that you handle loading states properly, such as using skeletons or placeholders, to prevent layout shifts and improve the overall user experience.

3. Modular Styles: Scope your styles to prevent conflicts with the module’s existing UI. Consider using CSS Modules or other techniques to keep your styles isolated and avoid unintended overrides.

Summary

Extension points provide a flexible and secure way to customize modules by injecting React components at predefined locations. By treating extension points as a contract, you can safely extend a module’s functionality without introducing breaking changes. As the platform evolves, this strategy will extend to other modules, offering even more opportunities for customization.

For more details on the available extension points, explore the Checkout extensions documentation.