Vue Storefront Constructor.io

# Usage

The integration uses Constructor.io's Node.js client under the hood. It supports the methods listed below to interact with your data stored in Constructor.io. The composables of this package are wrappers of the Node.js Client, so they accept the same parameters and return the same values.

# Search results

Using the useSearchResult composable, you will be able to search (opens new window) the index using filtering, sorting, or pagination parameters. The first thing you need to do is importing the composable from our package to Vue's component:

import { useSearchResult } from '@vsf-enterprise/constructor-io';

In the Vue component, call composable inside the setup function to get properties and methods:

const { search, result, loading } = useSearchResult({
  id: 'your-unique-search-id', // optional, default value is 'useSearch'
  initialResult: [], // optional, default value is []
});

The composables of this package are generated from a single factory and by default, the initial value of the result variable is an empty array. However, depending on the data structure of different endpoints you may get an object. In order to prevent type inconsistencies, you can use the initialResult parameter to set the correct type of the result.

Use the asynchronous search method to fetch records. Please check Constructor.io's Node.js client getSearchResults documentation (opens new window) for a list of available parameters.

onSSR(async () => {
  await search({x
    index: 'uk', // Set the desired index name here, based on the name property of configuration if you have indexes property set
    query: 't-shirt',
    parameters: {
      resultsPerPage: 40,
      filters: {
        size: 'medium',
      },
    },
  });
});

The search response will be saved to the result object:

console.log(result.value); // Raw response from Constructor.io

# Browse results

Using the useBrowseResult composable, you will be able to get "browse (opens new window) results" by providing filtering, sorting or pagination parameters. The first thing you need to do is importing the useBrowseResult composable from our package to Vue's component:

import { useBrowseResult } from '@vsf-enterprise/constructor-io';

In the Vue component, call composable inside the setup function to get properties and methods:

const { search, result, loading } = useBrowseResult({
  id: 'your-unique-search-id', // optional, default value is 'useSearch'
  initialResult: [], // optional, default value is []
});

Use the asynchronous search method to fetch records. Please check Constructor.io's Node.js client getBrowseResults documentation (opens new window) to see a list of available parameters.

onSSR(async () => {
  await search({
    index: 'uk', // Set the desired index name here, based on the name property of configuration if you have indexes property set
    filterName: 'group_id',
    filterValue: 't-shirts',
    parameters: {
      resultsPerPage: 40,
      filters: {
        size: 'medium',
      },
    },
  });
});

The search response will be saved to the result object:

console.log(result.value); // Raw response from Constructor.io

# Recommendations

Using the useRecommendation composable, you will be able to get recommendations (opens new window). The first thing you need to do is importing the useRecommendation composable from our package to Vue's component:

import { useRecommendation } from '@vsf-enterprise/constructor-io';

In the Vue component, call composable inside the setup function to get properties and methods:

const { search, result, loading } = useRecommendation({
  id: 'your-unique-search-id', // optional, default value is 'useSearch'
  initialResult: [], // optional, default value is []
});

Use the asynchronous search method to fetch records. Please check Constructor.io's Node.js client getRecommendations documentation (opens new window) to see a list of available parameters.

onSSR(async () => {
  await search({
    podId: 't-shirt-best-sellers',
    parameters: {
      numResults: 5,
      filters: {
        size: 'medium',
      },
    },
  });
});

The search response will be saved to the result object:

console.log(result.value); // Raw response from Constructor.io

# Autocomplete results

Using the useAutocomplete composable, you will be able to get autocomplete (opens new window) results matching a given keyword. The first thing you need to do is importing the useAutocomplete composable from our package to Vue's component:

import { useAutocomplete } from '@vsf-enterprise/constructor-io';

In the Vue component, call composable inside the setup function to get properties and methods:

const { search, result, loading } = useAutocomplete({
  id: 'your-unique-search-id', // optional, default value is 'useSearch'
  initialResult: null, // optional, default value is []
});

getAutocompleteResults method returns an object instead af an array. In order to prevent type errors, you can set initialResult to null.

Use the asynchronous search method to fetch records. Please check Constructor.io's Node.js client getAutocompleteResults documentation (opens new window) to see a list of available parameters.

onSSR(async () => {
  await search({
    index: 'uk', // Set the desired index name here, based on the name property of configuration if you have indexes property set
    query: 't-shirt',
    parameters: {
      resultsPerSection: {
        Products: 5,
        'Search Suggestions': 10,
      },
      filters: {
        size: 'medium',
      },
    },
  });
});

The search response will be saved to the result object:

console.log(result.value); // Raw response from Constructor.io

← FAQ →