🎧️ Mining Dwarves 💖

Lauren Kulwicki

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

Members:

• @kasalgado
• Tim Körtgen
• @David Wischner
• @hardik.gajjar

https://github.com/spryker-community/oryx-dashboard

https://www.youtube.com/watch?v=cFV6gbGCYqk

Tobias Ouwejan

Few Oryx in 90 videos, also to customize components:

https://www.youtube.com/playlist?list=PLJooqCSo73Sj9r_632NRtr-O0zuY7eHPb

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()
  .withComponents([pieComponent])

Step 2: Register component inside the experience data

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

export const app = appBuilder()
  …

  .withProviders([
    provideExperienceData({
      merge: {
        selector: "home-hero",
        type: "after",
      },
      type: "oryx-pie",
    }),
  ])