@justeat/f-searchbox NPM

f-searchbox

Just Eat's global search box component

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: npm run build
Run tests: npm run test

Vue Component

In this example we create a search component based on the UK tenant configurations.

import Vue from 'vue'
import SearchBox from './src/components/Base'
import { component, copy, service } from './src/tenants/uk'

new Vue({
    el: '#app',
    data: {
        config: component,
        copy,
        service
    },
    components: {
        SearchBox
    },
    template: `
        <search-box
            :config="config"
            :copy="copy"
            :service="service" />
    `
})

Location Service

The service module provides all the necessary functionality to perform autosuggest, location information fetching and custom validation against our preferred location partner(s), i.e. Google Maps, Zipcode Autocomplete.

Example: With validation

import Service from './src/service'

//setup
const service = Service({
  validation: {
    EMPTY_FIELD: (value = '') => !!value.trim(),
    STRING_ERROR: value => typeof value === 'string'
  }
})

// use
service.isValid('EC4M 7RF')   // returns true
service.isValid(5)            // returns ['EMPTY_FIELD', 'STRING_ERROR']

Example: With autosuggest and location details

import Service from './src/service'

// setup
const service = Service({
  autocomplete: 'UK'
})

// use
(async () => {
    const [ firstResult ] = await service.search('EC4M 7RF')
    const details = await service.getLocationDetails(firstResult.place_id)
    console.log(details)
}())

Standalone Use

The component can be used within a webpage without any build setup. Import the distribution build of the desired tenant (e.g. ./dist/uk.js) in your HTML file, then initialise with the global method jeSearchbox.

Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JustEat Global Search Box</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  <div data-js-searchbox></div>
  <script src="/dist/uk.js"></script>
  <script>jeSearchbox('[data-js-searchbox]')</script>
</body>
</html>

jeSearchbox: Arguments & options

const selector = '#app' // (req) mount to this element
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
  theme: 'base'         // String (base|anz) – overrides default theme if none configured
}

// initialise
jeSearchbox(selector, options)

Testing – Distributions Only

The autosuggest feature and integration testing requires that this component be run on a domain, e.g. localhost rather than the file system. To test locally we begin by installing the serve npm module globally, to host files locally.

npm i -g serve
cd dist
serve

Visiting http://localhost:5000 will show a default search component. To test different distributions, visit dist/index.html and change the script src to the desired tenant code, e.g. it.js, while the jeSearchbox global is available to be configured.

Testing on existing Just Eat codebase

Ensure you're serving the distributions on localhost
Comment out or delete the existing search box markup
Copy the following markup in the deleted content's place

<div data-je-search></div>
<script src="http://localhost:5000/uk.js"></script>
<script>jeSearchbox('[data-je-search]')</script>

Testing in mocked environment

Ensure you're serving the distributions on localhost
Open the browser to the environment with the Just Eat homepage
- You may have to delete the existing search box markup on the page
- And delete the script tags containing the current distribution
Copy the following script into the browser console
- containerSelector is what element you want to place the search box inside
- tenantCode is what tenant you want to use, e.g. it
- componentOptions pass the options available to jeSearchbox

!(function () {
    // change as necessary
    const containerSelector = '.hero-banner__content';
    const tenantCode = 'uk';
    const componentOptions = {
        hideShell: true
    };

    // delete old jeSearchbox reference]
    delete jeSearchbox

    // create script
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `http://localhost:5000/${tenantCode}.js`;
    script.onload = function () {
        // place holding element inside container
        const container = document.querySelector(containerSelector);
        const searchbox = document.createElement('div');
        searchbox.setAttribute('data-js-searchbox', '');
        container.appendChild(searchbox)

        // initialise
        jeSearchbox('[data-js-searchbox]', componentOptions);
    };

    // run
    document.body.appendChild(script);
}());

@justeat/f-services axios lodash.debounce

@infinitebrahmanuniverse/nolb-_jus @everything-registry/sub-chunk-505 @zalastax/nolb-_jus

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago