Nacelle Shopify Connector

This package is a connector for extending the @nacelle/client-js-sdk in order to allow live previewing new products or product updates from Shopify.

The Client JS SDK uses connectors in the data module for fetching Nacelle data. By default the SDK is either fetching data from Nacelle's GraphQL or from static JSON files generated during the Nuxt build process.

With this package we can update the data module so that by default it will fetch product data directly from Shopify's Storefront API.

Usage

import NacelleClient from '@nacelle/client-js-sdk'
import NacelleShopifyConnector from '@nacelle/shopify-connector'

// Initialize the Nacelle Client
const client = new NacelleClient(clientOptions)

// Initialize the Shopify Connector
const shopifyConnector = new NacelleShopifyConnector({
  shopifyApiKey: 'SHOPIFY_API_KEY',
  shopifyDomain: 'SHOPIFY_DOMAIN'
})

// Update the data module with the new connector
client.data.update({
  connector: shopifyConnector
})

// Homepage data will be fetched directly from Storefront API
const productData = await client.data.product({ handle: 'blue-jeans' })

Enabling Product Previews with Nacelle Nuxt Starter

1. Add preview tag to products

In your Shopify admin dashboard add the tag NACELLE_PREVIEW to new products that you would like to preview before having them show up in your live Nacelle Nuxt site. What this tag does is tell our indexing API to ignore this product and not index its data in Nacelle. If this product is not indexed in Nacelle it will not show up when your Nacelle Nuxt project is generated.

You can also preview collections in a similar manner. Since collections do not have tags, simply append NACELLE_PREVIEW to the title field of your collection and this will indicate to our indexing API to ignore this collection.

2. Create Nuxt plugin for Shopify Connector

Create a new file in your Nuxt project at /plugins/shopify-preview.js. This will be a Nuxt plugin that updates the Nacelle Client SDK with this Shopify connector. Paste the following code in the new file.

import NacelleShopifyConnector from '@nacelle/shopify-connector'

export default ({ app }) => {
  if (process.env.NACELLE_PREVIEW_MODE === 'true') {
    if (!process.env.NACELLE_SHOPIFY_DOMAIN) {
      throw new Error(
        "Couldn't get data from your CMS. Make sure to include NACELLE_SHOPIFY_DOMAIN in your .env file"
      )
    }
    if (!process.env.NACELLE_SHOPIFY_API_KEY) {
      throw new Error(
        "Couldn't get data from your CMS. Make sure to include NACELLE_SHOPIFY_API_KEY in your .env file"
      )
    }

    const shopifyConnector = new NacelleShopifyConnector({
      shopifyDomain: process.env.NACELLE_SHOPIFY_DOMAIN,
      shopifyApiKey: process.env.NACELLE_SHOPIFY_API_KEY
    })

    app.$nacelle.data.update({
      connector: shopifyConnector
    })
  }
}

2. Update nuxt.config.js

Update your nuxt.config.js file to include the new plugin file you created.

plugins: [
    '~/plugins/shopify-preview'
  ],

And update the env object in the config.

env: {
  nacelleSpaceID: process.env.NACELLE_SPACE_ID,
  nacelleToken: process.env.NACELLE_GRAPHQL_TOKEN,
  buildMode: process.env.BUILD_MODE,
  NACELLE_PREVIEW_MODE: process.env.NACELLE_PREVIEW_MODE,
  NACELLE_SHOPIFY_DOMAIN: process.env.NACELLE_SHOPIFY_DOMAIN,
  NACELLE_SHOPIFY_API_KEY: process.env.NACELLE_SHOPIFY_API_KEY
},

3. Update .env

Update your Nuxt app's .env file to include variables for initializing the Shopify connector. The domain will be the subdomain of your Shopify store (https://<my-store-subdomain>.myshopify.com). The API key is the same GraphQL token for the private app that you use in your Nacelle space's product settings.

NACELLE_PREVIEW_MODE=true
NACELLE_SHOPIFY_DOMAIN="SHOPIFY_DOMAIN"
NACELLE_SHOPIFY_API_KEY="SHOPIFY_API_KEY"

You're all set! Running npm run dev your Nacelle Nuxt app will now fetch product data directly from Shopify. New products you have created with the NACELLE_PREVIEW will not have page routes generated for them, but if you navigate directly to the product page by typing the product handle in the URL, the Nacelle Starter will pull the product data from Shopify and correctly load the page.

4. Update Netlify deploy settings

If you are setting up a dedicated preview site you will need to make some additional changes to your Nacelle Nuxt Starter as well as the deploy settings on Netlify or whichever build and hosting service you are using.

First you must add /static/_redirects file to your project with the following code:

# Redirect rules for Netlify
# Doing this so there won't be a 404 error with SPA

/*   /index.html   200

In your .env file update the BUILD_MODE to be spa.

Finally in your Netlify build settings you must update the build command to be npm run build. These changes will now direct Netlify to build your Nuxt project in Single Page App mode which will allow you to visit URLs for products not indexed by Nacelle.

Using the Shopify Connector with the Contentful Preview Connector

If you also use our Nacelle Contentful Preview Connector, you will need a slightly different customization to make the two connectors work together.

You can do this by creating a new plugin file, such as /plugins/shopify-contentful-previews.js and paste this code:

import NacelleShopifyConnector from '@nacelle/shopify-connector'
import NacelleContentfulPreviewConnector from '@nacelle/contentful-preview-connector'

export default ({ app }) => {
  if (process.env.NACELLE_PREVIEW_MODE) {
    if (!process.env.NACELLE_SHOPIFY_DOMAIN) {
      throw new Error(
        "Couldn't get data from your CMS. Make sure to include NACELLE_SHOPIFY_DOMAIN in your .env file"
      )
    }
    if (!process.env.NACELLE_SHOPIFY_API_KEY) {
      throw new Error(
        "Couldn't get data from your CMS. Make sure to include NACELLE_SHOPIFY_API_KEY in your .env file"
      )
    }

    if (!process.env.NACELLE_CMS_PREVIEW_TOKEN) {
      throw new Error(
        "Couldn't get data from your CMS. Make sure to include NACELLE_CMS_PREVIEW_TOKEN in your .env file"
      )
    }
    if (!process.env.NACELLE_CMS_PREVIEW_SPACE_ID) {
      throw new Error(
        "Couldn't get data from your CMS. Make sure to include NACELLE_CMS_PREVIEW_SPACE_ID in your .env file"
      )
    }

    const contentfulConnector = new NacelleContentfulPreviewConnector({
      contentfulSpaceID: process.env.NACELLE_CMS_PREVIEW_SPACE_ID,
      contentfulToken: process.env.NACELLE_CMS_PREVIEW_TOKEN
    })

    const shopifyConnector = new NacelleShopifyConnector({
      shopifyDomain: process.env.NACELLE_SHOPIFY_DOMAIN,
      shopifyApiKey: process.env.NACELLE_SHOPIFY_API_KEY
    })

    app.$nacelle.data.product = (params) => shopifyConnector.product(params)
    app.$nacelle.data.products = (params) => shopifyConnector.products(params)
    app.$nacelle.data.collection = (params) =>
      shopifyConnector.collection(params)
    app.$nacelle.data.content = (params) => contentfulConnector.content(params)
    app.$nacelle.data.pages = (params) => contentfulConnector.pages(params)
    app.$nacelle.data.page = (params) => contentfulConnector.page(params)
    app.$nacelle.data.article = (params) => contentfulConnector.article(params)
    app.$nacelle.data.articles = (params) =>
      contentfulConnector.articles(params)
    app.$nacelle.data.blog = (params) => contentfulConnector.blog(params)
  }
}

What this plugin is doing is initializing both the Shopify connector and the Contentful preview connector and manually modifying the Nacelle Client SDK data module methods. This way when calling the product method data will be fetched from Shopify and when calling content methods data will be fetched from Contentful.