Overview¶
In this article, we will integrate Storyblok CMS into the index page of the Virto Commerce vue-b2b-theme. The integration will allow you to create and manage content in Storyblok CMS and display it in the Virto Commerce vue-b2b-theme.
To use Storyblok CMS with the page:
- Create page model in the Storyblok CMS for the index page. The page model defines the properties of the index page and how it is rendered in the Storyblok CMS.
- Add Storyblok to the page component in Virto Commerce vue-b2b-theme. This allows you to fetch content from Storyblok and display it in the index page.
- Create content. Add components to your page model and fill them with content.
Create Page Model in Storyblok¶
To create Page Model in Storyblok:
- Go to the Block Library menu and click New Block in the top right corner.
- Enter the name of the component. We enter Main_page as the name.
- Add a new field called body of type Blocks.
-
Click Save to save the changes.
-
Use this block to create the content for our category page: Go to the Content menu and click on the Create new to create new Story with previously created Catalog block:
Add Storyblok to the Page Component¶
To add Storyblok to the page component, add StoryblokComponent
into your template. As long as we want replace the content of the page with the content from Storyblok, we use v-if
directive to show StoryblokComponent
only when story
is loaded.
As you can see we are using main-page
as a content ID to fetch the content from Storyblok.
import { ref, toValue } from "vue";
import { useI18n } from "vue-i18n";
import { usePageHead } from "@/core/composables";
import { useStoryblok } from "@storyblok/vue";
const { t } = useI18n();
usePageHead({
title: t("pages.home.meta.title"),
meta: {
keywords: t("pages.home.meta.keywords"),
description: t("pages.home.meta.description"),
},
});
const story = ref({});
onBeforeMount(async () => {
try {
loading.value = true;
story.value = toValue(await useStoryblok("main-page", { version: "draft" }));
} finally {
loading.value = false;
}
});
Now you can preview the index page in the Storyblok and start creating content for it.
Create Content¶
After adding Storyblok to the page component, start creating content in the Storyblok CMS. Add components to your page model and fill them with content.
Note
Since the index page uses the path /
, and Storyblok uses its own slugs for previews, you need to change the Real path in the space settings to /
.
If you have already added custom components to Storyblok, use them to create content for the page.
As a result, you will get integration of Storyblok CMS with the index page of Virto Commerce vue-b2b-theme: