Storyblok <> Nacelle Integration

This explains the steps currently necessary as of 10/13/2022 to integrate Storyblok CMS to Nacelle. Currently this is a POC integration which will become easier for clients later. The integration was written on the Storyblok side but there are steps necessary to form a “bridge” that will act as the catalyst to send update/delete/insert information from Storyblok to a custom connecter setup in Nacelle. This walkthrough uses vercel as that bridge for the project but other hosting providers would work just as well.

Sample Storyblok Refstore Site using Magento Product data for simple use-case in
Space ID: 6a411050-1fa2-4b45-8351-54ebf9773ba7

Magento Next Reference Store

 Setup Storyblok Integration Instructions

1. First setup your spaces in both Nacelle and Storyblok and get all the tokens and endpoints

   1. Setup a new Nacelle Space with a Custom Connector

      • Navigate to "Space Settings - API Details" and get the following as env variables for later

        • Copy your Space ID - NACELLE_SPACE_ID

        • Copy your Source ID for Custom Connector - NACELLE_SOURCE_ID

        • Create a New Private Token and immediately put that as an env variable - NACELLE_INGEST_TOKEN

        • Copy your Public Storefront token - NACELLE_SPACE_TOKEN

        • Copy your Storefront Endpoint - NACELLE_SPACE_ENDPOINT

   2. Go to Storyblok Space

      • Navigate to "Settings - Access Tokens"

        • Create a token for either Public or Preview level and copy the token...This is your "STORYBLOK_ACCESS_TOKEN"

      • Navigate to "Settings - Webhooks"

        • Create a "Webhook Secret" and Save for - STORYBLOK_WEBHOOK_SECRET

        • 

2. Setup a new Vercel project (or other hosting provider)

   1. Point to the following GIT repository (currently PRIVATE)

      1. https://github.com/storyblok/storyblok-nacelle - Connect to preview

   2. Place ALL env variables from above into project once connect to GIT repository
      NACELLE_SPACE_ID
      NACELLE_SOURCE_ID
      NACELLE_INGEST_TOKEN
      NACELLE_SPACE_TOKEN
      NACELLE_SPACE_ENDPOINT
      STORYBLOK_ACCESS_TOKEN
      STORYBLOK_WEBHOOK_SECRET

      

   3. Deploy Project

      • Check Nacelle space for successful content import

3. Finish setting up all webhooks

   1. Back to Storyblok space - Settings - Webhooks

      • Get your project domain and place the following in the paths for aa webhook events "Story published & unpublished." "Datasource entry saved" "Workflow changed"

        • {ProjectPath}/api/sync

        • Set a webhook secret in the webhook of Storyblock (If you didn’t do this from the step above)

        • Copy this webhook secret and insert that into the Vercel as an environment variable

          • STORYBLOK_WEBHOOK_SECRET

        • Test changing project data and look at the webhook logs in Storyblok for success.

        • Check Nacelle space for updated entries

        • 

4. (OPTIONAL full update task on Git repo change event)

   1. Back to Vercel project and create a Git Deploy Hook for the "main" branch

   2. 

   3. Copy this path and go to Storyblok

   4. In Storyblok, create a new task. If you don't see "Tasks" then go to "App Directory" and install the "Task Manager"

   5. Give the taks a Name and Description of your choosing and in the "Webhook" paste the path from the Vercel Git Deploy Hook you just created.

   6. 

5. Using the "Product App" feature in Storyblok (Currently only works on EU space)

   1. A storyblok admin will need to turn on the feature for a custom plugin that will allow a user to select product information from the Nacelle space. Once that is installed by an admin, a user can create a block that utlizes this new plugin like so (currently this is only working for the EU space):

      • Go to "block library"

      • Select a block you are working on or create a brand new block type

      • In your new block create an element and select the type of element as "Plugin"

      • Scroll in the new element plugin to "Custom Type" and select "sb-nacelle"

      • 

      • Scroll to options and input the endpoint option as the storefront endpoint and the token as the storefront public token

      • 

      • Now when editing this block you will see 2 buttons for this element "Select Products" and "Select Collections" which should contain the information from your Nacelle space Products and Collections respectively that you can add to your Storyblok content.