StartPageRenderer

Start Page Renderer Usage

The start page is rendered using a JSON schema received from the Start Page API. The Start Page renderer requires a ProductGrid and an object of start page components. Let's start with a basic start page component.

Copy

Copied

const content = {
  title: "Hello I am a title",
};

const TitleComponent = ({ title }) => <h1>{title}</h1>;
<TitleComponent {...content} />;

Here we are using the start page component in isolation but how are we to use in inside our start page? When we are using the StartPage renderer we can mock a JSON object to be the result of the start page query and demonstrate how our newly created title component will be rendered

Copy

Copied

const content = `{
  "componentName": "Title",
  "title": "Hello I am a title"
}`;

const result = {
  data: {
    startPage: {
      items: [
        {
          row: 1,
          column: 1,
          item: {
            name: "Title",
            content: content,
          },
        },
      ],
    },
  },
};

const TitleComponent = ({ title }) => <h1>{title}</h1>;
const startPageComponents = {
  Title: TitleComponent,
};
<StartPageRenderer
  result={result}
  startPageComponents={startPageComponents}
  ProductGrid={<div />}
/>;

We first created a mock result object to pass to our start page renderer component. Then we added our TitleComponent to an object of start page components.

The StartPageRenderer will match the keys in the startPageComponents object against the names of the start pages items in order to determine what component to render. You can add as many components to the start page as you want and reuse them using this pattern.

In more recent versions of the Flight framework you can also provide a componentName key directly in the start page item JSON, which takes precedence over the item name. This makes it significatly easier to reuse start page items in the Jetshop admin since they now can be named freely. If no componentName is provided then the "name" of the start page item will still be used.

Adding Components in the Jetshop Admin

Now this is all fine and good for an example but how can I get this into my actual Stat Page on the Jetshop admin?

To Start go to the start page builder

import image1 from '@root/docs/static/startpage1.png'; import image2 from '@root/docs/static/startpage2.png'; import image3 from '@root/docs/static/startpage3.png'; import image4 from '@root/docs/static/startpage4.png'; import image5 from '@root/docs/static/startpage5.png';

Choose the start page you would like to edit and hit the "edit" button

Add a new row if you don't have one and click Add product/item in the first position

Select Item and fill in the appropriate fields

The "Item name" field should match the name in the start page components object you pass to the start page and the "Text field" should be a JSON string to be parsed. Please use a JSON Validator to make sure you don't have any errors

Hit save and then save the start page to see your component

Adding Products

You can add up to four products in a row as you would normally in the Jesthop Admin. These will be rendered using the ProductGrid component you provide.

Copy

Copied

const result = {
  data: {
    startPage: {
      items: [
        {
          row: 1,
          column: 1,
          id: 223,
          item: {
            id: "3500",
            articleNumber: "3500",
            name: "7/8 Tights Flamingo (BEAUTY)",
            subName: "",
            shortDescription: "7/8 Tights Flamingo!",
          },
        },
        {
          row: 1,
          column: 2,
          id: 224,
          item: {
            id: "9200",
            articleNumber: "9200",
            name: "Bikini Strap Top (BEAUTY)",
            subName: "",
            shortDescription: "Bikini Strap Top!",
          },
        },
        {
          row: 1,
          column: 3,
          id: 225,
          item: {
            id: "B-13-BC-26",
            articleNumber: "B-13-BC-26",
            name: "Black Open Tank Green Coffee (BEAUTY)",
            subName: "",
            shortDescription:
              "Coffee!\n\nGrymt skönt Linne i vår egen NS-Blend kvalite, speciellt utvecklade tillsammans med vår leverantör i Turkiet, 67% Polyster och 33% Viskon. Linnet ger dig maximal komfort under ett hårt träningspass. \n\n",
          },
        },
        {
          row: 1,
          column: 4,
          id: 226,
          item: {
            id: "B-13-BC-06",
            articleNumber: "B-13-BC-06",
            name: "Black Open Tank Skull (BEAUTY)",
            subName: "",
            shortDescription:
              "Skull!\n\nGrymt skönt Linne i vår egen NS-Blend kvalite, speciellt utvecklade tillsammans med vår leverantör i Turkiet, 67% Polyster och 33% Viskon. Linnet ger dig maximal komfort under ett hårt träningspass. \n\n",
          },
        },
      ],
    },
  },
};

const ProductGrid = ({ products }) =>
  products.map((product, index) => <p key={index}>{product.name}</p>);

const startPageComponents = {};
<StartPageRenderer
  result={result}
  startPageComponents={startPageComponents}
  ProductGrid={ProductGrid}
/>;