| title | description | last_updated | template | redirect_from | |
|---|---|---|---|---|---|
Oryx: Integrating components |
Oryx Components are build as web components |
Sept 20, 2023 |
concept-topic-template |
|
Oryx components are framework agnostic, so they can be used in other web frameworks.
Oryx components are build as web components. Web components are a suite of standard web technologies supported by most browser vendors. The purpose of web components is to provide components in isolation so that they can easily integrate with other web technologies.
Thanks to the web-component-based architecture, Oryx components integrate with any web framework. You can integrate them with component frameworks, such as React, Vue.js, or Angular.
You can also integrate Oryx components inside frontend meta frameworks, like Next.js, Nuxt.js, or Astro.
{% info_block infoBox %} While the integration of Oryx components is relatively straightforward, Spryker does not provide production-ready integration boilerplate code.
The integration of the server-side rendering part might be quite complex. {% endinfo_block %}
Oryx can render content from other systems, like a headless content management system (CMS). More importantly, Oryx components can render inside the content provided by a CMS.
When rich content, like markdown, contains Oryx components, the components are rendered as is together with the content. This allows for rich content integrations, like rendering a carousel of upsell products in the middle of storytelling content.
You can use Oryx components inside rich content from an external CMS. The content is rendered inside Oryx, but any Oryx components inside the content are rendered transparently. This does not require any integration effort.
The following example shows Oryx components next to standard markdown.
## Markdown example with an integrate Oryx Product images
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<oryx-product-images sku="086_30521602"></oryx-product-images>
Duis aute irure dolor in reprehenderit in voluptate velit...The next example shows the integration of compositions with layout. We use the product list component with a configuration to render it in a carousel.
## Markdown example with a carousel of products
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<oryx-product-list layout="carousel"></oryx-product-product-list>
Duis aute irure dolor in reprehenderit in voluptate velit...