Nomnom Pumpernickle Muffins

    @justeat/f-searchbox

    6.7.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i @justeat/f-searchbox

    DownloadsWeekly Downloads

    351

    Version

    6.7.0

    License

    ISC

    Unpacked Size

    4.1 MB

    Total Files

    25

    Last publish

    Collaborators

    • kathywklee
    • fozzie-bot
    • umar--khan
    • carlos.ortega
    • justeatui
    • gareththackeray
    • sonnyprince
    • dawidchar
    • ashleynolan
    • jonrea
    • djmelonz
    • hwallis
    • simonsje
    • kevinrodrigues
    • oleksiishevchuk
    • xander-marjoram
    • sergii.semenkiv
    • dandel10n
    • cloudcooke
    • meselgroth
    • rjimms92
    • sachazvetelman
    • tompoole
    • luke.parry
    • banksysan
    • sergej-popov
    • thomaswilliammcclean
    • jonpark
    • dsomok
    • benrwhite
    • robertellison
    • anfan
    • lauren.rodney
    • lzuk-je
    • zlatin.ivanov
    • adamashton
    • siggerzz
    • fayecarter
    • alixrichards
    • mwh1989
    • jnewc
    • ross_gratton_jet
    • joshuang2332
    • oliversweb
    • andymayje
    • lizzie.turney
    • charliearlie
    • jamieomaguire
    • anastasiya.t
    • adammorr
    • jonkers
    • juan.amor
    • dan-mcguckin
    • lsphillips