Calling Developers!
We are reenergizing our code contribution process! Learn More

🎧️ Mining Dwarves 💖

Lauren Kulwicki
Lauren Kulwicki (ex) Senior Community Manager Posts: 196 🪐 - Explorer
edited September 2023 in Hackathon

Thread for Team "Mining Dwarves" to discuss and post their results/slides ⬇️




  • Tobias Ouwejan
    Tobias Ouwejan Principal Frontend Architect Sprykee Posts: 8 🧑🏻‍🚀 - Cadet
    edited September 2023

    Few Oryx in 90 videos, also to customize components:

    An example to build a custom component:

    Step 1: Create component

    Create definition

    Put the definition in /pie/pie.def.ts

    import { componentDef } from "@spryker-oryx/utilities";
    export const pieComponent = componentDef({
      name: "oryx-pie",
      impl: () => import("./pie.component.js").then((m) => m.PieComponent),

    Create implementation

    Put the implementation in /pie/pie.component.ts

    import { LitElement, html } from "lit";
    export class PieComponent extends LitElement {
      render() {
        return html`pie...`;

    Provide component definition in app bootstrap

    The application doesn't know about the component, lets provide it:

    export const app = appBuilder()

    Step 2: Register component inside the experience data

    We add the <oryx-pie> component after the home hero component.

    export const app = appBuilder()
          merge: {
            selector: "home-hero",
            type: "after",
          type: "oryx-pie",