Vue Storefront Constructor.io

# Installation

To install the Contructor.io module in your Vue Storefront application, run one of the following commands:

npm install @vsf-enterprise/constructor-io @vsf-enterprise/constructor-io-api --save

or:

yarn add @vsf-enterprise/constructor-io @vsf-enterprise/constructor-io-api

# Setup

Inside of the middleware.config.js file, add the constructor object to the integrations:

module.exports = {
  integrations: {
    constructor: {
      location: '@vsf-enterprise/constructor-io-api',
      configuration: {
        serviceUrl: 'https://ac.cnstrc.com',
        apiKey: '<your_app_key>',
        apiToken: '<your_app_token>',
        securityToken: '<security_token>',
        filterPrefix: 'f_',
        // Indexes are optional for multiple endpoints to connect to
        indexes: [
          {
            name: 'uk',
            serviceUrl: 'https://ac.cnstrc.com/',
            apiKey: process.env.CONSTRUCTOR_API_KEY_UK
          },
          {
            name: 'us',
            serviceUrl: 'https://ac.cnstrc.com/',
            apiKey: process.env.CONSTRUCTOR_API_KEY_US
          },
          {
            name: 'eu',
            serviceUrl: 'https://ac.cnstrc.com/',
            apiKey: process.env.CONSTRUCTOR_API_KEY_EU
          }
        ]
      },
      // or

    },
    // ... other configs
  },
},

  • apiKey - a valid key of index that you want to connect and fetch data from. You can get this key on the API Integration page in Constructor.io's Dashboard.

  • apiToken - a valid token to interact with Constructor.io's API. You can generate it on the API Integration page in Constructor.io's Dashboard. This key identifies which index will be used.

  • securityToken - a token provided by Constructor.io.

  • filterPrefix - an optional prefix which will be prepended to filter property names. This prefix allows Constructor.io to return results correctly when a query string includes custom parameters like gclid or fbclid.

Then, in the nuxt.config.js file register the module:

// nuxt.config.js
{
  modules: ['@vsf-enterprise/constructor-io/nuxt'];
}

Finally, add the module to both arrays in the useRawSource object in the @vue-storefront/nuxt module:

// nuxt.config.js
['@vue-storefront/nuxt', {
  ...
  useRawSource: {
    dev: ['@vsf-enterprise/constructor-io'],
    prod: ['@vsf-enterprise/constructor-io'],
  }
}],

← Usage →