Storyblok CMS를 Vue Storefront 2에 추가하는 방법

처음에는 콘텐츠 관리 시스템을 갖추는 것이 그다지 중요하지 않을 수 있지만 전자 상거래 시스템이 성장하기 시작하면 CMS를 갖추는 것이 매우 유용할 것이라고 장담할 수 있습니다. 저는 이미 여러 CMS와 함께 일해 왔으며 Storyblok에 대한 최고의 경험을 가지고 있으며 이를 Vue Storefront 프로젝트에 연결하는 방법을 보여주고 싶었습니다.

아래에서 Vue Storefront, Shopify 및 Storyblok을 사용하여 전자 상거래를 구축하는 것에 대한 Vue Storefront 컨퍼런스에서 제가 발표한 동영상을 볼 수 있습니다.



다음은 Shopify 전자 상거래 플랫폼을 사용하여 Storyblok 헤드리스 CMS를 Vue Storefront 2 프로젝트에 추가하는 방법에 대한 단계별 비디오 자습서입니다.



걱정 마세요. Storyblok과의 통합은 Magento, Vendure 등과 같은 다른 전자 상거래 통합과 동일한 방식으로 작동합니다. 프로세스는 완전히 동일합니다. 설정이 쉽기 때문에 Shopify를 선택했습니다.

암호

먼저 vue-storefront/storyblok 및 storyblok-vue 패키지를 설치해 보겠습니다.

yarn add @vue-storefront/storyblok storyblok-vue # npm install @vue-storefront/storyblok @storyblok/vue

다음으로 루트 디렉토리 내에 cms 폴더를 생성해 보겠습니다.

mkdir cms

RenderContent.vue 패키지에서 특수@vue-storefront/storyblok 구성 요소를 복사합니다.

cp node_modules/@vue-storefront/storyblok/components/RenderContent.vue cms/

이 구성 요소는 Storyblok에서 애플리케이션으로 가져올 콘텐츠를 렌더링하는 데 사용됩니다.

이제 Storefront UIBanner.vue 구성 요소를 기반으로 동적SfBanner.vue 구성 요소를 생성합니다. 아직 Storefront UI 라이브러리를 사용해 본 적이 없다면 시도해 볼 수 있습니다here . Storyblok의 속성 이름은 소품 이름과 동일해야 합니다. 동영상으로 설명하고 있습니다.

<template>
  <SfBanner
    :title="title"
    :subtitle="subtitle"
    :description="description"
    :button-text="banner_text"
    :link="banner_link"
    :image="image.url"
  />
</template>

<script lang="ts">
import Vue from 'vue'
import { SfBanner } from '@storefront-ui/vue';

export default Vue.extend({
  name: 'Banner',
  components: {
    SfBanner
  },
  props: {
    title: {},
    subtitle: {},
    description: {},
    banner_text: {},
    banner_link: {},
    image: {
      type: Object,
      required: true
    },
    background: {}
  }
})
</script>

지금 바로 다음 단계는 cms.js 디렉토리 안에 plugins 플러그인을 생성하는 것입니다.

import Vue from 'vue'
import Banner from '~/cms/Banner.vue'

Vue.component('banner', Banner)

통합이 올바르게 작동하려면 middleware.config.js 파일에 등록해야 합니다.

module.exports = {
  integrations: {
    shopify: { ... }
    },
    sb: {
      location: '@vue-storefront/storyblok/server',
      configuration: {
        token: process.env.STORYBLOK_TOKEN,
        cacheProvider: 'memory',
      },
    }
  }
};

그런 다음 통합이 예상대로 작동하려면 nuxt.config.js 파일에 몇 가지 항목을 등록해야 합니다.

...
  plugins: [
    '~/plugins/scrollToTop.client.js',
    '~/plugins/cms' // <-
  ],
...
buildModules: [
    // to core
    '@nuxtjs/composition-api/module',
    '@nuxtjs/pwa',
    '@nuxt/typescript-build',
    '@nuxtjs/style-resources',
    '@nuxtjs/device',
    [
      '@vue-storefront/nuxt',
      {
        useRawSource: {
          dev: ['@vue-storefront/shopify', '@vue-storefront/core', '@vue-storefront/storyblok'], // <-
          prod: ['@vue-storefront/shopify', '@vue-storefront/core', '@vue-storefront/storyblok'] // <--
        }
      }
    ],
    ['@vue-storefront/nuxt-theme'],
    [
      '@vue-storefront/shopify/nuxt',
      {
        i18n: {
          useNuxtI18nConfig: true
        }
      }
    ]
  ],
...
  modules: [
    '@vue-storefront/storyblok/nuxt', // <-
    'nuxt-i18n',
    'cookie-universal-nuxt',
    'vue-scrollto/nuxt',
    '@vue-storefront/middleware/nuxt'
  ],
...

마지막으로 Storyblok 토큰으로 .env에 환경 변수를 추가하는 것을 잊지 마십시오.

STORYBLOK_TOKEN=<YOUR_STORBLOK_TOKEN>

스토리블록

이 부분에서는 CMS에서 콘텐츠를 생성하고 Vue Storefront와 작동하도록 구성하기 위해 코드에서 Storyblok으로 전환합니다.

프로젝트를 위한 새로운 공간을 만들 것입니다.



이제 구성 요소 섹션으로 이동하여 banner 구성 요소를 생성해 보겠습니다.



다음으로 콘텐츠 섹션에서 Storyblok 토큰을 복사하여 애플리케이션에 넣습니다(이미 수행하지 않은 경우).



Storyblok 미리보기가 예상대로 작동하도록 하려면 구성에 위치를 추가합니다.



마지막으로 콘텐츠 구성에서 실제 경로를 추가합니다.



모든 것을 올바르게 구성했다면 Storyblok 미리보기에서 애플리케이션을 볼 수 있습니다.

코드 파트 2

이제 Storyblok을 구성했으므로 애플리케이션에 동적 콘텐츠를 추가하는 코드로 다시 한 번 이동하겠습니다.
Home.vue 페이지에서 동적 콘텐츠를 허용하는 몇 가지 사항을 추가해 보겠습니다. 먼저 템플릿 태그 어딘가에 아래 줄을 추가하십시오.

<template>
...
  <render-content :content="body" />
...
</template>

다음으로 스크립트 섹션에서 필수 구성요소와 컴포저블을 가져오겠습니다.

<script>
import { useContent } from '@vue-storefront/storyblok'
import RenderContent from '~/cms/RenderContent.vue'
...

export default {
  ...
  components: {
    ...
    RenderContent
  },
  setup() {
    ...
    const { search, content } = useContent('home')
    const body = computed(() => content.value.body)

    onSSR(async () => {
      ...
      await search({ url: `home?cv=${Math.floor(Date.now()/1000)}` })
    });

    return {
      ...
      body
    };
  }
}
</script>

스토리블록 2부

마지막 단계는 Storyblok 내 배너 구성 요소에 대한 새 콘텐츠를 추가하는 것입니다.



모든 작업을 올바르게 수행했다면 Storyblok 미리보기와 응용 프로그램 모두에서 다음 결과를 볼 수 있습니다.

요약

잘했어요! 방금 Storyblok을 Vue Storefront 2 온라인 상점에 통합했습니다. 이것은 통합 및 전체 콘텐츠 생성의 시작일 뿐이지만 콘텐츠 중심의 전자 상거래 구축을 위한 견고한 시작이 되어야 합니다.

보너스

Vue Storefront, Shopify, Storyblok repository

Vue Storefront docs about Storyblok integration