DEV Community

Cover image for #2 Building Headless Commerce - Adding Content with Storyblok CMS
Jakub Andrzejewski
Jakub Andrzejewski

Posted on • Updated on

#2 Building Headless Commerce - Adding Content with Storyblok CMS

I always enjoyed working with Content Management Systems as they are really enjoyable to use. The experience of real time content editing on your page is just amazing and believe me you will like it too!

I have written already some articles about Storyblok but this time, I decided to record a video about it!

In this video, we will be adding a Headless CMS Storyblok to our previously created Headless Commerce application. If you have not seen this video yet (here is the link -> https://www.youtube.com/watch?v=QK6wPHFiRyM), I highly encourage you to do that as it explains really well the concepts of e-commerce and its development.

We will dynamically add content from Storyblok Dashboard to our Nuxt 3 application.

If you get lost at some point here is the ithub repo -> https://github.com/Baroshem/nuxt-shopify-tailwind and branch feat/storyblok.

Code

First thing we need to do is to install the required dependencies:

yarn add @storyblok/nuxt axios
Enter fullscreen mode Exit fullscreen mode

Next, add @storyblok/nuxt module to the modules array in our nuxt.config.ts file and add required configuration:

  modules: ["@nuxtjs/tailwindcss","nuxt-graphql-client", "@storyblok/nuxt"],

  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
  },
Enter fullscreen mode Exit fullscreen mode

Remember to also add the new environment variable in .env file:

STORYBLOK_ACCESS_TOKEN=<YOUR_TOKEN>
Enter fullscreen mode Exit fullscreen mode

Let's add props in HeroBanner.vue component:

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
})
</script>
Enter fullscreen mode Exit fullscreen mode

Finally, let's modify the template to by more dynamic:

<template>
  <section>
    <img
      :src="image"
      class="h-[500px] w-full"
    />

    <div class="mx-auto px-32">
      <div
        class="text-7xl font-bold text-center text-gray-800 rounded-lg shadow-lg py-16 px-12 bg-white/70 -mt-[170px] backdrop-blur-xl"
      >
        <h1 class="mb-3">{{ title }}</h1>
        <span class="text-green-600">{{ subtitle }}</span>
      </div>
    </div>
  </section>
Enter fullscreen mode Exit fullscreen mode

Storyblok

Let's create a new component for our HeroBanner:

Storyblok component

Finally, let's add the component to our content page and see the real editing experience:

Storyblok content

Summary

Well done! You have just added Storyblok CMS to your Headless Commerce application. Keep in mind that this is just the beginning of the content creation and there are more things to discover like plugins for e-commerce.

Discussion (2)

Collapse
alvarosabu profile image
Alvaro Saburido

Short and sweet, nice job mate

Collapse
jacobandrewsky profile image
Jakub Andrzejewski Author

Thanks buddy!

I want to make it as simple as possible so that users can easily integrate and then dive deeper into the integration :)