🎧️ 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 ⬇️

Members:

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

Tagged:

Comments

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

    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",
        }),
      ])