Vue Storefront Bloomreach Discovery

# Usage

Vue Storefront comes with the great public API (opens new window) that allows you to connect and integrate with any search system. Usually using this API leads to connection with Search JavaScript SDK that can be used as a bridge to build a universal data structure for displaying search results.

Therefore, this Bloomreach Discovery integration provides composition functions called composables which use mentioned connection. Below you can find detailed instructions on how to use those composables along with your final application. Don't worry it's quite straightforward.

Now, import useSearch composable to fetch and display the data from the Bloomreach Discovery.

import { useSearch } from '@vsf-enterprise/bloomreach-search-gql'

By using search method from the useSearch composable you can get data according to your preferences - link instant search or products page list.

const { search, result, loading, error } = useSearch('unique-id')
// run search() with params
await search({
  name: 'oparationName',
  query: 'queryString',
})
// then get the results
return result

Let's check it with the real life example - Vue.js Component (SFC).

<template>
  <div v-if="loading">Loading results...</div>
  <div v-if="error">Something is wrong!</div>
  <div v-if="result">
    {{ result }}
  </div>
</template>

<script>
import { onSSR } from '@vue-storefront/core'
import { useSearch } from '@vsf-enterprise/bloomreach-search-gql'

export default {
  setup() {
    const { search, result, loading, error } = useSearch('unique-id')
    // get data
    onSSR(async () => {
      await search({
        name: 'operationName',
        query: `queryString`,
      })
    })
    // return data
    return {
      result,
      loading,
      error,
    }
  },
}
</script>

# Query Helpers

To define your queries and get data from the Bloomreach Discovery you can use one of the query helpers available from the integration package. If you want you can define your own, custom query string as well. You just need to keep correct query operation name for the certain query definition.

# Available Query Helpers

Here you can find the list of available Query Helpers.

;[
  'findCategories',
  'findCategoryById',
  'findCategoryBySlug',
  'findItemsByCategory',
  'findItemsByKeyword',
  'findItemsByWidget',
  'findItemById',
  'findSuggestions',
]

Please check the API Reference page to review all Query Helpers params and definitions.

How to use Query Helper? Here's an example for instant search.

<template>
  <div v-if="loading">Loading results...</div>
  <div v-if="error">Something is wrong!</div>
  <div v-if="result">
    {{ result }}
  </div>
</template>

<script>
import { onSSR } from '@vue-storefront/core'
import { useSearch, findItemsByKeyword } from '@vsf-enterprise/bloomreach-search-gql'

export default {
  setup() {
    const { search, result, loading, error } = useSearch('unique-id')
    // get data
    onSSR(async () => {
      await search({
        name: 'findItemsByKeyword',
        query: findItemsByKeyword({
          offset: 0,
          limit: 20,
          text: 'search phrase',
        }),
      })
    })
    // return data
    return {
      result,
      loading,
      error,
    }
  },
}
</script>

To get data on client side use onMounted hook.

# Custom Query

You can always define your own custom query string to get the data. Remember to keep correct query operation name for the certain query definition. Here's some example.

search({
  query: `query findCategories($queryHint: QueryHintInput = { viewId: "default" }) {
    findCategories(queryHint: $queryHint) {
      id
      key
      slug
      displayName
      parentId
      path
    }
  }`,
})

# Personalization

Looking for some search results personalization? You can install pixel (opens new window) plugin with your application and pass it along with the queryHint to fetch data selected for your user. Like this.

search({
  query: `query findCategories($queryHint: QueryHintInput = { brUid2: "pixel-code" }) {
    findCategories(queryHint: $queryHint) {
      id
      displayName
    }
  }`,
})

Follow the installation guides for Bloomreach Discovery pixel here (opens new window).

# Widgets

Thanks to widgets you can easily manage the Pathways and Recommendation. You can create widgets inside your Bloomreach panel, and with special query helper you can get widget data.

search({
  query: `query findItemsByWidget($text: String = "search phrase", $queryHint: QueryHintInput = { widgetId: "widge-id" }) {
    findItemsByWidget(queryHint: $queryHint) {
      items {
        displayName
      }
    }
  }`,
})

Follow guides for Bloomreach Discovery widgets here (opens new window).

← API Reference →