Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

Reference

Links

Whenever possible, avoid placing onClick handlers directly on anchor elements (<a>) in drop-in components, such as product or category pages, as this results in accessibility issues and broken browser behavior. Problems include:

  • Right-click > Open in New Tab results in blank pages.
  • Middle-click (open in background tab) won’t work as expected.
  • Keyboard navigation and screen readers may not trigger the link correctly.

Instead, follow the route pattern to provide composable and accessible navigation.

How it works

Components accept a routeX function as a prop. The function receives a data model (a product, for example) and returns a URL. Internally, it’s used like this:

<a href={routeProduct?.(product) ?? '#'}>...</a>

This lets developers customize routing logic per storefront while preserving link semantics.

Example — Component-Side

In your component (a PLP item, for example):

The routeProduct prop must be optional and default to a # or an non-functional element like a div if not provided.

type Props = {
routeProduct?: (product: ProductModel) => string;
};
function ProductCard({ product, routeProduct }: Props) {
return (
<a href={routeProduct?.(product) ?? '#'}>
<div>{product.name}</div>
</a>
);
}

Example — Storefront-Side

In the storefront integration (commerce-cart.js or commerce-plp.js, for example):

import { rootLink } from '@adobe/commerce-url-utils';
provider.render(ProductList, {
routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`),
});