Storyblok Tutorial #11: Dynamic Pages (part 1)

at the moment we only have one type of page and it's hard coded in the code but we want to have different types of pages in our case we would like to create a landing page so let's rename our default page component to block page to be more specific and create a new component called landing page because it's a page we need to set it as a content type now let's create our home page with the content type of landing page and now we need to create a component with the same name in the code as well for now we will put only a simple placeholder into the component to see if it works and we will do the same now also for the block page to make this work we need to change our main storyblock view component as well but how we will know what kind of component do we need to render storyblock is also sending us information about the component name so we will use that if we did everything correctly every page should now show the correct page type as it seems to be working our next step is to now render the correct component based on this component name this means that we need to render dynamically for this purpose we will use views built-in component element and pass it the component name to its property called is but as we can see it's not working correctly because we should see this text from the block page component the reason behind this is that we are using dynamic components and these components need to be registered globally in view so we will do that now in our main javascript file with this down we can see the correct content rendering and the landing page shows the correct content as well

Channel: LIFTED

Views: 262

Keywords: storyblok, tutorial, cms, headless, web, dev, development, js

Id: CMFNt6ZsRm4

Length: 1min 57sec (117 seconds)

Published: Sun Sep 12 2021