About the Hyvä EDS Integration

This page provides some more details on the EDS and Hyvä integration.

Shared tailwindcss styles

Both EDS pages as well as Adobe Commerce pages share tailwindcss-based styles.

This approach maintains a consistent visitor experience in addition to reducing development time. Tailwindcss being an industry standard allows quick onboarding of developers.

For consistency, the main menu and the footer links are maintained in AEM and shown on both the EDS pages and the Adobe Commerce pages.

Mini Cart

The mini-cart included on EDS pages uses the same data from the browser local-storage that is also used by Hyvä. This keeps the user experience consistent. It has the added benefit of being fast because it can be rendered without any additional API calls.

The same approach can also be used to add more customer session-specific user interface components to EDS pages.

Embedding AEM Content on Adobe Commerce Pages

Any EDS content can be embedded on Adobe Commerce pages as needed.
This is possible using a PHP view model or a CMS widget. A PageBuilder content-type proof of concept was developed, too, but it is not used in this demo.
One use case for embedding AEM content in Adobe Commerce pages could be to provide additional product descriptions maintained in Google Docs or Microsoft Word via AEM / EDS.

In this demo, only the main menu and the footer on Adobe pages are examples of embedded content.

Rendering Products on EDS pages

If needed, product carousels from Hyvä could also be embedded as EDS blocks on pages maintained in AEM.
This would require including Alpine.js on EDS pages so product swatches are functional without re-implementing them with vanilla JavaScript.