Webpage builder

The Webpage builder is where everything comes together, to create a webpage, that is actually accessible in the browser. Webpages mainly consist of several banners and the header and footer struct wrapping its content.

Each webpage builder allows to add a header and footer id. If a header or footer id is provided, the backend fetches the custom header or footer structure, based on the provided id. If the custom webpage fails to be queried, the backend fallbacks to the default header or footers structure. If no default header or footer exists, no header or footer is rendered.

Page types

Custom webpages can be utilized on many page types.

Standard

The most common is the standard page type, which is just a simple page filled with only the banners provided to the builder on creation. Once published the page is accessible through the base url of the page and the slug given to the webpage. An example url could look like that: https://my-webpage/my-slug.

Just like for also other page types, the standard page type can set one page to be the default version. With the standard type, that means that this will become the landing page of the project, that is accessible in the browser at root level. If the client provides a slug that is not in a relationship with any of the webpages of that type in the backend, the backend returns a 404 error.

Product

The product page type is used on product pages. With that banners can be added below the product page content. For each product a custom page can be created, by setting the slug of the webpage builder (type: product page) to the ID of the product. Now when the product is fetched, the backend will check if a custom product page for that product id exists.

Collection

The webpages for collections are working in a similar fashion like product pages. For each collection a custom page can be created, by setting the slug of the webpage builder to the slug of the collection and the type of the page to collection page. If no custom collection page is found, try to fetch the default collection page.

Cart

The cart type is one of the simple page types. The cart page always tries to fetch the default version of the cart page. If no default can be found, no extra content will be added to the cart page and will only show the actual cart object.

Error pages

Error pages, like 404 and 500 pages work also as a simple version of the webpage builder type. The page always tries to fetch the default version of that kind and if non existant, no extra content will be rendered on that page.

Blog

Blog pages are still work in progress

Structure example

Take a look at the example, to further understand the possibilities, of how a webpage builder can be structured. This example shows the creation of a default page of type standard webpage.

Page SEO

The structure also supports a meta object key under the options object key that can be used to configure the page SEO. The meta object structure follows the next-seo (opens in a new tab) and supports all the props described in the docs. The structure also supports some template strings that will be replaced with real values before render.

These template strings are:

1. {{shopName}} - The shop name
2. {{title}} - On a pageType = default the {{title}} will be replaced with the pretty version of the slug. On a pageType = product it will be replaced with the product title.
3. {{description}} - On a pageType = product this will be replaced with the product description and on a pageType = default it will be replace with the shop slogan.
4. {{url}} - On pageType = default and pageType = product this will be replaced with the page url.

{
   "pageType":"default",
   "slug":"default",
   "headerId":null,
   "footerId":null,
   "banners":[
      {
         "__typename":"AnnouncementBanner",
         "id":"my-announcement-banner-id"
      },
      {
         "__typename":"UpsellBlockBanner",
         "id":"my-upsell-block-banner-id"
      },
      {
         "__typename":"UpsellBlockBanner",
         "id":"my-upsell-block-banner-id-2"
      },
      {...}
   ],
    "options": {
      "meta": {
          "title": "{{title}}",
          "shopName": "{{shopName}}",
          "description": "{{description}}",
          "canonical": "{{url}}",
          "noindex": false,
          "nofollow": false,
          "languageAlternates": [],
          "robotsProps": {
            "nosnippet": false,
            "notranslate": false,
            "noimageindex": false,
            "noarchive": false,
            "maxSnippet": -1,
            "maxImagePreview": "none",
            "maxVideoPreview": -1
          },
          "openGraph": {
            "type": "website",
            "title": "{{title}}",
            "url": "{{url}}",
            "description": "{{description}}",
            "images": []
          },
          "additionalMetaTags": [],
          "additionalLinkTags": []
        }
    }
}

Create

Code

{
   "pageType":"product",
   "slug":"01234567890",
   "headerId": "ce84f8d9-ef70-4678-8cd9-6c11766d6c45",
   "footerId":null,
   "banners":[
      {
         "__typename":"AnnouncementBanner",
         "id":"my-announcement-banner-id"
      },
      {
         "__typename":"UpsellBlockBanner",
         "id":"my-upsell-block-banner-id"
      },
      {
         "__typename":"UpsellBlockBanner",
         "id":"my-upsell-block-banner-id-2"
      },
      {...}
   ],
    "options": {
      "meta": {
          "title": "{{title}}",
          "shopName": "{{shopName}}",
          "description": "{{description}}",
          "url": "{{url}}",
          "noindex": false,
          "nofollow": false,
          "languageAlternates": [],
          "robotsProps": {
            "nosnippet": false,
            "notranslate": false,
            "noimageindex": false,
            "noarchive": false,
            "maxSnippet": -1,
            "maxImagePreview": "none",
            "maxVideoPreview": -1
          },
          "openGraph": {
            "type": "website",
            "title": "{{title}}",
            "url": "{{url}}",
            "description": "{{description}}",
            "images": []
          },
          "additionalMetaTags": [],
          "additionalLinkTags": []
        }
    }
}

Arguments