Skip to content

Latest commit

 

History

History
132 lines (102 loc) · 3.64 KB

README.md

File metadata and controls

132 lines (102 loc) · 3.64 KB
Raw

Vue Storefront API Prismic Extension

[ WORK IN PROGRESS ]

This is the Vue Storefront API part (extension) of the Prismic integration. It requires the Vue Storefront counterpart (module) to work.

Data Flow

Features (Vue Storefront API)

  • Public and private (via access tokens) API support
  • Webhook sync callback support (on publish)
  • ElasticSearch data cache
  • Content retrieval based on ID/UID, custom types, tags, filters, and languages
  • Image caching
  • CLI manual sync script

Installation (Vue Storefront API)

Run this command in the VSF API root folder to install the Prismic extension:

git submodule add git@github.com:butopea/prismic-vue-storefront-api.git src/api/extensions/prismic

Within your config file (config/local.json):

Add Prismic to the registeredExtensions list to activate it:

{
  ...
  "registeredExtensions": {
    ...
    "prismic"
  }
}

Add the Prismic extension settings to the extensions list:

{
  ...
  "extensions": {
    ...
    "prismic": {
      "apiEndpoint": "https://<YOUR_PRISMIC_REPO>.prismic.io/api/v2",
      "accessToken": "",
      "webhookSecret": "",
      "indexToLocale": [
        {
          "index": "vue_storefront_catalog",
          "language": "en-gb"
        }
      ],
      "syncPageSize": 20
    }
  }
}
...

Remember to add the following mappings to the prismic type in your ElasticSearch importer:

db.indices.putMapping({
    index: indexName,
    type: "prismic",
    body: {
      properties: {
        prismic_uid: { type: "keyword" },
        prismic_type: { type: "keyword" },
        prismic_tags: { type: "keyword" }
      }
    }
})

You also need to add the prismic type in https://github.com/DivanteLtd/vue-storefront/blob/f4a37fb2a256e34152ce89b8e43219b94f91090a/core/lib/search/adapter/api/searchAdapter.ts#L193

this.registerEntityType('prismic', {
      queryProcessor: (query) => {
        // function that can modify the query each time before it's being executed
        return query
      },
      resultProcessor: (resp, start, size) => {
        return this.handleResult(resp, 'prismic', start, size)
      }
    })

Configuration explanation

  • apiEndpoint
    • Name of your Prismic repository (keep the rest of the URL the same, especially /api/v2).
  • accessToken
    • If you have set up your Prismic repository with a private API, you need to add a new permanent access token and set it here.
  • webhookSecret
    • The secret passphrase sent by Prismic with each webhook callback.
  • indexToLocale
    • Contains a mapping of each ElasticSearch index to its document language.
  • syncPageSize
    • Number of pages to retrieve per request during the sync (default: 20, maximum: 100)

Sync script

To manually sync the database, run the following command in Vue Storefront API's root directory:

node src/api/extensions/prismic/scripts/sync.js

Credits

Made with ❤ by Butopêa

Based on:

Support

Please ask your questions regarding this extension on Vue Storefront's Slack https://vuestorefront.slack.com/ You can join via this invitation link.

License

This extension is completely free and released under the MIT License.