Shopiful NPM | npm.io

Shopiful

Sever-side middleware, generating API endpoints to access Shopify products decorated with extra Contentful entry data.

npm GitHub GitHub issues

Utilising the Shopify Storefront API, the middleware fetches collections or products from Shopify then intrinsically fetches related the relative entry from Contentful.

Why? 🧐 Because whilst Shopify is great for most ecommerce features, it isn't geared for adding rich page content. So this module helps solve that 👍🏼

Getting Started

This module is best used with SSR or statically generated builds. It is recommended that the exposed endpoints are used to hydrate your app with data ideally into the Vuex store via the nuxtServerInit action. For more information on this, check the examples section.

Prerequisites

Firstly, it is assumed you already have a Shopify store. If not, head over to Shopify to get going. Secondly, you'll need a Contentful account and space setup. Again, if you haven't then head to Contentful to set this up.

Setup

Add Shopiful dependency to your project

Using Yarn:

$ yarn add shopiful

Using NPM:

$ npm install shopiful

Add the module to your nuxt.config.js file

export default {
  modules: [
    'shopiful'
  ]
}

Configuration variables

Now you'll need to grab the following configuration keys:

Shopify

Store domain (e.g your-shop-name.myshopify.com)
Access token

Contentful

Space ID
Access token

It is recommended that these keys are stored in an .env file and made available to the middleware via the @nuxtjs/dotenv package. Store the keys like so:

shopify_access_token=xxx
shopify_domain=xxx
contentful_space_id=xxx
contentful_access_token=xxx

It is likely you'll be using the Shopify SDK on the client side for processing carts and checkouts so storing the keys here will make it handy for that too.

Options

⚠️ Currently, options are not available. They will be available in upcoming releases.

Proposed options

Cache - Boolean - Cache SSR request feature
API Path - String - Add custom API path (default /api/{products|collections})

Contentful setup

Now we have the module setup, we need to configure the content model in Contentful so data entities link correctly to products. Use the following steps:

Head over to your admin panel of Contentful
Navigate to your space and go to "Content Model"
Click "Add Content Type" and give it the name "Product"
Now navigate to the new content type and add a field
Add a text field. Call it "ID". The Field ID will automatically generate as "id". This also should be a short text field
Click "Create and configure"
Navigate to "Validations" and check "Required field" and "Unique field"
Now navigation to "Apperance" and select "slug"

Now you can add as many or as little fields to this entry type to help decorate your products.

Linking a Shopify product with Contentful entry

To link a Contentful product entry to a Shopify product, you'll need to add the Shopify product ID to the entry you create in the ID field. This will now link the entry with the Shopify product.

Screenshot 2020-02-27 at 23 06 44

Examples

We recommend using axios for your applications HTTP requests. Nuxt have a module for this. If you don't like axios then by all means use whatever method you want.

In `asyncData`

// pages/products/_slug.vue

export default {
  asyncData({ app, params, error }) {
    return app.$axios
      .get(`api/products/${params.slug}`)
      .then((res) => {
        return { product: res.data }
      })
      .catch((err) => {
        return error({ statusCode: 404, message: err.message })
      })
  }
}

Hydrating store with `nuxtServerInit`

// store/index.js

export const actions = {
  nuxtServerInit({ commit, dispatch }, { app }) {
    const collectionsRequest = app
      .$axios('/api/collections')
      .then((collections) => {
        commit('products/setCollections', collections.data)
      })
    const productsRequest = app.$axios('/api/products').then((products) => {
      commit('products/setProducts', products.data)
    })
    return Promise.all([collectionsRequest, productsRequest])
  }
}