Shopiful

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

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.

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])
  }
}

Built With

• Shopify Buy - Shopify JavaScript Buy SDK
• Contentful - Contentful JavaScript Delivery SDK
• Express - Used for generating the API routes

Roadmap

• 🔥Add options functionality
• 🔥Improve defencive code fallbacks
• 🔷Add tests
• 🔻Convert to typescript
• 🔻Add collections decorating

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Alex Shortt - Core build - ajshortt

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Shopify
• Contentful