Content Creation

Creating content in Sanity CMS

The content that you'll create will be strictly connected with your application codebase and the integration. It's super important to keep consistency and overall order.

Adding content schema in Sanity Studio

To create and manage content in the Sanity you need to install and set Sanity Studio - a free and open source tool that will help you create and manage you content remote or locally. All you need to know about you can find here.

So let's start by going into the Sanity Studio codebase. In the schemas/components/ folder, add new file banner.js.

// schemas/components/banner.js
export default {
  title: 'Banner',
  name: 'banner',
  type: 'document',
  i18n: true,
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      title: 'Subtitle',
      name: 'subtitle',
      type: 'string',
    },
    {
      title: 'Description',
      name: 'description',
      type: 'string',
    },
    {
      title: 'Button Text',
      name: 'button_text',
      type: 'string',
    },
    {
      title: 'Button Link',
      name: 'button_link',
      type: 'string',
    },
    {
      title: 'Image',
      name: 'image',
      type: 'image',
    },
    {
      title: 'Background',
      name: 'background',
      type: 'string',
    },
  ],
};

This step added the first schema for our content. Now we have to register this schema in the schemas/schema.js file:

// schemas/schema.js
import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';
import banner from './components/banner.js';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    // rest of the schemas
    banner,
  ]),
});

Adding components in your storefront

Now as the schemas are ready, we can add a Vue component to render the content based on our banner.js schema.

Create a Banner.vue component in the components/ folder in your Alokai project. It might look similar to the one below, but you should keep consistency between the Vue component and the one in the Sanity.

<template>
  <Banner
    :title="title"
    :subtitle="subtitle"
    :description="description"
    :button-text="banner_text"
    :link="banner_link"
    :image="image"
    :background="background"
  />
</template>

<script lang="ts" setup>
defineProps({
  title: {},
  subtitle: {},
  description: {},
  banner_text: {},
  banner_link: {},
  image: {},
  background: {},
});
</script>

Now when you open the Sanity Studio, you should see a new component. You can start using it by filling in with the values.

You can assume that the content you'll receive from the Sanity integration will look like the one below.

{
  content: [
    {
       _type: 'banner', // name mapped to the Banner.vue
       title: 'Your title',
       ...
    }
  ]
}

For this Content Type - Banner - you can create that many components as you want to use along with your final content structure.

Pages (available only for the enterprise edition).

Go back to the Sanity Studio and select the Page from the list, click the icon to add a new page.

In the Page content creating panel, you can define page url and components structure. Add a new component from the list at the bottom and fill it with data.

When your content is ready, you can click the Publish button in the bottom panel.