@justeat/f-searchbox

f-searchbox

Just Eat's global search box component

npm install @justeat/f-searchbox

or

yarn add @justeat/f-searchbox

Usage

Vue Component

When importing the component as a Vue module, you can either pass in the locale as a prop to the component, or if you set the locale via the i18n module this will automatically get detected by the component when deciding which locale config to use.

In addition, a number of config options can be passed into the component (see below for these options).

For example:

<template>
    <search-box
        locale="en-GB" />
</template>

<script>
import Vue from 'vue';
import SearchBox from '@justeat/f-searchbox';
import '@justeat/f-searchbox/dist/f-searchbox.css';

export default {
    components: {
        SearchBox
    }
}
</script>

Options

To apply these options, pass them through as part of an optional config prop.

E.g.

<template>
    <search-box
        locale="en-GB"
        :config="{ hideShell: true }" />
</template>

const options = {                 // (opt) component settings
  address: '',                    // String - override default address field value
  cuisine: '',                    // String - override default cuisine field value
  hideShell: false,               // Boolean – hide/show search box shell
  isCompressed: false,            // Boolean - hide/show compressed searchbox
  query: '',                      // String - override default query field value
  queryParams: {},                // Object - Query parameter overrides as key value pairs
  onSubmit: a => void,            // Function - called when user selected a valid address, prevents form submit
  setCookies: false,              // Boolean - sets je default location cookies
  autoPopulateAddress: true,      // Boolean - should the address value be auto-populated?
  clearAddressOnValidSubmit: true // Boolean - should the address be cleared when a valid form is submitted?
  isFullAddressSearchFeatureToggleEnabled: false, // Boolean - should full address search for Loqate be enabled?
  isFullAddressNavigateToSerpFeatureToggleEnabled: false // Boolean - should full address search for Loqate automatically submit to serp?
}

config.queryParams

Applies query parameters to the form URL to enable filters and other options on the search results page.

Format

<search-box
    :config="{
        queryString: {
           [param]: value
        }
    }"
/>

Example

<search-box
    :config="{
        queryString: {
           refine: 'halal' // Users are redirected to /:search-url?refine=halal
        }
    }"
/>

Override text

You can override the f-searchbox text using copy-override.

<template>
    <search-box
        locale="en-GB"
        :copy-override="{ buttonText: 'Confirm' }" />
</template>

const copyOverrides = {
    buttonText: "Confirm",
    fieldLabel: "Enter you address",
    // ...
}

You can check available overrides in src/tenants.

NOTE: This will override the locale text.

Analytic Hooks

f-searchbox exposes a number of hooks that can be used to trigger functions in the consuming application.

<search-box
    @searchbox-error="handleSearchboxError"
    @address-search-focus="addressFocus"
    @submit-saved-address="validSavedAddressSearch"
    @submit-valid-address="validSearch" />

@searchbox-error

Fires when an error is thrown by the searchbox.

@address-search-focus

Fires when the address input is focussed.

@submit-saved-address

Fires if an address is submitted with no errors.

@submit-valid-address

Fires if user submits an address with the same address as previously recorded by the searchbox.

Override slots

f-searchbox exposes named slots to allow greater customisation.

<search-box>
    <template #icon-submit> OK </template>
</search-box>

icon-submit

Overrides the mobile submit icon.

NOTE: it also overrides the icon for the theme ml.

Development

Pre-requisites

• Node v8.9.0 or greater

Install

git clone https://github.com/justeat/f-searchbox.git
cd f-searchbox
yarn install

Commands

• Build project: yarn build
• Build project (with watch): yarn build:watch
• Run tests: yarn test
• Run a demo page to test locally: yarn demo

More Documentation

• Testing
• Standalone use