Page Comparison

In the Contentful UI, request for a new space or create your new space. Turn on orchestration for the new space.

Next, install or request to install necessary content types into newly generated space via content orchestration.

Included in the install are Contentful Types:

• Client

• Vendor

• LLC

• Media Wrapper

• Franchise

• Sales Tax Category

• Subscription

• Contact Information

• Product

• Digital Download

• List

• Guru

• Item

• Copywriter

• Global Client Directory

• Promotion Idea

• Brand Colors

• Advertisement

• Article

Install layout types from reference space and populate the entries within your space

Under the settings tab in the UI, go to “API Keys”. Click the “Add API key” button and generate a new set of keys. For this project, you will need your Space ID and Content Delivery API - access token.

Add new content entries into your space, including layout types.

This will actually be handled automatically. Once every new content entry is published (excluding layout entries), Contentful will push that published entry to Blueshift via webhook and middleware. Once published, a new item will appear in the Blueshift catalog within a couple minutes or less.

Head into recommendation engine and built out a new scheme utilizing the existing catalog items.

Once recommendation scheme is built. Head over to the live content create tab. Generate a new live content slot and give it a name & choose JSON format.

After live content slot creation, create a new live content JSON template. Choose the newly created recommendation scheme under the recommendation tab in the template editor. Once chosen, you should see your items populate as a JSON object, with a list of products.

_{*note: in the actual project code, the returned live content product data is expecting a specific format, you will have to make changes in the code if formatted differently.}

Once live content slot & templates are created, create a new campaign and choose live content campaign in order to use what we just created. Configure the campaign to include that new slot & template. Launch the campaign and we should be up and running.

Request access & clone repository

Make sure your NodeJS is at minimum to run Next13. Current Node Version needed:v16.8

In the command line, run

npm install

In the project directory, access the .env.local.example file. Create a .env.local file or Duplicate the example file and remove the ".example." Then add your API keys like so:

CONTENTFUL_SPACE_ID=your Space ID
CONTENTFUL_ACCESS_TOKEN=Content Delivery API token
CONTENTFUL_PREVIEW_ACCESS_TOKEN=Content Preview API token 
CONTENTFUL_ENVIRONMENT_ID=Choose env To Pull Data From
//Blueshift event api key is not currently an env var 
//because it is being used on the client
//it currently exists in the /public-keys/blueshift dir as 
//an exported variable.
export const bsft_event_key=your blueshift event api key

Within the project, locate the directory: “lib”, there will be a file called “api” where the central fetch to Contentful operation lives. The uri is pointing to a specific environment, change this to whichever environment you will be using, ie: dev, master, etc…. You can also remove anything after the space id and it will default to master env.

export async function fetchGraphQL(query: string, preview = false) {
  return fetch(
    `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/YOUR_ENV_HERE`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${
          preview
            ? process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
            : process.env.CONTENTFUL_ACCESS_TOKEN
        }`,
      },
      body: JSON.stringify({ query }),
    }
  ).then((response) => response.json());
}

Once project is configured, run:

npm run dev

If there are no content entries in Contentful, you may see an error page upon dev server start. If not, you’ll see some components load. Feel free to change or remove any components.

Deploy app to whichever hosting platform you choose. We found Vercel to be the simplest, due to it’s built in integration with NextJS.

In Vercel under settings within the Git tab, create a “Deploy Hook.” Add this hook to the Contentful webhooks or use Contentful’s built in Vercel integration. This hook will trigger a rebuild of the site once any new triggerable content entry is published.