Storyblok integration

Storyblok integration

Basically we are currently using the "Content" and "Assets" part of Storyblok.

Content

Here we store the content blocks ("stories") that are editable in storyblok and used (displayed) by the frontend.

Referencing stories

Stories are referenced by the frontend code by:

  1. their "slug", which basically the URL part after the domain, e.g. frontend-dev.demo.precomposer.shop /contact.
  2. The slug is prepended a CMS_BASE_PATH (configurable in the frontend service) and then this result is searched in storyblok. e.g. storefront/contact.

Example story "contact":

Storyblok content example

Basic stories

Basic stories that are implemented as a reference currently include:

  • Contact Page (contact)
  • Imprint Page (imprint)
  • Homepage (index). This is a special case which is used when the URL has no slug suffix.

Category stories

Some product categories need some more informational or SEO text at the top of the category page. This is done via stories that are stored with in the "Category" folder with the slug c: Whenever a category page is displayed, a story with the slug storefront/c/CATEGORY is searched. If one is found, then it is displayed on the category page, underneath the title.

Assets

Asset can be used in several ways. In the precomposer demo data we use them to store product images. Product images are referenced from the products stored in commercetools.