Skip to main content

Header

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

Overview

Usually a big strip across the top with a big heading, logo, and perhaps a search bar. This usually stays the same from one web page to another. A typical header presents information such as a company logo or its name, other heading elements. Also, in the header is a menu of options for the application along with links to profile, cart, wishlist and account settings page.

A default header looks like this: QG2

Context

Context is a object which includes various other key value pairs, object, and list of various variables, which we can use in creating header, it includes:

KeyTypeDescription
is_logged_inBooleanwhether user logged in or not
logoURLURL of the logo used in header (in desktop)
mobile_logoURLURL of the logo used in mobile view header for smaller screens
favourite_idsArraylist of id of products that are added in the wishlist
cart_item_countNumbercount of how much items have been added into the cart
compare_slugsArraylist of unique slugs of items added to compare page of application
offersStringinformation of any available offer to be displayed in header
navigationArraylist of multiple objects of different navigation to be displayed in menu bar of header
nameStringname of the application

Apart from these attributes, there are few more attributes that exists in header’s context, which can also be used:

KeyTypeDescription
user_pincodeNumberuser's selected pincode
colorsObjectobject of colors used in various attributes of application e.g. button, links and other attributes
app_infoObjectvarious information about application
theme_colorsObjectobject of colors used in various attributes of application e.g. button, links and other attributes

global_config

This is a object which contains the information regarding the global level settings of our application, for header this includes following attributes:

AttributeTypeDescription
search_placeholderStringText to show as placeholder in the auto-complete search box in header
disable_cartBooleanTo show or hide the cart page link icon in header.

To use global_config object’s attributes we need to write it as e.g. global_config.props.disable_cart.


Config & Schema

Header consists of four basic parts including Logo, Autocomplete Search Bar, Basic links for necessary pages including Cart, Profile and Settings Page, and a menu bar which consists of links to different pages of application. Each application can have a full width desktop header along with a mobile view header for smaller screens

  • LOGO: Header requires two logo icon for both desktop and mobile view,.

for using logo in application’s header the code can be as follows:

            <fdk-link :link="'/'">
<img class="fynd-logo" :src="logoUrl" />
</fdk-link>

here logoUrl can be context.logo or context.mobile_logo both.


  • Auto-complete Search box: We can add search box with autocomplete functionality in our application’s header. This can be added using the fdk-search action component.

A typical example of adding search box is:

<fdk-search>
<template slot-scope="searchData">
<span>
<input
:placeholder="search_placeholder"
autocomplete="off"
v-model="searchtext"
type="text"
id="search"
@keyup.enter="selectedIndex === null
? getEnterSearchData(searchData)
: getSearchData()"
@keydown="onArrowKey"
@input="inputSearchResults(searchData)"
v-on:click="showlist = true"/>
<div>
<div v-if="searchData.suggestions.length > 0 && showlist">
<ul>
<li
v-for="(value, name, index) in getGroupedResults(
searchData.suggestions.slice(0, 8)
)"
:key="name + index"
v-on:click="showlist = false"
>
//Code for displaying the logo and search item text inside the anchor
</li>
</ul>
</div>
</div>
</span>
</template
</fdk-search>

Here search_placeholder variable will contain the value of the placeholder.

For fetching the search items getGroupedResults() method is used, and searchData.suggestion is passed as arguments inside this function, which is a list of items we get through autocomplete search API after entering the text. We can use getGroupedResults() method as follows:

    getGroupedResults: function getGroupedMobileResults(item) {
let grouped = groupBy(item, (data) => data.type);
return grouped;
},

if the searchData.suggestions key got no results from api them the searchData.noResults key have true value and then we can handle the header using:

<div v-if="searchData.noResults && showlist">
<ul>
<li @click.stop="showlist = false">
<fdk-link :link="'/products/?q=' + searchtext"
>Search for {{ searchtext }}</fdk-link>
</li>
</ul>
</div>

QG11


  • Header Icons :- This includes multiple icons which on clicked redirect to various other pages of our application, by default we get icons to Cart, Wishlist, Profile and Settings page of our application.

QG


We can add other icons also to create links for other pages using fdk-link action component (see the below example)

<fdk-link :link="'/cart/bag'">
<div class="profile-icons">
<img title="Cart" src="../../assets/images/shopping-bag1.svg" />
</div>
</fdk-link>

  • Navigations: It includes basic settings about positioning of menu bar in header, in themes we need the list of menu (Navigation) to redirect to various other pages of our application, we have the support of three level navigation in our header, it can be managed from here.

QG21

We can use navigation inside our header using context.navigation key, a typical navigation object will by default contain below listed array of links, e.g.

[
{
"display": "Home",
"link": "/",
"image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148153/production/system/icons/mystore-tab_y0dqzt.png",
"tags": [],
"sub_navigation": []
},
{
"display": "Brands",
"link": "/brands",
"image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148153/production/system/icons/brands-tab_sfinpk.png",
"tags": [],
"sub_navigation": []
},
{
"display": "Collections",
"link": "/collections",
"image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148153/production/system/icons/collections-tab_a0tg9c.png",
"tags": [],
"sub_navigation": []
},
{
"display": "Categories",
"link": "/categories",
"image": "https://res.cloudinary.com/dwzm9bysq/image/upload/v1567148154/production/system/icons/categories-tab_ss8e0q.png",
"tags": [],
"sub_navigation": []
}
]

We can use this as below:

<div
v-for="(menu, index) in context.navigation"
:key="index">
<fdk-link class="header-nav-menu" :link="menu.link">{{menu.display
}}</fdk-link>
//more code to handle sub-navingations like the same we did for navigation array
</div>